prev next button

client/components/Worklist.vue

@@ -5,7 +5,7 @@
         <v-card tile>
           <v-card-actions>
             <v-row style="margin:auto">
-              <v-col cols="12" sm="8" class="d-flex justify-space-around align-baseline">
+              <v-col cols="12" sm="6" class="d-flex justify-space-around align-baseline">
                 <v-combobox
                   v-model="selectedDevice"
                   :items="deviceCodeItems"
@@ -19,6 +19,7 @@
                   class="ma-4"
                   item-text="Text"
                   item-value="Value"
+                  return-object
                 >
                   <template v-if="noDataCombo" v-slot:no-data>
                     <v-list-item>
@@ -32,14 +33,8 @@
                     </v-list-item>
                   </template>
                 </v-combobox>
-                <v-btn
-                  color="rgb(94, 181, 177,.85)"
-                  class="white--text"
-                  @click="searchPatients()"
-                  :disabled="btnDisabled"
-                >{{$t('WorkList.seachBtn')}}</v-btn>
               </v-col>
-              <v-col cols="12" sm="4" class="d-flex justify-space-around align-center">
+              <v-col cols="12" sm="6" class="d-flex justify-space-around align-center flex-wrap">
                 <v-btn color="success" text @click="toggleAllOrUnknown=0">
                   <v-icon left v-if="toggleAllOrUnknown==0">done</v-icon>
                   <strong>{{$t("WorkList.AllBtn")}}</strong>
@@ -72,16 +67,38 @@
           disable-pagination
           :sort-by.sync="sortByTable"
           :sort-desc.sync="sortDescTable"
-          height="550"
+          height="61vh"
         >
           <template v-slot:top>
+            <div>
+              <v-progress-linear
+                :active="fetchWorklistLoading"
+                :indeterminate="fetchWorklistLoading"
+                color="cyan lighten-2"
+              ></v-progress-linear>
+            </div>
             <v-toolbar flat color="white">
-              <v-toolbar-title>{{devicemap==""?$t("WorkList.noDevicemap"):devicemap}}</v-toolbar-title>
+              <!-- <v-toolbar-title>{{devicemap==""?$t("WorkList.noDevicemap"):devicemap}}</v-toolbar-title> -->
 
+              <v-btn
+                color="rgb(94, 181, 177,.85)"
+                class="white--text"
+                @click="editPatients()"
+              >
+              <v-icon small left>edit</v-icon>
+              <strong>{{$t('WorkList.editBtn')}}</strong>
+              </v-btn>
               <v-divider class="mx-4" inset vertical></v-divider>
 
               <v-dialog v-model="editDialog" max-width="900px">
                 <v-card class="grey lighten-4">
+                  <v-progress-linear
+                    :active="editLoading"
+                    :indeterminate="editLoading"
+                    absolute
+                    top
+                    color="cyan lighten-2"
+                  ></v-progress-linear>
                   <v-card-title>
                     <v-icon @click="close" class="mr-1">close</v-icon>
                     <span class="headline">Edit Patient Information</span>
@@ -353,13 +370,25 @@
                   </v-card-text>
 
                   <v-card-actions class="justify-center align-center">
-                    <v-btn depressed color="blue darken-1" text>
+                    <v-btn
+                      depressed
+                      color="blue darken-1"
+                      text
+                      @click="prevPatient"
+                      :disabled="prevDisabled"
+                    >
                       <v-icon color="blue darken-1">keyboard_arrow_left</v-icon>
                     </v-btn>
                     <v-btn color="blue darken-1" text @click="savePatient">
                       <v-icon>save</v-icon>
                     </v-btn>
-                    <v-btn depressed color="blue darken-1" text>
+                    <v-btn
+                      depressed
+                      color="blue darken-1"
+                      text
+                      @click="nextPatient"
+                      :disabled="nextDisabled"
+                    >
                       <v-icon color="blue darken-1">keyboard_arrow_right</v-icon>
                     </v-btn>
                   </v-card-actions>
@@ -367,9 +396,9 @@
               </v-dialog>
             </v-toolbar>
           </template>
-          <template v-slot:item.Action="{ item }">
+          <!-- <template v-slot:item.Action="{ item }">
             <v-icon small @click="editPatients(item)">edit</v-icon>
-          </template>
+          </template>-->
         </v-data-table>
       </v-col>
     </v-row>
