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="qualification" class="col-sm-2">Qualification:</label>
  21                                 <div class="col-sm-10">
  22                                         <input type="text" class="form-control" id="qualification" v-model="prescriber.qualification">
  23                                 </div>
  24                         </div>
  25                         <div class="form-group row mb-2">
  26                                 <label for="registration" class="col-sm-2">Registration:</label>
  27                                 <div class="col-sm-10">
  28                                         <input type="text" class="form-control" id="registration" v-model="prescriber.registration">
  29                                 </div>
  30                         </div>
  31                         <div class="form-group row mb-2">
  32                                 <label for="address" class="col-sm-2">Address:</label>
  33                                 <div class="col-sm-10">
  34                                         <textarea class="form-control" id="address" v-model="prescriber.address"></textarea>
  35                                 </div>
  36                         </div>
  37                         <div class="form-group row mb-2">
  38                                 <label for="contact" class="col-sm-2">Contact:</label>
  39                                 <div class="col-sm-10">
  40                                         <textarea class="form-control" id="contact" v-model="prescriber.contact"></textarea>
  41                                 </div>
  42                         </div>
  43                         <div class="form-group row mb-2">
  44                                 <label for="extra" class="col-sm-2">Extra:</label>
  45                                 <div class="col-sm-10">
  46                                         <textarea class="form-control" id="extra" v-model="prescriber.extra"></textarea>
  47                                 </div>
  48                         </div>
  49                         <div class="form-group row">
  50                                 <div class="col-sm-3 offset-sm-3 d-grid gap-2">
  51                                         <button type="submit" class="btn btn-primary">Save</button>
  52                                 </div>
  53                                 <div class="col-sm-3 d-grid gap-2">
  54                                         <button type="button" @click="cancel" class="btn btn-warning">Cancel</button>
  55                                 </div>
  56                                 <div class="col-sm-3 d-grid gap-2">
  57                                         <button type="button" @click="reset" class="btn btn-danger">Reset</button>
  58                                 </div>
  59                         </div>
  60                 </form>
  61         </div>
  62 </template>
  63
  64 <script>
  65         export default {
  66                 data() {
  67                         return {
  68                                 prescriber: this.loadPrescriber()
  69                         }
  70                 },
  71                 methods: {
  72                         loadPrescriber() {
  73                                 var prescriber;
  74                                 try {
  75                                         prescriber=JSON.parse(localStorage.getItem("prescriber"));
  76                                 }
  77                                 catch {
  78                                         prescriber={name: "", qualification: "", registration: "", address: "", contact: "", extra: "", properties: null}
  79                                 }
  80                                 return prescriber;
  81                         },
  82                         save() {
  83                                 localStorage.setItem("prescriber", JSON.stringify(this.prescriber));
  84                                 this.$emit("save");
  85                         },
  86                         cancel() {
  87                                 this.$emit("cancel");
  88                         },
  89                         reset() {
  90                                 this.prescriber={name: "", qualification: "", registration: "", address: "", contact: "", extra: "", properties: null}
  91                         }
  92                 }
  93         }
  94 </script>