Finish Manage Medical Center

resources/js/vue/components/modal/user/Role.vue

@@ -1,32 +1,25 @@
 <template>
   <v-form>
     <v-container grid-list-xs fluid>
-      <material-card class=""
-        color="black"
-        title="Role"
-      >
+      <material-card class color="black" title="Role">
         <v-layout row align-center justify-center wrap class="px-5 mb-3">
           <v-flex xs12 md3 sm3>
-            <v-select
-              :items="items"
-              v-model="roles"
-              label="Roles"
-              color="black"
-            ></v-select>
+            <v-select :items="items" v-model="data.roles" label="Roles" color="black"></v-select>
           </v-flex>
         </v-layout>
         <v-layout row wrap>
           <v-layout align-center justify-center wrap class="px-5 mt-2">
-            <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
+            <v-btn @click="changeRole" class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
               <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
               <span class="white--text">Add</span>
             </v-btn>
-            <router-link to="/dashboard">
-              <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
-                <v-icon class="black--text mr-2 caption">fas fa-times</v-icon>
-                <span class="black--text">Close</span>
-              </v-btn>
-            </router-link>
+            <v-btn
+              @click="closeModal"
+              class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5"
+            >
+              <v-icon class="black--text mr-2 caption">fas fa-times</v-icon>
+              <span class="black--text">Close</span>
+            </v-btn>
           </v-layout>
         </v-layout>
       </material-card>
@@ -34,17 +27,28 @@
   </v-form>
 </template>
 <script>
+import { mapGetters, mapMutations } from "vuex";
+import { ApiService } from "@/services";
 export default {
-  name: "",
   data: () => ({
-    items : [
-      'SuperAdmin',
-      'Admin',
-      'SuperVisior',
-      'User'
-    ]
-  })
-}
-</script>
-<style lang="scss" scoped>
-</style>
+    items: ["Admin", "SuperVisior", "User"],
+    data: { roles: "" }
+  }),
+  methods: {
+    ...mapMutations("modal", ["closeModal", "setResultModal"]),
+    async changeRole() {
+      const result = await ApiService.post(
+        `Users/ChangeRole/${this.getModalProperties.user.id}`,
+        this.data
+      );
+      if (result && result.status == 200) {
+        this.setResultModal(result.data);
+        this.closeModal();
+      }
+    }
+  },
+  computed: {
+    ...mapGetters("modal", ["getModalProperties"])
+  }
+};
+</script>

resources/js/vue/router/paths.js

@@ -91,14 +91,14 @@ export default [
     name: 'Add Medical Center',
     view: 'AddMedicalCenter'
   },
+  {
+    path: '/add-operator/:medicalCenter',
+    name: 'AddOperator',
+    view: 'Register'
+  },
   {
     path: '/operator-list/:medicalCenter',
     name: 'OperatorList',
     view: 'OperatorList'
   },
-  {
-    path: '/role',
-    name: 'Role',
-    view: 'Role'
-  }
 ]

resources/js/vue/store/modules/modal/getters.js

@@ -4,6 +4,9 @@ export default {
     },
     getModalProperties: (state) => {
         return state.currentModal.properties;
+    },
+    getModalResult: (state) => {
+        return state.currentModal.result;
     }
 
 }

resources/js/vue/store/modules/modal/mutations.js

