feat: up code test
This commit is contained in:
Thanaphon Frappet
puriphatt
parent
ed9e0cf757
commit
841f1157b1
5 changed files with 592 additions and 2 deletions
|
|
@ -194,6 +194,7 @@ export default {
|
|||
personnel: 'บุคลากร',
|
||||
productService: 'สินค้าและบริการ',
|
||||
workflow: 'ขั้นตอนการทำงาน',
|
||||
property: 'คุณสมบัติ',
|
||||
customer: 'ลูกค้า',
|
||||
mainData: 'ข้อมูลหลัก',
|
||||
agencies: 'หน่วยงาน',
|
||||
|
|
@ -1431,4 +1432,9 @@ export default {
|
|||
11: 'พฤศจิกายน',
|
||||
12: 'ธันวาคม',
|
||||
},
|
||||
|
||||
property: {
|
||||
title: 'คุณสมบัติ',
|
||||
caption: 'จัดการคุณสมบัติ',
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -120,6 +120,7 @@ onMounted(async () => {
|
|||
),
|
||||
},
|
||||
{ label: 'workflow', route: '/workflow' },
|
||||
{ label: 'property', route: '/property' },
|
||||
{ label: 'productService', route: '/product-service' },
|
||||
{ label: 'customer', route: '/customer-management' },
|
||||
{ label: 'agencies', route: '/agencies-management' },
|
||||
|
|
|
|||
|
|
@ -1,3 +1,510 @@
|
|||
<script lang="ts" setup></script>
|
||||
<template></template>
|
||||
<script lang="ts" setup>
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { QSelect } from 'quasar';
|
||||
import { useNavigator } from 'src/stores/navigator';
|
||||
import { useProperty } from 'src/stores/property';
|
||||
|
||||
const navigatorStore = useNavigator();
|
||||
const propertyStore = useProperty();
|
||||
const {
|
||||
data: propertyData,
|
||||
page: propertyPage,
|
||||
pageSize: propertyPageSize,
|
||||
pageMax: propertyPageMax,
|
||||
} = storeToRefs(propertyStore);
|
||||
|
||||
const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
|
||||
const refFilter = ref<InstanceType<typeof QSelect>>();
|
||||
const fieldSelected = ref<('order' | 'name' | 'step')[]>([
|
||||
'order',
|
||||
'name',
|
||||
'step',
|
||||
]);
|
||||
const fieldSelectedOption = ref<{ label: string; value: string }[]>([
|
||||
{
|
||||
label: 'general.order',
|
||||
value: 'order',
|
||||
},
|
||||
|
||||
{
|
||||
label: 'general.name',
|
||||
value: 'name',
|
||||
},
|
||||
{
|
||||
label: 'flow.processStep',
|
||||
value: 'step',
|
||||
},
|
||||
]);
|
||||
|
||||
const pageState = reactive({
|
||||
hideStat: false,
|
||||
inputSearch: '',
|
||||
fieldSelected: [],
|
||||
gridView: false,
|
||||
total: 0,
|
||||
|
||||
addModal: false,
|
||||
viewDrawer: false,
|
||||
isDrawerEdit: true,
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
navigatorStore.current.title = 'property.title';
|
||||
navigatorStore.current.path = [{ text: 'property.caption', i18n: true }];
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<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-cogs',
|
||||
count: pageState.total,
|
||||
label: 'flow.title',
|
||||
color: 'gray',
|
||||
},
|
||||
]"
|
||||
: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-if="$q.screen.lt.md" v-slot:append>
|
||||
<span class="row">
|
||||
<q-separator vertical />
|
||||
<q-btn
|
||||
icon="mdi-filter-variant"
|
||||
unelevated
|
||||
class="q-ml-sm"
|
||||
padding="4px"
|
||||
size="sm"
|
||||
rounded
|
||||
@click="refFilter?.showPopup"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<div class="row col-md-5" style="white-space: nowrap">
|
||||
<q-select
|
||||
v-show="$q.screen.gt.sm"
|
||||
ref="refFilter"
|
||||
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:
|
||||
v.value === 'name'
|
||||
? $t('general.name', { msg: $t('flow.title') })
|
||||
: $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"
|
||||
:not-found="!!pageState.inputSearch"
|
||||
/>
|
||||
|
||||
<CreateButton
|
||||
v-if="pageState.total === 0"
|
||||
@click=""
|
||||
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 in cols"
|
||||
:key="v"
|
||||
:class="{
|
||||
'text-left': v.name === 'name',
|
||||
'text-right': v.name === 'step',
|
||||
}"
|
||||
>
|
||||
{{
|
||||
v.label &&
|
||||
$t(v.label, {
|
||||
msg:
|
||||
v.name === 'step'
|
||||
? $t('flow.step')
|
||||
: v.name === 'name'
|
||||
? $t('flow.title')
|
||||
: '',
|
||||
})
|
||||
}}
|
||||
</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"
|
||||
>
|
||||
{{
|
||||
$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(--gray-6);
|
||||
background: hsla(var(--gray-6-hsl) / 0.1);
|
||||
"
|
||||
>
|
||||
<q-icon name="mdi-cogs" />
|
||||
|
||||
<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>
|
||||
{{ props.row.name }}
|
||||
</section>
|
||||
</q-td>
|
||||
<q-td
|
||||
v-if="fieldSelected.includes('step')"
|
||||
class="text-right"
|
||||
>
|
||||
{{ props.row.step.length }}
|
||||
</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="() => {}"
|
||||
/>
|
||||
<KebabAction
|
||||
:id-name="props.row.name"
|
||||
:status="props.row.status"
|
||||
@view="() => {}"
|
||||
@edit="() => {}"
|
||||
@delete="() => {}"
|
||||
@change-status="() => {}"
|
||||
/>
|
||||
</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(--gray-6);
|
||||
background: hsla(var(--gray-6-hsl) / 0.1);
|
||||
"
|
||||
>
|
||||
<q-icon name="mdi-cogs" 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',
|
||||
}"
|
||||
>
|
||||
{{ props.row.name }}
|
||||
|
||||
<q-tooltip>
|
||||
{{ props.row.name }}
|
||||
</q-tooltip>
|
||||
</div>
|
||||
<div
|
||||
v-if="fieldSelected.includes('step')"
|
||||
class="self-end"
|
||||
>
|
||||
<div class="bordered rounded q-px-sm">
|
||||
<q-icon
|
||||
name="mdi-note-edit-outline"
|
||||
class="q-pr-sm"
|
||||
/>
|
||||
{{ props.row.step.length }}
|
||||
</div>
|
||||
</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="() => {}"
|
||||
/>
|
||||
<KebabAction
|
||||
:id-name="props.row.id"
|
||||
:status="props.row.status"
|
||||
@view="() => {}"
|
||||
@edit="() => {}"
|
||||
@delete="() => "
|
||||
@change-status="() => "
|
||||
/>
|
||||
</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="() => {}"
|
||||
/>
|
||||
</nav>
|
||||
</footer>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
|
|
|
|||
71
src/stores/property/index.ts
Normal file
71
src/stores/property/index.ts
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
import { ref } from 'vue';
|
||||
import { defineStore } from 'pinia';
|
||||
import { api } from 'src/boot/axios';
|
||||
import { PaginationResult } from 'src/types';
|
||||
import { Status } from '../types';
|
||||
import { Property } from './types';
|
||||
|
||||
export const useProperty = defineStore('property-store', () => {
|
||||
const data = ref<Property[]>([]);
|
||||
const page = ref<number>(1);
|
||||
const pageMax = ref<number>(1);
|
||||
const pageSize = ref<number>(30);
|
||||
|
||||
async function getProperty(id: string) {
|
||||
const res = await api.get<Property[]>(`/property/${id}`);
|
||||
|
||||
if (res.status >= 400) return null;
|
||||
|
||||
return res.data;
|
||||
}
|
||||
|
||||
async function getPropertyList(params?: {
|
||||
page?: number;
|
||||
pageSize?: number;
|
||||
query?: string;
|
||||
status?: Status;
|
||||
activeOnly?: boolean;
|
||||
}) {
|
||||
const res = await api.get<PaginationResult<Property[]>>('/property', {
|
||||
params,
|
||||
});
|
||||
|
||||
if (res.status >= 400) return null;
|
||||
|
||||
return res.data;
|
||||
}
|
||||
|
||||
async function creatProperty(data: Property) {
|
||||
const res = await api.post<Property>('/property', data);
|
||||
if (res.status >= 400) return null;
|
||||
return res;
|
||||
}
|
||||
|
||||
async function editProperty(data: Property & { id: string }) {
|
||||
const res = await api.put<Property>(`/property/${data.id}`, {
|
||||
...data,
|
||||
id: undefined,
|
||||
});
|
||||
if (res.status >= 400) return null;
|
||||
return res;
|
||||
}
|
||||
|
||||
async function deleteProperty(id: string) {
|
||||
const res = await api.delete<Property>(`/property/${id}`);
|
||||
if (res.status >= 400) return null;
|
||||
return res;
|
||||
}
|
||||
|
||||
return {
|
||||
data,
|
||||
page,
|
||||
pageSize,
|
||||
pageMax,
|
||||
|
||||
getProperty,
|
||||
getPropertyList,
|
||||
creatProperty,
|
||||
editProperty,
|
||||
deleteProperty,
|
||||
};
|
||||
});
|
||||
5
src/stores/property/types.ts
Normal file
5
src/stores/property/types.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export type Property = {
|
||||
name: string;
|
||||
nameEn: string;
|
||||
type: Record<string, any>;
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue