928 lines
29 KiB
Vue
928 lines
29 KiB
Vue
<script lang="ts" setup>
|
|
import { useI18n } from 'vue-i18n';
|
|
import { storeToRefs } from 'pinia';
|
|
import { onMounted, reactive, ref } from 'vue';
|
|
import { QTableProps } from 'quasar';
|
|
import { useNavigator } from 'src/stores/navigator';
|
|
import { useProperty } from 'src/stores/property';
|
|
import { useQuasar } from 'quasar';
|
|
import StatCardComponent from 'src/components/StatCardComponent.vue';
|
|
import NoData from 'src/components/NoData.vue';
|
|
import { watch } from 'vue';
|
|
import KebabAction from 'src/components/shared/KebabAction.vue';
|
|
import { FloatingActionButton, PaginationComponent } from 'src/components';
|
|
import PaginationPageSize from 'src/components/PaginationPageSize.vue';
|
|
import PropertyDialog from './PropertyDialog.vue';
|
|
import { Property } from 'src/stores/property/types';
|
|
import { dialog, toCamelCase } from 'src/stores/utils';
|
|
import CreateButton from 'src/components/AddButton.vue';
|
|
import useOptionStore from 'stores/options';
|
|
import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
|
|
|
|
const { t, locale } = useI18n();
|
|
const $q = useQuasar();
|
|
const navigatorStore = useNavigator();
|
|
const propertyStore = useProperty();
|
|
const optionStore = useOptionStore();
|
|
const {
|
|
data: propertyData,
|
|
page: propertyPage,
|
|
pageSize: propertyPageSize,
|
|
pageMax: propertyPageMax,
|
|
} = storeToRefs(propertyStore);
|
|
const { globalOption } = storeToRefs(optionStore);
|
|
|
|
const currPropertyData = ref<Property>();
|
|
const formProperty = ref<Property>({
|
|
name: '',
|
|
nameEN: '',
|
|
type: {},
|
|
});
|
|
const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
|
|
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',
|
|
},
|
|
]);
|
|
|
|
const columns = [
|
|
{
|
|
name: 'order',
|
|
align: 'center',
|
|
label: 'general.order',
|
|
field: 'order',
|
|
},
|
|
{
|
|
name: 'name',
|
|
align: 'center',
|
|
label: 'property.table.name',
|
|
field: 'order',
|
|
},
|
|
|
|
{
|
|
name: 'type',
|
|
align: 'center',
|
|
label: 'property.table.type',
|
|
field: 'type',
|
|
},
|
|
] 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: '',
|
|
fieldSelected: [],
|
|
gridView: false,
|
|
total: 0,
|
|
|
|
addModal: false,
|
|
viewDrawer: false,
|
|
isDrawerEdit: true,
|
|
searchDate: [],
|
|
});
|
|
|
|
async function fetchPropertyList(mobileFetch?: boolean) {
|
|
const res = await propertyStore.getPropertyList({
|
|
page: mobileFetch ? 1 : propertyPage.value,
|
|
pageSize: mobileFetch
|
|
? propertyData.value.length +
|
|
(pageState.total === propertyData.value.length ? 1 : 0)
|
|
: propertyPageSize.value,
|
|
query: pageState.inputSearch,
|
|
status:
|
|
statusFilter.value === 'all'
|
|
? undefined
|
|
: statusFilter.value === 'statusACTIVE'
|
|
? 'ACTIVE'
|
|
: 'INACTIVE',
|
|
startDate: pageState.searchDate[0],
|
|
endDate: pageState.searchDate[1],
|
|
});
|
|
if (res) {
|
|
propertyData.value =
|
|
$q.screen.xs && !mobileFetch
|
|
? [...propertyData.value, ...res.result]
|
|
: res.result;
|
|
|
|
propertyPageMax.value = Math.ceil(res.total / propertyPageSize.value);
|
|
if (pageState.inputSearch || statusFilter.value !== 'all') return;
|
|
pageState.total = res.total;
|
|
}
|
|
}
|
|
|
|
function triggerDialog(type: 'add' | 'edit' | 'view') {
|
|
if (type === 'add') {
|
|
resetForm();
|
|
pageState.addModal = true;
|
|
pageState.isDrawerEdit = true;
|
|
}
|
|
if (type === 'view') {
|
|
pageState.viewDrawer = true;
|
|
pageState.isDrawerEdit = false;
|
|
}
|
|
if (type === 'edit') {
|
|
pageState.viewDrawer = true;
|
|
pageState.isDrawerEdit = true;
|
|
}
|
|
}
|
|
|
|
function assignFormData(propertyData: Property) {
|
|
currPropertyData.value = JSON.parse(JSON.stringify(propertyData));
|
|
formProperty.value = JSON.parse(
|
|
JSON.stringify({
|
|
name: propertyData.name,
|
|
nameEN: propertyData.nameEN,
|
|
type: propertyData.type,
|
|
status: propertyData.status,
|
|
registeredBranchId: propertyData.registeredBranchId,
|
|
}),
|
|
);
|
|
}
|
|
|
|
function resetForm() {
|
|
currPropertyData.value = undefined;
|
|
pageState.isDrawerEdit = true;
|
|
pageState.addModal = false;
|
|
pageState.viewDrawer = false;
|
|
formProperty.value = {
|
|
name: '',
|
|
nameEN: '',
|
|
type: {},
|
|
};
|
|
}
|
|
|
|
async function deleteProperty(id?: string) {
|
|
const targetId = id || currPropertyData.value?.id;
|
|
if (targetId === undefined) return;
|
|
|
|
dialog({
|
|
color: 'negative',
|
|
icon: 'mdi-trash-can-outline',
|
|
title: t('dialog.title.confirmDelete'),
|
|
actionText: t('general.delete'),
|
|
persistent: true,
|
|
message: t('dialog.message.confirmDelete'),
|
|
action: async () => {
|
|
await propertyStore.deleteProperty(targetId);
|
|
await fetchPropertyList($q.screen.xs);
|
|
|
|
resetForm();
|
|
},
|
|
cancel: () => {},
|
|
});
|
|
}
|
|
|
|
async function changeStatus(id?: string) {
|
|
const targetId = id || currPropertyData.value?.id;
|
|
if (targetId === undefined) return;
|
|
|
|
formProperty.value.status =
|
|
formProperty.value.status !== 'INACTIVE' ? 'INACTIVE' : 'ACTIVE';
|
|
|
|
const res = await propertyStore.editProperty({
|
|
id: targetId,
|
|
...formProperty.value,
|
|
});
|
|
if (res) {
|
|
formProperty.value.status = res.data.status;
|
|
if (currPropertyData.value) {
|
|
currPropertyData.value.status = res.data.status;
|
|
}
|
|
await fetchPropertyList();
|
|
}
|
|
}
|
|
|
|
async function triggerChangeStatus(data?: Property) {
|
|
const targetId = (data && data.id) || currPropertyData.value?.id;
|
|
const targetStatus = (data && data.status) || currPropertyData.value?.status;
|
|
if (data) assignFormData(data);
|
|
if (targetId === undefined || targetStatus === undefined) return;
|
|
|
|
return await new Promise((resolve, reject) => {
|
|
dialog({
|
|
color: targetStatus !== 'INACTIVE' ? 'warning' : 'info',
|
|
icon:
|
|
targetStatus !== 'INACTIVE'
|
|
? 'mdi-alert'
|
|
: 'mdi-message-processing-outline',
|
|
title: t('dialog.title.confirmChangeStatus'),
|
|
actionText:
|
|
targetStatus !== 'INACTIVE' ? t('general.close') : t('general.open'),
|
|
message:
|
|
targetStatus !== 'INACTIVE'
|
|
? t('dialog.message.confirmChangeStatusOff')
|
|
: t('dialog.message.confirmChangeStatusOn'),
|
|
action: async () => {
|
|
await changeStatus(targetId).then(resolve).catch(reject);
|
|
},
|
|
cancel: () => {},
|
|
});
|
|
});
|
|
}
|
|
|
|
function undo() {
|
|
if (!currPropertyData.value) return;
|
|
assignFormData(currPropertyData.value);
|
|
pageState.isDrawerEdit = false;
|
|
}
|
|
|
|
async function submit() {
|
|
if (currPropertyData.value?.id !== undefined) {
|
|
await propertyStore.editProperty({
|
|
id: currPropertyData.value.id,
|
|
...formProperty.value,
|
|
});
|
|
} else {
|
|
await propertyStore.creatProperty({
|
|
...formProperty.value,
|
|
});
|
|
}
|
|
await fetchPropertyList($q.screen.xs);
|
|
|
|
// assign new property to global option
|
|
const propList = propertyData.value.map((v) => {
|
|
return {
|
|
label: locale.value === 'eng' ? v.nameEN : v.name,
|
|
value: toCamelCase(v.nameEN),
|
|
type: v.type.type,
|
|
};
|
|
});
|
|
|
|
const existingValues = new Set(
|
|
globalOption.value.propertiesField.map(
|
|
(item: { value: string }) => item.value,
|
|
),
|
|
);
|
|
const newProps = propList.filter((prop) => !existingValues.has(prop.value));
|
|
if (newProps) {
|
|
globalOption.value.propertiesField.splice(
|
|
globalOption.value.propertiesField.length - 4,
|
|
0,
|
|
...newProps,
|
|
);
|
|
}
|
|
|
|
currPropertyData.value;
|
|
resetForm();
|
|
}
|
|
|
|
onMounted(async () => {
|
|
navigatorStore.current.title = 'property.title';
|
|
navigatorStore.current.path = [{ text: 'property.caption', i18n: true }];
|
|
await fetchPropertyList();
|
|
});
|
|
|
|
watch(
|
|
() => statusFilter.value,
|
|
() => {
|
|
propertyData.value = [];
|
|
propertyPage.value = 1;
|
|
fetchPropertyList();
|
|
},
|
|
);
|
|
watch(
|
|
[() => pageState.inputSearch, propertyPageSize, () => pageState.searchDate],
|
|
() => {
|
|
propertyData.value = [];
|
|
propertyPage.value = 1;
|
|
fetchPropertyList();
|
|
},
|
|
);
|
|
</script>
|
|
<template>
|
|
<FloatingActionButton
|
|
style="z-index: 999"
|
|
hide-icon
|
|
@click="triggerDialog('add')"
|
|
></FloatingActionButton>
|
|
|
|
<div class="column full-height no-wrap">
|
|
<!-- SEC: stat -->
|
|
<section class="text-body-2 q-mb-xs flex items-center">
|
|
{{ $t('general.dataSum') }}
|
|
<q-badge
|
|
rounded
|
|
class="q-ml-sm"
|
|
style="
|
|
background-color: hsla(var(--info-bg) / 0.15);
|
|
color: hsl(var(--info-bg));
|
|
"
|
|
>
|
|
{{ pageState.total }}
|
|
</q-badge>
|
|
<q-btn
|
|
class="q-ml-sm"
|
|
icon="mdi-pin-outline"
|
|
color="primary"
|
|
size="sm"
|
|
flat
|
|
dense
|
|
rounded
|
|
@click="pageState.hideStat = !pageState.hideStat"
|
|
:style="pageState.hideStat ? 'rotate: 90deg' : ''"
|
|
style="transition: 0.1s ease-in-out"
|
|
/>
|
|
</section>
|
|
|
|
<transition name="slide">
|
|
<div v-if="!pageState.hideStat" class="scroll q-mb-md">
|
|
<div style="display: inline-block">
|
|
<StatCardComponent
|
|
labelI18n
|
|
:branch="[
|
|
{
|
|
icon: 'mdi-tag-text-outline',
|
|
count: pageState.total,
|
|
label: 'property.title',
|
|
color: 'blue',
|
|
},
|
|
]"
|
|
:dark="$q.dark.isActive"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
|
|
<!-- SEC: header content -->
|
|
<section class="col surface-1 rounded bordered overflow-hidden">
|
|
<div class="column full-height no-wrap">
|
|
<header
|
|
class="row surface-3 justify-between full-width items-center bordered-b"
|
|
style="z-index: 1"
|
|
>
|
|
<div class="row q-py-sm q-px-md justify-between full-width">
|
|
<q-input
|
|
for="input-search"
|
|
outlined
|
|
dense
|
|
:label="$t('general.search')"
|
|
class="col col-md-3"
|
|
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
|
v-model="pageState.inputSearch"
|
|
debounce="200"
|
|
>
|
|
<template #prepend>
|
|
<q-icon name="mdi-magnify" />
|
|
</template>
|
|
<template v-slot:append>
|
|
<q-separator vertical inset class="q-mr-xs" />
|
|
<AdvanceSearch
|
|
v-model="pageState.searchDate"
|
|
:active="$q.screen.lt.md && statusFilter !== 'all'"
|
|
>
|
|
<div
|
|
v-if="$q.screen.lt.md"
|
|
class="q-mt-sm text-weight-medium"
|
|
>
|
|
{{ $t('general.status') }}
|
|
</div>
|
|
<q-select
|
|
v-if="$q.screen.lt.md"
|
|
v-model="statusFilter"
|
|
outlined
|
|
dense
|
|
option-value="value"
|
|
option-label="label"
|
|
map-options
|
|
emit-value
|
|
:for="'field-select-status'"
|
|
:options="[
|
|
{ label: $t('general.all'), value: 'all' },
|
|
{ label: $t('general.active'), value: 'statusACTIVE' },
|
|
{
|
|
label: $t('general.inactive'),
|
|
value: 'statusINACTIVE',
|
|
},
|
|
]"
|
|
/>
|
|
</AdvanceSearch>
|
|
</template>
|
|
</q-input>
|
|
|
|
<div class="row col-md-5" style="white-space: nowrap">
|
|
<q-select
|
|
v-if="$q.screen.gt.sm"
|
|
v-model="statusFilter"
|
|
outlined
|
|
dense
|
|
option-value="value"
|
|
option-label="label"
|
|
class="col"
|
|
map-options
|
|
emit-value
|
|
:for="'field-select-status'"
|
|
:hide-dropdown-icon="$q.screen.lt.sm"
|
|
:options="[
|
|
{ label: $t('general.all'), value: 'all' },
|
|
{ label: $t('general.active'), value: 'statusACTIVE' },
|
|
{ label: $t('general.inactive'), value: 'statusINACTIVE' },
|
|
]"
|
|
/>
|
|
<q-select
|
|
v-show="$q.screen.gt.sm"
|
|
id="select-field"
|
|
for="select-field"
|
|
class="col q-ml-sm"
|
|
:options="
|
|
fieldSelectedOption.map((v) => ({
|
|
...v,
|
|
label: $t(v.label),
|
|
}))
|
|
"
|
|
:display-value="$t('general.displayField')"
|
|
:hide-dropdown-icon="$q.screen.lt.sm"
|
|
v-model="fieldSelected"
|
|
option-label="label"
|
|
option-value="value"
|
|
autocomplete="off"
|
|
map-options
|
|
emit-value
|
|
outlined
|
|
multiple
|
|
dense
|
|
/>
|
|
<q-btn-toggle
|
|
id="btn-mode"
|
|
v-model="pageState.gridView"
|
|
dense
|
|
class="no-shadow bordered rounded surface-1 q-ml-sm"
|
|
: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
|
|
? pageState.gridView
|
|
? '#C9D3DB '
|
|
: '#787B7C'
|
|
: pageState.gridView
|
|
? '#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
|
|
? pageState.gridView === false
|
|
? '#C9D3DB'
|
|
: '#787B7C'
|
|
: pageState.gridView === false
|
|
? '#787B7C'
|
|
: '#C9D3DB',
|
|
}"
|
|
/>
|
|
</template>
|
|
</q-btn-toggle>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- SEC: body content -->
|
|
<article
|
|
v-if="propertyData.length === 0"
|
|
class="col surface-2 flex items-center justify-center"
|
|
>
|
|
<NoData
|
|
v-if="pageState.total !== 0 || pageState.searchDate.length > 0"
|
|
:not-found="!!pageState.inputSearch"
|
|
/>
|
|
<CreateButton
|
|
v-if="pageState.total === 0 && pageState.searchDate.length === 0"
|
|
@click="triggerDialog('add')"
|
|
label="general.add"
|
|
:i18n-args="{ text: $t('flow.title') }"
|
|
/>
|
|
</article>
|
|
|
|
<article v-else class="col q-pa-md surface-2 scroll full-width">
|
|
<q-infinite-scroll
|
|
:offset="10"
|
|
@load="
|
|
(_, done) => {
|
|
if ($q.screen.gt.xs || propertyPage === propertyPageMax) return;
|
|
propertyPage = propertyPage + 1;
|
|
fetchPropertyList().then(() =>
|
|
done(propertyPage >= propertyPageMax),
|
|
);
|
|
}
|
|
"
|
|
>
|
|
<q-table
|
|
flat
|
|
bordered
|
|
:grid="pageState.gridView"
|
|
:rows="propertyData"
|
|
:columns="columns"
|
|
class="full-width"
|
|
card-container-class="q-col-gutter-md"
|
|
row-key="name"
|
|
:rows-per-page-options="[0]"
|
|
hide-pagination
|
|
:visible-columns="fieldSelected"
|
|
>
|
|
<template #header="{ cols }">
|
|
<q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
|
|
<q-th
|
|
v-for="(v, i) in cols"
|
|
:key="i"
|
|
:class="{
|
|
'text-center': v.name === 'order',
|
|
'text-left': v.name === 'name' || v.name === 'type',
|
|
}"
|
|
>
|
|
{{ $t(v.label) }}
|
|
</q-th>
|
|
<q-th auto-width />
|
|
</q-tr>
|
|
</template>
|
|
|
|
<template #body="props">
|
|
<q-tr
|
|
:class="{
|
|
'app-text-muted': props.row.status === 'INACTIVE',
|
|
'status-active': props.row.status !== 'INACTIVE',
|
|
'status-inactive': props.row.status === 'INACTIVE',
|
|
}"
|
|
:style="
|
|
props.rowIndex % 2 !== 0
|
|
? $q.dark.isActive
|
|
? 'background: hsl(var(--gray-11-hsl)/0.2)'
|
|
: `background: #f9fafc`
|
|
: ''
|
|
"
|
|
>
|
|
<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
|
|
: props.row.name
|
|
}}
|
|
</section>
|
|
</q-td>
|
|
|
|
<q-td
|
|
style="width: 20%"
|
|
v-if="fieldSelected.includes('type')"
|
|
class="text-left"
|
|
>
|
|
<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
|
|
icon="mdi-eye-outline"
|
|
:id="`btn-eye-${props.row.name}`"
|
|
size="sm"
|
|
dense
|
|
round
|
|
flat
|
|
@click.stop="
|
|
() => {
|
|
assignFormData(props.row);
|
|
triggerDialog('view');
|
|
}
|
|
"
|
|
/>
|
|
<KebabAction
|
|
:id-name="props.row.name"
|
|
:status="props.row.status"
|
|
@view="
|
|
() => {
|
|
assignFormData(props.row);
|
|
triggerDialog('view');
|
|
}
|
|
"
|
|
@edit="
|
|
() => {
|
|
assignFormData(props.row);
|
|
triggerDialog('edit');
|
|
}
|
|
"
|
|
@delete="
|
|
() => {
|
|
deleteProperty(props.row.id);
|
|
}
|
|
"
|
|
@change-status="
|
|
() => {
|
|
triggerChangeStatus(props.row);
|
|
}
|
|
"
|
|
/>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
|
|
<template v-slot:item="props">
|
|
<section class="col-12 col-md-4 column">
|
|
<div
|
|
:class="{
|
|
'status-inactive': props.row.status === 'INACTIVE',
|
|
}"
|
|
class="surface-1 rounded bordered row no-wrap col"
|
|
style="overflow: hidden"
|
|
>
|
|
<div
|
|
class="col-md-2 col-3 flex items-center justify-center"
|
|
style="
|
|
color: var(--blue-6);
|
|
background: hsla(var(--blue-6-hsl) / 0.1);
|
|
"
|
|
>
|
|
<q-icon name="mdi-tag-text-outline" size="md" />
|
|
</div>
|
|
<article class="row q-pa-sm q-gutter-y-sm col">
|
|
<div
|
|
v-if="fieldSelected.includes('name')"
|
|
class="text-weight-bold col-12 ellipsis-2-lines"
|
|
:class="{
|
|
'app-text-muted': props.row.status === 'INACTIVE',
|
|
}"
|
|
>
|
|
{{
|
|
$i18n.locale === 'eng'
|
|
? props.row.nameEN
|
|
: props.row.name
|
|
}}
|
|
<q-tooltip>
|
|
{{
|
|
$i18n.locale === 'eng'
|
|
? props.row.nameEN
|
|
: props.row.name
|
|
}}
|
|
</q-tooltip>
|
|
</div>
|
|
<div
|
|
v-if="fieldSelected.includes('type')"
|
|
class="self-end"
|
|
>
|
|
<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
|
|
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
|
|
})`"
|
|
/>
|
|
</q-avatar>
|
|
{{
|
|
typeOption[
|
|
props.row.type.type as keyof typeof typeOption
|
|
].label
|
|
}}
|
|
</div>
|
|
</article>
|
|
<nav class="q-pa-sm row items-center self-start">
|
|
<q-btn
|
|
icon="mdi-eye-outline"
|
|
size="sm"
|
|
dense
|
|
round
|
|
flat
|
|
@click.stop="
|
|
() => {
|
|
assignFormData(props.row);
|
|
triggerDialog('view');
|
|
}
|
|
"
|
|
/>
|
|
<KebabAction
|
|
:id-name="props.row.id"
|
|
:status="props.row.status"
|
|
@view="
|
|
() => {
|
|
assignFormData(props.row);
|
|
triggerDialog('view');
|
|
}
|
|
"
|
|
@edit="
|
|
() => {
|
|
assignFormData(props.row);
|
|
triggerDialog('edit');
|
|
}
|
|
"
|
|
@delete="
|
|
() => {
|
|
deleteProperty(props.row.id);
|
|
}
|
|
"
|
|
@change-status="
|
|
() => {
|
|
triggerChangeStatus(props.row);
|
|
}
|
|
"
|
|
/>
|
|
</nav>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
</q-table>
|
|
|
|
<template v-slot:loading>
|
|
<div
|
|
v-if="$q.screen.lt.sm && propertyPage !== propertyPageMax"
|
|
class="row justify-center"
|
|
>
|
|
<q-spinner-dots color="primary" size="40px" />
|
|
</div>
|
|
</template>
|
|
</q-infinite-scroll>
|
|
</article>
|
|
|
|
<!-- SEC: footer content -->
|
|
<footer
|
|
class="row justify-between items-center q-px-md q-py-sm surface-2"
|
|
v-if="propertyPageMax > 0 && $q.screen.gt.xs"
|
|
>
|
|
<div class="col-4">
|
|
<div class="row items-center no-wrap">
|
|
<div class="app-text-muted q-mr-sm" v-if="$q.screen.gt.sm">
|
|
{{ $t('general.recordPerPage') }}
|
|
</div>
|
|
<div><PaginationPageSize v-model="propertyPageSize" /></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-4 row justify-center app-text-muted">
|
|
{{
|
|
$q.screen.gt.sm
|
|
? $t('general.recordsPage', {
|
|
resultcurrentPage: propertyData.length,
|
|
total: pageState.inputSearch
|
|
? propertyData.length
|
|
: pageState.total,
|
|
})
|
|
: $t('general.ofPage', {
|
|
current: propertyData.length,
|
|
total: pageState.inputSearch
|
|
? propertyData.length
|
|
: pageState.total,
|
|
})
|
|
}}
|
|
</div>
|
|
<nav class="col-4 row justify-end">
|
|
<PaginationComponent
|
|
v-model:current-page="propertyPage"
|
|
v-model:max-page="propertyPageMax"
|
|
:fetch-data="() => fetchPropertyList()"
|
|
/>
|
|
</nav>
|
|
</footer>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<PropertyDialog
|
|
@change-status="triggerChangeStatus"
|
|
@drawer-delete="() => deleteProperty()"
|
|
@drawer-edit="pageState.isDrawerEdit = true"
|
|
@drawer-undo="() => undo()"
|
|
@close="() => resetForm()"
|
|
@submit="() => submit()"
|
|
:readonly="!pageState.isDrawerEdit"
|
|
:isEdit="pageState.isDrawerEdit"
|
|
v-model="pageState.addModal"
|
|
v-model:property-data="formProperty"
|
|
v-model:drawer-model="pageState.viewDrawer"
|
|
/>
|
|
</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;
|
|
}
|
|
</style>
|