@@ -385,10 +414,9 @@ export default {
     searchPatients() {
       if (this.selectedDevice && this.devicemap != this.selectedDevice.Value) {
         let self = this;
-        this.btnDisabled = true;
+
         Meteor.call("Fetchworklist", this.selectedDevice.Value, function() {
           self.devicemap = self.selectedDevice.Value;
-          self.btnDisabled = false;
         });
       }
 
@@ -397,6 +425,15 @@ export default {
       }
     },
     editPatients(item) {
+      if (item == undefined) {
+        var item = this.selectedItem;
+        if (
+          this.selectedPatientInTable == undefined ||
+          this.selectedPatientInTable.length == 0
+        )
+          return;
+      }
+
       this.editedItemParts = {
         EnglishFirstNameParts0: "",
         EnglishFirstNameParts1: "",
@@ -435,7 +472,42 @@ export default {
     close() {
       this.editDialog = false;
     },
+    nextPatient() {
+      let index = this.sortedItems.findIndex(
+        patient => patient._id == this.selectedItem._id
+      );
+      this.nextDisabled = false;
+      this.prevDisabled = false;
+      if (index == -1) this.prevDisabled = true;
+      if (index == this.sortedItems.length - 2) this.nextDisabled = true;
+
+      if (index + 1 > this.sortedItems.length - 1) {
+        this.nextDisabled = true;
+        return;
+      }
+
+      this.editPatients(this.sortedItems[index + 1]);
+    },
+    prevPatient() {
+      let index = this.sortedItems.findIndex(
+        patient => patient._id == this.selectedItem._id
+      );
+      this.nextDisabled = false;
+      this.prevDisabled = false;
+      if (index == -1) {
+        index = 1;
+        this.prevDisabled = true;
+      }
+
+      index == 0 ? (this.prevDisabled = true) : "";
+
+      if (index - 1 < 0) {
+        this.prevDisabled = true;
+        return;
+      }
 
+      this.editPatients(this.sortedItems[index - 1]);
+    },
     savePatient() {
       debugger;
       this.selectedItem.EnglishFirstNameParts = [
@@ -469,8 +541,14 @@ export default {
       ].filter(elm => {
         return elm && elm.length > 0;
       });
-
-      Meteor.call("EditworklistItem", this.selectedItem, function(error) {
+      this.editLoading = true;
+      let self = this;
+      Meteor.call("EditworklistItem", this.selectedItem, function(
+        error,
+        result
+      ) {
+        self.editLoading = false;
+        console.log(result);
         //alert(error);
       });
     }
@@ -479,13 +557,17 @@ export default {
     devicemap: "",
     selectedDevice: undefined,
     deviceComboSearch: null,
-    btnDisabled: false,
+
     noDataCombo: true,
     toggleAllOrUnknown: 0,
     selectedPatientInTable: undefined,
     sortByTable: undefined,
     sortDescTable: undefined,
     editDialog: false,
+    editLoading: false,
+    prevDisabled: false,
+    nextDisabled: false,
+    fetchWorklistLoading: false,
     editedItemParts: {
       EnglishFirstNameParts0: "EnglishFirstNameParts0",
       EnglishFirstNameParts1: "EnglishFirstNameParts1",
@@ -537,11 +619,11 @@ export default {
               class: "text-center"
             });
         }
-        headers.unshift({
-          text: "Action",
-          value: "Action",
-          class: "text-center"
-        });
+        // headers.unshift({
+        //   text: "Action",
+        //   value: "Action",
+        //   class: "text-center"
+        // });
         return headers;
       }
       return [];
@@ -556,7 +638,6 @@ export default {
             );
           });
         }
-
         return this.worklist;
       }
       return [];
@@ -580,8 +661,19 @@ export default {
     worklist: (newWorklist, oldWorklist) => {
       console.log(newWorklist);
     },
-    "$subReady.worklist"(ready) {
-      this.btnDisabled = !ready;
+    "$subReady.worklist"(ready) {},
+    selectedDevice(newDevice, oldDevice) {
+      if (this.selectedDevice && this.selectedDevice.Value) {
+        let self = this;
+        this.fetchWorklistLoading = true;
+        Meteor.call("Fetchworklist", this.selectedDevice.Value, function() {
+          self.devicemap = self.selectedDevice.Value;
+          self.fetchWorklistLoading = false;
+        });
+      }
+      // } else {
+      //   alert("لطفا یکی از دستگاه ها را انتخاب نمایید");
+      // }
     },
     selectedPatientInTable(newSelected, oldSelected) {
       if (this.sortByTable && this.sortByTable.length > 0) {
@@ -604,6 +696,10 @@ export default {
       } else {
         this.sortedItems = this.patientsOfTable;
       }
+
+      if (newSelected) {
+        this.selectedItem = newSelected[0];
+      }
     }
   }
 };
@@ -612,7 +708,7 @@ export default {
 
 <style lang="less" scoped>
 .wholeLayout {
-  height: calc(~"98vh - 106px");
+  height: calc(~"75vh - 106px");
 }
 td,
 th {

client/plugins/i18n.js

@@ -63,7 +63,7 @@ const messages = {
         WorkList: {
             deviceComboboxLabel: 'please select a device',
             deviceComboboxNoDataMatch: 'No results matching',
-            seachBtn: 'search',
+            editBtn: 'edit',
             deviceComboboxNoDataMatch1: '',
             AllBtn: "All",
             UnknownBtn: "Correction Needed",
@@ -131,7 +131,7 @@ const messages = {
         WorkList: {
             deviceComboboxLabel: 'لطفا یک دستگاه را انتخاب نمایید',
             deviceComboboxNoDataMatch: 'هیچ نتیجه ای برابر با',
-            seachBtn: 'جستجو',
+            editBtn: 'ویرایش',
             deviceComboboxNoDataMatch1: 'یافت نشد',
             AllBtn: "همه",
             UnknownBtn: "نیازمند اصلاح",

imports/api/methods/worklist.js

@@ -20,14 +20,9 @@ Meteor.methods({
         this.unblock();
         if (this.userId) {
             try {
-
                 const result = HTTP.call('GET', `http://192.168.0.156/Broker/HISIntegration.svc/rest/Fetchworklist/${devicemap}`);
                 let worklistHttp = JSON.parse(result.content);
-
                 Worklist.remove({ _userid: this.userId, _devicemap: devicemap });
-
-
-
                 worklistHttp.WorkListItems.forEach((patient) => {
                     Worklist.insert({
                         ...patient,
@@ -35,7 +30,6 @@ Meteor.methods({
                         _devicemap: devicemap
                     });
                 })
-
                 return true
             } catch (e) {
                 // Got a network error, timeout, or HTTP error in the 400 or 500 range.