Page design for darta chalani frontend
This commit is contained in:
achalise
parent
fef301045e
commit
c50e0242bf
|
|
@ -13,18 +13,17 @@
|
|||
/>
|
||||
</template>
|
||||
</ContentLayout>
|
||||
<Create />
|
||||
<CreateChalani />
|
||||
</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/Chalani/Create.vue";
|
||||
import CreateChalani from "@/views/Chalani/CreateChalani.vue";
|
||||
import { createGenericStore } from "@/stores/GenericStore";
|
||||
import { createOverlayStore } from "@/stores/OverlayStore";
|
||||
import { Toast } from "dolphin-components";
|
||||
|
||||
const ChalaniStore = createGenericStore("chalani")();
|
||||
const ChalaniTowserStore = createOverlayStore("chalani-towser")();
|
||||
|
|
@ -52,7 +51,7 @@ 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 = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,44 +0,0 @@
|
|||
<template>
|
||||
<!-- <Modal :title="modal.title" :actions="modal.action" @onClose="onClose"></Modal> -->
|
||||
<Towser
|
||||
:show="ChalaniTowserStore.show"
|
||||
:title="towser.title"
|
||||
:actions="towser.action"
|
||||
@onClose="onClose"
|
||||
>
|
||||
|
||||
</Towser>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { createGenericStore } from "@/stores/GenericStore";
|
||||
import { createOverlayStore } from "@/stores/OverlayStore";
|
||||
const ChalaniStore = createGenericStore("user-meal-schedule")();
|
||||
const ChalaniTowserStore = createOverlayStore("chalani-towser")();
|
||||
const towser = ref({
|
||||
show: false,
|
||||
title: [
|
||||
{
|
||||
name: "Chalani",
|
||||
link: "#",
|
||||
},
|
||||
{
|
||||
name: "Create",
|
||||
},
|
||||
],
|
||||
action: [
|
||||
{
|
||||
title: "Close",
|
||||
emit: "onClose",
|
||||
class: "btn-outline",
|
||||
},
|
||||
{
|
||||
title: "Save",
|
||||
emit: "onSave",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const onClose = () => {};
|
||||
</script>
|
||||
245
src/views/Chalani/CreateChalani.vue
Normal file
245
src/views/Chalani/CreateChalani.vue
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
<template>
|
||||
<Towser :show="show" :title="towser.title" :actions="towser.action" @onClose="onClose" @onSave="onSave">
|
||||
<div class="p-4 space-y-6">
|
||||
<div>
|
||||
<h2 class="font-semibold mb-4">Document Details</h2>
|
||||
<div class="grid grid-cols-3 gap-x-[5px] gap-y-[15px] mb-4">
|
||||
<div class="">
|
||||
<label class="">
|
||||
Department
|
||||
<span class="text-red-500">*</span>
|
||||
</label>
|
||||
<Multiselect
|
||||
v-model="formData.department"
|
||||
:options="departments"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
:allow-empty="false"
|
||||
:show-labels="false"
|
||||
label="name"
|
||||
track-by="id"
|
||||
placeholder="Select Department"
|
||||
/>
|
||||
</div>
|
||||
<div class="">
|
||||
<label class="">
|
||||
Category
|
||||
<span class="text-red-500">*</span>
|
||||
</label>
|
||||
<Multiselect
|
||||
v-model="formData.documentCategory"
|
||||
:options="documentCategories"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
:allow-empty="false"
|
||||
:show-labels="false"
|
||||
label="name"
|
||||
track-by="id"
|
||||
placeholder="Select Category"
|
||||
/>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="flex flex-col">
|
||||
<label class="">
|
||||
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>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-x-[5px] gap-y-[15px]">
|
||||
<div class="flex flex-col">
|
||||
<label class="">
|
||||
Subject
|
||||
<span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="formData.subject"
|
||||
type="text"
|
||||
placeholder="Enter document subject"
|
||||
class="form-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<label class="">
|
||||
Body
|
||||
<span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="formData.subject"
|
||||
type="text"
|
||||
placeholder="Enter document subject"
|
||||
class="form-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="font-semibold mb-4">Receipent Information</h2>
|
||||
<div class="grid grid-cols-3 gap-x-[5px] gap-y-[15px]">
|
||||
<div class="flex flex-col">
|
||||
<label class="">Recipient Name</label>
|
||||
<input
|
||||
v-model="formData.recipientName"
|
||||
type="text"
|
||||
placeholder="Enter Receipant Informtion"
|
||||
class="form-input"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label class="">Recipient Contact</label>
|
||||
<input
|
||||
v-model="formData.recipientContact"
|
||||
type="tel"
|
||||
class="form-input"
|
||||
placeholder="Enter Receipant Contact Information"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label class="">Receipant Address</label>
|
||||
<input
|
||||
v-model="formData.recipientAddress"
|
||||
type="text"
|
||||
class="form-input"
|
||||
placeholder="Enter Receipant address Information"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-base font-semibold mb-4">Attachments</h2>
|
||||
<div class="border-2 border-dashed p-6 text-center cursor-pointer" @click="triggerFileInput">
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
@change="handleFileUpload"
|
||||
class="hidden"
|
||||
ref="fileInputRef"
|
||||
accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.png"
|
||||
/>
|
||||
<p class="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 border p-2"
|
||||
>
|
||||
<span class="text-sm truncate">{{ file.name }}</span>
|
||||
<button type="button" @click.stop="removeFile(index)" class="text-sm">Remove</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="grid grid-cols-3 gap-x-[5px] gap-y-[15px]">
|
||||
<div class="flex flex-col">
|
||||
<label class="">Issued Date</label>
|
||||
<input v-model="formData.issuedDate" type="date" class="form-input" />
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label class="">Dispatch Date</label>
|
||||
<input v-model="formData.dispatchDate" type="date" class="form-input" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Towser>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { createOverlayStore } from "@/stores/OverlayStore";
|
||||
import Multiselect from "vue-multiselect";
|
||||
|
||||
const ChalaniTowserStore = createOverlayStore("chalani-towser")();
|
||||
const { show } = storeToRefs(ChalaniTowserStore);
|
||||
|
||||
const fileInputRef = ref<HTMLInputElement | null>(null);
|
||||
|
||||
const towser = ref({
|
||||
title: [{ name: "Chalani", link: "#" }, { name: "Create" }],
|
||||
action: [
|
||||
{
|
||||
title: "Close",
|
||||
emit: "onClose",
|
||||
},
|
||||
{
|
||||
title: "Save",
|
||||
emit: "onSave",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const formData = reactive({
|
||||
department: null,
|
||||
documentCategory: null,
|
||||
documentNumber: "",
|
||||
subject: "",
|
||||
body: "",
|
||||
recipientName: "",
|
||||
recipientContact: "",
|
||||
recipientAddress: "",
|
||||
issuedDate: "",
|
||||
dispatchDate: "",
|
||||
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.documentNumber = "";
|
||||
formData.subject = "";
|
||||
formData.attachments = [];
|
||||
};
|
||||
|
||||
const onClose = () => {
|
||||
ChalaniTowserStore.close();
|
||||
resetForm();
|
||||
};
|
||||
|
||||
const removeFile = (index: number) => {
|
||||
formData.attachments.splice(index, 1);
|
||||
};
|
||||
|
||||
const onSave = () => {
|
||||
submitForm();
|
||||
};
|
||||
|
||||
const submitForm = async () => {
|
||||
console.log("Submitting:", formData);
|
||||
onClose();
|
||||
};
|
||||
|
||||
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)];
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,19 +1,15 @@
|
|||
<template>
|
||||
<Towser
|
||||
:show="show"
|
||||
:title="towser.title"
|
||||
: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>
|
||||
<Towser :show="show" :title="towser.title" :actions="towser.action" @onClose="onClose" @onSave="onSave">
|
||||
<div class="p-4">
|
||||
<div>
|
||||
<div class="mb-5">
|
||||
<h2 class="text-base font-semibold mb-3">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>
|
||||
<div class="">
|
||||
<label class="block text-sm font-medium mb-2">
|
||||
Department
|
||||
<span class="text-red-500">*</span>
|
||||
</label>
|
||||
<Multiselect
|
||||
v-model="formData.department"
|
||||
:options="departments"
|
||||
|
|
@ -26,7 +22,10 @@
|
|||
/>
|
||||
</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>
|
||||
<label class="block text-sm font-medium mb-2">
|
||||
Category
|
||||
<span class="text-red-500">*</span>
|
||||
</label>
|
||||
<Multiselect
|
||||
v-model="formData.documentCategory"
|
||||
:options="documentCategories"
|
||||
|
|
@ -42,34 +41,58 @@
|
|||
|
||||
<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 />
|
||||
<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 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 />
|
||||
<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 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>
|
||||
<label class="block text-sm font-medium mb-2">
|
||||
Document Body
|
||||
<span class="text-red-500">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
v-model="formData.body"
|
||||
placeholder="Enter document body"
|
||||
class="w-full border p-2"
|
||||
rows="5"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-lg font-semibold text-gray-700 mb-4">Recipient Information</h2>
|
||||
<h2 class="text-base font-semibold mb-3">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>
|
||||
<label class="block text-sm font-medium 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>
|
||||
<label class="block text-sm font-medium 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>
|
||||
<label class="block text-sm font-medium mb-2">Recipient Address</label>
|
||||
<input v-model="formData.recipientAddress" type="text" class="form-input" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -78,32 +101,45 @@
|
|||
<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>
|
||||
<label class="block text-sm font-medium 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>
|
||||
<label class="block text-sm font-medium 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>
|
||||
<h2 class="text-base font-semibold mb-3">Attachments</h2>
|
||||
<div class="border-2 border-dashed p-6 text-center cursor-pointer" @click="triggerFileInput">
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
@change="handleFileUpload"
|
||||
class="hidden"
|
||||
ref="fileInputRef"
|
||||
accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.png"
|
||||
/>
|
||||
<p class="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">
|
||||
<li
|
||||
v-for="(file, index) in formData.attachments"
|
||||
:key="index"
|
||||
class="flex justify-between items-center border p-2"
|
||||
>
|
||||
<span class="text-sm truncate">{{ file.name }}</span>
|
||||
<button type="button" @click.stop="removeFile(index)" class="text-red-500 text-xs">Remove</button>
|
||||
<button type="button" @click.stop="removeFile(index)" class="text-sm">
|
||||
Remove
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</Towser>
|
||||
</template>
|
||||
|
|
@ -118,10 +154,7 @@ const DartaTowserStore = createOverlayStore("darta-towser")();
|
|||
const { show } = storeToRefs(DartaTowserStore);
|
||||
|
||||
const towser = ref({
|
||||
title: [
|
||||
{ name: "Darta", link: "#" },
|
||||
{ name: "Create" }
|
||||
],
|
||||
title: [{ name: "Darta", link: "#" }, { name: "Create" }],
|
||||
action: [
|
||||
{
|
||||
title: "Close",
|
||||
|
|
@ -132,23 +165,29 @@ const towser = ref({
|
|||
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 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[]
|
||||
documentNumber: "",
|
||||
subject: "",
|
||||
body: "",
|
||||
recipientName: "",
|
||||
recipientContact: "",
|
||||
recipientAddress: "",
|
||||
issuedDate: "",
|
||||
dispatchDate: "",
|
||||
attachments: [] as File[],
|
||||
});
|
||||
|
||||
const fileInputRef = ref<HTMLInputElement | null>(null);
|
||||
|
|
@ -159,7 +198,7 @@ const onClose = () => {
|
|||
};
|
||||
|
||||
const onSave = () => {
|
||||
submitForm();
|
||||
handleSave();
|
||||
};
|
||||
|
||||
const triggerFileInput = () => {
|
||||
|
|
@ -178,13 +217,32 @@ const removeFile = (index: number) => {
|
|||
};
|
||||
|
||||
const resetForm = () => {
|
||||
formData.documentNumber = '';
|
||||
formData.subject = '';
|
||||
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 submitForm = async () => {
|
||||
console.log("Submitting:", formData);
|
||||
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();
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -16,10 +16,9 @@
|
|||
|
||||
<Create />
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
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";
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user