Created Towser

src/views/Darta/Create.vue

@@ -1,44 +1,190 @@
 <template>
-    <!-- <Modal :title="modal.title" :actions="modal.action" @onClose="onClose"></Modal> -->
+    <Towser
-         <Towser
+         :show="show"
-        :show="dartaChalaniTowserStore.show"
         :title="towser.title"
-        :actions="towser.action"
+        :actions="towser.action" 
+        :width="800"
         @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>
 
-     </Towser>
+                    <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>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, reactive } from "vue";
-import { createGenericStore } from "@/stores/GenericStore";
+import { storeToRefs } from "pinia";
 import { createOverlayStore } from "@/stores/OverlayStore";
-const dartaChalaniStore = createGenericStore("user-meal-schedule")();
+import Multiselect from "vue-multiselect";
-const dartaChalaniTowserStore = createOverlayStore("darta-chalani-towser")();
+
+const DartaTowserStore = createOverlayStore("darta-towser")();
+const { show } = storeToRefs(DartaTowserStore);
+
 const towser = ref({
-    show: false,
     title: [
-        {
+        { name: "Darta", link: "#" },
-            name: "Darta",
+        { name: "Create" }
-            link: "#",
-        },
-        {
-            name: "Create",
-        },
     ],
     action: [
         {
             title: "Close",
             emit: "onClose",
-            class: "btn-outline",
         },
         {
             title: "Save",
             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 onClose = () => {};
+const fileInputRef = ref<HTMLInputElement | null>(null);
-</script>
+
+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>

src/views/Darta/Darta.vue

@@ -13,18 +13,17 @@
             />
         </template>
     </ContentLayout>
+
     <Create />
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, watch } from "vue";
+import { ref } from "vue";
 import { BStoAD, NepaliDate } from "nepali-date-library";
-
 import { storeToRefs } from "pinia";
 import Create from "@/views/Darta/Create.vue";
 import { createGenericStore } from "@/stores/GenericStore";
 import { createOverlayStore } from "@/stores/OverlayStore";
-import { Toast } from "dolphin-components";
 
 const DartaStore = createGenericStore("darta")();
 const DartaTowserStore = createOverlayStore("darta-towser")();
@@ -32,17 +31,8 @@ const DartaTowserStore = createOverlayStore("darta-towser")();
 const { itemList } = storeToRefs(DartaStore);
 
 const layout = ref({
-    title: [
+    title: [{ name: "Darta" }],
-        {
+    action: [{ title: "Create", emit: "onCreate" }]
-            name: "Darta",
-        },
-    ],
-    action: [
-        {
-            title: "Create",
-            emit: "onCreate",
-        },
-    ],
 });
 
 const dateRange = ref({
@@ -52,39 +42,17 @@ const dateRange = ref({
     isBS: true,
 });
 
-const selectedDate = ref(BStoAD(new NepaliDate().format("YYYY-MM-DD")));
+// const selectedDate = ref(BStoAD(new NepaliDate().format("YYYY-MM-DD")));
 
 const headerDetails = [
-    {
+    { field: "document_no", title: "Document Number", headerFilter: true, headerFilterPlaceholder: "Search" },
-        field: "document_no",
+    { field: "sender_name", title: "Sender", headerFilter: true, headerFilterPlaceholder: "Search" },
-        title: "Document Number",
+    { field: "receiver_name", title: "Receiver", headerFilter: true, headerFilterPlaceholder: "Search" },
-        headerFilter: true,
+    { field: "received_date", title: "Received Date" },
-        headerFilterPlaceholder: "Search",
+    { field: "is_active", title: "Status", width: "250" },
-    },
-    {
-        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 = () => {
     DartaTowserStore.open();
 };
-</script>
+</script>