structure user and izitoast and add medicalcenter

resources/js/vue/components/core/Drawer.vue

@@ -29,7 +29,7 @@
             /> -->
           </v-list-tile-avatar>
           <v-list-tile-title class="title">
-            CSSD-DOC
+            {{ $store.state.user.name }}
           </v-list-tile-title>
         </v-list-tile>
         <v-divider/>

resources/js/vue/main.js

@@ -18,18 +18,28 @@ import i18n from '@/i18n'
 import router from '@/router'
 import store from '@/store'
 
+
 import { ApiService, TokenService } from '@/services'
 // Sync store with router
 sync(store, router)
 
 Vue.config.productionTip = false
-
+ApiService.setHeader();
 // Set the base URL of the API
 ApiService.init(process.env.MIX_APP_ROOT_API)
 
-// If token exists set header
+require('./services/global/errorHandler.service');
+// If token exists set Authorizion header
 if (TokenService.getToken()) {
-  ApiService.setHeader()
+  ApiService.setAuthHeader();
+  
+  // If info exists set info in Store
+  if(TokenService.getInfo()) {
+    let info = TokenService.getInfo();
+    store.commit('setInfo', info);
+  } else {
+    store.dispatch('info');
+  }
 }
 
 /* eslint-disable no-new */

resources/js/vue/services/auth/storage.service.js

@@ -1,6 +1,8 @@
+import qs from 'qs';
+
 const TOKEN_KEY = 'access_token'
 const REFRESH_TOKEN_KEY = 'refresh_token'
