Finish production

resources/js/vue/views/MedicalCenter/OperatorList.vue

@@ -3,13 +3,16 @@
     <material-card class color="black" :title="`Operator List ${name}`" text>
       <v-layout row wrap class="px-5 mb-3">
         <v-flex xs12 md3 xs3>
-          <v-text-field name="Name" label="Name" class="pa-2" color="black" id="id"></v-text-field>
+          <v-text-field name="Name" v-model="filter.name" label="Name" class="pa-2" color="black"></v-text-field>
         </v-flex>
         <v-flex xs12 md3 xs3>
-          <v-text-field name="cell_number" label="Cell Number" class="pa-2" color="black" id="id"></v-text-field>
+          <v-text-field name="cell_number"  v-model="filter.cell_number" label="Cell Number" class="pa-2" color="black"></v-text-field>
+        </v-flex>
+        <v-flex xs12 md2 xs3>
+          <v-select :items="roles" name="roles" v-model="filter.role"  label="Roles" class="pa-2" color="black"></v-select>
         </v-flex>
         <v-flex xs12 md2 sm2 class="text-xs-right">
-          <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
+          <v-btn class="WM-CyanBlueGradient-BG" @click="load" style="padding:10px 60px">
             <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
             <span class="white--text">Filter</span>
           </v-btn>
@@ -88,6 +91,7 @@
 import { ApiService } from "@/services";
 import { mapMutations, mapGetters } from "vuex";
 import { urls } from "@/config/urls";
+import { roles } from "@/config/utils";
 export default {
   data: () => ({
     headers: [
@@ -118,18 +122,31 @@ export default {
         align: "right"
       }
     ],
+    filter: {
+      name: '',
+      cell_number: '',
+      role: '',
+    },
     items: [],
-    name: ""
+    name: "",
+    roles,
   }),
   created() {
     if (this.$route.params.medicalCenter) {
-      this.load(this.$route.params.medicalCenter);
+      this.load();
     }
   },
   methods: {
-    async load(medicalCenterId) {
+    async load() {
+      let medicalCenterId = this.$route.params.medicalCenter;
+      let filter = "?";
+      for (const key in this.filter) {
+          if (this.filter.hasOwnProperty(key)) {
+              filter += `${key}=${this.filter[key]}&`;
+          }
+      }
       const result = await ApiService.get(
-        urls.listOpertorMedicalCenter(medicalCenterId)
+        urls.listOpertorMedicalCenter(medicalCenterId, filter)
       );
       if (result && result.status == 200) {
         this.items = result.data.data.users;