Compare commits
No commits in common. "faef257e6c9419a11211aff57d2a7abb98c53f9f" and "377a727e7af8d421fd6a99ddc47e9fe0ab449fbb" have entirely different histories.
faef257e6c
...
377a727e7a
|
|
@ -1,190 +1,44 @@
|
||||||
<template>
|
<template>
|
||||||
|
<!-- <Modal :title="modal.title" :actions="modal.action" @onClose="onClose"></Modal> -->
|
||||||
<Towser
|
<Towser
|
||||||
:show="show"
|
:show="dartaChalaniTowserStore.show"
|
||||||
:title="towser.title"
|
:title="towser.title"
|
||||||
:actions="towser.action"
|
:actions="towser.action"
|
||||||
:width="800"
|
|
||||||
@onClose="onClose"
|
@onClose="onClose"
|
||||||
@onSave="onSave"
|
|
||||||
>
|
>
|
||||||
<div class="p-6">
|
|
||||||
<form @submit.prevent="submitForm">
|
|
||||||
<div class="mb-8">
|
|
||||||
<h2 class="text-lg font-semibold text-gray-700 mb-4">Document Details</h2>
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<label class="block text-sm font-medium text-gray-700 mb-2">Department <span class="text-red-500">*</span></label>
|
|
||||||
<Multiselect
|
|
||||||
v-model="formData.department"
|
|
||||||
:options="departments"
|
|
||||||
:multiple="false"
|
|
||||||
:searchable="true"
|
|
||||||
:allow-empty="false"
|
|
||||||
label="name"
|
|
||||||
track-by="id"
|
|
||||||
placeholder="Select Department"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<label class="block text-sm font-medium text-gray-700 mb-2">Category <span class="text-red-500">*</span></label>
|
|
||||||
<Multiselect
|
|
||||||
v-model="formData.documentCategory"
|
|
||||||
:options="documentCategories"
|
|
||||||
:multiple="false"
|
|
||||||
:searchable="true"
|
|
||||||
:allow-empty="false"
|
|
||||||
label="name"
|
|
||||||
track-by="id"
|
|
||||||
placeholder="Select Category"
|
|
||||||
/>
|
|
||||||
</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 text-gray-700 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" required />
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<label class="block text-sm font-medium text-gray-700 mb-2">Subject <span class="text-red-500">*</span></label>
|
|
||||||
<input v-model="formData.subject" type="text" placeholder="Enter document subject" class="form-input" required />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-6">
|
|
||||||
<label class="block text-sm font-medium text-gray-700 mb-2">Document Body <span class="text-red-500">*</span></label>
|
|
||||||
<textarea v-model="formData.body" placeholder="Enter document body" class="w-full" rows="5"></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-8">
|
|
||||||
<h2 class="text-lg font-semibold text-gray-700 mb-4">Recipient Information</h2>
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<label class="block text-sm font-medium text-gray-700 mb-2">Recipient Name</label>
|
|
||||||
<input v-model="formData.recipientName" type="text" class="form-input" />
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<label class="block text-sm font-medium text-gray-700 mb-2">Recipient Contact</label>
|
|
||||||
<input v-model="formData.recipientContact" type="tel" class="form-input" />
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col md:col-span-2">
|
|
||||||
<label class="block text-sm font-medium text-gray-700 mb-2">Recipient Address</label>
|
|
||||||
<input v-model="formData.recipientAddress" type="text" class="form-input" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-8">
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<label class="block text-sm font-medium text-gray-700 mb-2">Issued Date</label>
|
|
||||||
<input v-model="formData.issuedDate" type="date" class="form-input" />
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<label class="block text-sm font-medium text-gray-700 mb-2">Dispatch Date</label>
|
|
||||||
<input v-model="formData.dispatchDate" type="date" class="form-input" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-8">
|
|
||||||
<h2 class="text-lg font-semibold text-gray-700 mb-4">Attachments</h2>
|
|
||||||
<div class="border-2 border-dashed p-6 text-center cursor-pointer hover:bg-gray-50" @click="triggerFileInput">
|
|
||||||
<input type="file" multiple @change="handleFileUpload" class="hidden" ref="fileInputRef" accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.png" />
|
|
||||||
<p class="text-gray-600 text-sm mb-2">Click to upload or drag and drop</p>
|
|
||||||
<div v-if="formData.attachments.length > 0" class="mt-4 text-left">
|
|
||||||
<ul class="space-y-2">
|
|
||||||
<li v-for="(file, index) in formData.attachments" :key="index" class="flex justify-between items-center bg-gray-100 p-2 rounded">
|
|
||||||
<span class="text-sm truncate">{{ file.name }}</span>
|
|
||||||
<button type="button" @click.stop="removeFile(index)" class="text-red-500 text-xs">Remove</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</Towser>
|
</Towser>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive } from "vue";
|
import { ref } from "vue";
|
||||||
import { storeToRefs } from "pinia";
|
import { createGenericStore } from "@/stores/GenericStore";
|
||||||
import { createOverlayStore } from "@/stores/OverlayStore";
|
import { createOverlayStore } from "@/stores/OverlayStore";
|
||||||
import Multiselect from "vue-multiselect";
|
const dartaChalaniStore = createGenericStore("user-meal-schedule")();
|
||||||
|
const dartaChalaniTowserStore = createOverlayStore("darta-chalani-towser")();
|
||||||
const DartaTowserStore = createOverlayStore("darta-towser")();
|
|
||||||
const { show } = storeToRefs(DartaTowserStore);
|
|
||||||
|
|
||||||
const towser = ref({
|
const towser = ref({
|
||||||
|
show: false,
|
||||||
title: [
|
title: [
|
||||||
{ name: "Darta", link: "#" },
|
{
|
||||||
{ name: "Create" }
|
name: "Darta",
|
||||||
|
link: "#",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Create",
|
||||||
|
},
|
||||||
],
|
],
|
||||||
action: [
|
action: [
|
||||||
{
|
{
|
||||||
title: "Close",
|
title: "Close",
|
||||||
emit: "onClose",
|
emit: "onClose",
|
||||||
|
class: "btn-outline",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Save",
|
title: "Save",
|
||||||
emit: "onSave",
|
emit: "onSave",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
})
|
|
||||||
|
|
||||||
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,
|
|
||||||
documentNumber: '',
|
|
||||||
subject: '',
|
|
||||||
body: '',
|
|
||||||
recipientName: '',
|
|
||||||
recipientContact: '',
|
|
||||||
recipientAddress: '',
|
|
||||||
issuedDate: '',
|
|
||||||
dispatchDate: '',
|
|
||||||
attachments: [] as File[]
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const fileInputRef = ref<HTMLInputElement | null>(null);
|
const onClose = () => {};
|
||||||
|
|
||||||
const onClose = () => {
|
|
||||||
DartaTowserStore.close();
|
|
||||||
resetForm();
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSave = () => {
|
|
||||||
submitForm();
|
|
||||||
};
|
|
||||||
|
|
||||||
const triggerFileInput = () => {
|
|
||||||
fileInputRef.value?.click();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleFileUpload = (event: Event) => {
|
|
||||||
const target = event.target as HTMLInputElement;
|
|
||||||
if (target.files) {
|
|
||||||
formData.attachments = [...formData.attachments, ...Array.from(target.files)];
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const removeFile = (index: number) => {
|
|
||||||
formData.attachments.splice(index, 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.documentNumber = '';
|
|
||||||
formData.subject = '';
|
|
||||||
formData.attachments = [];
|
|
||||||
};
|
|
||||||
|
|
||||||
const submitForm = async () => {
|
|
||||||
console.log("Submitting:", formData);
|
|
||||||
onClose();
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -13,17 +13,18 @@
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</ContentLayout>
|
</ContentLayout>
|
||||||
|
|
||||||
<Create />
|
<Create />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from "vue";
|
import { ref, onMounted, onBeforeUnmount, watch } from "vue";
|
||||||
import { BStoAD, NepaliDate } from "nepali-date-library";
|
import { BStoAD, NepaliDate } from "nepali-date-library";
|
||||||
|
|
||||||
import { storeToRefs } from "pinia";
|
import { storeToRefs } from "pinia";
|
||||||
import Create from "@/views/Darta/Create.vue";
|
import Create from "@/views/Darta/Create.vue";
|
||||||
import { createGenericStore } from "@/stores/GenericStore";
|
import { createGenericStore } from "@/stores/GenericStore";
|
||||||
import { createOverlayStore } from "@/stores/OverlayStore";
|
import { createOverlayStore } from "@/stores/OverlayStore";
|
||||||
|
import { Toast } from "dolphin-components";
|
||||||
|
|
||||||
const DartaStore = createGenericStore("darta")();
|
const DartaStore = createGenericStore("darta")();
|
||||||
const DartaTowserStore = createOverlayStore("darta-towser")();
|
const DartaTowserStore = createOverlayStore("darta-towser")();
|
||||||
|
|
@ -31,8 +32,17 @@ const DartaTowserStore = createOverlayStore("darta-towser")();
|
||||||
const { itemList } = storeToRefs(DartaStore);
|
const { itemList } = storeToRefs(DartaStore);
|
||||||
|
|
||||||
const layout = ref({
|
const layout = ref({
|
||||||
title: [{ name: "Darta" }],
|
title: [
|
||||||
action: [{ title: "Create", emit: "onCreate" }]
|
{
|
||||||
|
name: "Darta",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
action: [
|
||||||
|
{
|
||||||
|
title: "Create",
|
||||||
|
emit: "onCreate",
|
||||||
|
},
|
||||||
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
const dateRange = ref({
|
const dateRange = ref({
|
||||||
|
|
@ -42,14 +52,36 @@ const dateRange = ref({
|
||||||
isBS: true,
|
isBS: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
// const selectedDate = ref(BStoAD(new NepaliDate().format("YYYY-MM-DD")));
|
const selectedDate = ref(BStoAD(new NepaliDate().format("YYYY-MM-DD")));
|
||||||
|
|
||||||
const headerDetails = [
|
const headerDetails = [
|
||||||
{ field: "document_no", title: "Document Number", headerFilter: true, headerFilterPlaceholder: "Search" },
|
{
|
||||||
{ field: "sender_name", title: "Sender", headerFilter: true, headerFilterPlaceholder: "Search" },
|
field: "document_no",
|
||||||
{ field: "receiver_name", title: "Receiver", headerFilter: true, headerFilterPlaceholder: "Search" },
|
title: "Document Number",
|
||||||
{ field: "received_date", title: "Received Date" },
|
headerFilter: true,
|
||||||
{ field: "is_active", title: "Status", width: "250" },
|
headerFilterPlaceholder: "Search",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: "sender_name",
|
||||||
|
title: "Sender",
|
||||||
|
headerFilter: true,
|
||||||
|
headerFilterPlaceholder: "Search",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: "receiver_name",
|
||||||
|
title: "Receiver",
|
||||||
|
headerFilter: true,
|
||||||
|
headerFilterPlaceholder: "Search",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: "received_date",
|
||||||
|
title: "Received Date",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: "is_active",
|
||||||
|
title: "Status",
|
||||||
|
width: "250",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const onCreate = () => {
|
const onCreate = () => {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user