-
+const INFO = 'info'
 /**
  * Manage the how Access Tokens are being stored and retreived from storage.
  *
@@ -30,7 +32,20 @@ const TokenService = {
 
     removeRefreshToken() {
         localStorage.removeItem(REFRESH_TOKEN_KEY)
-    }
+    },
+    
+    getInfo() {
+        return qs.parse(localStorage.getItem(INFO))
+    },
+
+    saveInfo(info = null) {
+        info = qs.stringify(info);
+        localStorage.setItem(INFO, info)
+    },
+
+    removeInfo() {
+        localStorage.removeItem(INFO)
+    },
 
 }
 

resources/js/vue/services/auth/user.service.js

@@ -1,13 +1,12 @@
-import ApiService from './api.service'
-import { TokenService } from './storage.service'
-
+import { ApiService } from "../global/api.service";
+import { TokenService } from "./storage.service";
 
 class AuthenticationError extends Error {
     constructor(errorCode, message) {
-        super(message)
-        this.name = this.constructor.name
-        this.message = message
-        this.errorCode = errorCode
+        super(message);
+        this.name = this.constructor.name;
+        this.message = message;
+        this.errorCode = errorCode;
     }
 }
 
@@ -17,34 +16,37 @@ const UserService = {
      *
      * @returns access_token
      * @throws AuthenticationError
-    **/
+     **/
     login: async function(cell_number, password) {
         const requestData = {
-            method: 'post',
+            method: "post",
             url: "/login",
             data: {
                 cell_number,
                 password,
-                grant_type: 'password',
+                grant_type: "password"
             },
             auth: {
                 username: process.env.MIX_APP_CLIENT_ID,
                 password: process.env.MIX_APP_CLIENT_SECRET
             }
-        }
+        };
 
         try {
             const response = await ApiService.customRequest(requestData);
             TokenService.saveToken(response.data.access_token);
             TokenService.saveRefreshToken(response.data.refresh_token);
-            ApiService.setHeader();
+            ApiService.setAuthHeader();
 
             // NOTE: We haven't covered this yet in our ApiService
             //       but don't worry about this just yet - I'll come back to it later
             ApiService.mount401Interceptor();
             return response.data.access_token;
         } catch (error) {
-            throw new AuthenticationError(error.response.status, error.response.data.detail);
+            throw new AuthenticationError(
+                error.response.status,
+                error.response.data.detail
+            );
         }
     },
     /**
@@ -52,27 +54,30 @@ const UserService = {
      *
      * @returns access_token
      * @throws AuthenticationError
-    **/
+     **/
     forgotPassword: async function(cell_number) {
         const requestData = {
-            method: 'post',
+            method: "post",
             url: "forgotPassword",
             data: {
-                cell_number,
+                cell_number
             },
             auth: {
                 username: process.env.MIX_APP_CLIENT_ID,
                 password: process.env.MIX_APP_CLIENT_SECRET
             }
-        }
+        };
 
         try {
             const response = await ApiService.customRequest(requestData);
-            ApiService.setHeader();
+            ApiService.setAuthHeader();
 
             return response.data;
         } catch (error) {
-            throw new AuthenticationError(error.response.status, error.response.data.detail);
+            throw new AuthenticationError(
+                error.response.status,
+                error.response.data.detail
+            );
         }
     },
     /**
@@ -80,97 +85,118 @@ const UserService = {
      *
      * @returns access_token
      * @throws AuthenticationError
-    **/
+     **/
     verifyCode: async function(verifyCode) {
         const requestData = {
-            method: 'post',
+            method: "post",
             url: "forgotPassword",
             data: {
-                verifyCode,
+                verifyCode
             },
             auth: {
                 username: process.env.MIX_APP_CLIENT_ID,
                 password: process.env.MIX_APP_CLIENT_SECRET
             }
-        }
+        };
 
         try {
             const response = await ApiService.customRequest(requestData);
-            ApiService.setHeader();
+            ApiService.setAuthHeader();
 
             return response.data;
         } catch (error) {
-            throw new AuthenticationError(error.response.status, error.response.data.detail);
+            throw new AuthenticationError(
+                error.response.status,
+                error.response.data.detail
+            );
         }
     },
 
     /**
      * Refresh the access token.
-    **/
+     **/
     refreshToken: async function() {
-        const refreshToken = TokenService.getRefreshToken()
+        const refreshToken = TokenService.getRefreshToken();
 
         const requestData = {
-            method: 'post',
+            method: "post",
             url: "login",
             data: {
-                grant_type: 'refresh_token',
+                grant_type: "refresh_token",
                 refresh_token: refreshToken
             },
             auth: {
                 username: process.env.MIX_APP_CLIENT_ID,
                 password: process.env.MIX_APP_CLIENT_SECRET
             }
-        }
+        };
 
         try {
-            const response = await ApiService.customRequest(requestData)
+            const response = await ApiService.customRequest(requestData);
 
-            TokenService.saveToken(response.data.access_token)
-            TokenService.saveRefreshToken(response.data.refresh_token)
+            TokenService.saveToken(response.data.access_token);
+            TokenService.saveRefreshToken(response.data.refresh_token);
             // Update the header in ApiService
-            ApiService.setHeader()
+            ApiService.setAuthHeader();
 
-            return response.data.access_token
+            return response.data.access_token;
         } catch (error) {
-            throw new AuthenticationError(error.response.status, error.response.data.detail)
+            throw new AuthenticationError(
+                error.response.status,
+                error.response.data.detail
+            );
         }
-
     },
 
     /**
      * Logout the current user by removing the token from storage.
      *
      * Will also remove `Authorization Bearer <token>` header from future requests.
-    **/
+     **/
     logout: async function() {
         const requestData = {
-            method: 'post',
-            url: "logout",
-            auth: {
-                username: process.env.MIX_APP_CLIENT_ID,
-                password: process.env.MIX_APP_CLIENT_SECRET
-            }
-        }
+            method: "post",
+            url: "logout"
+        };
 
         try {
-            await ApiService.customRequest(requestData);
+            const response = await ApiService.customRequest(requestData);
             // Remove the token and remove Authorization header from Api Service as well
-            TokenService.removeToken()
-            TokenService.removeRefreshToken()
-            ApiService.removeHeader()
+            TokenService.removeToken();
+            TokenService.removeRefreshToken();
+            TokenService.removeInfo();
+            ApiService.removeAuthHeader();
 
             // NOTE: Again, we'll cover the 401 Interceptor a bit later.
-            ApiService.unmount401Interceptor()
+            ApiService.unmount401Interceptor();
 
             return response.data;
         } catch (error) {
-            throw new AuthenticationError(error.response.status, error.response.data.detail);
+            throw new AuthenticationError(
+                error.response.status,
+                error.response.data.detail
+            );
         }
