Merge pull request 'Fix for loader' (#2) from atamrakar/Dolphin-Frontent-Boilerplate:loader_fix into dev

Reviewed-on: Mavorion/Dolphin-Frontent-Boilerplate#2

src/router/auth.router.ts

@@ -60,11 +60,6 @@ const authChildren: Array<RouteRecordRaw> = [
                 name: "loader",
                 component: () => import("@/views/Components/Loader.vue"),
             },
-            {
-                path: "image-cropper",
-                name: "image-cropper",
-                component: () => import("@/views/Components/ImageCropper.vue"),
-            },
         ],
     },
     {

src/stores/App/loader.store.ts

@@ -2,18 +2,28 @@ import { defineStore } from "pinia";
 
 export const useLoader = defineStore("loader", {
     state: () => ({
-        loader: false,
+        loader: {} as Record<string, boolean>,
     }),
 
     getters: {
         isLoading(state) {
-            return state.loader;
+            return (key: string): boolean => {
+                return state.loader[key] === true;
+            };
         },
     },
 
     actions: {
-        setLoaderStatus(value: boolean) {
+        start(key: string) {
-            this.loader = value;
+            if (!key) return;
+            this.loader[key] = true;
+        },
+
+        stop(key: string) {
+            if (!key) return;
+            if (!(key in this.loader)) return;
+
+            this.loader[key] = false;
         },
     },
 });

src/stores/Auth/auth.store.ts

@@ -10,59 +10,73 @@ export const useAuth = defineStore("auth", {
         loginDetails: {} as LoginDetails,
         isAuthenticated: false,
         user: {} as UserDetails,
+        loginError: false,
     }),
 
     getters: {
         getLoginDetails(state) {
             return state.loginDetails;
         },
+        getLoginError(state) {
+            return state.loginError;
+        },
     },
 
     actions: {
         async login() {
             const loaderStore = useLoader();
-            loaderStore.setLoaderStatus(true);
+            loaderStore.start("login");
             await api
                 .post(auth.login, this.loginDetails)
                 .then(() => {
-                    loaderStore.setLoaderStatus(false);
+                    loaderStore.stop("login");
                     this.isAuthenticated = true;
                     router.push({ name: "dashboard" });
                 })
                 .catch(() => {
-                    loaderStore.setLoaderStatus(false);
+                    loaderStore.stop("login");
                     this.isAuthenticated = false;
+                    this.hasLoginError();
                 });
         },
         async getUser() {
             const loaderStore = useLoader();
-            loaderStore.setLoaderStatus(true);
+            loaderStore.start("getUser");
             await api
                 .get(user.self)
                 .then((e) => {
                     this.user = e.data.data;
-                    loaderStore.setLoaderStatus(false);
+                    loaderStore.stop("getUser");
                     this.isAuthenticated = true;
                 })
                 .catch(() => {
                     this.user = {} as UserDetails;
-                    loaderStore.setLoaderStatus(false);
+                    loaderStore.stop("getUser");
                     this.isAuthenticated = false;
                 });
         },
 
         async logout() {
             const loaderStore = useLoader();
-            loaderStore.setLoaderStatus(true);
+            loaderStore.start("logout");
             await api
                 .post(auth.logout)
                 .then(() => {
                     this.isAuthenticated = false;
                     router.push({ name: "login" });
+                    loaderStore.stop("logout");
                 })
                 .catch((e) => {
                     console.log(e);
                 });
         },
+        hasLoginError(status: boolean = true) {
+            if (status) {
+                this.loginError = true;
+                setTimeout(() => {
+                    this.loginError = false;
+                }, 5000);
+            }
+        },
     },
 });

src/views/Auth/Login.vue

@@ -5,13 +5,16 @@
                 <img src="/img/Dolphin/dolphin-logo.png" class="w-36 my-5" />
             </div>
             <div class="border border-[#99A1AF] rounded-xs px-10 py-10 bg-white select-none">
-                <div class="text-center" :class="getLoginError ? '' : 'mb-[10px]'">
+                <div class="text-center mb-[10px]">
                     <p class="text-[30px] text-semibold">Sign In</p>
                     <div class="text-sm font-normal">Fill your detail to sign in to Dolphin PIS.</div>
                 </div>
 
-                <div class="mt-[12px] mb-[-19px]" v-if="getLoginError">
+                <div class="mt-[12px] mb-[-19px] h-[20px]">
-                    <div class="text-sm text-red-700 font-semibold text-center flex gap-[10px]">
+                    <div
+                        v-if="getLoginError"
+                        class="text-sm text-red-700 font-semibold text-center flex gap-[10px] justify-center"
+                    >
                         <svg
                             xmlns="http://www.w3.org/2000/svg"
                             viewBox="0 0 20 20"
@@ -76,7 +79,7 @@
                     <button
                         type="submit"
                         class="btn btn-primary w-full max-h-[40px]! h-[40px]! text-lg!"
-                        :class="isLoading ? 'btn-loading' : ''"
+                        :class="loaderStore.isLoading('login') ? 'btn-loading' : ''"
                     >
                         Sign In
                     </button>
@@ -85,7 +88,7 @@
 
             <div class="text-xs text-center my-5 select-none">
                 <div>
-                    © 2024
+                    © {{ dateYear }}
                     <a href="https://mavorion.com" class="text-[#224CAD] underline">Mavorion Systems</a>
                     . All rights reserved.
                 </div>
@@ -101,10 +104,9 @@ import { ref } from "vue";
 
 const authStore = useAuth();
 const loaderStore = useLoader();
-const { loginDetails } = storeToRefs(authStore);
+const { loginDetails, getLoginError } = storeToRefs(authStore);
-const { isLoading } = storeToRefs(loaderStore);
 
 const showPassword = ref(false);
 
-const getLoginError = "";
+const dateYear = new Date().getFullYear();
 </script>

src/views/Components/ImageCropper.vue

@@ -1,19 +0,0 @@
-<template>
-    <button class="btn btn-primary" @click="showModal = true">Open Modal</button>
-    <UploadImage :show="showModal" @onClose="showModal = false" @onCrop="handleCrop" :uploadSize="2" />
-    <img :src="croppedImageVal" alt="" />
-</template>
-
-<script setup lang="ts">
-import { UploadImage } from "dolphin-components";
-import { ref } from "vue";
-
-const showModal = ref(false);
-const croppedImageVal = ref("");
-
-const handleCrop = (croppedImage: string) => {
-    croppedImageVal.value = croppedImage;
-    console.log("Cropped Image:", croppedImage);
-    showModal.value = false;
-};
-</script>