From 0c1a8d4e2f6db0fb225515e796bdad10785c309b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yi=C4=9Fit=20=C3=87olako=C4=9Flu?=
 <yigitcolakoglu@hotmail.com>
Date: Thu, 28 Jan 2021 00:46:59 +0300
Subject: [PATCH] Protocol Number on PatientModal

---
 package-lock.json                   | 18 ++++++++++-----
 package.json                        |  1 +
 src/components/AppointmentModal.vue | 16 ++++++++++----
 src/components/PatientModal.vue     | 34 +++++++++++++++++++++++++++--
 src/main.js                         | 11 ++++------
 src/views/Calendar.vue              |  3 ++-
 6 files changed, 64 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 913c5de..5f9f3cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1309,6 +1309,14 @@
         "@types/yargs": "^13.0.0"
       }
     },
+    "@johmun/vue-tags-input": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@johmun/vue-tags-input/-/vue-tags-input-2.1.0.tgz",
+      "integrity": "sha512-Fdwfss/TqCqMJbGAkmlzKbcG/ia1MstYjhqPBj+zG7h/166tIcE1TIftUxhT9LZ+RWjRSG0EFA1UyaHQSr3k3Q==",
+      "requires": {
+        "vue": "^2.6.10"
+      }
+    },
     "@most/multicast": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@most/multicast/-/multicast-1.3.0.tgz",
@@ -1860,7 +1868,7 @@
       "dependencies": {
         "html-tags": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz",
+          "resolved": "https://registry.npm.taobao.org/html-tags/download/html-tags-2.0.0.tgz",
           "integrity": "sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos="
         }
       }
@@ -1962,7 +1970,7 @@
         },
         "html-tags": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz",
+          "resolved": "https://registry.npm.taobao.org/html-tags/download/html-tags-2.0.0.tgz",
           "integrity": "sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos="
         }
       }
@@ -9461,7 +9469,7 @@
     },
     "lodash.kebabcase": {
       "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/lodash.kebabcase/download/lodash.kebabcase-4.1.1.tgz",
       "integrity": "sha1-hImxyw0p/4gZXM7KRI/21swpXDY="
     },
     "lodash.mapvalues": {
@@ -11811,7 +11819,7 @@
       "dependencies": {
         "jsesc": {
           "version": "0.5.0",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+          "resolved": "https://registry.npm.taobao.org/jsesc/download/jsesc-0.5.0.tgz?cache=0&sync_timestamp=1603893628084&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjsesc%2Fdownload%2Fjsesc-0.5.0.tgz",
           "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0="
         }
       }
@@ -13033,7 +13041,7 @@
     },
     "svg-tags": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/svg-tags/download/svg-tags-1.0.0.tgz",
       "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q="
     },
     "svgo": {
diff --git a/package.json b/package.json
index 77bb8c6..4911ac6 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@fullcalendar/interaction": "^5.5.0",
     "@fullcalendar/timegrid": "^5.5.1",
     "@fullcalendar/vue": "^5.5.0",
+    "@johmun/vue-tags-input": "^2.1.0",
     "@sebgroup/frontend-tools": "^2.0.2",
     "@tailwindcss/postcss7-compat": "^2.0.2",
     "@vue-hero-icons/solid": "^1.6.3",
diff --git a/src/components/AppointmentModal.vue b/src/components/AppointmentModal.vue
index f92e6c0..cad8460 100644
--- a/src/components/AppointmentModal.vue
+++ b/src/components/AppointmentModal.vue
@@ -44,8 +44,8 @@
                       </Typeahead>
                 </div>
                 <div class="flex flex-col">
-                  <label class="leading-loose">Event Description</label>
-                  <input type="text" class="px-4 py-2 border focus:ring-gray-500 focus:border-gray-900 w-full sm:text-sm border-gray-300 rounded-md focus:outline-none text-gray-600" placeholder="Optional">
+                  <label class="leading-loose">Description</label>
+                  <input v-model="description" type="text" class="px-4 py-2 border focus:ring-gray-500 focus:border-gray-900 w-full sm:text-sm border-gray-300 rounded-md focus:outline-none text-gray-600" placeholder="Optional">
                 </div>
                 <div class="flex flex-col">
                     <label class="inline-flex items-center mt-3">
@@ -86,7 +86,8 @@ export default{
             online: false,
             showModal: false,
             patient: null,
-            patientSuggestions: []
+            patientSuggestions: [],
+            description: ""
         }
     },
     // Methods
