feat(client side search for datatable): client side search for datatable

Closes KRN-48

client/components/Client.vue

@@ -66,6 +66,19 @@
     </v-row>
     <v-row justify="center" dense class="flex-wrap mt-6">
       <v-col md="9" cols="12">
+        <v-card>
+          <v-card-title>
+            <v-spacer></v-spacer>
+            <v-text-field
+              v-model="search"
+              append-icon="search"
+              label="Search"
+              single-line
+              hide-details
+              style="width:400px"
+              class="flex-grow-0"
+            ></v-text-field>
+          </v-card-title>
           <v-data-table
             v-model="selectedItemInTable"
             :headers="headerOfTable"
@@ -82,7 +95,9 @@
             :sort-desc.sync="sortDescTable"
             height="73vh"
             @click:row="clickRow"
+            :search="search"
           ></v-data-table>
+        </v-card>
       </v-col>
     </v-row>
   </v-container>
@@ -108,7 +123,8 @@ export default {
       snackbar: false,
       alertSnackbar: false,
       alertText: "",
-      loading: false
+      loading: false,
+      search: ""
     };
   },
   computed: {

client/components/DeviceMap.vue

@@ -86,6 +86,19 @@
     </v-row>
     <v-row justify="center" dense class="flex-wrap mt-6">
       <v-col md="9" cols="12">
+        <v-card>
+          <v-card-title>
+            <v-spacer></v-spacer>
+            <v-text-field
+              v-model="search"
+              append-icon="search"
+              label="Search"
+              single-line
+              hide-details
+              style="width:400px"
+              class="flex-grow-0"
+            ></v-text-field>
+          </v-card-title>
           <v-data-table
             v-model="selectedItemInTable"
             :headers="headerOfTable"
@@ -102,7 +115,9 @@
             :sort-desc.sync="sortDescTable"
             height="73vh"
             @click:row="clickRow"
+            :search="search"
           ></v-data-table>
+        </v-card>
       </v-col>
     </v-row>
   </v-container>
@@ -134,7 +149,8 @@ export default {
       snackbar: false,
       alertSnackbar: false,
       alertText: "",
-      loading: false
+      loading: false,
+      search: ""
     };
   },
   computed: {
@@ -170,7 +186,7 @@ export default {
           if (
             hislink != undefined &&
             hislink != null &&
-            hislink.length > 0 &&
+            // hislink.length > 0 &&
             hislink[0].Name != undefined
           )
             currentDevicemap.push({ ...devicemap, HisName: hislink[0].Name });

client/components/HisLink.vue

@@ -130,6 +130,19 @@
     </v-row>
     <v-row justify="center" dense class="flex-wrap mt-6">
       <v-col md="9" cols="12">
+        <v-card>
+          <v-card-title>
+            <v-spacer></v-spacer>
+            <v-text-field
+              v-model="search"
+              append-icon="search"
+              label="Search"
+              single-line
+              hide-details
+              style="width:400px"
+              class="flex-grow-0"
+            ></v-text-field>
+          </v-card-title>
           <v-data-table
             v-model="selectedItemInTable"
             :headers="headerOfTable"
@@ -146,7 +159,9 @@
             :sort-desc.sync="sortDescTable"
             height="73vh"
             @click:row="clickRow"
+            :search="search"
           ></v-data-table>
+        </v-card>
       </v-col>
     </v-row>
     <his-worklist
@@ -192,7 +207,8 @@ export default {
       alertText: "",
       loading: false,
       HisWorklistDialog: false,
-      selectedBrand: null
+      selectedBrand: null,
+      search: ""
     };
   },
   mounted() {
@@ -397,7 +413,6 @@ export default {
       let Brand = this.selectedItemInTable[0].Brand;
       this.selectedBrand = Brand;
       this.HisWorklistDialog = true;
-      
     }
   },
   meteor: {

client/components/Users.vue

@@ -13,7 +13,7 @@
             v-if="!$vuetify.rtl"
           >{{newOrEdit=="new"?$t("Users.newText"):$t("Users.editText")}} {{$t("Users.UserName")}}</span>
           <template v-if="$vuetify.rtl">
-            <span v-if="newOrEdit=='new'">{{$t("Users.UserName")}} {{$t("Users.newText")}} </span>
+            <span v-if="newOrEdit=='new'">{{$t("Users.UserName")}} {{$t("Users.newText")}}</span>
             <span v-if="newOrEdit=='edit'">{{$t("Users.editText")}} {{$t("Users.UserName")}}</span>
           </template>
         </v-card-title>
@@ -111,6 +111,19 @@
     </v-row>
     <v-row justify="center" dense class="flex-wrap mt-6">
       <v-col md="9" cols="12">
+        <v-card>
+          <v-card-title>
+            <v-spacer></v-spacer>
+            <v-text-field
+              v-model="search"
+              append-icon="search"
+              label="Search"
+              single-line
+              hide-details
+              style="width:400px"
+              class="flex-grow-0"
+            ></v-text-field>
+          </v-card-title>
           <v-data-table
             v-model="selectedItemInTable"
             :headers="headerOfTable"
@@ -127,7 +140,9 @@
             :sort-desc.sync="sortDescTable"
             height="73vh"
             @click:row="clickRow"
+            :search="search"
           ></v-data-table>
+        </v-card>
       </v-col>
     </v-row>
   </v-container>
@@ -171,7 +186,8 @@ export default {
 
       showPassword2: false,
       secondPass: null,
-      secondPassAlert: false
+      secondPassAlert: false,
+      search: ""
     };
   },
   computed: {

client/components/Worklist.vue

@@ -66,6 +66,7 @@
           :sort-by.sync="sortByTable"
           :sort-desc.sync="sortDescTable"
           height="61vh"
+          :search="search"
         >
           <template v-slot:top>
             <div>
@@ -83,6 +84,16 @@
                 <strong>{{$t('WorkList.editBtn')}}</strong>
               </v-btn>
               <v-divider class="mx-4" inset vertical></v-divider>
+              <v-spacer></v-spacer>
+              <v-text-field
+                v-model="search"
+                append-icon="search"
+                label="Search"
+                single-line
+                hide-details
+                style="width:400px"
+                class="flex-grow-0"
+              ></v-text-field>
 
               <v-dialog v-model="editDialog" max-width="900px">
                 <v-card class="grey lighten-4">
@@ -724,7 +735,8 @@ export default {
       FarsiLastNameParts2: "FarsiLastNameParts2"
     },
     selectedItem: undefined,
-    sortedItems: undefined
+    sortedItems: undefined,
+    search: ""
   }),
   computed: {
     clientsItems() {