pshrestha2/dartachalani-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Login and other configurtion for Darta Chalani

Browse Source
This commit is contained in:
Abhishek 2025-12-18 09:58:00 +05:45
parent c50e0242bf
commit 1d267f7116
6 changed files with 120 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/core/endpoints/auth.ts
View File

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

2
src/core/endpoints/dartachalani.ts
View File

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

66
src/stores/User/Auth.ts
View File

@ -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);
} catch (error) {
console.error(error);
}
return;
},
async login() {
const userStore = useUser();
try {
// const response = await api.post(authAPI.login, this.loginDetails);
await api.post(authAPI.login, this.loginDetails);
Toast.success("Logged in successfully.");
router.push({ name: "dashboard" });
const response = await api.post(authAPI.login, this.loginDetails);
const accessToken = response.data.access;
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);
// if (response.data) {
// this.token = response.data.data.access;
// }
return true;
const refresh = localStorage.getItem("refresh_token");
if (!refresh) return false;
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;
}
},

4
src/stores/User/User.ts
View File

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

47
src/views/Chalani/CreateChalani.vue
View File

@ -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)];
}
};
</script>
onMounted(()=>{
departmentStore.fetchList(departmentAPI, {}, isDepartmentLoading);
categoryStore.fetchList(categoryAPI, {}, isCategoryLoading);
})
onBeforeMount(()=>{
departmentStore.$reset();
departmentStore.$dispose();
categoryStore.$reset();
categoryStore.$dispose();
})
</script>

38
src/views/Darta/Create.vue
View File

@ -19,6 +19,7 @@
label="name"
track-by="id"
placeholder="Select Department"
:loading="isDepartmentLoading"
/>
</div>
<div class="flex flex-col">
@ -28,13 +29,14 @@
</label>
<Multiselect
v-model="formData.documentCategory"
:options="documentCategories"
:options="categories"
:multiple="false"
:searchable="true"
:allow-empty="false"
label="name"
track-by="id"
placeholder="Select Category"
:loading="isCategoryLoading"
/>
</div>
</div>
@ -145,14 +147,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 DartaTowserStore = createOverlayStore("darta-towser")();
const { show } = storeToRefs(DartaTowserStore);
const departmentStore = createGenericStore("departments")();
const { itemList: departments } = storeToRefs(departmentStore);
const categoryStore = createGenericStore("document-category")();
const {itemList: categories } = storeToRefs(categoryStore);
const isDepartmentLoading = ref(false);
const isCategoryLoading = ref(false);
const towser = ref({
title: [{ name: "Darta", link: "#" }, { name: "Create" }],
action: [
@ -167,15 +180,6 @@ const towser = ref({
],
});
const departments = ref([
{ id: 1, name: "Administration" },
{ id: 2, name: "HR" },
]);
const documentCategories = ref([
{ id: 1, name: "Confidential" },
{ id: 2, name: "Public" },
]);
const formData = reactive({
department: null,
documentCategory: null,
@ -245,4 +249,16 @@ const handleSave = async () => {
console.log("Saving:", formData);
onClose();
};
onMounted(()=>{
departmentStore.fetchList(departmentAPI, {}, isDepartmentLoading);
categoryStore.fetchList(categoryAPI, {}, isCategoryLoading);
})
onBeforeMount(()=>{
departmentStore.$reset();
departmentStore.$dispose();
categoryStore.$reset();
categoryStore.$dispose();
})
</script>