refactor: api select value (#69)

* feat: add file

* fix: wrong type

* feat: select customer component

* fixup! feat: select customer component

* fix: char case

* refactor: fn alias

* chore: add space

* feat: accept fetch parameter

* refactor: naming

* feat: add emit event create

* fix: add suffix to add text

* feat: add before options slot for select input comp

* fix: error when label not found

* fix: value type

* feat: add required param

* fix: wording

* refactor: fix customer

* feat: use new select component

* chore: add note

* feat: add decoration for select with creatable

* feat: emit event

* feat: close popup on click

* feat: adjust alignment

* feat: add readonly params

* feat: add select branch option

* feat: use new select component

* feat: add disabled params

* feat: adjust internal search and select

* refactor: props type

* feat: use new select component

* feat: add lib for select component

* refactor: use factory function instead

* refactor: merge two lines of code

* refactor: move watch inside

* refactor: fix value not in list check

* chore: cleanup

* fix: remove test page size

* chore: remove unused

* feat: use new select component

* fix: typo

* fix: error

* refactor: extract type

* refactor: change ref var to normal var

* refactor: force overwrite params to prevent error on render

* feat: add clearable parameter

* feat: make clearable
This commit is contained in:
Methapon Metanipat 2024-11-12 11:56:14 +07:00 committed by GitHub
parent a227744131
commit d414685fe7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 500 additions and 319 deletions

View file

@ -2,7 +2,6 @@
import { ref, watch, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import { onMounted } from 'vue';
import { getUserId, getRole } from 'src/services/keycloak';
import { storeToRefs } from 'pinia';
import { useQuasar, type QTableProps } from 'quasar';
@ -38,15 +37,10 @@ import {
} from 'components/button';
import useFlowStore from 'stores/flow';
import useMyBranchStore from 'stores/my-branch';
import { dateFormat } from 'src/utils/datetime';
import { formatNumberDecimal, isRoleInclude } from 'stores/utils';
const userBranchStore = useMyBranchStore();
const { currentMyBranch } = storeToRefs(userBranchStore);
import { Status } from 'stores/types';
import { dialog, dialogWarningClose } from 'stores/utils';
@ -98,7 +92,6 @@ const {
} = productServiceStore;
const { workNameItems, splitPay } = storeToRefs(productServiceStore);
const readOnlybranchOption = ref<boolean>(false);
const allStat = ref<{ mode: string; count: number }[]>([]);
const stat = ref<
{
@ -500,13 +493,11 @@ const currentIdGroup = ref<string>('');
const currentIdType = ref<string>('');
const currentIdService = ref<string>('');
const currentIdProduct = ref<string>('');
const currentIdGropTree = ref<string>('');
const currentIdGroupTree = ref<string>('');
const currentStatusGroupType = ref<Status>('CREATED');
const currentIdGroupType = ref('');
const branchOption = ref<{ id: string; name: string }[]>([]);
const currentStatus = ref<Status | 'All'>('All');
// img
@ -559,23 +550,6 @@ function selectAllProduct(list: Product[]) {
});
}
async function fetchListOfOptionBranch() {
const uid = getUserId();
const role = getRole();
if (!uid) return;
if (role?.includes('system')) {
const result = await userBranchStore.fetchListOptionBranch();
if (result && result.total > 0) branchOption.value = result.result;
} else {
const result = await userBranchStore.fetchListMyBranch(uid);
if (result && result.total > 0) branchOption.value = result.result;
}
formDataGroup.value.registeredBranchId = currentMyBranch.value?.id || '';
}
async function fetchListGroups() {
const res = await fetchProductGroup({
page: currentPageGroup.value,
@ -863,7 +837,6 @@ function undoProductGroup() {
registeredBranchId: previousValue.value.registeredBranchId,
};
isEdit.value = false;
readOnlybranchOption.value = false;
flowStore.rotate();
}
@ -871,7 +844,6 @@ async function assignFormDataGroup(data: ProductGroup) {
previousValue.value = data;
currentStatusGroupType.value = data.status;
currentIdGroupType.value = data.id;
await fetchListOfOptionBranch();
formDataGroup.value = {
remark: data.remark,
@ -881,22 +853,6 @@ async function assignFormDataGroup(data: ProductGroup) {
shared: data.shared,
registeredBranchId: data.registeredBranchId,
};
const tempValue = branchOption.value.find(
(v) => v.id === data.registeredBranchId,
);
if (tempValue !== undefined) {
readOnlybranchOption.value = false;
} else {
readOnlybranchOption.value = true;
branchOption.value = [
{
id: data.registeredBranch.id,
name: data.registeredBranch.name,
},
];
}
}
const prevService = ref<ServiceCreate>({
@ -1195,8 +1151,8 @@ async function submitProduct(notClose = false) {
async function submitGroup() {
if (drawerInfo.value) {
if (currentIdGropTree.value)
await editProductGroup(currentIdGropTree.value, formDataGroup.value);
if (currentIdGroupTree.value)
await editProductGroup(currentIdGroupTree.value, formDataGroup.value);
else await editProductGroup(currentIdGroup.value, formDataGroup.value);
} else {
const res = await createProductGroup(formDataGroup.value);
@ -1207,7 +1163,7 @@ async function submitGroup() {
}
}
currentIdGropTree.value = '';
currentIdGroupTree.value = '';
drawerInfo.value = false;
await fetchListGroups();
clearFormGroup();
@ -1619,20 +1575,17 @@ watch(
async () => {
if (productMode === 'group') {
clearFormGroup();
await fetchListOfOptionBranch();
dialogInputForm = true;
}
if (productMode === 'product') {
productTab = 1;
clearFormProduct();
await fetchListOfOptionBranch();
dialogProduct = true;
}
if (productMode === 'service') {
serviceTab = 1;
clearFormGroup();
clearFormService();
await fetchListOfOptionBranch();
serviceTab = 1;
dialogService = true;
}
@ -1780,7 +1733,7 @@ watch(
clearFormGroup();
await assignFormDataGroup(v);
isEdit = false;
currentIdGropTree = v.id;
currentIdGroupTree = v.id;
drawerInfo = true;
}
}
@ -1792,7 +1745,7 @@ watch(
clearFormGroup();
await assignFormDataGroup(v);
isEdit = true;
currentIdGropTree = v.id;
currentIdGroupTree = v.id;
drawerInfo = true;
}
}
@ -2803,7 +2756,6 @@ watch(
flat
@click.stop="
async () => {
await fetchListOfOptionBranch();
if (props.row.type === 'product') {
currentIdProduct = props.row.id;
assignFormDataProduct(props.row);
@ -2823,7 +2775,6 @@ watch(
:id-name="props.row.name"
@view="
async () => {
await fetchListOfOptionBranch();
if (props.row.type === 'product') {
currentIdProduct = props.row.id;
assignFormDataProduct(props.row);
@ -2839,7 +2790,6 @@ watch(
"
@edit="
async () => {
await fetchListOfOptionBranch();
if (props.row.type === 'product') {
currentIdProduct = props.row.id;
infoProductEdit = true;
@ -2896,7 +2846,6 @@ watch(
"
@menu-view-detail="
async () => {
await fetchListOfOptionBranch();
if (row.type === 'product') {
currentIdProduct = row.id;
assignFormDataProduct(row);
@ -2912,7 +2861,6 @@ watch(
"
@menu-edit="
async () => {
await fetchListOfOptionBranch();
if (row.type === 'product') {
currentIdProduct = row.id;
infoProductEdit = true;
@ -3125,7 +3073,6 @@ watch(
<BasicInformation
ide="form-group"
dense
v-model:options-branch="branchOption"
v-model:remark="formDataGroup.remark"
v-model:name="formDataGroup.name"
v-model:detail="formDataGroup.detail"
@ -3305,8 +3252,7 @@ watch(
id="info-group"
dense
:readonly="!isEdit"
:read-onlybranch-option="!readOnlybranchOption"
v-model:options-branch="branchOption"
branch-readonly
v-model:registered-branch-id="formDataGroup.registeredBranchId"
v-model:remark="formDataGroup.remark"
v-model:name="formDataGroup.name"
@ -4432,6 +4378,7 @@ watch(
'q-py-sm q-px-lg': !$q.screen.gt.sm,
}"
style="height: 100%; max-height: 100%; overflow-y: auto"
v-if="dialogServiceEdit"
>
<BasicInformation
v-if="serviceTab === 1"

View file

@ -837,7 +837,7 @@ watch(
</q-item>
</template>
<template #selectedItem="{ scope }">
<template #selected-item="{ scope }">
<q-item-section v-if="scope.opt">
{{ scope.opt.name }}
<span class="app-text-muted text-caption">