@@ -103,13 +104,19 @@ export default{
                 start: dayjs(this.start, 'YYYY-MM-DDTHH:mm').toISOString(), 
                 end: dayjs(this.end, 'YYYY-MM-DDTHH:mm').toISOString(), 
                 online: this.online,
-                patient: this.patient
+                patient: this.patient,
+                description: this.description
             }, {
                 headers: {
                  'Authorization': `Bearer ${window.localStorage.getItem('JWT')}`
                 }
             }).then((result) =>{
                 console.log(result);
+                if(result.data.code !== 200){
+                  this.$toast.error(result.data.message)
+                  return;
+                }
+                this.$toast.success("Created successfully")
                 this.$emit('createdEvent', {
                     title: result.data.appointment.patient.name,
                     start: result.data.appointment.start,  
@@ -125,6 +132,7 @@ export default{
                     }
                 });
             }).catch((err) => {
+              this.$toast.error("Error occured creating event")
                 console.log(err);
             })
             this.showModal = false;
diff --git a/src/components/PatientModal.vue b/src/components/PatientModal.vue
index ad118cb..1c3eab0 100644
--- a/src/components/PatientModal.vue
+++ b/src/components/PatientModal.vue
@@ -33,6 +33,15 @@
                   <label class="leading-loose">Hes Code:</label>
                   <input v-model="patient.hescode" type="text" class="px-4 py-2 border focus:ring-gray-500 focus:border-gray-900 w-full sm:text-sm border-gray-300 rounded-md focus:outline-none text-gray-600" placeholder="Patient Name">
                 </div>
+                <div class="w-full flex flex-col">
+                  <label class="leading-loose">Protocol Numbers:</label>
+                  <vue-tags-input
+                      class="focus:ring-gray-500 focus:border-gray-900 w-full sm:text-sm border-gray-300 rounded-md focus:outline-none text-gray-600"
+                      v-model="tag"
+                      :tags="tags"
+                      @tags-changed="newTags => patient.protocolNumbers = convertTags(newTags)"
+                  />
+                </div>
             </div>
             <div class="pt-4 flex items-center space-x-4">
               <button @click="showModal = false" class="flex justify-center items-center w-full text-gray-900 px-4 py-3 rounded-md focus:outline-none">
@@ -49,17 +58,29 @@
 </template>
 
 <script>
-// TODO protocol number input
+import VueTagsInput from '@johmun/vue-tags-input';
+import dayjs from "dayjs";
+
 export default {
+  components: {
+    VueTagsInput
+  },
   name: "PatientModal",
   data: function(){
     return {
       showModal: false,
       patient: {},
-      button: "Create"
+      button: "Create",
+      tag: ''
     }
   },
   methods: {
+    convertTags: function(tags){
+      console.log(tags)
+      return this.patient.protocolNumbers = tags.map((x) => {
+        return {number: parseInt(x.text)}
+      })
+    },
     showPatient: function(patient){
       this.patient = patient;
       this.showModal = true;
@@ -83,6 +104,15 @@ export default {
       if(this.patient.name === "")
         return "New Patient"
       return this.patient.name
+    },
+    tags: function(){
+      console.log(this.patient.protocolNumbers)
+      return this.patient.protocolNumbers.map((x) => {
+        return {
+          text: x.number + " (" + dayjs(x.addedDate).format('DD/MM/YYYY') + ")",
+          style: "background-color: rgba(29, 78, 216, var(--tw-bg-opacity))"
+        }
+      })
     }
   }
 }
diff --git a/src/main.js b/src/main.js
index 2c45ba8..a5daf3f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,15 +8,12 @@ import axios from "axios";
 
 axios.defaults.baseURL = 'https://api.metisapp.net'
 
-const options = {
-};
-
-Vue.use(Toast, options);
+Vue.use(Toast, {});
 
 //Devtools variables
-Vue.config.performance = process.env.NODE_ENV !== 'travis'
-Vue.config.development = process.env.NODE_ENV !== 'travis'
-Vue.config.productionTip = process.env.NODE_ENV !== 'travis'
+Vue.config.performance = process.env.NODE_ENV === 'development'
+Vue.config.development = process.env.NODE_ENV === 'development'
+Vue.config.productionTip = process.env.NODE_ENV !== 'development'
 
 new Vue({
   router,
diff --git a/src/views/Calendar.vue b/src/views/Calendar.vue
index 552465a..1c03745 100644
--- a/src/views/Calendar.vue
+++ b/src/views/Calendar.vue
@@ -11,8 +11,9 @@
           <div class="border-black p-3">
               <p><strong>Name: </strong>{{ selectedEvent.extendedProps.patient.name }}</p>
               <p><strong>Phone: </strong>{{ selectedEvent.extendedProps.patient.phone }}</p>
+              <p><strong>Info: </strong>{{ selectedEvent.extendedProps.appObj.description }}</p>
               <p><strong>COVID: </strong>{{ selectedEvent.extendedProps.patient.safe }}</p>
-              <div class="w-full flex justify-center mt-2">
+            <div class="w-full flex justify-center mt-2">
               <button @click="deleteAppointment" type="button" class="p-1 z-5 bg-red-400 text-white w-1/2 rounded-md">
                 <svg class="h-5 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />