Finish Manage Medical Center

resources/js/vue/views/OperatorList.vue

@@ -14,6 +14,15 @@
             <span class="white--text">Filter</span>
           </v-btn>
         </v-flex>
+        <v-spacer></v-spacer>
+        <v-flex xs12 md2 sm2 class="text-xs-right">
+          <router-link :to="`/add-operator/${$route.params.medicalCenter}`">
+            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+              <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
+              <span class="black--text">Add</span>
+            </v-btn>
+          </router-link>
+        </v-flex>
       </v-layout>
       <v-layout row align-center justify-center wrap class="px-5 mt-3">
         <v-flex md12>
@@ -26,20 +35,35 @@
             </template>
             <template slot="items" slot-scope="{ item }">
               <td class="headline font-weight-light">{{ item.name }}</td>
-              <td class="title font-weight-light"><span v-for="(key, role) in item.roles" :key="key" >{{ role }}</span></td>
+              <td class="title font-weight-light">
+                <span v-for="(role, key) in item.roles" :key="key">{{ role.name }}</span>
+              </td>
               <td class="title font-weight-light">{{ item.cell_number }}</td>
+              <td class="title font-weight-light">{{ item.status }}</td>
               <td class="text-xs-right">
-                <v-btn color="cyan" class="mr-2 WM-ActionButton">
-                  <v-icon class="white--text mr-2 caption">fas fa-pen</v-icon>
-                  <span>Edit</span>
-                </v-btn>
-                <router-link to="/role">
-                  <v-btn color="orange darken-1" class="mr-2 WM-ActionButton">
+                <v-btn
+                  :color="item.status == 'Active' ? 'red' : 'green'"
+                  @click="changeStatus(item.id)"
+                  class="mr-2 WM-ActionButton"
+                >
+                  <template v-if="item.status == 'Active'">
                     <v-icon class="white--text mr-2 caption">fas fa-user-tag</v-icon>
-                    <span>Role</span>
-                  </v-btn>
-                </router-link>
-                <v-btn color="pink" class="WM-ActionButton">
+                    <span v-if="item.status == 'Active'">Susspended</span>
+                  </template>
+                  <template v-else>
+                    <v-icon class="white--text mr-2 caption">fas fa-user-tag</v-icon>
+                    <span>Active</span>
+                  </template>
+                </v-btn>
+                <v-btn
+                  color="orange darken-1"
+                  @click="changeRoleModal(item)"
+                  class="mr-2 WM-ActionButton"
+                >
+                  <v-icon class="white--text mr-2 caption">fas fa-user-tag</v-icon>
+                  <span>Role</span>
+                </v-btn>
+                <v-btn color="pink" class="WM-ActionButton" @click="remove(item.id)">
                   <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
                   <span>Remove</span>
                 </v-btn>
@@ -61,12 +85,14 @@
   </v-container>
 </template>
 <script>
-import { ApiService } from '@/services';
+import { ApiService } from "@/services";
+import { mapMutations, mapGetters } from "vuex";
+import { log } from "util";
 export default {
   data: () => ({
     headers: [
       {
-        sortable: false,
+        sortable: true,
         text: "Operator Name",
         value: "name"
       },
@@ -80,6 +106,11 @@ export default {
         text: "Number",
         value: "number"
       },
+      {
+        sortable: false,
+        text: "Status",
+        value: "status"
+      },
       {
         sortable: false,
         text: "Action",
@@ -88,7 +119,7 @@ export default {
       }
     ],
     items: [],
-    name : ''
+    name: ""
   }),
   created() {
     if (this.$route.params.medicalCenter) {
@@ -97,9 +128,56 @@ export default {
   },
   methods: {
     async load(medicalCenterId) {
-      const result = await ApiService.get(`Users/${medicalCenterId}/MedicalCenter`);
-      this.items = result.data.users;
-      this.name = result.data.name;
+      const result = await ApiService.get(
+        `Users/${medicalCenterId}/MedicalCenter`
+      );
+      if (result && result.status == 200) {
+        this.items = result.data.users;
+        this.name = result.data.name;
+      } else {
+        this.$router.push(`/dashboard`);
+      }
+    },
+    async changeStatus(userId) {
+      const result = await ApiService.post(`Users/ChangeStatus/${userId}`);
+      if (result && result.status == 200) {
+        for (let user of this.items) {
+          if (user.id == userId) {
+            user.status = result.data.status;
+          }
+        }
+      } else {
+        this.$router.push(`/dashboard`);
+      }
+    },
+    ...mapMutations("modal", ["changeCurrentModal"]),
+    changeRoleModal(user) {
+      this.changeCurrentModal({
+        modal: "modal-user-role",
+        properties: { user }
+      });
+    },
+    async remove(userId) {
+      const result = await ApiService.delete(`Users/${userId}`);
+      if (result && result.status == 200) {
+        for (const key in this.items) {
+          if (this.items.hasOwnProperty(key) && this.items[key].id == id) {
+            this.items.splice(key, 1);
+          }
+        }
+      }
+    }
+  },
+  computed: {
+    ...mapGetters("modal", ["getModalResult"])
+  },
+  watch: {
+    getModalResult(user) {
+      for (const userList of this.items) {
+        if (userList.id == user.id) {
+          userList.roles = user.roles;
+        }
+      }
     }
   }
 };