@@ -1,10 +1,14 @@
 export default {
     changeCurrentModal: (state, data) => {
+        state.result = '';
         state.currentModal.name = data.modal;
         if (data.properties) {
             state.currentModal.properties = data.properties;
         }
     },
+    setResultModal: (state, data) => {
+        state.currentModal.result = data;
+    },
     closeModal: state => {
         state.currentModal.name = "";
         state.currentModal.properties = {};

resources/js/vue/store/modules/modal/state.js

@@ -1,6 +1,7 @@
 export default {
     currentModal: {
         name: '',
-        properties: {}
+        properties: {},
+        result: {}
     },
 }

resources/js/vue/views/ForgotPassword.vue

@@ -1,11 +1,9 @@
 <template>
-  <v-form >
+  <v-form>
     <v-container grid-list-xs>
       <v-layout row wrap class="justify-center">
         <v-flex xs12 md3 sm3 class="WM-WidthScreen-SM WM-WidthScreen-XS">
-          <material-card
-          color="black"
-          title="Login Page">
+          <material-card color="black" title="Login Page">
             <v-layout row wrap class="px-3">
               <v-flex xs12 md12 sm12>
                 <v-text-field
@@ -19,18 +17,22 @@
             </v-layout>
             <v-layout row wrap class="px-3">
               <v-flex xs12 md6 sm6 class="text-md-left text-sm-center text-xs-center">
-                <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="handleSubmit">
+                <v-btn
+                  class="WM-CyanBlueGradient-BG"
+                  style="padding:10px 60px"
+                  @click="handleSubmit"
+                >
                   <v-icon class="white--text mr-2 caption">fas fa-sign-in-alt</v-icon>
                   <span class="white--text">Send</span>
                 </v-btn>
               </v-flex>
               <v-flex xs12 md6 sm6 class="text-md-right text-sm-center text-xs-center">
-                  <router-link class="black--text" to="login">
-                    <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
-                      <v-icon class="black--text mr-2 caption">fas fa-sign-in-alt</v-icon>
-                      <span class="black--text">Login</span>
-                    </v-btn>
-                  </router-link>
+                <router-link class="black--text" to="login">
+                  <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                    <v-icon class="black--text mr-2 caption">fas fa-sign-in-alt</v-icon>
+                    <span class="black--text">Login</span>
+                  </v-btn>
+                </router-link>
               </v-flex>
             </v-layout>
           </material-card>
@@ -44,23 +46,15 @@ import { mapActions, mapMutations } from "vuex";
 export default {
   data() {
     return {
-      cell_number: "",
+      cell_number: ""
     };
   },
   methods: {
-      ...mapActions('auth', [
-          'forgotPassword'
-      ]),
-      ...mapMutations('modal', [
-          'changeCurrentModal'
-      ]),
-      handleSubmit() {
-          this.changeCurrentModal({modal: 'modal-auth-verify-code'});
-          // Perform a simple validation that cell_number and password have been typed in
-          // if (this.cell_number != '') {
-          //   this.forgotPassword({cell_number: this.cell_number});
-          // }
-      }
+    ...mapActions("auth", ["forgotPassword"]),
+    ...mapMutations("modal", ["changeCurrentModal"]),
+    handleSubmit() {
+      this.changeCurrentModal({ modal: "modal-auth-verify-code" });
+    }
   }
 };
 </script>

resources/js/vue/views/Login.vue

@@ -19,12 +19,15 @@
             </v-layout>
             <v-layout row wrap class="px-3">
               <v-flex xs12 md12 sm12>
-                <v-text-field
-                  v-model="password"
+              <v-text-field
                   name="password"
                   label="Password"
-                  id="id2"
+                  v-model="password"
+                  :type="show1 ? 'text' : 'password'"
+                  :append-icon="show1 ? 'visibility' : 'visibility_off'"
+                  @click:append="show1 = !show1"
                   color="black"
+                  class="pa-2"
                 ></v-text-field>
               </v-flex>
             </v-layout>
@@ -64,6 +67,7 @@ export default {
     return {
       cell_number: "",
       password: "",
+      show1: false,
     };
   },
   computed: {

resources/js/vue/views/ManageMedicalCenter.vue

@@ -60,7 +60,7 @@
         </v-flex>
       </v-layout>
       <v-divider></v-divider>
-      <div class="text-xs-center">
+      <div class="text-xs-center" v-if="lastPage > 1">
         <v-pagination v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
       </div>
       <v-layout row wrap align-center justify-center class="mt-3">

resources/js/vue/views/MyInfo.vue

@@ -1,16 +1,14 @@
 <template>
   <v-form>
     <v-container grid-list-xs fluid>
-      <material-card
-        color="black"
-        title="My Info">
+      <material-card color="black" title="My Info">
         <v-layout align-center justify-center wrap class="px-5 my-3">
           <v-flex xs12 sm4 md4>
             <v-text-field
               name="username"
               label="User Name"
               color="black"
-              v-model="username"
+              v-model="user.username"
               id="id1"
               class="pa-2"
             ></v-text-field>
@@ -20,18 +18,18 @@
               :items="items"
               label="Gender"
               name="gender"
-              v-model="gender"
+              v-model="user.gender"
               single-line
               id="id3"
               class="pa-2"
-              color="black">
-            </v-select>
+              color="black"
+            ></v-select>
           </v-flex>
           <v-flex xs12 sm4 md4>
             <v-text-field
               name="cellnumber"
               label="Cell Number"
-              v-model="cellnumber"
+              v-model="user.cell_number"
               color="black"
               class="pa-2"
               id="id2"
@@ -43,7 +41,7 @@
             <v-text-field
               name="emailaddress"
               label="Email Address"
-              v-model="emailaddress"
+              v-model="user.email"
               id="id4"
               class="px-2"
               color="black"
@@ -51,15 +49,9 @@
             ></v-text-field>
           </v-flex>
           <v-flex xs12 sm8 md8>
-            <v-textarea
-              color="black"
-              v-model="address"
-              class="pa-2"
-              name="address">
+            <v-textarea color="black" v-model="user.address" class="pa-2" name="address">
               <template v-slot:label>
-                <div>
-                  Address
-                </div>
+                <div>Address</div>
               </template>
             </v-textarea>
           </v-flex>
@@ -89,32 +81,17 @@
 export default {
   data() {
     return {
-      username:'',
-      gender:'',
-      cellnumber:'',
-      emailaddress:'',
-      address:'',
-
-      items: [
-        'Item 1',
-        'Item 2',
-        'Item 3',
-        'Item 4'
-      ],
-    }
-      // const Info = Object.freeze({
-      //   username:'',
-      //   cellnumber:'',
-      //   emailaddress:'',
-      //   address:''
-      //   gender:0
-      // })
-      // return {
-      //   InfoForm : Object.assign({} ,Info),
-      //   Info
-      // }
+      user: {
+        username: "",
+        gender: "",
+        cell_number: "",
+        email: "",
+        address: "",
+      },
+      items: ["Male", "FeMale"],
+    };
   }
-}
+};
 </script>
 
 <style lang="css" scoped>

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;
+        }
+      }
     }
   }
 };

