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

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

Browse Source
This commit is contained in:
Abhishek 2025-12-18 10:06:42 +05:45
parent 1d267f7116 ec1d300188
commit 78c4e44791
1 changed files with 200 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,121 +1,171 @@
<template> <template>
<Towser :show="show" :title="towser.title" :actions="towser.action" @onClose="onClose" @onSave="onSave"> <Towser
<div class="p-4"> :show="dartaTowserStore.show"
<div> :title="towser.title"
<div class="mb-5"> :actions="towser.action"
<h2 class="text-base font-semibold mb-3">Document Details</h2> @onClose="onClose"
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> @onSave="onSave"
<div class=""> >
<label class="block text-sm font-medium mb-2"> <div class="flex flex-col gap-[5px]">
Department <!-- Document Details Section -->
<span class="text-red-500">*</span> <div class="mb-[10px]">
</label> <!-- <h3 class="text-lg font-semibold">Document Details</h3> -->
<Multiselect <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-[5px]">
v-model="formData.department" <div class="flex flex-col">
:options="departments" <label for="document_number">
:multiple="false" Document Number
:searchable="true"
:allow-empty="false"
label="name"
track-by="id"
placeholder="Select Department"
:loading="isDepartmentLoading"
/>
</div>
<div class="flex flex-col">
<label class="block text-sm font-medium mb-2">
Category
<span class="text-red-500">*</span>
</label>
<Multiselect
v-model="formData.documentCategory"
:options="categories"
:multiple="false"
:searchable="true"
:allow-empty="false"
label="name"
track-by="id"
placeholder="Select Category"
:loading="isCategoryLoading"
/>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
<div class="flex flex-col">
<label class="block text-sm font-medium mb-2">
Document Number
<span class="text-red-500">*</span>
</label>
<input
v-model="formData.documentNumber"
type="text"
placeholder="Enter document number"
class="form-input"
/>
</div>
<div class="flex flex-col">
<label class="block text-sm font-medium mb-2">
Subject
<span class="text-red-500">*</span>
</label>
<input
v-model="formData.subject"
type="text"
placeholder="Enter document subject"
class="form-input"
/>
</div>
</div>
<div class="mt-6">
<label class="block text-sm font-medium mb-2">
Document Body
<span class="text-red-500">*</span> <span class="text-red-500">*</span>
</label> </label>
<textarea <input
v-model="formData.body" id="document_number"
placeholder="Enter document body" v-model="payload.document_number"
class="w-full border p-2" type="text"
rows="5" placeholder="Enter Document Number"
></textarea> @input="errors && errors.document_number && delete errors.document_number"
required
/>
</div>
<div class="flex flex-col">
<label for="document_type">
Document Type
<span class="text-red-500">*</span>
</label>
<Multiselect
ref="document_type"
v-model="selectedItems.document_type"
:options="documentTypeStore.itemList"
track-by="id"
placeholder="Select Document Type"
label="title"
:show-labels="false"
@select="errors && errors.document_type && delete errors.document_type"
class="bg-gray-800"
required
/>
</div>
<div class="flex flex-col">
<label for="document_category">
Document Category
<span class="text-red-500">*</span>
</label>
<Multiselect
ref="document_category"
v-model="selectedItems.document_category"
:options="documentCategoryStore.itemList"
track-by="id"
placeholder="Select Document Category"
label="title"
:show-labels="false"
@select="errors && errors.document_category && delete errors.document_category"
class="bg-gray-800"
required
/>
</div>
<div class="flex flex-col">
<label for="department">
Department
<span class="text-red-500">*</span>
</label>
<Multiselect
ref="department"
v-model="selectedItems.department"
:options="departmentStore.itemList"
track-by="id"
placeholder="Select Department"
label="name"
:show-labels="false"
@select="errors && errors.department && delete errors.department"
/>
</div>
<div class="flex flex-col">
<label for="date">Received Date</label>
<DateSelector id="date" v-model="payload.date" :classValue="`w-full`" />
</div> </div>
</div> </div>
</div>
<div class="mb-8"> <!-- Document Information Section -->
<h2 class="text-base font-semibold mb-3">Recipient Information</h2> <div class="mb-[10px]">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <!-- <h3 class="text-lg font-semibold">Document Information</h3> -->
<div class="flex flex-col"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-[5px]">
<label class="block text-sm font-medium mb-2">Recipient Name</label> <div class="flex flex-col">
<input v-model="formData.recipientName" type="text" class="form-input" /> <label for="issued_date">Issued Date</label>
</div> <DateSelector id="issued_date" v-model="payload.issued_date" :classValue="`w-full`" />
<div class="flex flex-col"> </div>
<label class="block text-sm font-medium mb-2">Recipient Contact</label>
<input v-model="formData.recipientContact" type="tel" class="form-input" /> <div class="flex flex-col">
</div> <label for="sender_name">
<div class="flex flex-col md:col-span-2"> Sender Name
<label class="block text-sm font-medium mb-2">Recipient Address</label> <span class="text-red-500">*</span>
<input v-model="formData.recipientAddress" type="text" class="form-input" /> </label>
</div> <input
id="sender_name"
v-model="payload.sender_name"
type="text"
placeholder="Enter Sender Name"
@input="errors && errors.sender_name && delete errors.sender_name"
required
/>
</div>
<div class="flex flex-col">
<label for="sender_address">
Sender Address
<span class="text-red-500">*</span>
</label>
<input
id="sender_address"
v-model="payload.sender_address"
type="text"
placeholder="Enter Sender Address"
@input="errors && errors.sender_address && delete errors.sender_address"
required
/>
</div>
<div class="flex flex-col">
<label for="sender_contact">
Sender Contact
<span class="text-red-500">*</span>
</label>
<input
id="sender_contact"
v-model="payload.sender_contact"
type="text"
placeholder="Enter Sender Contact"
@input="errors && errors.sender_contact && delete errors.sender_contact"
required
/>
</div> </div>
</div> </div>
</div>
<div class="mb-8"> <!-- Subject Section -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="mb-[10px]">
<div class="flex flex-col"> <!-- <h3 class="text-lg font-semibold">Subject</h3> -->
<label class="block text-sm font-medium mb-2">Issued Date</label> <div class="grid grid-cols-3 gap-[5px]">
<input v-model="formData.issuedDate" type="date" class="form-input" /> <div class="flex flex-col">
</div> <label for="subject">
<div class="flex flex-col"> Subject
<label class="block text-sm font-medium mb-2">Dispatch Date</label> <span class="text-red-500">*</span>
<input v-model="formData.dispatchDate" type="date" class="form-input" /> </label>
</div> <input
id="subject"
v-model="payload.subject"
type="text"
placeholder="Enter subject of the letter"
@input="errors && errors.subject && delete errors.subject"
required
/>
</div> </div>
</div> </div>
</div>
<div class="mb-8"> <!--Attachment Section-->
<h2 class="text-base font-semibold mb-3">Attachments</h2> <div class="grid grid-cols-3">
<div class="border-2 border-dashed p-6 text-center cursor-pointer" @click="triggerFileInput"> <div>
<div>Attachments</div>
<div
class="border-2 border-dashed p-6 text-center cursor-pointer hover:bg-gray-50"
@click="triggerFileInput"
>
<input <input
type="file" type="file"
multiple multiple
@ -124,16 +174,16 @@
ref="fileInputRef" ref="fileInputRef"
accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.png" accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.png"
/> />
<p class="text-sm mb-2">Click to upload or drag and drop</p> <p class="text-gray-600 text-sm mb-2">Click to upload</p>
<div v-if="formData.attachments.length > 0" class="mt-4 text-left"> <div v-if="formData.attachments.length > 0" class="mt-4 text-left">
<ul class="space-y-2"> <ul class="space-y-2">
<li <li
v-for="(file, index) in formData.attachments" v-for="(file, index) in formData.attachments"
:key="index" :key="index"
class="flex justify-between items-center border p-2" class="flex justify-between items-center bg-gray-100 p-2 rounded"
> >
<span class="text-sm truncate">{{ file.name }}</span> <span class="text-sm truncate">{{ file.name }}</span>
<button type="button" @click.stop="removeFile(index)" class="text-sm"> <button type="button" @click.stop="removeFile(index)" class="text-red-500 text-xs">
Remove Remove
</button> </button>
</li> </li>
@ -142,6 +192,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</Towser> </Towser>
</template> </template>
@ -149,24 +200,19 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted, onBeforeMount } from "vue"; import { ref, reactive, onMounted, onBeforeMount } from "vue";
import { storeToRefs } from "pinia"; 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"; import { createGenericStore } from "@/stores/GenericStore";
import { createOverlayStore } from "@/stores/OverlayStore";
const DartaTowserStore = createOverlayStore("darta-towser")(); const dartaStore = createGenericStore("darta")();
const { show } = storeToRefs(DartaTowserStore); const dartaTowserStore = createOverlayStore("darta-towser")();
const { payload, selectedItems, errors } = storeToRefs(dartaStore);
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 documentCategoryStore = createGenericStore("document-category")();
const documentTypeStore = createGenericStore("document-type")();
const departmentStore = createGenericStore("department")();
const emit = defineEmits(["onSave"]);
const towser = ref({ const towser = ref({
title: [{ name: "Darta", link: "#" }, { name: "Create" }],
title: [{ name: "Darta", link: "#" }, { name: "Create" }], title: [{ name: "Darta", link: "#" }, { name: "Create" }],
action: [ action: [
{ {
@ -179,6 +225,24 @@ 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 departments = ref([
{ id: 1, name: "Administration" },
{ id: 2, name: "HR" },
]);
const documentCategories = ref([
{ id: 1, name: "Confidential" },
{ id: 2, name: "Public" },
]);
const formData = reactive({ const formData = reactive({
department: null, department: null,
@ -192,18 +256,24 @@ const formData = reactive({
issuedDate: "", issuedDate: "",
dispatchDate: "", dispatchDate: "",
attachments: [] as File[], attachments: [] as File[],
documentNumber: "",
subject: "",
body: "",
recipientName: "",
recipientContact: "",
recipientAddress: "",
issuedDate: "",
dispatchDate: "",
attachments: [] as File[],
}); });
const fileInputRef = ref<HTMLInputElement | null>(null); const fileInputRef = ref<HTMLInputElement | null>(null);
const onClose = () => { const onClose = () => {
DartaTowserStore.close(); dartaTowserStore.close();
resetForm();
}; };
const onSave = () => { const onSave = async () => {};
handleSave();
};
const triggerFileInput = () => { const triggerFileInput = () => {
fileInputRef.value?.click(); fileInputRef.value?.click();
@ -220,45 +290,5 @@ const removeFile = (index: number) => {
formData.attachments.splice(index, 1); formData.attachments.splice(index, 1);
}; };
const resetForm = () => {
formData.department = null;
formData.documentCategory = null;
formData.documentNumber = "";
formData.subject = "";
formData.body = "";
formData.recipientName = "";
formData.recipientContact = "";
formData.recipientAddress = "";
formData.issuedDate = "";
formData.dispatchDate = "";
formData.attachments = [];
};
const handleSave = async () => {
if (
!formData.department ||
!formData.documentCategory ||
!formData.documentNumber ||
!formData.subject ||
!formData.body
) {
console.error("Please fill in all required fields");
return;
}
console.log("Saving:", formData);
onClose();
};
onMounted(()=>{
departmentStore.fetchList(departmentAPI, {}, isDepartmentLoading);
categoryStore.fetchList(categoryAPI, {}, isCategoryLoading);
})
onBeforeMount(()=>{
departmentStore.$reset();
departmentStore.$dispose();
categoryStore.$reset();
categoryStore.$dispose();
})
</script> </script>