ADD: Transactions List Page
FIX: Dates
This commit is contained in:
@@ -13,7 +13,7 @@ const model = ref([
|
||||
items: [
|
||||
{ label: 'ایجاد اموال', icon: 'pi pi-fw pi-file-plus', to: '/belonging/create-belonging' },
|
||||
{ label: 'لیست اموال', icon: 'pi pi-fw pi-file', to: '/belonging/list-belongings' },
|
||||
{ label: 'لیست تراکنش اموال', icon: 'pi pi-fw pi-plus', to: '/transactions/belonging-transactions' }
|
||||
{ label: 'لیست تراکنش اموال', icon: 'pi pi-list-check', to: '/transactions/list-transactions' }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@@ -63,6 +63,11 @@ const router = createRouter({
|
||||
name: 'list-features',
|
||||
component: () => import('@/views/pages/Features/ListFeatures.vue')
|
||||
},
|
||||
{
|
||||
path: '/transactions/list-transactions',
|
||||
name: 'list-transactions',
|
||||
component: () => import('@/views/pages/Transaction/ListTransactions.vue')
|
||||
},
|
||||
{
|
||||
path: '/uikit/formlayout',
|
||||
name: 'formlayout',
|
||||
|
||||
@@ -1,6 +1,16 @@
|
||||
import axios from 'axios';
|
||||
|
||||
export const TransactionService = {
|
||||
_getAuthHeader: () => {
|
||||
const bmToken = document.cookie
|
||||
.split('; ')
|
||||
.find((row) => row.startsWith('bm-token='))
|
||||
?.split('=')[1];
|
||||
|
||||
return {
|
||||
Authorization: `Bearer ${bmToken}`
|
||||
};
|
||||
},
|
||||
/**
|
||||
* Get a single transaction by ID
|
||||
* @param {string} transactionId - The transaction ID
|
||||
@@ -143,5 +153,36 @@ export const TransactionService = {
|
||||
console.log(err);
|
||||
return err.response?.data?.message || 'Error deleting transaction';
|
||||
}
|
||||
},
|
||||
|
||||
searchTransactions: async (query) => {
|
||||
const config = {
|
||||
method: 'get',
|
||||
url: '/api/transactions/admin/search',
|
||||
withCredentials: true,
|
||||
params: query,
|
||||
headers: TransactionService._getAuthHeader()
|
||||
};
|
||||
try {
|
||||
const response = await axios(config);
|
||||
return response.data;
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
},
|
||||
|
||||
indexTransactions: async () => {
|
||||
const config = {
|
||||
method: 'post',
|
||||
url: '/api/transactions/admin/index-all',
|
||||
withCredentials: true,
|
||||
headers: TransactionService._getAuthHeader()
|
||||
};
|
||||
try {
|
||||
const response = await axios(config);
|
||||
return response.data;
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -142,7 +142,7 @@ 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 });
|
||||
// toast.add({ severity: 'success', summary: 'موفق', detail: 'تراکنش با موفقیت ثبت شد', life: 3000 });
|
||||
};
|
||||
|
||||
const handleSelectCategory = ($event) => {
|
||||
@@ -259,7 +259,7 @@ const getStatusSeverity = (status) => {
|
||||
case 'failed':
|
||||
return 'danger';
|
||||
case 'pending':
|
||||
return 'warning';
|
||||
return 'warn';
|
||||
case 'finished':
|
||||
return 'success';
|
||||
default:
|
||||
|
||||
@@ -23,8 +23,7 @@ const transaction = reactive({
|
||||
status: 'pending',
|
||||
value: null,
|
||||
description: '',
|
||||
date: new Date().toISOString(),
|
||||
belongingId: props.belongingId
|
||||
date: new Date().toISOString()
|
||||
});
|
||||
|
||||
const typeOptions = [
|
||||
@@ -78,6 +77,7 @@ const saveTransaction = async () => {
|
||||
}
|
||||
|
||||
try {
|
||||
transaction.belongingId = props.belongingId;
|
||||
const result = await TransactionService.createTransaction(transaction);
|
||||
if (result === 'success') {
|
||||
toast.add({ severity: 'success', summary: 'موفق', detail: 'تراکنش با موفقیت ثبت شد', life: 3000 });
|
||||
|
||||
@@ -87,7 +87,7 @@ const saveFeature = async () => {
|
||||
<TabPanel v-for="category in categories" :key="category._id + '_content'" :value="category._id">
|
||||
<p>لیست ویژگی های {{ category.nativeName }}</p>
|
||||
<div class="w-1/3 my-3">
|
||||
<Listbox filter checkmark :options="category.features" option-value="_id" option-label="nativeName" @item-dblclick="editFeature($event, category._id)" emptyMessage="موردی برای نمایش وجود ندارد."></Listbox>
|
||||
<Listbox filter :options="category.features" option-value="_id" option-label="nativeName" @item-dblclick="editFeature($event, category._id)" emptyMessage="موردی برای نمایش وجود ندارد."></Listbox>
|
||||
<Button class="my-3" :categoryId="category._id" @click="openNew(category._id)">افزودن</Button>
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
||||
@@ -0,0 +1,346 @@
|
||||
<script setup>
|
||||
import { FilterMatchMode } from '@primevue/core/api';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { TransactionService } from '@/service/TransactionService';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import Chip from 'primevue/chip';
|
||||
import InputIcon from 'primevue/inputicon';
|
||||
import IconField from 'primevue/iconfield';
|
||||
import LoadingCheck from '@/components/LoadingCheck.vue';
|
||||
import Popover from 'primevue/popover';
|
||||
onMounted(() => {
|
||||
loadData();
|
||||
});
|
||||
|
||||
const toast = useToast();
|
||||
const dt = ref();
|
||||
const transactions = ref();
|
||||
const transactionDialog = ref(false);
|
||||
const deleteTransactionDialog = ref(false);
|
||||
const deleteTransactionsDialog = ref(false);
|
||||
const transaction = ref({});
|
||||
const selectedTransactions = ref();
|
||||
const filters = ref({
|
||||
global: { value: null, matchMode: FilterMatchMode.CONTAINS }
|
||||
});
|
||||
const submitted = ref(false);
|
||||
|
||||
function hideDialog() {
|
||||
transactionDialog.value = false;
|
||||
submitted.value = false;
|
||||
}
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
function editTransaction(transactionId) {
|
||||
router.push('/transaction/edit-transaction/' + transactionId);
|
||||
}
|
||||
|
||||
const route = useRoute();
|
||||
const searchPhrase = ref(route.query.query);
|
||||
const page = ref(Number(route.query.page) || 1);
|
||||
const per_page = ref(Number(route.query.per_page) || 20);
|
||||
const totalCount = ref(0);
|
||||
const pagesCount = ref(0);
|
||||
|
||||
let searchTimeout;
|
||||
|
||||
// Update your search watcher
|
||||
watch(searchPhrase, (newPhrase, oldPhrase) => {
|
||||
if (newPhrase !== oldPhrase) {
|
||||
// Debounce search to avoid too many requests
|
||||
if (searchTimeout) clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(() => {
|
||||
router.push({
|
||||
query: {
|
||||
...route.query,
|
||||
query: newPhrase || undefined,
|
||||
page: 1 // Reset to first page on new search
|
||||
}
|
||||
});
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => route.query,
|
||||
() => {
|
||||
page.value = Number(route.query.page) || 1;
|
||||
per_page.value = Number(route.query.per_page) || 20;
|
||||
searchPhrase.value = route.query.query || '';
|
||||
loadData();
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
const handleRemoveSearch = () => {
|
||||
removeFromQuery('searchPhrase'); // Ensure 'searchPhrase' is the correct key
|
||||
searchPhrase.value = '';
|
||||
};
|
||||
|
||||
const removeFromQuery = (queryToRemove) => {
|
||||
const newQuery = { ...route.query };
|
||||
|
||||
delete newQuery[queryToRemove];
|
||||
|
||||
router.replace({ query: newQuery }).catch((err) => {
|
||||
if (err.name !== 'NavigationDuplicated') {
|
||||
console.error(err);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const onPageChange = (event) => {
|
||||
const newPage = event.page + 1;
|
||||
const newPerPage = event.rows;
|
||||
|
||||
if (page.value !== newPage || per_page.value !== newPerPage) {
|
||||
router.push({
|
||||
query: {
|
||||
...route.query,
|
||||
page: newPage,
|
||||
per_page: newPerPage
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const loadData = () => {
|
||||
TransactionService.searchTransactions(route.query)
|
||||
.then((response) => {
|
||||
console.log('response', response);
|
||||
transactions.value = response.transactions || response;
|
||||
totalCount.value = response.totalCount || response.length || 0;
|
||||
pagesCount.value = Math.ceil(totalCount.value / per_page.value);
|
||||
})
|
||||
.catch((error) => {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: 'خطا در دریافت اطلاعات', life: 3000 });
|
||||
console.error('Error loading data:', error);
|
||||
});
|
||||
};
|
||||
|
||||
const loading = ref(false);
|
||||
const indexingFinished = ref(false);
|
||||
const indexingMessage = ref('در حال ایندکس...');
|
||||
const animationKey = ref(0);
|
||||
|
||||
// Function to handle indexing
|
||||
const indexTransactions = async () => {
|
||||
loading.value = true;
|
||||
indexingFinished.value = false;
|
||||
|
||||
try {
|
||||
// Your indexing logic here
|
||||
await TransactionService.indexTransactions();
|
||||
// When indexing completes
|
||||
TransactionService.searchTransactions(route.query)
|
||||
.then((response) => {
|
||||
console.log('response', response);
|
||||
transactions.value = response.transactions || response;
|
||||
totalCount.value = response.totalCount || response.length || 0;
|
||||
pagesCount.value = Math.ceil(totalCount.value / per_page.value);
|
||||
})
|
||||
.catch((error) => {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: 'خطا در دریافت اطلاعات', life: 3000 });
|
||||
console.error('Error loading data:', error);
|
||||
});
|
||||
indexingFinished.value = true;
|
||||
indexingMessage.value = 'ایندکس با موفقیت انجام شد';
|
||||
} catch (error) {
|
||||
indexingMessage.value = 'خطا در ایندکس';
|
||||
} finally {
|
||||
// Reset after some time
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
animationKey.value++; // Force re-render of animation
|
||||
}, 3000);
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (timestamp) => {
|
||||
const date = new Date(timestamp * 1000);
|
||||
|
||||
// Format using Intl.DateTimeFormat
|
||||
return new Intl.DateTimeFormat('fa-IR', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
}).format(date);
|
||||
};
|
||||
|
||||
// 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 'warn';
|
||||
case 'finished':
|
||||
return 'success';
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const op = ref();
|
||||
const activeDescription = ref('');
|
||||
|
||||
const toggle = (event, data) => {
|
||||
activeDescription.value = data;
|
||||
op.value.toggle(event);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<Toolbar class="mb-6">
|
||||
<template #start>
|
||||
<!-- <Button label="ساخت تراکنش جدید" icon="pi pi-plus" severity="secondary" class="mr-2 mx-3" @click="router.push('/transaction/create-transaction')" />-->
|
||||
<Button @click="indexTransactions" :disabled="loading" severity="secondary mx-3" class="indexing-button">
|
||||
<div class="button-content">
|
||||
<div v-if="!loading">ایندکس کردن تراکنشها</div>
|
||||
<div v-else class="loading-content flex">
|
||||
<LoadingCheck :key="animationKey" :is-complete="indexingFinished" />
|
||||
<Transition enter-active-class="animate__animated animate__fadeIn animate__fast" leave-active-class="animate__animated animate__fadeOut animate__fast" mode="out-in">
|
||||
<div :key="indexingMessage">{{ indexingMessage }}</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</template>
|
||||
|
||||
<template #end> </template>
|
||||
</Toolbar>
|
||||
|
||||
<DataTable
|
||||
ref="dt"
|
||||
v-model:selection="selectedTransactions"
|
||||
:value="transactions"
|
||||
dataKey="id"
|
||||
:paginator="true"
|
||||
:rows="per_page"
|
||||
:filters="filters"
|
||||
:total-records="totalCount"
|
||||
:current-page="page - 1"
|
||||
@page="onPageChange($event)"
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
||||
:rowsPerPageOptions="[20, 40, 80]"
|
||||
currentPageReportTemplate="نمایش {first} تا {last} از {totalRecords} تراکنش"
|
||||
tableStyle="min-width: 50rem"
|
||||
stripedRows
|
||||
filterDisplay="menu"
|
||||
:globalFilterFields="['type', 'status', 'belongingName', 'createdAt', 'description']"
|
||||
>
|
||||
<template #header>
|
||||
<div class="">
|
||||
<h4 class="m-0">مدیریت تراکنشها</h4>
|
||||
<div class="p-input-icon-right w-1/3 mt-2 lg:mt-0">
|
||||
<InputText v-model="searchPhrase" placeholder="جستجو..." class="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
<Chip v-if="searchPhrase" class="mx-2 mt-2" :label="searchPhrase" removable @remove="handleRemoveSearch" />
|
||||
</template>
|
||||
|
||||
<Column field="_id" header="شناسه" sortable style="width: 10%"></Column>
|
||||
<Column field="belongingName" header="دارایی" sortable style="width: 15%"></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="createdAt" header="تاریخ" sortable style="width: 15%">
|
||||
<template #body="slotProps">
|
||||
{{ formatDate(slotProps.data.createdAt) }}
|
||||
</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>
|
||||
</DataTable>
|
||||
|
||||
<Popover ref="op" :showCloseIcon="true" :autoHide="false">
|
||||
<div class="p-2">{{ activeDescription }}</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
<Dialog v-model:visible="deleteTransactionDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
|
||||
<div class="flex items-center gap-4">
|
||||
<i class="pi pi-exclamation-triangle !text-3xl" />
|
||||
<span v-if="transaction"
|
||||
>Are you sure you want to delete transaction <b>{{ transaction.transactionCode }}</b
|
||||
>?</span
|
||||
>
|
||||
</div>
|
||||
<template #footer>
|
||||
<Button label="خیر" icon="pi pi-times" text @click="deleteTransactionDialog = false" />
|
||||
<Button label="بله" icon="pi pi-check" @click="deleteTransaction" />
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
<Dialog v-model:visible="deleteTransactionsDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
|
||||
<div class="flex items-center gap-4">
|
||||
<i class="pi pi-exclamation-triangle !text-3xl" />
|
||||
<span>Are you sure you want to delete the selected transactions?</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
<Button label="No" icon="pi pi-times" text @click="deleteTransactionsDialog = false" />
|
||||
<Button label="Yes" icon="pi pi-check" text @click="deleteSelectedTransactions" />
|
||||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -16,7 +16,12 @@ const login = async () => {
|
||||
email: email.value,
|
||||
password: password.value
|
||||
});
|
||||
const env = import.meta.env.VITE_ENV;
|
||||
if (env === 'production') {
|
||||
Cookies.set('bm-token', response.data.data.token, { sameSite: 'none', secure: true, expires: 1000, domain: '.chbk.app' });
|
||||
} else {
|
||||
Cookies.set('bm-token', response.data.data.token, { sameSite: 'none', secure: true, expires: 1000 });
|
||||
}
|
||||
localStorage.setItem('bm-token', response.data.data.token);
|
||||
await router.push('/');
|
||||
} catch (error) {
|
||||
|
||||
Reference in New Issue
Block a user