crator and messageResponse

resources/js/vue/config/urls.js

@@ -1,4 +1,7 @@
 const urls = {
-    home : '/dashboard',
+    listMedicalCenter : function(page) {
+        return "/MedicalCenters?page=" + page;
+    },
+
 };
 export {urls};

resources/js/vue/router/index.js

@@ -52,12 +52,14 @@ const router = new Router({
 
 Vue.use(Meta)
 
+import {$hasRole} from '@/services/acl/role';
 
 router.beforeEach((to, from, next) => {
   const isPublic = to.matched.some(record => record.meta.public);
   const onlyWhenLoggedOut = to.matched.some(record => record.meta.onlyWhenLoggedOut);
   const loggedIn = !!TokenService.getToken();
-  const roles = to.matched.some(record => record.meta.roles);
+  const roles = (to.meta && to.meta.roles) ? to.meta.roles : null;
+  
   if (!isPublic && !loggedIn) {
     return next({
       path:'/login',
@@ -71,9 +73,9 @@ router.beforeEach((to, from, next) => {
   }
 
   // Do not allow user to visit Pages then not access roles
-  // if (roles && !$hasRole(roles)) {
-  //   return next('/')
-  // }
+  if (roles && !$hasRole(roles)) {
+    return next('/')
+  }
 
   next();
 });

resources/js/vue/router/paths.js

@@ -11,27 +11,30 @@ export default [
   },
   {
     path: '/my-info',
-    name: 'My Info',
+    name: 'MyInfo',
     view: 'MyInfo'
   },
   {
     path: '/all-resualttest',
-    name: 'All Result Test',
+    name: 'AllResultTest',
     view: 'AllResultTest'
   },
   {
     path: '/manage-users',
-    name: 'Manage Users',
+    name: 'ManageUsers',
     view: 'ManageUsers',
+    meta: {
+      roles : 'Admin'
+  }
   },
   {
     path: '/test-creator',
-    name: 'Add New Test',
+    name: 'AddNewTest',
     view: 'TestCreator'
   },
   {
     path: '/manage-medical-center',
-    name: 'Manage Medical Center',
+    name: 'ManageMedicalCenter',
     view: 'ManageMedicalCenter'
   },
   {
@@ -64,7 +67,7 @@ export default [
   },
   {
     path: '/submit-test-result',
-    name: 'Submit Test Result',
+    name: 'SubmitTestResult',
     view: 'SubmitTestResult'
   },
   {
@@ -78,7 +81,7 @@ export default [
   },
   {
     path: '/test-creator',
-    name: 'Test Creator',
+    name: 'TestCreator',
     view: 'TestCreator'
   },
   {
@@ -88,7 +91,7 @@ export default [
   },
   {
     path: '/add-medical-center',
-    name: 'Add Medical Center',
+    name: 'AddMedicalCenter',
     view: 'AddMedicalCenter'
   },
   {

resources/js/vue/services/acl/role.js

@@ -0,0 +1,17 @@
+import { TokenService } from '@/services'
+
+const $hasRole = function(roles) {
+    if (TokenService.getToken()) {
+        roles = roles.split('|');
+        for (const role of roles) {
+            if(TokenService.getInfo().roles && Array.isArray(TokenService.getInfo().roles) && TokenService.getInfo().roles.includes(role)) {
+                return true;
+            }
+        }
+    }
+    return false;
+};
+
+export {
+    $hasRole
+}

resources/js/vue/services/mixin/hasRole.js

@@ -1,16 +1,6 @@
-import { TokenService } from '@/services'
+import {$hasRole} from '../acl/role';
 export default {
     methods: {
-        $hasRole(roles) {
-            if (TokenService.getToken()) {
-                roles = roles.split('|');
-                for (const role of roles) {
-                    if(TokenService.getInfo().roles && Array.isArray(TokenService.getInfo().roles) && TokenService.getInfo().roles.includes(role)) {
-                        return true;
-                    }
-                }
-            }
-            return false;
-        }
+       $hasRole
     },
 }

resources/js/vue/views/AddMedicalCenter.vue

@@ -70,7 +70,7 @@ export default {
           var result = await ApiService.post(url, this.medicalCenter);
         }
         if (result && result.status == 200) {
-          this.$router.push("/manage-medical-center");
+          this.$router.push({name : "ManageMedicalCenter"});
         }
       }
     }

resources/js/vue/views/ManageMedicalCenter.vue

@@ -38,13 +38,13 @@
               <td class="title font-weight-light">{{ item.created_at }}</td>
               <td class="title font-weight-light">{{ item.users_count }} Operator</td>
               <td class="text-xs-right">
-                <router-link :to="`/medical-center/${item.id}/edit`">
+                <router-link :to="{name : 'EditMedicalCenter', params : {id : item.id}}">
                   <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>
-                <router-link :to="`/operator-list/${item.id}`">
+                <router-link :to="{name : 'OperatorList', params : {medicalCenter : item.id}}">
                   <v-btn color="orange darken-1" class="mr-2 WM-ActionButton">
                     <v-icon class="white--text mr-2 caption">fas fa-user</v-icon>
                     <span>Operator</span>
@@ -77,6 +77,7 @@
 
 <script>
 import { ApiService } from "@/services";
+import { urls } from "@/config/urls";
 export default {
   data: () => ({
     headers: [
@@ -111,7 +112,7 @@ export default {
   },
   methods: {
     async getData(page = 1) {
-      const result = await ApiService.get("MedicalCenters?page=" + page);
+      const result = await ApiService.get(urls.listMedicalCenter(page));
       this.items = result.data.MedicalCenters.data;
       this.currentPage = result.data.MedicalCenters.current_page;
       this.lastPage = result.data.MedicalCenters.last_page;

resources/js/vue/views/OperatorList.vue

@@ -135,7 +135,7 @@ export default {
         this.items = result.data.users;
         this.name = result.data.name;
       } else {
-        this.$router.push(`/dashboard`);
+        this.$router.push({name:`Dashboard`});
       }
     },
     async changeStatus(userId) {
@@ -147,7 +147,7 @@ export default {
           }
         }
       } else {
-        this.$router.push(`/dashboard`);
+        this.$router.push({name:`Dashboard`});
       }
     },
     ...mapMutations("modal", ["changeCurrentModal"]),

resources/js/vue/views/Register.vue

@@ -113,7 +113,7 @@ export default {
         var result = await ApiService.post(`register`, this.form);
         if (result && result.status == 200) {
           this.$router.push(
-            `/operator-list/${this.form.medical_center_id}`
+            {name:`OperatorList`, params: { medicalCenter: this.form.medical_center_id }}
           );
         }
       }

resources/js/vue/views/SuperVisior/UserInfo.vue

@@ -1,27 +0,0 @@
-<template>
-  <v-form>
-    <v-container grid-list-xs>
-      <v-layout row wrap>
-        <material-card color="black" title="User Info">
-          <v-flex xs12 sm4 md4>
-            <v-text-field
-              name="name"
-              label="label"
-              id="id"
-            ></v-text-field>
-          </v-flex>
-        </material-card>
-      </v-layout>
-    </v-container>
-  </v-form>
-</template>
-<script>
-export default {
-  name: "",
-  data: () => ({
-
-  })
-}
-</script>
-<style lang="scss" scoped>
-</style>

resources/js/vue/views/SuperVisior/table.vue

@@ -1,136 +0,0 @@
-<template>
-  <v-card>
-    <v-card-title>
-      Nutrition
-      <v-spacer></v-spacer>
-      <v-text-field
-        v-model="search"
-        append-icon="search"
-        label="Search"
-        single-line
-        hide-details
-      ></v-text-field>
-    </v-card-title>
-    <v-data-table
-      :headers="headers"
-      :items="desserts"
-      :search="search"
-    >
-      <template v-slot:items="props">
-        <td>{{ props.item.name }}</td>
-        <td class="text-xs-right">{{ props.item.calories }}</td>
-        <td class="text-xs-right">{{ props.item.fat }}</td>
-        <td class="text-xs-right">{{ props.item.carbs }}</td>
-        <td class="text-xs-right">{{ props.item.protein }}</td>
-        <td class="text-xs-right">{{ props.item.iron }}</td>
-      </template>
-      <v-alert v-slot:no-results :value="true" color="error" icon="warning">
-        Your search for "{{ search }}" found no results.
-      </v-alert>
-    </v-data-table>
-  </v-card>
-</template>
-<script>
-  export default {
-    data () {
-      return {
-        search: '',
-        headers: [
-          {
-            text: 'Dessert (100g serving)',
-            align: 'left',
-            sortable: false,
-            value: 'name'
-          },
-          { text: 'Calories', value: 'calories' },
-          { text: 'Fat (g)', value: 'fat' },
-          { text: 'Carbs (g)', value: 'carbs' },
-          { text: 'Protein (g)', value: 'protein' },
-          { text: 'Iron (%)', value: 'iron' }
-        ],
-        desserts: [
-          {
-            name: 'Frozen Yogurt',
-            calories: 159,
-            fat: 6.0,
-            carbs: 24,
-            protein: 4.0,
-            iron: '1%'
-          },
-          {
-            name: 'Ice cream sandwich',
-            calories: 237,
-            fat: 9.0,
-            carbs: 37,
-            protein: 4.3,
-            iron: '1%'
-          },
-          {
-            name: 'Eclair',
-            calories: 262,
-            fat: 16.0,
-            carbs: 23,
-            protein: 6.0,
-            iron: '7%'
-          },
-          {
-            name: 'Cupcake',
-            calories: 305,
-            fat: 3.7,
-            carbs: 67,
-            protein: 4.3,
-            iron: '8%'
-          },
-          {
-            name: 'Gingerbread',
-            calories: 356,
-            fat: 16.0,
-            carbs: 49,
-            protein: 3.9,
-            iron: '16%'
-          },
-          {
-            name: 'Jelly bean',
-            calories: 375,
-            fat: 0.0,
-            carbs: 94,
-            protein: 0.0,
-            iron: '0%'
-          },
-          {
-            name: 'Lollipop',
-            calories: 392,
-            fat: 0.2,
-            carbs: 98,
-            protein: 0,
-            iron: '2%'
-          },
-          {
-            name: 'Honeycomb',
-            calories: 408,
-            fat: 3.2,
-            carbs: 87,
-            protein: 6.5,
-            iron: '45%'
-          },
-          {
-            name: 'Donut',
-            calories: 452,
-            fat: 25.0,
-            carbs: 51,
-            protein: 4.9,
-            iron: '22%'
-          },
-          {
-            name: 'KitKat',
-            calories: 518,
-            fat: 26.0,
-            carbs: 65,
-            protein: 7,
-            iron: '6%'
-          }
-        ]
-      }
-    }
-  }
-</script>

resources/js/vue/views/TestCreator.vue

@@ -2,12 +2,20 @@
   <v-form ref="form">
     <v-container grid-list-xs>
       <material-card color="black" title="Add a New Test" class>
-        <v-layout row wrap id="Form" class="ma-2">
+        <v-layout row wrap class="ma-2">
           <v-flex xs12 md3 sm3>
-            <v-text-field name="name" v-model="form.name" label="Name" color="black" class="pa-2"></v-text-field>
+            <v-text-field
+              name="name"
+              v-model="form.name"
+              label="Name"
+              color="black"
+              class="pa-2"
+              :rules="[rules.required]"
+            ></v-text-field>
           </v-flex>
           <v-flex xs12 md3 sm3>
             <v-text-field
+              :rules="[rules.required]"
               name="uniquecode"
               v-model="form.unique_code"
               label="Unique Code"
@@ -23,9 +31,16 @@
           :key="keyForm"
           v-for="(info, keyForm) in form.info"
         >
-          <v-layout row wrap id="Form" class="ma-2">
+          <v-layout row wrap class="ma-2">
             <v-flex xs12 md3 sm3>
-              <v-text-field name="inputname" v-model="info.name" label="Input Name" color="black" class="pa-2"></v-text-field>
+              <v-text-field
+                name="inputname"
+                v-model="info.name"
+                label="Input Name"
+                color="black"
+                class="pa-2"
+                :rules="[rules.required]"
+              ></v-text-field>
             </v-flex>
             <v-flex xs12 md3 sm3>
               <v-select
@@ -42,13 +57,16 @@
             </v-flex>
             <!-- Text Input Section -->
             <v-flex xs12 md3 sm3>
-              <v-text-field
-                name="size"
-                label="Size"
+              <v-select
+                :items="size"
+                item-text="state"
+                item-value="abbr"
+                label="Type"
                 v-model="info.size"
+                single-line
                 color="black"
                 class="pa-2"
-              ></v-text-field>
+              ></v-select>
             </v-flex>
           </v-layout>
           <!-- SelectBox Section -->
@@ -56,7 +74,7 @@
             class="ma-3 pa-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full"
             row
             wrap
-            v-if="info.type === 'select' || info.type === 'checkbox'"
+            v-if="info.type === 'Select' || info.type === 'Checkbox'"
           >
             <v-layout row wrap class="WM-Relative WM-Width-Full" v-if="info['options'].length > 0">
               <v-flex
@@ -68,6 +86,7 @@
                 class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative"
               >
                 <v-text-field
+                  :rules="[rules.required]"
                   name="title"
                   label="Title"
                   color="black"
@@ -104,7 +123,7 @@
           <v-layout
             row
             wrap
-            v-if="info.type === 'form'"
+            v-if="info.type === 'Form'"
             class="pa-3 my-4 mx-3 WM-Border WM-Border-Black WM-Relative"
           >
             <v-layout
@@ -116,6 +135,7 @@
             >
               <v-flex xs12 md3 sm3>
                 <v-text-field
+                  :rules="[rules.required]"
                   name="name"
                   v-model="children.name"
                   label="Input Name"
@@ -137,14 +157,23 @@
                 ></v-select>
               </v-flex>
               <v-flex xs12 md3 sm3>
-                <v-text-field name="size" v-model="children.size" label="Size" color="black" class="pa-2" ></v-text-field>
+                <v-select
+                  :items="size"
+                  item-text="state"
+                  item-value="abbr"
+                  label="Type"
+                  v-model="children.size"
+                  single-line
+                  color="black"
+                  class="pa-2"
+                ></v-select>
               </v-flex>
               <!-- Inner Form Selectbox Section  -->
               <v-layout
                 row
                 wrap
                 class="pa-3 mb-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full"
-                v-if="children.type === 'select' || children.type === 'checkbox'"
+                v-if="children.type === 'Select' || children.type === 'Checkbox'"
               >
                 <v-layout
                   row
@@ -166,6 +195,7 @@
                       color="black"
                       class="pa-2 Input"
                       v-model="selectbox.title"
+                      :rules="[rules.required]"
                     ></v-text-field>
                     <v-btn
                       absolute
@@ -199,24 +229,17 @@
                 top
                 color="pink"
                 @click="removeForm(keyForm, keychildren)"
-                id="RemoveFormDuplicator"
               >
                 <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
               </v-btn>
             </v-layout>
-            <v-btn
-              absolute
-              small
-              right
-              bottom
-              color="cyan"
-              @click="duplicateForm(keyForm)"
-              id="FormDuplicator"
-            >
+            <v-btn absolute small right bottom color="cyan" @click="duplicateForm(keyForm)">
               <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>ADD
             </v-btn>
           </v-layout>
-
+          <v-btn v-if="keyForm > 0" absolute small right top color="pink" @click="removeInput(keyForm)">
+            <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
+          </v-btn>
           <v-layout
             row
             wrap
@@ -258,6 +281,7 @@ export default {
         unique_code: "",
         info: [
           {
+            id: 0,
             name: "",
             type: "",
             size: ""
@@ -265,23 +289,35 @@ export default {
         ]
       },
       type: [
-        { state: "Text", abbr: "text" },
-        { state: "Checkbox", abbr: "checkbox" },
-        { state: "Select", abbr: "select" },
-        { state: "Form", abbr: "form" }
-      ]
+        { state: "Text", abbr: "Text" },
+        { state: "Checkbox", abbr: "Checkbox" },
+        { state: "Select", abbr: "Select" },
+        { state: "Form", abbr: "Form" }
+      ],
+      size: [
+        { state: "not Selected", abbr: "" },
+        { state: "2 as 12", abbr: "col-md-2" },
+        { state: "3 as 12", abbr: "col-md-3" },
+        { state: "4 as 12", abbr: "col-md-4" },
+        { state: "6 as 12", abbr: "col-md-6" },
+        { state: "8 as 12", abbr: "col-md-8" },
+        { state: "10 as 12", abbr: "col-md-10" }
+      ],
+      rules: {
+        required: value => !!value || "Required."
+      }
     };
   },
   methods: {
     changeType(infoIndex, selectedboxType) {
-      if (selectedboxType == "select" || selectedboxType == "checkbox") {
+      if (selectedboxType == "Select" || selectedboxType == "Checkbox") {
         this.form.info[infoIndex]["options"] = [{ title: "" }];
       } else {
         this.form.info[infoIndex]["options"] = [];
       }
-      if (selectedboxType == "form") {
+      if (selectedboxType == "Form") {
         this.form.info[infoIndex]["children"] = [
-          { name: "", type: "", size: "" }
+          { id: 0, name: "", type: "", size: "" }
         ];
       }
     },
@@ -298,10 +334,10 @@ export default {
       this.form = form;
     },
     addInput() {
-      this.form.info.push({ name: "", type: "", size: "" });
+      this.form.info.push({ id: 0, name: "", type: "", size: "" });
     },
     changeTypeForm(infoIndex, type, formLevel) {
-      if (type == "select" || type == "checkbox") {
+      if (type == "Select" || type == "Checkbox") {
         let form = this.form;
         this.form = "";
         form.info[infoIndex]["children"][formLevel]["options"] = [
@@ -335,7 +371,12 @@ export default {
     duplicateForm(infoIndex) {
       let form = this.form;
       this.form = [];
-      form.info[infoIndex]["children"].push({ name: "", type: "", size: "" });
+      form.info[infoIndex]["children"].push({
+        id: 0,
+        name: "",
+        type: "",
+        size: ""
+      });
       this.form = form;
     },
     removeForm(infoIndex, formLevel) {
@@ -344,15 +385,20 @@ export default {
       form.info[infoIndex]["children"].splice(formLevel, 1);
       this.form = form;
     },
+    removeInput(infoIndex) {
+      let form = this.form;
+      this.form = [];
+      form.info.splice(infoIndex, 1);
+      this.form = form;
+    },
     async registerForm() {
       if (this.$refs.form.validate()) {
         const result = await ApiService.post("TestTypes", this.form);
         if (result && result.status == 200) {
-          this.$router.push("/dashboard");
+          this.$router.push({ name: `Dashboard` });
         }
       }
     }
-
   }
 };
 </script>