Merge branch 'darta_main' of https://gitea.mavorion.com/pshrestha2/dartachalani-frontend into darta_main

src/core/endpoints/auth.ts

@@ -1,7 +1,7 @@
 export const authAPI = {
-    // csrfGenerate: "users/auth/csrf/",
+    csrfGenerate: "",
-    login: "users/login/",
+    login: "auth/token/",
-    refresh: "users/token/refresh/",
+    refresh: "auth/token/refresh/",
-    // logout: "users/auth/logout/",
+    logout: "auth/logout/",
     self: "users/self/",
 };

src/core/endpoints/dartachalani.ts

@@ -0,0 +1,2 @@
+export const departmentAPI = "dartachalani/department/"
+export const categoryAPI = "dartachalani/documentcategory/"

src/stores/User/Auth.ts

@@ -12,7 +12,7 @@ export const useAuth = defineStore("auth", {
             username: "",
             password: "",
         } as LoginPayload,
-        token: null as null | string,
+        token: localStorage.getItem("access_token") || (null as null | string),
         loginError: false,
     }),
 
@@ -23,22 +23,41 @@ export const useAuth = defineStore("auth", {
         getLoginError(state) {
             return state.loginError;
         },
+        isAuthenticated(state){
+            return !!state.token
+        }
     },
 
     actions: {
         async csrfGenerate() {
-            try {
+
-                await api.get(authAPI.csrfGenerate);
+            return;
-            } catch (error) {
-                console.error(error);
-            }
         },
         async login() {
+
+            const userStore = useUser();
+
             try {
-                // const response = await api.post(authAPI.login, this.loginDetails);
+                const response = await api.post(authAPI.login, this.loginDetails);
-                await api.post(authAPI.login, this.loginDetails);
+
-                Toast.success("Logged in successfully.");
+                const accessToken = response.data.access;
-                router.push({ name: "dashboard" });
+                const refreshToken = response.data.refresh
+
+                if(accessToken){
+                    this.token = accessToken;
+                    localStorage.setItem("access_token", accessToken);
+                    localStorage.setItem("refresh_token", refreshToken);
+
+                    api.defaults.headers.common["Authorization"] = `Bearer ${accessToken}`;
+
+                    await userStore.fetchUserDetail();
+                    Toast.success("Logged in Successfully")
+                    router.push({name: "dashboard"})
+                }
+
+                // await api.post(authAPI.login, this.loginDetails);
+                // Toast.success("Logged in successfully.");
+                // router.push({ name: "dashboard" });
             } catch {
                 Toast.error("Unable to login!");
                 this.hasLoginError();
@@ -47,25 +66,40 @@ export const useAuth = defineStore("auth", {
         async logout() {
             const userStore = useUser();
             try {
-                await api.post(authAPI.logout);
+                // await api.post(authAPI.logout);
                 userStore.$reset();
                 this.loginDetails.username = "";
                 this.loginDetails.password = "";
                 this.token = null;
+
+                localStorage.removeItem("access_token")
+                localStorage.removeItem("refresh_token")
+                delete api.defaults.headers.common["Authorization"];
                 Toast.success("Logged out successfully.");
                 router.push({ name: "login" });
             } catch (error) {
                 console.error(error);
+                localStorage.clear()
+                router.push({ name: "login" });
             }
         },
         async refreshToken() {
             try {
-                await api.post(authAPI.refresh);
+                const refresh = localStorage.getItem("refresh_token");
-                // if (response.data) {
+                if (!refresh) return false;
-                //     this.token = response.data.data.access;
+
-                // }
+                const response = await api.post(authAPI.refresh, { refresh: refresh});
+
+                if (response.data && response.data.access){
+                    const newAccess = response.data.access
+                    this.token = newAccess
+                    localStorage.setItem("access_token", newAccess);
+                    api.defaults.headers.common["Authorization"] = `Bearer ${newAccess}`;
                     return true;
+                }
+                return false;
             } catch {
+                this.logout();
                 return false;
             }
         },

src/stores/User/User.ts

@@ -17,8 +17,8 @@ export const useUser = defineStore("user", {
     actions: {
         async fetchUserDetail() {
             try {
-                // const response = await api.get(authAPI.self);
+                const response = await api.get(authAPI.self);
-                // this.user = response.data.data;
+                this.user = response.data.data;
                 this.isAuthenticated = true;
             } catch (error: any) {
                 if (error.response.status == 403) {

src/views/Chalani/CreateChalani.vue

@@ -19,6 +19,7 @@
                             label="name"
                             track-by="id"
                             placeholder="Select Department"
+                            :loading="isDepartmentLoading" 
                         />
                     </div>
                     <div class="">
@@ -28,7 +29,7 @@
                         </label>
                         <Multiselect
                             v-model="formData.documentCategory"
-                            :options="documentCategories"
+                            :options="categories"
                             :multiple="false"
                             :searchable="true"
                             :allow-empty="false"
@@ -36,6 +37,7 @@
                             label="name"
                             track-by="id"
                             placeholder="Select Category"
+                            :loading="isCategoryLoading"
                         />
                     </div>
                     <div class="">
@@ -160,15 +162,25 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, onMounted, onBeforeMount } from "vue";
 import { storeToRefs } from "pinia";
 import { createOverlayStore } from "@/stores/OverlayStore";
 import Multiselect from "vue-multiselect";
+import { departmentAPI, categoryAPI } from "@/core/endpoints/dartachalani";
+import { createGenericStore } from "@/stores/GenericStore";
 
 const ChalaniTowserStore = createOverlayStore("chalani-towser")();
 const { show } = storeToRefs(ChalaniTowserStore);
 
+const departmentStore = createGenericStore("departments")();
+const { itemList: departments } = storeToRefs(departmentStore);
+
+const categoryStore = createGenericStore("document-category")();
+const {itemList: categories } = storeToRefs(categoryStore);
+
 const fileInputRef = ref<HTMLInputElement | null>(null);
+const isDepartmentLoading = ref(false);
+const isCategoryLoading = ref(false);
 
 const towser = ref({
     title: [{ name: "Chalani", link: "#" }, { name: "Create" }],
@@ -198,20 +210,19 @@ const formData = reactive({
     attachments: [] as File[],
 });
 
-const departments = ref([
-    { id: 1, name: "Administration" },
-    { id: 2, name: "HR" },
-]);
-
-const documentCategories = ref([
-    { id: 1, name: "Confidential" },
-    { id: 2, name: "Public" },
-]);
 
 const resetForm = () => {
+    formData.department = null
+    formData.documentCategory = null
     formData.documentNumber = "";
     formData.subject = "";
+    formData.body = "";
+    formData.recipientName = "";
     formData.attachments = [];
+    formData.recipientContact = "";
+    formData.recipientAddress = "";
+    formData.issuedDate = "";
+    formData.dispatchDate = "";
 };
 
 const onClose = () => {
@@ -242,4 +253,16 @@ const handleFileUpload = (event: Event) => {
         formData.attachments = [...formData.attachments, ...Array.from(target.files)];
     }
 };
+
+onMounted(()=>{
+    departmentStore.fetchList(departmentAPI, {}, isDepartmentLoading);
+    categoryStore.fetchList(categoryAPI, {}, isCategoryLoading);
+})
+
+onBeforeMount(()=>{
+    departmentStore.$reset();
+    departmentStore.$dispose();
+    categoryStore.$reset();
+    categoryStore.$dispose();
+})
 </script>

src/views/Darta/Create.vue

@@ -197,7 +197,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, onMounted, onBeforeMount } from "vue";
 import { storeToRefs } from "pinia";
 import { createGenericStore } from "@/stores/GenericStore";
 import { createOverlayStore } from "@/stores/OverlayStore";