refactor: selected table product
This commit is contained in:
Thanaphon Frappet
parent
46b69deb59
commit
9083dab4af
1 changed files with 373 additions and 0 deletions
373
src/components/04_product-service/TableProduct.vue
Normal file
373
src/components/04_product-service/TableProduct.vue
Normal file
|
|
@ -0,0 +1,373 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { QTableProps } from 'quasar';
|
||||
|
||||
import { Product } from 'stores/product-service/types';
|
||||
|
||||
import KebabAction from 'src/components/shared/KebabAction.vue';
|
||||
|
||||
import useOptionStore from 'stores/options';
|
||||
import { formatNumberDecimal } from 'stores/utils';
|
||||
import { dateFormat } from 'src/utils/datetime';
|
||||
|
||||
const optionStore = useOptionStore();
|
||||
const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
|
||||
|
||||
const selectedItem = defineModel<Product[]>('selectedItem');
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
row: QTableProps['rows'];
|
||||
column: QTableProps['columns'];
|
||||
grid?: boolean;
|
||||
fieldSelected?: string[];
|
||||
currentPage?: number;
|
||||
pageSize?: number;
|
||||
useKebabAction?: boolean;
|
||||
}>(),
|
||||
{
|
||||
row: () => [],
|
||||
column: () => [],
|
||||
grid: false,
|
||||
fieldSelected: () => [],
|
||||
currentPage: 1,
|
||||
pageSize: 1,
|
||||
useKebabAction: false,
|
||||
},
|
||||
);
|
||||
|
||||
defineEmits<{
|
||||
(e: 'view'): void;
|
||||
(e: 'edit'): void;
|
||||
(e: 'delete'): void;
|
||||
(e: 'changeStatus'): void;
|
||||
(e: 'select', data: any): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-table
|
||||
bordered
|
||||
:rows="row"
|
||||
:columns="column"
|
||||
:rows-per-page-options="[0]"
|
||||
:grid="grid"
|
||||
v-model:selected="selectedItem"
|
||||
row-key="id"
|
||||
@update:selected="(v) => $emit('select', v)"
|
||||
card-container-class="row full-width q-col-gutter-md"
|
||||
hide-pagination
|
||||
selection="multiple"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr
|
||||
style="background-color: hsla(var(--info-bg) / 0.07)"
|
||||
:props="props"
|
||||
>
|
||||
<q-th auto-width></q-th>
|
||||
<template v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<q-th>
|
||||
{{ $t(col.label) }}
|
||||
</q-th>
|
||||
</template>
|
||||
<q-th v-if="!!useKebabAction" auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:body="props">
|
||||
<q-tr
|
||||
:style="
|
||||
props.rowIndex % 2 !== 0
|
||||
? $q.dark.isActive
|
||||
? 'background: hsl(var(--gray-11-hsl)/0.2)'
|
||||
: `background: #f9fafc`
|
||||
: ''
|
||||
"
|
||||
:class="{
|
||||
'app-text-muted': props.row.status === 'INACTIVE',
|
||||
}"
|
||||
class="cursor-pointer"
|
||||
:props="props"
|
||||
@click.stop="$emit('select', props.row)"
|
||||
>
|
||||
<q-td>
|
||||
<q-checkbox
|
||||
:model-value="props.selected"
|
||||
@click.stop="$emit('select', props.row)"
|
||||
/>
|
||||
</q-td>
|
||||
|
||||
<q-td
|
||||
class="text-center"
|
||||
v-if="fieldSelected.includes('branchLabelNo')"
|
||||
>
|
||||
{{ (currentPage - 1) * pageSize + props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td v-if="fieldSelected.includes('productName')">
|
||||
<div class="row items-center no-wrap">
|
||||
<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" :class="`icon-color-green`">
|
||||
<q-avatar size="md">
|
||||
<q-img
|
||||
class="text-center"
|
||||
:ratio="1"
|
||||
:src="`${baseUrl}/product/${props.row.id}/image/${props.row.selectedImage}`"
|
||||
>
|
||||
<template #error>
|
||||
<q-icon
|
||||
size="sm"
|
||||
name="mdi-shopping-outline"
|
||||
style="top: 10%"
|
||||
:style="`color: var(teal-10)`"
|
||||
/>
|
||||
</template>
|
||||
</q-img>
|
||||
</q-avatar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="ellipsis" style="max-width: 20vw">
|
||||
{{ props.row.name }}
|
||||
<q-tooltip anchor="bottom left" self="center left" :delay="300">
|
||||
{{ props.row.name }}
|
||||
</q-tooltip>
|
||||
</div>
|
||||
<div class="app-text-muted">
|
||||
{{ props.row.code }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-td>
|
||||
|
||||
<q-td
|
||||
class="ellipsis"
|
||||
style="max-width: 150px"
|
||||
v-if="fieldSelected.includes('productDetail')"
|
||||
>
|
||||
{{ props.row.detail || '-' }}
|
||||
</q-td>
|
||||
<q-td v-if="fieldSelected.includes('productExpenseType')">
|
||||
{{ optionStore.mapOption(props.row.expenseType) }}
|
||||
</q-td>
|
||||
<q-td v-if="fieldSelected.includes('productProcessingTime')">
|
||||
{{ props.row.process }}
|
||||
</q-td>
|
||||
<q-td v-if="fieldSelected.includes('productVat')">
|
||||
{{ $t('productService.product.vatIncluded') }}
|
||||
</q-td>
|
||||
<q-td v-if="fieldSelected.includes('priceInformation')">
|
||||
<div
|
||||
class="row full-width q-gutter-x-md no-wrap items-center text-right"
|
||||
>
|
||||
<div
|
||||
class="tags tags-color-orange col column ellipsis-2-lines"
|
||||
:class="{
|
||||
disable: props.row.status === 'INACTIVE',
|
||||
}"
|
||||
style="min-width: 50px"
|
||||
>
|
||||
<div class="col app-text-muted-2 text-caption">
|
||||
{{ $t('productService.product.salePrice') }}
|
||||
</div>
|
||||
<div class="col text-weight-bold">
|
||||
฿{{ formatNumberDecimal(props.row.price || 0, 2) }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="tags tags-color-purple col column ellipsis-2-lines"
|
||||
:class="{
|
||||
disable: props.row.status === 'INACTIVE',
|
||||
}"
|
||||
style="min-width: 50px"
|
||||
>
|
||||
<div class="col app-text-muted-2 text-caption">
|
||||
{{ $t('productService.product.agentPrice') }}
|
||||
</div>
|
||||
<div class="col text-weight-bold">
|
||||
฿{{ formatNumberDecimal(props.row.agentPrice || 0, 2) }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="tags tags-color-pink col column ellipsis-2-lines"
|
||||
:class="{
|
||||
disable: props.row.status === 'INACTIVE',
|
||||
}"
|
||||
style="min-width: 50px"
|
||||
>
|
||||
<div class="col app-text-muted-2 text-caption">
|
||||
{{ $t('productService.product.processingPrice') }}
|
||||
</div>
|
||||
<div class="col">
|
||||
฿{{ formatNumberDecimal(props.row.serviceCharge || 0, 2) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-td>
|
||||
|
||||
<q-td v-if="fieldSelected.includes('createdAt')">
|
||||
{{ dateFormat(props.row.createdAt) }}
|
||||
</q-td>
|
||||
<q-td v-if="!!useKebabAction">
|
||||
<q-btn
|
||||
icon="mdi-eye-outline"
|
||||
:id="`btn-eye-${props.row.name}`"
|
||||
size="sm"
|
||||
dense
|
||||
round
|
||||
flat
|
||||
@click.stop="$emit('view')"
|
||||
/>
|
||||
<KebabAction
|
||||
:status="props.row.status"
|
||||
:id-name="props.row.name"
|
||||
@view="$emit('view')"
|
||||
@edit="$emit('edit')"
|
||||
@delete="$emit('delete')"
|
||||
@change-status="$emit('changeStatus')"
|
||||
/>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:item="{ row }">
|
||||
<div class="col-3"><slot name="grid" :row="row" /></div>
|
||||
</template>
|
||||
</q-table>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.status-active {
|
||||
--_branch-status-color: var(--green-6-hsl);
|
||||
}
|
||||
|
||||
.status-inactive {
|
||||
--_branch-status-color: var(--stone-5-hsl);
|
||||
--_branch-badge-bg: var(--stone-5-hsl);
|
||||
filter: grayscale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.icon-color-purple {
|
||||
--_color: var(--violet-11-hsl);
|
||||
}
|
||||
|
||||
.icon-color-pink {
|
||||
--_color: var(--pink-6-hsl);
|
||||
}
|
||||
|
||||
.icon-color-orange {
|
||||
--_color: var(--orange-5-hsl);
|
||||
}
|
||||
|
||||
.icon-color-green {
|
||||
--_color: var(--teal-10-hsl);
|
||||
}
|
||||
|
||||
.dark .icon-color-purple {
|
||||
--_color: var(--violet-10-hsl);
|
||||
}
|
||||
|
||||
.dark .icon-color-green {
|
||||
--_color: var(--teal-8-hsl);
|
||||
}
|
||||
|
||||
.dark .icon-color-orange {
|
||||
--_color: var(--orange-6-hsl);
|
||||
}
|
||||
|
||||
.tags-color-green {
|
||||
--_color-tag: var(--teal-10-hsl);
|
||||
}
|
||||
|
||||
.dark .tags-color-green {
|
||||
--_color-tag: var(--teal-8-hsl);
|
||||
}
|
||||
|
||||
.tags-color-orange {
|
||||
--_color-tag: var(--orange-5-hsl);
|
||||
}
|
||||
|
||||
.dark .tags-color-orange {
|
||||
--_color-tag: var(--orange-6-hsl);
|
||||
}
|
||||
|
||||
.tags-color-purple {
|
||||
--_color-tag: var(--violet-11-hsl);
|
||||
}
|
||||
|
||||
.dark .tags-color-purple {
|
||||
--_color-tag: var(--violet-10-hsl);
|
||||
}
|
||||
|
||||
.tags-color-pink {
|
||||
--_color-tag: var(--pink-6-hsl);
|
||||
}
|
||||
|
||||
.table__icon {
|
||||
background-color: hsla(var(--_color) / 0.15);
|
||||
color: hsla(var(--_color) / 1);
|
||||
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
transform: rotate(45deg);
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
block-size: 0.5rem;
|
||||
aspect-ratio: 1;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
right: -0.1rem;
|
||||
top: calc(50% - 0.25rem);
|
||||
bottom: calc(50% - 0.25rem);
|
||||
background-color: hsla(var(--_branch-status-color) / 1);
|
||||
}
|
||||
|
||||
&:deep(.q-icon) {
|
||||
transform: rotate(-45deg);
|
||||
color: hsla(var(--_branch-card-bg) / 1);
|
||||
}
|
||||
|
||||
&:deep(.q-img) {
|
||||
transform: rotate(-45deg);
|
||||
|
||||
&:deep(.q-icon) {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: inline-block;
|
||||
color: hsla(var(--_color-tag) / 1);
|
||||
background: hsla(var(--_color-tag) / 0.075);
|
||||
border-radius: var(--radius-2);
|
||||
padding-inline: var(--size-2);
|
||||
|
||||
&.disable {
|
||||
filter: grayscale(100%);
|
||||
opacity: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
* :deep(.q-icon.mdi-play) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-form-active {
|
||||
background-color: hsla(var(--info-bg) / 0.2);
|
||||
color: hsl(var(--info-bg));
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:deep(.split-pay .q-field__control) {
|
||||
height: 23px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue