ADD: Belonging Transactions To Menu
FIX: Upload Document and Image system completely FIX: ImageGallery and ImageGallery components bugs FORCE: Dark Mode FIX: Minor bug in login page
This commit is contained in:
@@ -9,18 +9,31 @@ import { useToast } from 'primevue/usetoast';
|
||||
import { BelongingService } from '@/service/BelongingService';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import MapComponent from '@/views/uikit/MapComponent.vue';
|
||||
import TransactionDialog from './TransactionDialog.vue';
|
||||
import { TransactionService } from '@/service/TransactionService';
|
||||
import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
|
||||
import Popover from 'primevue/popover';
|
||||
|
||||
// For the single popover approach
|
||||
const op = ref();
|
||||
const activeDescription = ref('');
|
||||
|
||||
const toggle = (event, data) => {
|
||||
activeDescription.value = data;
|
||||
op.value.toggle(event);
|
||||
};
|
||||
|
||||
const toast = useToast();
|
||||
const categories = ref([]);
|
||||
const selectedCategory = ref();
|
||||
const belongingName = ref('');
|
||||
const description = ref('');
|
||||
const imageNames = ref([]);
|
||||
const features = ref([]);
|
||||
const featuresValues = ref({});
|
||||
const documentNames = ref([]);
|
||||
const documentData = ref([]);
|
||||
const mainImageName = ref([]);
|
||||
const mainImageUrlsWithData = ref([]);
|
||||
const uploadedMainImageUrls = ref([]);
|
||||
const documentUrlsWithData = ref([]);
|
||||
const uploadedDocumentUrls = ref([]);
|
||||
const editMode = ref(false);
|
||||
const belonging = ref({
|
||||
location: {
|
||||
type: 'Point',
|
||||
@@ -36,13 +49,102 @@ const mapKey = 'web.79abbab4970e401781f434da3e41cfa6';
|
||||
const serviceKey = 'service.11d860f52c434bd29e5f84d0a0a41108';
|
||||
const mapRef = ref();
|
||||
|
||||
const transactions = ref([]);
|
||||
const stockData = ref({});
|
||||
|
||||
const handleDocumentUpload = (newDocumentUrls) => {
|
||||
uploadedDocumentUrls.value = newDocumentUrls.value;
|
||||
const tempConcatImages = [...belonging.value?.documentUrls, ...newDocumentUrls.value];
|
||||
documentUrlsWithData.value = fillImagesArray(tempConcatImages);
|
||||
};
|
||||
|
||||
const handleDocumentDelete = (newDocumentUrls) => {
|
||||
uploadedDocumentUrls.value = newDocumentUrls;
|
||||
const tempConcatImages = [...belonging.value?.documentUrls, ...newDocumentUrls.value];
|
||||
documentUrlsWithData.value = fillImagesArray(tempConcatImages);
|
||||
};
|
||||
|
||||
const handleDocumentGalleryDelete = (deletedDocumentUrl, index) => {
|
||||
console.log('deletedImageUrl', deletedDocumentUrl, 'at index', index);
|
||||
|
||||
// Find which array contains the image to delete
|
||||
if (index < belonging.value.documentUrls.length) {
|
||||
// Remove only at specific index from belonging.value.mainImageNames
|
||||
belonging.value.documentUrls.splice(index, 1);
|
||||
} else {
|
||||
// Adjust index for uploadedMainImageNames array
|
||||
const adjustedIndex = index - belonging.value?.documentUrls.length;
|
||||
uploadedDocumentUrls.value.splice(adjustedIndex, 1);
|
||||
}
|
||||
|
||||
// Recombine arrays
|
||||
const tempConcatImages = [...belonging.value?.documentUrls, ...uploadedDocumentUrls.value];
|
||||
documentUrlsWithData.value = fillImagesArray(tempConcatImages);
|
||||
};
|
||||
|
||||
const handleImageUpload = (newImageUrls) => {
|
||||
uploadedMainImageUrls.value = newImageUrls.value;
|
||||
const tempConcatImages = [...belonging.value?.mainImageUrls, ...newImageUrls.value];
|
||||
mainImageUrlsWithData.value = fillImagesArray(tempConcatImages);
|
||||
};
|
||||
|
||||
const handleImageDelete = (newImageUrls) => {
|
||||
uploadedMainImageUrls.value = newImageUrls;
|
||||
const tempConcatImages = [...belonging.value?.mainImageUrls.value, ...newImageUrls.value];
|
||||
mainImageUrlsWithData.value = fillImagesArray(tempConcatImages);
|
||||
};
|
||||
|
||||
const handleImageGalleryDelete = (deletedImageUrl, index) => {
|
||||
console.log('deletedImageUrl', deletedImageUrl, 'at index', index);
|
||||
|
||||
// Find which array contains the image to delete
|
||||
if (index < belonging.value?.mainImageUrls.length) {
|
||||
// Remove only at specific index from belonging.value.mainImageNames
|
||||
belonging.value?.mainImageUrls.splice(index, 1);
|
||||
} else {
|
||||
// Adjust index for uploadedMainImageNames array
|
||||
const adjustedIndex = index - belonging.value?.mainImageUrls.length;
|
||||
uploadedMainImageUrls.value?.splice(adjustedIndex, 1);
|
||||
}
|
||||
|
||||
// Recombine arrays
|
||||
const tempConcatImages = [...belonging.value?.mainImageUrls, ...uploadedMainImageUrls.value];
|
||||
mainImageUrlsWithData.value = fillImagesArray(tempConcatImages);
|
||||
};
|
||||
|
||||
onBeforeMount(async () => {
|
||||
categories.value = await CategoryService.getAllCategories();
|
||||
console.log(route.name);
|
||||
if (route.name === 'edit-belonging') {
|
||||
editMode.value = true;
|
||||
belonging.value = await BelongingService.getBelonging(route.params.belongingId);
|
||||
transactions.value = await TransactionService.getTransactionsByBelongingId(route.params.belongingId);
|
||||
stockData.value = await TransactionService.getStockByBelongingId(route.params.belongingId);
|
||||
mainImageUrlsWithData.value = fillImagesArray(belonging.value?.mainImageUrls || []);
|
||||
documentUrlsWithData.value = fillImagesArray(belonging.value?.documentUrls || []);
|
||||
}
|
||||
});
|
||||
const showTransactionDialog = ref(false);
|
||||
|
||||
const fillImagesArray = (imageUrls) => {
|
||||
const images = [];
|
||||
for (let url of imageUrls) {
|
||||
images.push({ url: url });
|
||||
}
|
||||
return images;
|
||||
};
|
||||
|
||||
const openTransactionDialog = () => {
|
||||
showTransactionDialog.value = true;
|
||||
};
|
||||
|
||||
const onTransactionSaved = async () => {
|
||||
if (editMode.value && belonging.value?._id) {
|
||||
belonging.value = await BelongingService.getBelonging(belonging.value._id);
|
||||
}
|
||||
toast.add({ severity: 'success', summary: 'موفق', detail: 'تراکنش با موفقیت ثبت شد', life: 3000 });
|
||||
};
|
||||
|
||||
const handleSelectCategory = ($event) => {
|
||||
if ($event.value) {
|
||||
belonging.value.category = $event.value;
|
||||
@@ -63,6 +165,8 @@ const saveBelonging = async () => {
|
||||
let status = 'failed';
|
||||
console.log(belonging);
|
||||
if (belonging?.value._id?.trim()) {
|
||||
belonging.value.mainImageUrls = mainImageUrlsWithData.value.map((x) => x.url);
|
||||
belonging.value.documentUrls = documentUrlsWithData.value.map((x) => x.url);
|
||||
status = await BelongingService.updateBelonging(belonging.value._id, belonging.value);
|
||||
} else {
|
||||
status = await BelongingService.createBelonging(belonging.value);
|
||||
@@ -93,63 +197,255 @@ watch(
|
||||
}, 3000);
|
||||
}
|
||||
);
|
||||
|
||||
const filters = ref({
|
||||
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
|
||||
type: { value: null, matchMode: FilterMatchMode.EQUALS },
|
||||
status: { value: null, matchMode: FilterMatchMode.EQUALS },
|
||||
value: { value: null, matchMode: FilterMatchMode.BETWEEN },
|
||||
date: { value: null, matchMode: FilterMatchMode.DATE_IS }
|
||||
});
|
||||
|
||||
// Options for filters
|
||||
const typeOptions = [
|
||||
{ label: 'واریز', value: 'deposit' },
|
||||
{ label: 'برداشت', value: 'withdraw' }
|
||||
];
|
||||
|
||||
const statusOptions = [
|
||||
{ label: 'ناموفق', value: 'failed' },
|
||||
{ label: 'در انتظار', value: 'pending' },
|
||||
{ label: 'تکمیل شده', value: 'finished' }
|
||||
];
|
||||
|
||||
// Helper functions for translations and formatting
|
||||
const getTypeTranslation = (type) => {
|
||||
switch (type) {
|
||||
case 'deposit':
|
||||
return 'واریز';
|
||||
case 'withdraw':
|
||||
return 'برداشت';
|
||||
default:
|
||||
return type;
|
||||
}
|
||||
};
|
||||
|
||||
const getTypeSeverity = (type) => {
|
||||
switch (type) {
|
||||
case 'deposit':
|
||||
return 'success';
|
||||
case 'withdraw':
|
||||
return 'danger';
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusTranslation = (status) => {
|
||||
switch (status) {
|
||||
case 'failed':
|
||||
return 'ناموفق';
|
||||
case 'pending':
|
||||
return 'در انتظار';
|
||||
case 'finished':
|
||||
return 'تکمیل شده';
|
||||
default:
|
||||
return status;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusSeverity = (status) => {
|
||||
switch (status) {
|
||||
case 'failed':
|
||||
return 'danger';
|
||||
case 'pending':
|
||||
return 'warning';
|
||||
case 'finished':
|
||||
return 'success';
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const formatCurrency = (value) => {
|
||||
return new Intl.NumberFormat('fa-IR', {
|
||||
style: 'currency',
|
||||
currency: 'IRR',
|
||||
minimumFractionDigits: 0
|
||||
}).format(Math.abs(value));
|
||||
};
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
const date = new Date(dateString);
|
||||
return new Intl.DateTimeFormat('fa-IR', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
}).format(date);
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<TransactionDialog v-model:visible="showTransactionDialog" :belongingId="belonging._id" @saved="onTransactionSaved" />
|
||||
<div className="card">
|
||||
<div class="font-semibold text-xl mb-4">ایجاد اموال</div>
|
||||
<p>از طریق این صفحه می توانید اموال جدید را به سوابق اضافه کنید.</p>
|
||||
<div class="mb-4" v-if="editMode === true">
|
||||
<Button @click="openTransactionDialog">افزایش یا کاهش موجودی</Button>
|
||||
</div>
|
||||
<div class="font-semibold text-xl mb-4" v-if="editMode === false">ایجاد اموال</div>
|
||||
<p v-if="editMode === false">از طریق این صفحه می توانید اموال جدید را به سوابق اضافه کنید.</p>
|
||||
<div class="font-semibold text-xl mb-4" v-if="editMode === true">
|
||||
در حال ویرایش
|
||||
<span class="text-primary">{{ belonging.name }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex my-6">
|
||||
<div class="w-3/4 ml-3">
|
||||
<div class="">
|
||||
<label> نام دارایی </label>
|
||||
<label class="text-lg"> نام دارایی </label>
|
||||
<InputText v-model="belonging.name" class="w-full my-2" placeholder="مثلا: 100 عدد کولر گازی" />
|
||||
</div>
|
||||
<div class="my-6">
|
||||
<label> توضیحات </label>
|
||||
<label class="text-lg"> توضیحات </label>
|
||||
<Textarea v-model="belonging.description" class="w-full my-2" placeholder="مثلا: در تاریخ 1403/09/11 خریداری شد." rows="6" />
|
||||
</div>
|
||||
<div class="my-6">
|
||||
<label> تصاویر، فایل ها و مدارک </label>
|
||||
<ImageUploader v-model="belonging.documentNames" :max-files="50" mode="private" delete-endpoint="/api/files/bucket/delete/belonging-documents" upload-endpoint="/api/files/bucket/upload-multi-filepond/belonging-documents" />
|
||||
<div v-if="signedImageUrls.length > 0">
|
||||
<ImageGallery v-model="documentData" gallery-id="images" />
|
||||
<label class="text-lg"> تصاویر، فایل ها و مدارک </label>
|
||||
<ImageUploader
|
||||
v-model="uploadedDocumentUrls"
|
||||
:max-files="50"
|
||||
mode="private"
|
||||
delete-endpoint="/api/files/bucket/delete-file/belonging-documents"
|
||||
upload-endpoint="/api/files/bucket/upload-multi-filepond/belonging-documents"
|
||||
@upload="handleDocumentUpload"
|
||||
@delete="handleDocumentDelete"
|
||||
/>
|
||||
<div v-if="documentUrlsWithData.length > 0">
|
||||
<ImageGallery v-model="documentUrlsWithData" gallery-id="documents" @delete-image="handleDocumentGalleryDelete" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-6" v-if="signedDocumentsUrls.length > 0">
|
||||
<label> فایل ها و مدارک </label>
|
||||
<label class="text-lg"> فایل ها و مدارک </label>
|
||||
</div>
|
||||
<div class="my-6 max-h-96 overflow-y-auto" v-if="features.length > 0">
|
||||
<label> اطلاعات دارایی </label>
|
||||
<label class="text-lg"> اطلاعات دارایی </label>
|
||||
<div class="my-6 mr-10" v-for="feature of features">
|
||||
<label>{{ feature.nativeName }}</label>
|
||||
<InputText v-model="featuresValues[feature._id]" class="w-1/3 my-2 block" placeholder="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-10">
|
||||
<label> موقعیت دارایی </label>
|
||||
<label class="text-lg"> موقعیت دارایی </label>
|
||||
<MapComponent v-model="belonging.location.coordinates" />
|
||||
<!-- <MapIrComponent />-->
|
||||
</div>
|
||||
|
||||
<div class="my-10" v-if="editMode">
|
||||
<label class="text-lg"> موجودی </label>
|
||||
<p class="mx-3 text-blue-400">موجودی فعلی : {{ stockData.finishedInventory }}</p>
|
||||
<p class="mx-3 text-green-400">موجودی در حال اضافه شدن : {{ stockData.pendingDepositsInventory }}</p>
|
||||
<p class="mx-3 text-red-400">
|
||||
موجودی در حال کم شدن : <span dir="ltr">{{ stockData.pendingWithdrawsInventory }}</span>
|
||||
</p>
|
||||
<div class="mx-6 py-4">
|
||||
<label> تراکنش ها </label>
|
||||
<div class="card">
|
||||
<DataTable
|
||||
:value="transactions"
|
||||
paginator
|
||||
:rows="20"
|
||||
:rowsPerPageOptions="[20, 50, 100]"
|
||||
tableStyle="min-width: 50rem"
|
||||
stripedRows
|
||||
v-model:filters="filters"
|
||||
filterDisplay="menu"
|
||||
:globalFilterFields="['type', 'status', 'value', 'date', 'description']"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex justify-content-between">
|
||||
<h3 class="m-0">تراکنشها</h3>
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters['global'].value" placeholder="جستجو..." />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<Column field="id" header="شناسه" sortable style="width: 25%"></Column>
|
||||
|
||||
<Column field="type" header="نوع" sortable style="width: 15%">
|
||||
<template #body="{ data }">
|
||||
<Tag :severity="getTypeSeverity(data.type)" :value="getTypeTranslation(data.type)" />
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<Dropdown v-model="filterModel.value" @change="filterCallback()" :options="typeOptions" optionLabel="label" optionValue="value" placeholder="انتخاب نوع" class="p-column-filter" showClear />
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column field="status" header="وضعیت" sortable style="width: 15%">
|
||||
<template #body="{ data }">
|
||||
<Tag :severity="getStatusSeverity(data.status)" :value="getStatusTranslation(data.status)" />
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<Dropdown v-model="filterModel.value" @change="filterCallback()" :options="statusOptions" optionLabel="label" optionValue="value" placeholder="انتخاب وضعیت" class="p-column-filter" showClear />
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column field="value" header="تعداد" sortable style="width: 15%">
|
||||
<template #body="{ data }">
|
||||
<span :class="data.value >= 0 ? 'text-green-500' : 'text-red-500'" dir="ltr"> {{ data.value }} </span>
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column field="date" header="تاریخ" sortable style="width: 20%">
|
||||
<template #body="{ data }">
|
||||
{{ formatDate(data.date) }}
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column field="description" header="توضیحات" style="width: 10%">
|
||||
<template #body="{ data }">
|
||||
<Button v-if="data.description" icon="pi pi-info-circle" text rounded aria-label="توضیحات" @click="toggle($event, data.description)" />
|
||||
</template>
|
||||
</Column>
|
||||
<Popover ref="op" :showCloseIcon="true" :autoHide="false">
|
||||
<div class="p-2">{{ activeDescription }}</div>
|
||||
</Popover>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/4">
|
||||
<div>
|
||||
<label> دسته بندی </label>
|
||||
<Listbox @change="handleSelectCategory($event)" :options="categories" optionLabel="nativeName" optionValue="_id" checkmark :highlightOnSelect="false" class="w-full my-2" />
|
||||
<label class="text-lg"> دسته بندی </label>
|
||||
<Listbox @change="handleSelectCategory($event)" v-model="belonging.category" :options="categories" optionLabel="nativeName" optionValue="_id" checkmark :highlightOnSelect="false" class="w-full my-2" />
|
||||
</div>
|
||||
<div class="my-6">
|
||||
<label> تصویر اصلی </label>
|
||||
<label class="text-lg"> تصویر اصلی </label>
|
||||
<ImageUploader
|
||||
v-model="belonging.mainImageName"
|
||||
v-model="uploadedMainImageUrls"
|
||||
accepted-files="image/*"
|
||||
:max-files="1"
|
||||
mode="private"
|
||||
delete-endpoint="/api/files/bucket/delete/belonging-images"
|
||||
upload-endpoint="/api/files/bucket/upload-multi-filepond/belonging-images"
|
||||
@upload="handleImageUpload"
|
||||
@delete="handleImageDelete"
|
||||
/>
|
||||
<div class="my-10 border rounded-lg p-3 border-surface-700" v-if="mainImageUrlsWithData.length > 0">
|
||||
<label for="ImageGallery">گالری تصاویر</label>
|
||||
<div class="">
|
||||
<ImageGallery v-model="mainImageUrlsWithData" gallery-id="productImages" @delete-image="handleImageGalleryDelete" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-8">
|
||||
<label> برچسب ها </label>
|
||||
<label class="text-lg"> واحد </label>
|
||||
<InputText v-model="belonging.unit" class="w-full" placeholder="مثلا: عدد، متر، و..." />
|
||||
</div>
|
||||
<div class="my-8">
|
||||
<label class="text-lg"> برچسب ها </label>
|
||||
<KiwiChips v-model="belonging.tags" class="w-full" placeholder="مثلا: زمین، ملک، کیانپارس..." />
|
||||
</div>
|
||||
</div>
|
||||
@@ -163,3 +459,9 @@ watch(
|
||||
<style>
|
||||
@import url('leaflet/dist/leaflet.css');
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
label {
|
||||
@apply text-primary;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -34,28 +34,6 @@ function hideDialog() {
|
||||
submitted.value = false;
|
||||
}
|
||||
|
||||
function saveProduct() {
|
||||
submitted.value = true;
|
||||
|
||||
if (product?.value.name?.trim()) {
|
||||
if (product.value.id) {
|
||||
product.value.inventoryStatus = product.value.inventoryStatus.value ? product.value.inventoryStatus.value : product.value.inventoryStatus;
|
||||
products.value[findIndexById(product.value.id)] = product.value;
|
||||
toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 });
|
||||
} else {
|
||||
product.value.id = createId();
|
||||
product.value.code = createId();
|
||||
product.value.image = 'product-placeholder.svg';
|
||||
product.value.inventoryStatus = product.value.inventoryStatus ? product.value.inventoryStatus.value : 'INSTOCK';
|
||||
products.value.push(product.value);
|
||||
toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });
|
||||
}
|
||||
|
||||
productDialog.value = false;
|
||||
product.value = {};
|
||||
}
|
||||
}
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
function editBelonging(belongingId) {
|
||||
@@ -166,14 +144,14 @@ function getStatusLabel(status) {
|
||||
<Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
|
||||
<Column header="تصویر">
|
||||
<template #body="slotProps">
|
||||
<img :src="`${slotProps.data.mainImageUrl}`" :alt="slotProps.data.name" class="rounded" style="width: 64px" />
|
||||
<img :src="`${slotProps.data.mainImageUrls[0]}`" :alt="slotProps.data.name" class="rounded" style="max-width: 64px" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="belongingCode" header="کد" style="min-width: 12rem"></Column>
|
||||
<Column field="belongingCode" header="کد" style="min-width: 4rem"></Column>
|
||||
<Column field="name" header="نام" sortable style="min-width: 16rem"></Column>
|
||||
<Column field="category" header="دسته بندی" sortable style="min-width: 10rem">
|
||||
<Column field="category" header="دسته بندی" sortable style="min-width: 6rem">
|
||||
<template #body="slotProps">
|
||||
{{ slotProps.data.category.nativeName }}
|
||||
{{ slotProps.data.category?.nativeName }}
|
||||
</template>
|
||||
</Column>
|
||||
<Column :exportable="false" style="min-width: 12rem">
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { TransactionService } from '@/service/TransactionService';
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
belongingId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:visible', 'saved']);
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
const transaction = reactive({
|
||||
type: 'deposit',
|
||||
status: 'pending',
|
||||
value: null,
|
||||
description: '',
|
||||
date: new Date().toISOString(),
|
||||
belongingId: props.belongingId
|
||||
});
|
||||
|
||||
const typeOptions = [
|
||||
{ label: 'واریز', value: 'deposit' },
|
||||
{ label: 'برداشت', value: 'withdraw' }
|
||||
];
|
||||
|
||||
const statusOptions = [
|
||||
{ label: 'در انتظار', value: 'pending' },
|
||||
{ label: 'تکمیل شده', value: 'finished' },
|
||||
{ label: 'ناموفق', value: 'failed' }
|
||||
];
|
||||
|
||||
const errors = reactive({
|
||||
type: '',
|
||||
status: '',
|
||||
value: ''
|
||||
});
|
||||
|
||||
const validateForm = () => {
|
||||
let isValid = true;
|
||||
|
||||
if (!transaction.type) {
|
||||
errors.type = 'نوع تراکنش الزامی است';
|
||||
isValid = false;
|
||||
} else {
|
||||
errors.type = '';
|
||||
}
|
||||
|
||||
if (!transaction.status) {
|
||||
errors.status = 'وضعیت تراکنش الزامی است';
|
||||
isValid = false;
|
||||
} else {
|
||||
errors.status = '';
|
||||
}
|
||||
|
||||
if (!transaction.value || transaction.value <= 0) {
|
||||
errors.value = 'مقدار باید بزرگتر از صفر باشد';
|
||||
isValid = false;
|
||||
} else {
|
||||
errors.value = '';
|
||||
}
|
||||
|
||||
return isValid;
|
||||
};
|
||||
|
||||
const saveTransaction = async () => {
|
||||
if (!validateForm()) {
|
||||
toast.add({ severity: 'error', summary: 'خطا', detail: 'لطفا تمام فیلدهای الزامی را پر کنید', life: 3000 });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await TransactionService.createTransaction(transaction);
|
||||
if (result === 'success') {
|
||||
toast.add({ severity: 'success', summary: 'موفق', detail: 'تراکنش با موفقیت ثبت شد', life: 3000 });
|
||||
emit('saved');
|
||||
closeDialog();
|
||||
} else {
|
||||
toast.add({ severity: 'error', summary: 'خطا', detail: result || 'خطا در ثبت تراکنش', life: 3000 });
|
||||
}
|
||||
} catch (error) {
|
||||
toast.add({ severity: 'error', summary: 'خطا', detail: 'خطا در ارتباط با سرور', life: 3000 });
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
emit('update:visible', false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog v-model:visible="props.visible" :modal="true" :closable="true" :style="{ width: '450px' }" header="افزایش یا کاهش موجودی" @update:visible="closeDialog">
|
||||
<div class="p-fluid">
|
||||
<div class="field mb-4">
|
||||
<label class="font-bold mb-2 block">نوع تراکنش</label>
|
||||
<SelectButton v-model="transaction.type" :options="typeOptions" optionLabel="label" optionValue="value" class="w-full" />
|
||||
<small v-if="errors.type" class="p-error">{{ errors.type }}</small>
|
||||
</div>
|
||||
|
||||
<div class="field mb-4">
|
||||
<label class="font-bold mb-2 block">وضعیت</label>
|
||||
<SelectButton v-model="transaction.status" :options="statusOptions" optionLabel="label" optionValue="value" class="w-full" />
|
||||
<small v-if="errors.status" class="p-error">{{ errors.status }}</small>
|
||||
</div>
|
||||
|
||||
<div class="field mb-4">
|
||||
<label class="font-bold mb-2 block">مقدار</label>
|
||||
<InputNumber v-model="transaction.value" placeholder="مقدار را وارد کنید" class="w-full" :min="0" />
|
||||
<small v-if="errors.value" class="p-error">{{ errors.value }}</small>
|
||||
</div>
|
||||
|
||||
<div class="field mb-4">
|
||||
<label class="font-bold mb-2 block">توضیحات</label>
|
||||
<Textarea v-model="transaction.description" placeholder="توضیحات تراکنش را وارد کنید" rows="3" class="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button label="انصراف" icon="pi pi-times" class="p-button-text" @click="closeDialog" />
|
||||
<Button label="ذخیره" icon="pi pi-check" @click="saveTransaction" />
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -3,43 +3,43 @@ import FloatingConfigurator from '@/components/FloatingConfigurator.vue';
|
||||
import { onBeforeMount, ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { useRouter } from 'vue-router';
|
||||
const router = useRouter()
|
||||
const router = useRouter();
|
||||
const email = ref('');
|
||||
const password = ref('');
|
||||
const checked = ref(false);
|
||||
const loginLoading = ref(false)
|
||||
const loginLoading = ref(false);
|
||||
import Cookies from 'js-cookie';
|
||||
const login = async () => {
|
||||
try {
|
||||
loginLoading.value = true
|
||||
const response = await axios.post('/api/users/user/login-email', {
|
||||
loginLoading.value = true;
|
||||
const response = await axios.post('/api/users/login-email', {
|
||||
email: email.value,
|
||||
password: password.value,
|
||||
})
|
||||
console.log(response)
|
||||
Cookies.set('bm-token', response.data.data.token)
|
||||
localStorage.setItem('bm-token', response.data.data.token)
|
||||
await router.push('/')
|
||||
password: password.value
|
||||
});
|
||||
console.log(response);
|
||||
Cookies.set('bm-token', response.data.data.token);
|
||||
localStorage.setItem('bm-token', response.data.data.token);
|
||||
await router.push('/');
|
||||
} catch (error) {
|
||||
console.log('err', error)
|
||||
loginLoading.value = false
|
||||
console.log('err', error);
|
||||
loginLoading.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeMount(async () => {
|
||||
const token = Cookies.get('bm-token')
|
||||
const token = Cookies.get('bm-token');
|
||||
try {
|
||||
const response = await axios.get('/api/users/user/get-self', {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
console.log(response)
|
||||
await router.push('/')
|
||||
});
|
||||
console.log(response);
|
||||
await router.push('/');
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
console.log(error);
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
Reference in New Issue
Block a user