resources/js/vue/views/Register.vue

@@ -1,28 +1,41 @@
 <template>
-  <v-form v-model="valid">
+  <v-form ref="form">
     <v-container grid-list-xs>
       <v-layout row wrap class="justify-center">
         <v-flex xs12 md3 sm6 class="WM-WidthScreen-SM WM-WidthScreen-XS">
           <material-card color="black" title="Register Page">
             <v-layout column>
               <v-flex xs12 md2 sm2>
-                  <v-text-field
-                    name="name"
-                    label="Name"
-                    v-model="form.name"
-                    id="id3"
-                    color="black"
-                    class="pa-2"
-                  ></v-text-field>
+                <v-text-field
+                  name="name"
+                  label="Name"
+                  v-model="form.name"
+                  color="black"
+                  class="pa-2"
+                  :rules="[rules.required, rules.nameCounter]"
+                ></v-text-field>
+              </v-flex>
+              <v-flex xs12 md2 sm2>
+                <v-select
+                  :items="items"
+                  label="Gender"
+                  name="gender"
+                  v-model="form.gender"
+                  single-line
+                  class="pa-2"
+                  color="black"
+                  :rules="[rules.required]"
+                ></v-select>
               </v-flex>
               <v-flex xs12 md2 sm2>
                 <v-text-field
-                  name="cellnumber"
+                  name="cell_number"
                   label="Cell Number"
-                  v-model="form.cellnumber"
-                  id="id1"
+                  v-model="form.cell_number"
                   color="black"
                   class="pa-2"
+                  :rules="[rules.required, rules.cellNumberCounter]"
+                  mask="#### ### ####"
                 ></v-text-field>
               </v-flex>
               <v-flex xs12 md2 sm2>
@@ -33,20 +46,26 @@
                   :type="show1 ? 'text' : 'password'"
                   :append-icon="show1 ? 'visibility' : 'visibility_off'"
                   @click:append="show1 = !show1"
-                  id="id2"
                   color="black"
                   class="pa-2"
+                  :rules="[rules.required, rules.passCounter]"
                 ></v-text-field>
               </v-flex>
             </v-layout>
             <v-layout row wrap>
               <v-flex xs12 md6 sm6 class="text-md-left text-sm-center text-xs-center">
-                <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
+                <v-btn @click="register" class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
                   <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
                   <span class="white--text">Register</span>
                 </v-btn>
               </v-flex>
-              <v-flex xs12 md6 sm6 class="text-md-right text-sm-center text-xs-center">
+              <v-flex
+                v-if="!isLogin"
+                xs12
+                md6
+                sm6
+                class="text-md-right text-sm-center text-xs-center"
+              >
                 <router-link to="/login">
                   <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
                     <v-icon class="black--text mr-2 caption">fas fa-sign-in-alt</v-icon>
@@ -62,22 +81,43 @@
   </v-form>
 </template>
 <script>
+import { TokenService, ApiService } from "@/services";
+
 export default {
-  name: "",
-  data () {
-      const defaultForm = Object.freeze({
-        cellnumber: '',
-        password: '',
-        name: '',
-      })
-      return {
-        form: Object.assign({}, defaultForm),
-        valid : false,
-        show1 : false,
-        defaultForm
+  data() {
+    const defaultForm = Object.freeze({
+      cell_number: "",
+      password: "",
+      name: "",
+      gender: "",
+      medical_center_id: this.$route.params.medicalCenter
+        ? this.$route.params.medicalCenter
+        : ''
+    });
+    return {
+      form: Object.assign({}, defaultForm),
+      show1: false,
+      items: ["Male", "FeMale"],
+      isLogin: TokenService.getInfo(),
+      rules: {
+        required: value => !!value || "Required.",
+        nameCounter: value => value.length >= 5 || "Min 5 characters",
+        passCounter: value => value.length >= 6 || "Min 6 characters",
+        cellNumberCounter: value => value.length == 11 || "must 11 characters"
+      }
+    };
+  },
+  methods: {
+    async register() {
+      if (this.$refs.form.validate()) {
+        var result = await ApiService.post(`register`, this.form);
+        if (result && result.status == 200) {
+          this.$router.push(
+            `/operator-list/${this.form.medical_center_id}`
+          );
+        }
+      }
     }
   }
-}
-</script>
-<style lang="scss" scoped>
-</style>
+};
+</script>