src/components/PrescriberScreen.vue

   1 <!--
   2 MedScript Lite
   3 Copyright (C) 2023 Dr. Agnibho Mondal
   4 This file is part of MedScript Lite.
   5 MedScript Lite is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
   6 MedScript Lite is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
   7 You should have received a copy of the GNU General Public License along with MedScript Lite. If not, see <https://www.gnu.org/licenses/>.
   8 -->
   9
  10 <template>
  11         <div id="prescriber-screen">
  12                 <form @submit.prevent="save">
  13                         <div class="form-group row mb-2">
  14                                 <label for="name" class="col-sm-2">Name:</label>
  15                                 <div class="col-sm-10">
  16                                         <input type="text" class="form-control" id="name" v-model="prescriber.name">
  17                                 </div>
  18                         </div>
  19                         <div class="form-group row mb-2">
  20                                 <label for="registration" class="col-sm-2">Registration:</label>
  21                                 <div class="col-sm-10">
  22                                         <input type="text" class="form-control" id="registration" v-model="prescriber.registration">
  23                                 </div>
  24                         </div>
  25                         <div class="form-group row mb-2">
  26                                 <label for="address" class="col-sm-2">Address:</label>
  27                                 <div class="col-sm-10">
  28                                         <textarea class="form-control" id="address" v-model="prescriber.address"></textarea>
  29                                 </div>
  30                         </div>
  31                         <div class="form-group row mb-2">
  32                                 <label for="contact" class="col-sm-2">Contact:</label>
  33                                 <div class="col-sm-10">
  34                                         <textarea class="form-control" id="contact" v-model="prescriber.contact"></textarea>
  35                                 </div>
  36                         </div>
  37                         <div class="form-group row mb-2">
  38                                 <label for="extra" class="col-sm-2">Extra:</label>
  39                                 <div class="col-sm-10">
  40                                         <textarea class="form-control" id="extra" v-model="prescriber.extra"></textarea>
  41                                 </div>
  42                         </div>
  43                         <div class="form-group row">
  44                                 <div class="col-sm-3 offset-sm-3 d-grid gap-2">
  45                                         <button type="submit" class="btn btn-primary">Save</button>
  46                                 </div>
  47                                 <div class="col-sm-3 d-grid gap-2">
  48                                         <button type="button" @click="cancel" class="btn btn-warning">Cancel</button>
  49                                 </div>
  50                         </div>
  51                 </form>
  52         </div>
  53 </template>
  54
  55 <script>
  56         export default {
  57                 data() {
  58                         return {
  59                                 prescriber: this.loadPrescriber()
  60                         }
  61                 },
  62                 methods: {
  63                         loadPrescriber() {
  64                                 var prescriber;
  65                                 try {
  66                                         prescriber=JSON.parse(localStorage.getItem("prescriber"));
  67                                 }
  68                                 catch {
  69                                         prescriber={name: "", registration: "", address: "", contact: "", extra: ""}
  70                                 }
  71                                 return prescriber;
  72                         },
  73                         save() {
  74                                 localStorage.setItem("prescriber", JSON.stringify(this.prescriber));
  75                         },
  76                         cancel() {
  77                                 this.$emit("cancel");
  78                         }
  79                 }
  80         }
  81 </script>