+    },
+    /**
+     * Get Information the current user ;
+     *
+     * Will also Register in Store;
+     **/
+    getInfo: async function() {
+        const requestData = {
+            method: "get",
+            url: "getInfo"
+        };
 
+        const response = await ApiService.customRequest(requestData);
+        
+        TokenService.saveInfo(response.data);
+
+        return response.data;
     }
-}
+};
 
-export default UserService
+export default UserService;
 
-export { UserService, AuthenticationError }
+export { UserService, AuthenticationError };

resources/js/vue/services/global/api.service.js

@@ -1,7 +1,6 @@
 import axios from 'axios'
-import { TokenService } from './storage.service'
+import { TokenService } from '../auth/storage.service'
 import store  from '@/store'
-import qs from 'qs';
 
 const ApiService = {
 
@@ -10,11 +9,16 @@ const ApiService = {
     },
 
     setHeader() {
-        axios.defaults.headers.common["Authorization"] = `Bearer ${TokenService.getToken()}`
+        axios.defaults.headers.common["Accept"] = `application/json`;
+        axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
     },
 
-    removeHeader() {
-        axios.defaults.headers.common = {}
+    setAuthHeader() {
+        axios.defaults.headers.common["Authorization"] = `Bearer ${TokenService.getToken()}`;
+    },
+
+    removeAuthHeader() {
+        axios.defaults.headers.common["Authorization"] = null;
     },
 
     get(resource) {
@@ -45,11 +49,6 @@ const ApiService = {
      *    - password
     **/
     customRequest(data) {
-        for (let d in data) {
-            if (typeof data[d] == 'object') {
-                data[d] = qs.stringify(data[d]);
-            }
-        }
         return axios(data);
     },
 

resources/js/vue/services/global/errorHandler.service.js

@@ -0,0 +1,44 @@
+import axios from "axios";
+import toast from "./toast.service";
+import {TokenService, ApiService} from '@/services';
+function errorResponseHandler(error) {
+    
+    // check for errorHandle config
+    if (
+        error.config.hasOwnProperty("errorHandle") &&
+        error.config.errorHandle === false
+    ) {
+        return Promise.reject(error);
+    }
+
+    // if has response show the error
+    if (error.response) {
+        if(typeof error.response.data.errors !== 'undefined') {
+            for (const key in error.response.data.errors) {
+                if (error.response.data.errors.hasOwnProperty(key)) {
+                    toast.error(error.response.data.errors[key]);
+                }
+            }
+        }
+        if(error.response.status == 401) {
+            TokenService.removeToken();
+            TokenService.removeRefreshToken();
+            TokenService.removeInfo();
+            ApiService.removeAuthHeader();
+        }
+        
+    }
+}
+function successHandler(response) {
+    if(response.data == 200) {
+        if(typeof response.data.message !== 'undefined') {
+            toast.success(response.data.message);
+        }
+    }
+    return response;
+}
+
+// apply interceptor on response
+axios.interceptors.response.use(successHandler, errorResponseHandler);
+
+export default errorResponseHandler;

resources/js/vue/services/global/toast.service.js

@@ -0,0 +1,21 @@
+import "izitoast/dist/css/iziToast.min.css";
+import iZtoast from "izitoast";
+
+const toast = {
+    error: (message, title = "Error") => {
+        return iZtoast.error({
+            title: title,
+            message: message,
+            position: "bottomCenter"
+        });
+    },
+    success: (message, title = "Success") => {
+        return iZtoast.success({
+            title: title,
+            message: message,
+            position: "bottomCenter"
+        });
+    }
+};
+
+export default toast;

resources/js/vue/services/index.js

@@ -1,3 +1,3 @@
-export * from './auth/api.service';
+export * from './global/api.service';
 export * from './auth/storage.service';
 export * from './auth/user.service';

resources/js/vue/store/actions.js

@@ -1,5 +1,8 @@
-// https://vuex.vuejs.org/en/actions.html
-
+import { UserService } from '@/services/auth/user.service'
 export default {
-  //
-}
+    async info({ commit }) {
+        const info = await UserService.getInfo();
+        commit("setInfo", info);
+        return true;
+    }
+};

resources/js/vue/store/modules/auth/actions.js

@@ -1,17 +1,17 @@
 import { UserService, AuthenticationError } from '@/services/auth/user.service'
 import router from '@/router'
-import axios from 'axios'
 
 export default {
-    async login({ commit }, {cell_number, password}) {
+    async login({ commit, dispatch }, {cell_number, password}) {
         commit('loginRequest');
         try {
             const token = await UserService.login(cell_number, password);
             commit('loginSuccess', token);
-
             // Redirect the user to the page he first tried to visit or to the home view
             router.push(router.history.current.query.redirect || '/');
 
+            dispatch('info', {}, {root : true});
+            
             return true
         } catch (e) {
             if (e instanceof AuthenticationError) {

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

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

resources/js/vue/store/mutations.js

@@ -1,5 +1,5 @@
-// https://vuex.vuejs.org/en/mutations.html
-
 export default {
-  //
-}
+    setInfo: (state, info) => {
+        state.user = info.user;
+    }
+};

resources/js/vue/store/state.js

@@ -1,5 +1,3 @@
-// https://vuex.vuejs.org/en/state.html
-
 export default {
-  //
+  user : {},
 }

resources/js/vue/views/AddMedicalCenter.vue

@@ -1,33 +1,20 @@
 <template>
-  <v-form v-model="model">
+  <v-form ref="form">
     <v-container grid-list-xs>
-      <material-card class=""
-        color="black"
-        title="Add Medical Center"
-        text=""
-      >
+      <material-card class color="black" title="Add Medical Center" text>
         <v-layout row wrap class="px-5 mb-3">
           <v-flex xs12 md3 xs3>
             <v-text-field
-              name="Name"
+              v-model="name"
               label="Name"
               color="black"
               class="pa-2"
-              id="id1"
-            ></v-text-field>
-          </v-flex>
-          <v-flex xs12 md3 xs3>
-            <v-text-field
-              name="Operator"
-              label="Operator"
-              color="black"
-              class="pa-2"
-              id="id2"
+              :rules="[rules.required, rules.counter]"
             ></v-text-field>
           </v-flex>
         </v-layout>
         <v-layout row wrap align-center justify-center class="mt-3">
-          <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
+          <v-btn class="WM-CyanBlueGradient-BG" @click="AddMedicalCenter" 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>
@@ -43,12 +30,33 @@
   </v-form>
 </template>
 <script>
+import { ApiService } from "@/services";
+import { log } from "util";
 export default {
-  name: "",
-  data: () => ({
-
-  })
-}
+  data() {
+    return {
+      name: "",
+      rules: {
+        required: value => !!value || "Required.",
+        counter: value => value.length <= 30 || "Max 30 characters"
+      }
+    };
+  },
+  methods: {
+    async AddMedicalCenter() {
+      let url = "MedicalCenters";
+      let data = {
+        name: this.name
+      };
+      if (this.$refs.form.validate()) {
+        const result = await ApiService.post(url, data);
+        if(result && result.status == 200) {
+            this.$router.push('/manage-medical-center');
+        }
+      }
+    }
+  }
+};
 </script>
 <style lang="scss" scoped>
 </style>