feat: add order field and type options to property management table
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 9s
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 9s
This commit is contained in:
puriphatt
parent
4c36fde097
commit
efc19ed875
1 changed files with 156 additions and 20 deletions
|
|
@ -15,6 +15,7 @@ import PaginationPageSize from 'src/components/PaginationPageSize.vue';
|
|||
import PropertyDialog from './PropertyDialog.vue';
|
||||
import { Property } from 'src/stores/property/types';
|
||||
import { dialog } from 'src/stores/utils';
|
||||
import CreateButton from 'src/components/AddButton.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const $q = useQuasar();
|
||||
|
|
@ -35,13 +36,20 @@ const formProperty = ref<Property>({
|
|||
});
|
||||
const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
|
||||
const refFilter = ref<InstanceType<typeof QSelect>>();
|
||||
const fieldSelected = ref<('name' | 'type')[]>(['name', 'type']);
|
||||
const fieldSelected = ref<('order' | 'name' | 'type')[]>([
|
||||
'order',
|
||||
'name',
|
||||
'type',
|
||||
]);
|
||||
const fieldSelectedOption = ref<{ label: string; value: string }[]>([
|
||||
{
|
||||
label: 'general.order',
|
||||
value: 'order',
|
||||
},
|
||||
{
|
||||
label: 'property.table.name',
|
||||
value: 'name',
|
||||
},
|
||||
|
||||
{
|
||||
label: 'property.table.type',
|
||||
value: 'type',
|
||||
|
|
@ -49,6 +57,12 @@ const fieldSelectedOption = ref<{ label: string; value: string }[]>([
|
|||
]);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
name: 'order',
|
||||
align: 'center',
|
||||
label: 'general.order',
|
||||
field: 'order',
|
||||
},
|
||||
{
|
||||
name: 'name',
|
||||
align: 'center',
|
||||
|
|
@ -64,6 +78,33 @@ const columns = [
|
|||
},
|
||||
] satisfies QTableProps['columns'];
|
||||
|
||||
const typeOption = {
|
||||
string: {
|
||||
label: 'Text',
|
||||
value: 'string',
|
||||
color: 'var(--pink-6-hsl)',
|
||||
icon: 'mdi-alpha-t',
|
||||
},
|
||||
number: {
|
||||
label: 'Number',
|
||||
value: 'number',
|
||||
color: 'var(--purple-11-hsl)',
|
||||
icon: 'mdi-numeric',
|
||||
},
|
||||
date: {
|
||||
label: 'Date',
|
||||
value: 'date',
|
||||
color: 'var(--green-9-hsl)',
|
||||
icon: 'mdi-calendar-blank-outline',
|
||||
},
|
||||
array: {
|
||||
label: 'Selection',
|
||||
value: 'array',
|
||||
color: 'var(--indigo-7-hsl)',
|
||||
icon: 'mdi-code-array',
|
||||
},
|
||||
};
|
||||
|
||||
const pageState = reactive({
|
||||
hideStat: false,
|
||||
inputSearch: '',
|
||||
|
|
@ -295,7 +336,7 @@ watch([() => pageState.inputSearch, propertyPageSize], () => {
|
|||
labelI18n
|
||||
:branch="[
|
||||
{
|
||||
icon: 'mdi-cogs',
|
||||
icon: 'mdi-tag-text-outline',
|
||||
count: pageState.total,
|
||||
label: 'property.title',
|
||||
color: 'blue',
|
||||
|
|
@ -445,10 +486,9 @@ watch([() => pageState.inputSearch, propertyPageSize], () => {
|
|||
v-if="pageState.total !== 0"
|
||||
:not-found="!!pageState.inputSearch"
|
||||
/>
|
||||
|
||||
<CreateButton
|
||||
v-if="pageState.total === 0"
|
||||
@click=""
|
||||
@click="triggerDialog('add')"
|
||||
label="general.add"
|
||||
:i18n-args="{ text: $t('flow.title') }"
|
||||
/>
|
||||
|
|
@ -483,10 +523,11 @@ watch([() => pageState.inputSearch, propertyPageSize], () => {
|
|||
<template #header="{ cols }">
|
||||
<q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
|
||||
<q-th
|
||||
v-for="v in cols"
|
||||
v-for="(v, i) in cols"
|
||||
:key="i"
|
||||
:class="{
|
||||
'text-left': v.name === 'name',
|
||||
'text-right': v.name === 'type',
|
||||
'text-center': v.name === 'order',
|
||||
'text-left': v.name === 'name' || v.name === 'type',
|
||||
}"
|
||||
>
|
||||
{{ $t(v.label) }}
|
||||
|
|
@ -510,8 +551,43 @@ watch([() => pageState.inputSearch, propertyPageSize], () => {
|
|||
: ''
|
||||
"
|
||||
>
|
||||
<q-td
|
||||
v-if="fieldSelected.includes('order')"
|
||||
class="text-center"
|
||||
style="width: 5%"
|
||||
>
|
||||
{{
|
||||
$q.screen.xs
|
||||
? props.rowIndex + 1
|
||||
: (propertyPage - 1) * propertyPageSize +
|
||||
props.rowIndex +
|
||||
1
|
||||
}}
|
||||
</q-td>
|
||||
<q-td v-if="fieldSelected.includes('name')">
|
||||
<section class="row items-center no-wrap">
|
||||
<q-avatar
|
||||
class="q-mr-sm"
|
||||
size="md"
|
||||
style="
|
||||
color: var(--blue-6);
|
||||
background: hsla(var(--blue-6-hsl) / 0.1);
|
||||
"
|
||||
>
|
||||
<q-icon name="mdi-tag-text-outline" />
|
||||
|
||||
<q-badge
|
||||
class="absolute-bottom-right no-padding"
|
||||
style="
|
||||
border-radius: 50%;
|
||||
min-width: 8px;
|
||||
min-height: 8px;
|
||||
"
|
||||
:style="{
|
||||
background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
|
||||
}"
|
||||
></q-badge>
|
||||
</q-avatar>
|
||||
{{
|
||||
$i18n.locale === 'eng'
|
||||
? props.row.nameEN
|
||||
|
|
@ -521,10 +597,37 @@ watch([() => pageState.inputSearch, propertyPageSize], () => {
|
|||
</q-td>
|
||||
|
||||
<q-td
|
||||
style="width: 20%"
|
||||
v-if="fieldSelected.includes('type')"
|
||||
class="text-right"
|
||||
class="text-left"
|
||||
>
|
||||
{{ props.row.type }}
|
||||
<q-avatar
|
||||
size="sm"
|
||||
class="q-mr-xs"
|
||||
:style="`background-color: hsla(${
|
||||
typeOption[
|
||||
props.row.type.type as keyof typeof typeOption
|
||||
].color
|
||||
}/0.2)`"
|
||||
>
|
||||
<q-icon
|
||||
size="20px"
|
||||
:name="
|
||||
typeOption[
|
||||
props.row.type.type as keyof typeof typeOption
|
||||
].icon
|
||||
"
|
||||
:style="`color: hsl(${
|
||||
typeOption[
|
||||
props.row.type.type as keyof typeof typeOption
|
||||
].color
|
||||
})`"
|
||||
/>
|
||||
</q-avatar>
|
||||
{{
|
||||
typeOption[props.row.type.type as keyof typeof typeOption]
|
||||
.label
|
||||
}}
|
||||
</q-td>
|
||||
<q-td style="width: 20%" class="text-right">
|
||||
<q-btn
|
||||
|
|
@ -583,11 +686,11 @@ watch([() => pageState.inputSearch, propertyPageSize], () => {
|
|||
<div
|
||||
class="col-md-2 col-3 flex items-center justify-center"
|
||||
style="
|
||||
color: var(--gray-6);
|
||||
background: hsla(var(--gray-6-hsl) / 0.1);
|
||||
color: var(--blue-6);
|
||||
background: hsla(var(--blue-6-hsl) / 0.1);
|
||||
"
|
||||
>
|
||||
<q-icon name="mdi-cogs" size="md" />
|
||||
<q-icon name="mdi-tag-text-outline" size="md" />
|
||||
</div>
|
||||
<article class="row q-pa-sm q-gutter-y-sm col">
|
||||
<div
|
||||
|
|
@ -614,13 +717,34 @@ watch([() => pageState.inputSearch, propertyPageSize], () => {
|
|||
v-if="fieldSelected.includes('type')"
|
||||
class="self-end"
|
||||
>
|
||||
<div class="bordered rounded q-px-sm">
|
||||
<q-avatar
|
||||
size="xs"
|
||||
class="q-mr-xs"
|
||||
:style="`background-color: hsla(${
|
||||
typeOption[
|
||||
props.row.type.type as keyof typeof typeOption
|
||||
].color
|
||||
}/0.2)`"
|
||||
>
|
||||
<q-icon
|
||||
name="mdi-note-edit-outline"
|
||||
class="q-pr-sm"
|
||||
size="16px"
|
||||
:name="
|
||||
typeOption[
|
||||
props.row.type.type as keyof typeof typeOption
|
||||
].icon
|
||||
"
|
||||
:style="`color: hsl(${
|
||||
typeOption[
|
||||
props.row.type.type as keyof typeof typeOption
|
||||
].color
|
||||
})`"
|
||||
/>
|
||||
{{ props.row.type }}
|
||||
</div>
|
||||
</q-avatar>
|
||||
{{
|
||||
typeOption[
|
||||
props.row.type.type as keyof typeof typeOption
|
||||
].label
|
||||
}}
|
||||
</div>
|
||||
</article>
|
||||
<nav class="q-pa-sm row items-center self-start">
|
||||
|
|
@ -723,7 +847,7 @@ watch([() => pageState.inputSearch, propertyPageSize], () => {
|
|||
</div>
|
||||
|
||||
<PropertyDialog
|
||||
@change-status="() => triggerChangeStatus()"
|
||||
@change-status="triggerChangeStatus"
|
||||
@drawer-delete="() => deleteProperty()"
|
||||
@drawer-edit="pageState.isDrawerEdit = true"
|
||||
@drawer-undo="() => undo()"
|
||||
|
|
@ -736,4 +860,16 @@ watch([() => pageState.inputSearch, propertyPageSize], () => {
|
|||
v-model:drawer-model="pageState.viewDrawer"
|
||||
/>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
|
||||
<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;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue