chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: add grid / table view to product service

Browse source
This commit is contained in:
Methapon2001 2024-07-09 11:19:10 +07:00
parent dbb366ead3
commit face6973cd
1 changed files with 509 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

613
src/pages/04_product-service/MainPage.vue
View file

@ -1,8 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch } from 'vue'; import { ref, watch, reactive } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { onMounted } from 'vue'; import { onMounted } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import type { QTableProps } from 'quasar';
import ItemCard from 'components/ItemCard.vue'; import ItemCard from 'components/ItemCard.vue';
import AppBox from 'components/app/AppBox.vue'; import AppBox from 'components/app/AppBox.vue';
import AddButton from 'components/AddButton.vue'; import AddButton from 'components/AddButton.vue';
@ -120,6 +121,8 @@ const currentStatusProduct = ref(false);
const drawerInfo = ref(false); const drawerInfo = ref(false);
const isEdit = ref(false); const isEdit = ref(false);
const modeView = ref(false);
const dialogInputForm = ref(false); const dialogInputForm = ref(false);
const dialogProduct = ref(false); const dialogProduct = ref(false);
const dialogService = ref(false); const dialogService = ref(false);
@ -149,7 +152,7 @@ const service = ref<(Service & { type: 'service' })[]>();
const resultSearchProduct = ref<ProductList[]>(); const resultSearchProduct = ref<ProductList[]>();
const productAndService = ref<ServiceAndProduct[]>([]); const productAndService = ref<ServiceAndProduct[]>([]);
const productAndServiceTab = ref<'all' | 'product' | 'service'>('all'); const productAndServiceTab = ref<'product' | 'service'>('service');
const manageWorkNameDialog = ref(false); const manageWorkNameDialog = ref(false);
const previousValue = ref(); const previousValue = ref();
@ -200,6 +203,69 @@ const serviceTab = [
]; ];
const hideStat = ref(false); const hideStat = ref(false);
const tbColumn = {
product: [
{ name: 'productName', align: 'left', label: 'productName', field: 'name' },
{
name: 'productDetail',
align: 'left',
label: 'productDetail',
field: 'detail',
},
{
name: 'productProcessingTime',
align: 'left',
label: 'productProcessingTime',
field: 'process',
},
{
name: 'priceInformation',
align: 'left',
label: 'priceInformation',
field: 'name',
},
],
service: [
{ name: 'serviceName', align: 'left', label: 'serviceName', field: 'name' },
{
name: 'serviceDetail',
align: 'left',
label: 'serviceDetail',
field: 'detail',
},
{
name: 'serviceWorkTotal',
align: 'left',
label: 'serviceWorkTotal',
field: (v) => v.work.length,
},
],
} satisfies {
product: QTableProps['columns'];
service: QTableProps['columns'];
};
const tbControl = reactive({
product: {
fieldDisplay: [
'productName',
'productDetail',
'productProcessingTime',
'priceInformation',
],
fieldSelected: [
'productName',
'productDetail',
'productProcessingTime',
'priceInformation',
],
},
service: {
fieldDisplay: ['serviceName', 'serviceDetail', 'serviceWorkTotal'],
fieldSelected: ['serviceName', 'serviceDetail', 'serviceWorkTotal'],
},
});
const workItems = ref<WorkItems[]>([]); const workItems = ref<WorkItems[]>([]);
const workNameRef = ref(); const workNameRef = ref();
const selectProduct = ref<ProductList[]>([]); const selectProduct = ref<ProductList[]>([]);
@ -541,10 +607,7 @@ async function deleteServiceById(serviceId?: string) {
const res = await deleteService(serviceId ?? currentIdService.value); const res = await deleteService(serviceId ?? currentIdService.value);
if (productAndServiceTab.value === 'service') { if (productAndServiceTab.value === 'service') {
await await fetchListOfService(); await fetchListOfService();
}
if (productAndServiceTab.value === 'all') {
await fetchListOfProductAndService();
} }
dialogServiceEdit.value = false; dialogServiceEdit.value = false;
@ -573,9 +636,6 @@ async function deleteTypeOfProduct(id?: string) {
if (productAndServiceTab.value === 'product') { if (productAndServiceTab.value === 'product') {
await fetchListOfProduct(); await fetchListOfProduct();
} }
if (productAndServiceTab.value === 'all') {
await fetchListOfProductAndService();
}
dialogProductEdit.value = false; dialogProductEdit.value = false;
@ -722,7 +782,6 @@ const prevProduct = ref<ProductCreate>({
function assignFormDataProduct(data: ProductList) { function assignFormDataProduct(data: ProductList) {
statusToggle.value = data.status === 'INACTIVE' ? false : true; statusToggle.value = data.status === 'INACTIVE' ? false : true;
console.log(data);
profileUrl.value = `${baseUrl.value}/product/${data?.id}/image`; profileUrl.value = `${baseUrl.value}/product/${data?.id}/image`;
profileSubmit.value = true; profileSubmit.value = true;
@ -835,9 +894,6 @@ async function submitService() {
}); });
} }
if (productAndServiceTab.value === 'all') {
await fetchListOfProductAndService();
}
if (productAndServiceTab.value === 'service') { if (productAndServiceTab.value === 'service') {
await fetchListOfService(); await fetchListOfService();
} }
@ -868,9 +924,6 @@ async function submitProduct() {
totalProduct.value = totalProduct.value + 1; totalProduct.value = totalProduct.value + 1;
clearFormProduct(); clearFormProduct();
if (productAndServiceTab.value === 'all') {
await fetchListOfProductAndService();
}
if (productAndServiceTab.value === 'product') { if (productAndServiceTab.value === 'product') {
await fetchListOfProduct(); await fetchListOfProduct();
} }
@ -957,10 +1010,6 @@ async function calculateStats() {
} }
async function fetchStatus() { async function fetchStatus() {
if (productAndServiceTab.value === 'all') {
await fetchListOfProductAndService();
flowStore.rotate();
}
if (productAndServiceTab.value === 'product') { if (productAndServiceTab.value === 'product') {
await fetchListOfProduct(); await fetchListOfProduct();
flowStore.rotate(); flowStore.rotate();
@ -973,15 +1022,6 @@ async function fetchStatus() {
} }
async function alternativeFetch() { async function alternativeFetch() {
console.log('asdasds');
if (productAndServiceTab.value === 'all') {
await fetchListOfProductAndService();
flowStore.rotate();
}
if (productAndServiceTab.value === 'product') { if (productAndServiceTab.value === 'product') {
await fetchListOfProduct(); await fetchListOfProduct();
@ -1163,10 +1203,7 @@ watch(inputSearchProductAndService, async () => {
</div> </div>
<div v-if="stat[0].count !== 0" class="column full-height no-wrap"> <div v-if="stat[0].count !== 0" class="column full-height no-wrap">
<div <div class="text-body-2 q-mb-xs flex items-center">
v-if="productMode === 'group' || productMode === 'type'"
class="text-body-2 q-mb-xs flex items-center"
>
{{ $t('dataSum') }} {{ $t('dataSum') }}
<q-btn <q-btn
class="q-ml-xs" class="q-ml-xs"
@ -1182,17 +1219,8 @@ watch(inputSearchProductAndService, async () => {
/> />
</div> </div>
<transition <transition name="slide">
v-if="productMode === 'group' || productMode === 'type'" <div v-if="!hideStat" class="scroll q-mb-md">
name="slide"
>
<div
v-if="
(productMode === 'group' && !hideStat) ||
(productMode === 'type' && !hideStat)
"
class="scroll q-mb-md"
>
<div style="display: inline-block"> <div style="display: inline-block">
<StatCard <StatCard
label-i18n label-i18n
@ -1342,7 +1370,7 @@ watch(inputSearchProductAndService, async () => {
pathTypeName = v.name; pathTypeName = v.name;
currentIdType = v.id; currentIdType = v.id;
productMode = 'service'; productMode = 'service';
productAndServiceTab = 'all'; productAndServiceTab = 'service';
// await featchStatsService(); // await featchStatsService();
// await featchStatsProduct(); // await featchStatsProduct();
await fetchListOfProduct(); await fetchListOfProduct();
@ -1542,7 +1570,7 @@ watch(inputSearchProductAndService, async () => {
class="surface-2 col bordered rounded column" class="surface-2 col bordered rounded column"
> >
<div <div
class="row justify-between items-center surface-1 q-px-md q-py-sm rounded surface-3 bordered" class="row justify-between items-center q-px-md q-py-sm rounded surface-2"
style="z-index: 1" style="z-index: 1"
> >
<div> <div>
@ -1562,7 +1590,7 @@ watch(inputSearchProductAndService, async () => {
</template> </template>
</q-input> </q-input>
</div> </div>
<div class="row"> <div class="row" style="gap: var(--size-2)">
<q-btn <q-btn
icon="mdi-tune-vertical-variant" icon="mdi-tune-vertical-variant"
size="sm" size="sm"
@ -1612,13 +1640,56 @@ watch(inputSearchProductAndService, async () => {
</q-list> </q-list>
</q-menu> </q-menu>
</q-btn> </q-btn>
<q-btn-toggle
v-model="modeView"
id="btn-mode"
dense
class="no-shadow bordered rounded surface-1"
:toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
size="xs"
:options="[
{ value: true, slot: 'folder' },
{ value: false, slot: 'list' },
]"
>
<template v-slot:folder>
<q-icon
name="mdi-view-grid-outline"
size="16px"
class="q-px-sm q-py-xs rounded"
:style="{
color: $q.dark.isActive
? modeView
? '#C9D3DB '
: '#787B7C'
: modeView
? '#787B7C'
: '#C9D3DB',
}"
/>
</template>
<template v-slot:list>
<q-icon
name="mdi-format-list-bulleted"
class="q-px-sm q-py-xs rounded"
size="16px"
:style="{
color: $q.dark.isActive
? modeView === false
? '#C9D3DB'
: '#787B7C'
: modeView === false
? '#787B7C'
: '#C9D3DB',
}"
/>
</template>
</q-btn-toggle>
</div> </div>
</div> </div>
<div <div
v-if=" v-if="
(productAndServiceTab === 'all' &&
productAndService?.length === 0) ||
(productAndServiceTab === 'product' && product?.length === 0) || (productAndServiceTab === 'product' && product?.length === 0) ||
(productAndServiceTab === 'service' && service?.length === 0) (productAndServiceTab === 'service' && service?.length === 0)
" "
@ -1632,63 +1703,14 @@ watch(inputSearchProductAndService, async () => {
<div <div
v-if="productAndService && productAndService.length > 0" v-if="productAndService && productAndService.length > 0"
class="row flex col q-px-md" class="row flex col"
> >
<q-tabs <q-tabs
dense dense
v-model="productAndServiceTab" v-model="productAndServiceTab"
class="col-12 q-mb-lg bordered-b" class="col-12 bordered-b q-px-md"
align="left" align="left"
style="border-top-left-radius: var(--radius-2)"
> >
<q-tab
name="all"
@click="
async () => {
currentPageServiceAndProduct = 1;
inputSearchProductAndService = '';
currentStatus = 'All';
pageSizeServiceAndProduct;
// await fetchListOfProductAndService();
flowStore.rotate();
}
"
>
<div
class="row"
:class="
productAndServiceTab === 'all'
? 'text-bold'
: 'app-text-muted'
"
>
{{ $t('all') }}
</div>
</q-tab>
<q-tab
name="product"
@click="
async () => {
currentPageServiceAndProduct = 1;
inputSearchProductAndService = '';
currentStatus = 'All';
// await fetchListOfProduct();
flowStore.rotate();
}
"
>
<div
class="row"
:class="
productAndServiceTab === 'product'
? 'text-bold'
: 'app-text-muted'
"
>
{{ $t('product') }}
</div>
</q-tab>
<q-tab <q-tab
name="service" name="service"
@click=" @click="
@ -1712,43 +1734,367 @@ watch(inputSearchProductAndService, async () => {
{{ $t('service') }} {{ $t('service') }}
</div> </div>
</q-tab> </q-tab>
</q-tabs> <q-tab
<div class="col-12 row flex col q-col-gutter-sm scroll full-height"> name="product"
<div @click="
class="col-md-3 col-sm-6 col-12" async () => {
v-for="i in productAndServiceTab === 'all' currentPageServiceAndProduct = 1;
? productAndService inputSearchProductAndService = '';
: productAndServiceTab === 'product' currentStatus = 'All';
? product // await fetchListOfProduct();
: service" flowStore.rotate();
:key="i.id" }
"
> >
<div
class="row"
:class="
productAndServiceTab === 'product'
? 'text-bold'
: 'app-text-muted'
"
>
{{ $t('product') }}
</div>
</q-tab>
</q-tabs>
<div class="col-12 flex col scroll full-height q-pa-md surface-1">
<div class="full-width">
<q-table
class="full-width"
flat
bordered
:rows-per-page-options="[0]"
:rows="{ product, service }[productAndServiceTab] || []"
:columns="
{
product: tbColumn.product,
service: tbColumn.service,
}[productAndServiceTab]
"
:grid="modeView"
card-container-class="row q-col-gutter-md"
row-key="name"
hide-pagination
:visible-columns="
{
product: tbControl.product.fieldSelected,
service: tbControl.service.fieldSelected,
}[productAndServiceTab]
"
>
<template v-slot:header="props">
<q-tr class="surface-2" :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
>
{{ $t(col.label) }}
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr
:class="{
'app-text-muted': props.row.status === 'INACTIVE',
}"
:props="props"
>
<q-td
v-if="
{
product: tbControl.product.fieldSelected,
service: tbControl.service.fieldSelected,
}[productAndServiceTab].includes(
{ product: 'productName', service: 'serviceName' }[
productAndServiceTab
],
)
"
>
<div class="row items-center">
<div
:class="{
'status-active': props.row.status !== 'INACTIVE',
'status-inactive': props.row.status === 'INACTIVE',
}"
style="
width: 50px;
display: flex;
margin-bottom: var(--size-2);
"
>
<div class="table__icon">
<q-icon
size="md"
style="scale: 0.8"
name="mdi-office-building-outline"
/>
</div>
</div>
<div class="col">
<div class="col">{{ props.row.name }}</div>
<div class="col app-text-muted">
{{ props.row.code }}
</div>
</div>
</div>
</q-td>
<q-td
v-if="
{
product: tbControl.product.fieldSelected,
service: tbControl.service.fieldSelected,
}[productAndServiceTab].includes(
{
product: 'productDetail',
service: 'serviceDetail',
}[productAndServiceTab],
)
"
>
{{ props.row.detail }}
</q-td>
<q-td
v-if="
{
product: tbControl.product.fieldSelected,
service: tbControl.service.fieldSelected,
}[productAndServiceTab].includes(
{
product: 'productProcessingTime',
service: 'serviceWorkTotal',
}[productAndServiceTab],
)
"
>
{{
{
product: props.row.remark,
service: props.row.work?.length,
}[productAndServiceTab]
}}
</q-td>
<q-td
v-if="
{
product: tbControl.product.fieldSelected,
service: tbControl.service.fieldSelected,
}[productAndServiceTab].includes(
{
product: 'productProcessingTime',
service: 'empty',
}[productAndServiceTab],
)
"
>
{{ props.row.process }}
</q-td>
<q-td>
<q-btn
icon="mdi-eye-outline"
size="sm"
dense
round
flat
@click.stop="
async () => {
if (props.row.type === 'product') {
currentIdProduct = props.row.id;
assignFormDataProduct(props.row);
dialogProductEdit = true;
}
if (props.row.type === 'service') {
currentIdService = props.row.id;
infoServiceEdit = false;
assignFormDataProductService(props.row.id);
dialogServiceEdit = true;
}
await fetchListOfOptionBranch();
}
"
/>
<q-btn
icon="mdi-dots-vertical"
size="sm"
dense
round
flat
@click.stop
>
<q-menu class="bordered">
<q-list v-close-popup>
<q-item
:id="`view-detail-btn-${props.row.name}-view`"
@click.stop="
async () => {
if (props.row.type === 'product') {
currentIdProduct = props.row.id;
assignFormDataProduct(props.row);
dialogProductEdit = true;
}
if (props.row.type === 'service') {
currentIdService = props.row.id;
infoServiceEdit = false;
assignFormDataProductService(props.row.id);
dialogServiceEdit = true;
}
await fetchListOfOptionBranch();
}
"
clickable
dense
class="row q-py-sm"
style="white-space: nowrap"
>
<q-icon
name="mdi-eye-outline"
class="col-3"
size="xs"
style="color: hsl(var(--green-6-hsl))"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('viewDetail') }}
</span>
</q-item>
<q-item
:id="`view-detail-btn-${props.row.name}-edit`"
clickable
dense
class="row q-py-sm"
style="white-space: nowrap"
@click="
async () => {
if (props.row.type === 'product') {
currentIdProduct = props.row.id;
infoProductEdit = true;
assignFormDataProduct(props.row);
dialogProductEdit = true;
}
if (props.row.type === 'service') {
currentIdService = props.row.id;
infoServiceEdit = true;
assignFormDataProductService(props.row.id);
dialogServiceEdit = true;
}
await fetchListOfOptionBranch();
}
"
>
<q-icon
name="mdi-pencil-outline"
class="col-3"
size="xs"
style="color: hsl(var(--cyan-6-hsl))"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('edit') }}
</span>
</q-item>
<q-item
:id="`view-detail-btn-${props.row.name}-delete`"
dense
:clickable="props.row.status === 'CREATED'"
class="row"
:class="{
'surface-3': props.row.status !== 'CREATED',
'app-text-muted':
props.row.status !== 'CREATED',
}"
style="white-space: nowrap"
@click=""
>
<q-icon
name="mdi-trash-can-outline"
size="xs"
class="col-3"
:class="{
'app-text-negative':
props.row.status === 'CREATED',
}"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('delete') }}
</span>
</q-item>
<q-item dense>
<q-item-section class="q-py-sm">
<div class="q-pa-sm surface-2 rounded">
<q-toggle
:id="`view-detail-btn-${props.row.name}-status`"
dense
size="sm"
:label="
props.row.status !== 'INACTIVE'
? $t('switchOnLabel')
: $t('switchOffLabel')
"
@click="
() => {
if (props.row.type === 'product') {
toggleStatusProduct(
props.row.id,
props.row.status,
);
}
if (props.row.type === 'service') {
toggleStatusService(
props.row.id,
props.row.status,
);
}
}
"
:model-value="
props.row.status === 'CREATED' ||
props.row.status === 'ACTIVE'
"
/>
</div>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:item="{ row }">
<div class="col-12 col-md-6">
<TotalProductCardComponent <TotalProductCardComponent
:data="i" :data="row"
:key="i.id" :key="row.id"
:title="i.name" :title="row.name"
:isDisabled="i.status === 'INACTIVE' ? true : false" :isDisabled="row.status === 'INACTIVE' ? true : false"
@toggleStatus=" @toggleStatus="
() => { () => {
if (i.type === 'product') { if (row.type === 'product') {
toggleStatusProduct(i.id, i.status); toggleStatusProduct(row.id, row.status);
} }
if (i.type === 'service') { if (row.type === 'service') {
toggleStatusService(i.id, i.status); toggleStatusService(row.id, row.status);
} }
} }
" "
@menuViewDetail=" @menuViewDetail="
async () => { async () => {
if (i.type === 'product') { if (row.type === 'product') {
currentIdProduct = i.id; currentIdProduct = row.id;
assignFormDataProduct(i); assignFormDataProduct(row);
dialogProductEdit = true; dialogProductEdit = true;
} }
if (i.type === 'service') { if (row.type === 'service') {
currentIdService = i.id; currentIdService = row.id;
infoServiceEdit = false; infoServiceEdit = false;
assignFormDataProductService(i.id); assignFormDataProductService(row.id);
dialogServiceEdit = true; dialogServiceEdit = true;
} }
await fetchListOfOptionBranch(); await fetchListOfOptionBranch();
@ -1756,16 +2102,16 @@ watch(inputSearchProductAndService, async () => {
" "
@menuEdit=" @menuEdit="
async () => { async () => {
if (i.type === 'product') { if (row.type === 'product') {
currentIdProduct = i.id; currentIdProduct = row.id;
infoProductEdit = true; infoProductEdit = true;
assignFormDataProduct(i); assignFormDataProduct(row);
dialogProductEdit = true; dialogProductEdit = true;
} }
if (i.type === 'service') { if (row.type === 'service') {
currentIdService = i.id; currentIdService = row.id;
infoServiceEdit = true; infoServiceEdit = true;
assignFormDataProductService(i.id); assignFormDataProductService(row.id);
dialogServiceEdit = true; dialogServiceEdit = true;
} }
@ -1774,6 +2120,9 @@ watch(inputSearchProductAndService, async () => {
" "
/> />
</div> </div>
</template>
</q-table>
</div>
</div> </div>
</div> </div>
@ -1821,9 +2170,7 @@ watch(inputSearchProductAndService, async () => {
{{ {{
$t('recordsPage', { $t('recordsPage', {
resultcurrentPage: resultcurrentPage:
productAndServiceTab === 'all' productAndServiceTab === 'product'
? productAndService.length
: productAndServiceTab === 'product'
? product?.length ? product?.length
: service?.length, : service?.length,
total: total, total: total,