chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: add registered branch to product group

Browse source
This commit is contained in:
Methapon Metanipat 2024-09-10 13:35:53 +07:00
parent 01c5592f7d
commit 67d360c92b
5 changed files with 92 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

71
src/components/04_product-service/BasicInfoProduct.vue
View file

@ -1,6 +1,5 @@
<script setup lang="ts">
import { QSelect } from 'quasar';
import { getRole } from 'src/services/keycloak';
import useOptionStore from 'src/stores/options';
import { selectFilterOptionRefMod } from 'stores/utils';
import { ref, onMounted, watch } from 'vue';
@ -15,13 +14,8 @@ const process = defineModel<number>('process');
const name = defineModel<string>('name');
const code = defineModel<string>('code');
const expenseType = defineModel<string>('expenseType');
const registeredBranchId = defineModel<string>('registeredBranchId');
const codeOption = ref<{ id: string; name: string }[]>([]);
const optionsBranch = defineModel<{ id: string; name: string }[]>(
'optionsBranch',
{ default: [] },
);
defineProps<{
dense?: boolean;
@ -46,13 +40,6 @@ onMounted(async () => {
const codeOptions = ref<Record<string, unknown>[]>([]);
const codeFilter = selectFilterOptionRefMod(codeOption, codeOptions, 'label');
const branchOptions = ref<Record<string, unknown>[]>([]);
const branchFilter = selectFilterOptionRefMod(
optionsBranch,
branchOptions,
'name',
);
const expenseTypeOptions = ref<Record<string, unknown>[]>([]);
let expenseTypeFilter: (
value: string,
@ -128,51 +115,6 @@ watch(
</q-item>
</template>
</q-select>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
input-debounce="0"
class="col-md-3 col-6"
option-value="id"
option-label="name"
id="input-source-nationality"
v-model="registeredBranchId"
:dense="dense"
:readonly="readonly"
:options="branchOptions"
:hide-dropdown-icon="readonly"
:label="$t('productService.product.registeredBranch')"
:rules="[
(val) => {
const roles = getRole() || [];
const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(
(role) => roles.includes(role),
);
return (
isSpecialRole ||
!!val ||
$t('form.error.selectField', {
field: $t('productService.product.registeredBranch'),
})
);
},
]"
@filter="branchFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-input
for="input-name"
@ -207,19 +149,6 @@ watch(
/>
</template>
</q-input>
<!-- <q-input
for="input-detail"
:dense="dense"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
type="textarea"
class="col-12"
:label="$t('serviceDetail')"
v-model="detail"
/> -->
<q-select
outlined
clearable

99
src/components/04_product-service/BasicInformation.vue
View file

@ -2,6 +2,7 @@
import { QSelect } from 'quasar';
import { getRole } from 'src/services/keycloak';
import { selectFilterOptionRefMod } from 'stores/utils';
import { watch } from 'vue';
import { ref } from 'vue';
const remark = defineModel<string>('remark');
@ -12,8 +13,7 @@ const code = defineModel<string>('code');
const serviceCode = defineModel<string>('serviceCode');
const serviceName = defineModel<string>('serviceNameTh');
const serviceDescription = defineModel<string>('serviceDescription');
const registeredBranchId = defineModel<string | null>('registeredBranchId');
const registeredBranchId = defineModel<string>('registeredBranchId');
const optionsBranch = defineModel<{ id: string; name: string }[]>(
'optionsBranch',
@ -31,18 +31,21 @@ defineProps<{
}>();
const branchOptions = ref<Record<string, unknown>[]>([]);
const branchFilter = selectFilterOptionRefMod(
let branchFilter = selectFilterOptionRefMod(
optionsBranch,
branchOptions,
'name',
);
const serviceCodeOpts = ref([{ label: 'mou', value: 'mou' }]);
const serviceCodeOptions = ref<Record<string, unknown>[]>([]);
const serviceCodeFilter = selectFilterOptionRefMod(
serviceCodeOpts,
serviceCodeOptions,
'label',
watch(
() => optionsBranch.value,
() => {
branchFilter = selectFilterOptionRefMod(
optionsBranch,
branchOptions,
'name',
);
},
);
</script>
@ -60,6 +63,51 @@ const serviceCodeFilter = selectFilterOptionRefMod(
{{ $t(`form.field.basicInformation`) }}
</div>
<div v-if="!service" class="col-12 row q-col-gutter-sm">
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
class="col-md-12 col-12"
option-value="id"
option-label="name"
v-model="registeredBranchId"
id="input-source-nationality"
for="input-source-nationality"
:dense="dense"
:readonly="readonly"
:options="branchOptions"
:hide-dropdown-icon="readonly"
:label="$t('productService.service.registeredBranch')"
:rules="[
(val) => {
const roles = getRole() || [];
const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(
(role) => roles.includes(role),
);
return (
isSpecialRole ||
!!val ||
$t('form.error.selectField', {
field: $t('productService.service.registeredBranch'),
})
);
},
]"
@filter="branchFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-input
:dense="dense"
outlined
@ -111,39 +159,6 @@ const serviceCodeFilter = selectFilterOptionRefMod(
</div>
<div v-if="service" class="col-12 row q-col-gutter-sm">
<!-- <q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
input-debounce="0"
:disable="!readonly && disableCode"
class="col-3"
v-model="serviceCode"
id="select-br-id"
option-label="label"
option-value="value"
:dense="dense"
:readonly="readonly"
:options="serviceCodeOptions"
:label="$t('serviceCode')"
:hide-dropdown-icon="readonly || disableCode"
:rules="[(val: string) => !!val]"
@filter="serviceCodeFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
</q-select> -->
<q-input
id="input-service-code"
for="input-service-code"

59
src/pages/04_product-service/MainPage.vue
View file

@ -246,6 +246,7 @@ const formDataGroup = ref<ProductGroupCreate>({
detail: '',
name: '',
code: '',
registeredBranchId: '',
});
const formDataProduct = ref<ProductCreate>({
@ -719,7 +720,7 @@ async function triggerChangeStatus(
: t('dialog.message.confirmChangeStatusOn'),
action: async () => {
if (type === 'group' || productMode.value === 'group') {
const res = await toggleStatusGroup(id, status as Status)
await toggleStatusGroup(id, status as Status)
.then(resolve)
.catch(reject);
} else if (type === 'service') {
@ -847,21 +848,24 @@ function undoProductGroup() {
detail: previousValue.value.detail,
name: previousValue.value.name,
code: previousValue.value.code,
registeredBranchId: previousValue.value.registeredBranchId,
};
isEdit.value = false;
flowStore.rotate();
}
function assignFormDataGroup(data: ProductGroup) {
async function assignFormDataGroup(data: ProductGroup) {
previousValue.value = data;
currentStatusGroupType.value = data.status;
currentIdGroupType.value = data.id;
await fetchListOfOptionBranch();
formDataGroup.value = {
remark: data.remark,
detail: data.detail,
name: data.name,
code: data.code,
registeredBranchId: data.registeredBranchId,
};
}
@ -981,6 +985,7 @@ function clearFormGroup() {
detail: '',
name: '',
code: '',
registeredBranchId: '',
};
currentStatusGroupType.value = 'CREATED';
dialogInputForm.value = false;
@ -1481,8 +1486,9 @@ watch(productMode, async () => {
external-label
label-position="left"
@click="
() => {
async () => {
clearFormGroup();
await fetchListOfOptionBranch();
dialogInputForm = true;
}
"
@ -1640,12 +1646,12 @@ watch(productMode, async () => {
}
"
@view="
(v: (typeof treeProductTypeAndGroup)[number]) => {
async (v: (typeof treeProductTypeAndGroup)[number]) => {
if (v.type === 'group') {
editByTree = 'group';
currentStatusProduct = v.status === 'INACTIVE';
clearFormGroup();
assignFormDataGroup(v);
await assignFormDataGroup(v);
isEdit = false;
currentIdGropTree = v.id;
drawerInfo = true;
@ -1653,11 +1659,11 @@ watch(productMode, async () => {
}
"
@edit="
(v: (typeof treeProductTypeAndGroup)[number]) => {
async (v: (typeof treeProductTypeAndGroup)[number]) => {
editByTree = v.type as typeof editByTree;
if (v.type === 'group') {
clearFormGroup();
assignFormDataGroup(v);
await assignFormDataGroup(v);
isEdit = true;
currentIdGropTree = v.id;
drawerInfo = true;
@ -1980,13 +1986,13 @@ watch(productMode, async () => {
round
flat
@click.stop="
() => {
async () => {
if (productMode === 'group') {
editByTree = 'group';
currentStatusProduct =
props.row.status === 'INACTIVE';
clearFormGroup();
assignFormDataGroup(props.row);
await assignFormDataGroup(props.row);
isEdit = false;
currentIdGrop = props.row.id;
drawerInfo = true;
@ -2000,13 +2006,13 @@ watch(productMode, async () => {
:status="props.row.status"
:idName="props.row.name"
@view="
() => {
async () => {
if (productMode === 'group') {
editByTree = 'group';
currentStatusProduct =
props.row.status === 'INACTIVE';
clearFormGroup();
assignFormDataGroup(props.row);
await assignFormDataGroup(props.row);
isEdit = false;
currentIdGrop = props.row.id;
drawerInfo = true;
@ -2014,11 +2020,11 @@ watch(productMode, async () => {
}
"
@edit="
() => {
async () => {
if (productMode === 'group') {
editByTree = 'group';
clearFormGroup();
assignFormDataGroup(props.row);
await assignFormDataGroup(props.row);
isEdit = true;
currentIdGrop = props.row.id;
@ -2072,13 +2078,13 @@ watch(productMode, async () => {
triggerChangeStatus(props.row.id, props.row.status)
"
@viewCard="
() => {
async () => {
if (productMode === 'group') {
editByTree = 'group';
currentStatusProduct =
props.row.status === 'INACTIVE';
clearFormGroup();
assignFormDataGroup(props.row);
await assignFormDataGroup(props.row);
isEdit = false;
currentIdGrop = props.row.id;
drawerInfo = true;
@ -2086,10 +2092,10 @@ watch(productMode, async () => {
}
"
@updateCard="
() => {
async () => {
if (productMode === 'group') {
clearFormGroup();
assignFormDataGroup(props.row);
await assignFormDataGroup(props.row);
isEdit = true;
currentIdGrop = props.row.id;
@ -2971,9 +2977,11 @@ watch(productMode, async () => {
<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"
v-model:registered-branch-id="formDataGroup.registeredBranchId"
/>
</div>
</div>
@ -3140,6 +3148,8 @@ watch(productMode, async () => {
id="info-group"
dense
:readonly="!isEdit"
v-model:options-branch="branchOption"
v-model:registered-branch-id="formDataGroup.registeredBranchId"
v-model:remark="formDataGroup.remark"
v-model:name="formDataGroup.name"
v-model:code="formDataGroup.code"
@ -3755,10 +3765,6 @@ watch(productMode, async () => {
v-if="serviceTab === 1"
dense
service
v-model:options-branch="branchOption"
v-model:registered-branch-id="
formDataProductService.registeredBranchId
"
v-model:service-code="formDataProductService.code"
v-model:service-description="formDataProductService.detail"
v-model:service-name-th="formDataProductService.name"
@ -4057,10 +4063,6 @@ watch(productMode, async () => {
dense
service
disableCode
v-model:options-branch="branchOption"
v-model:registered-branch-id="
formDataProductService.registeredBranchId
"
v-model:service-code="formDataProductService.code"
v-model:service-description="formDataProductService.detail"
v-model:service-name-th="formDataProductService.name"
@ -4141,12 +4143,11 @@ watch(productMode, async () => {
async () => {
if (!currentNode) return;
await fetchListOfOptionBranch();
if (currentNode.type === 'group') {
editByTree = 'group';
currentStatusProduct = currentNode.status === 'INACTIVE';
clearFormGroup();
assignFormDataGroup(currentNode);
await assignFormDataGroup(currentNode);
isEdit = false;
currentIdGrop = currentNode.id;
drawerInfo = true;
@ -4168,12 +4169,12 @@ watch(productMode, async () => {
v-ripple
v-close-popup
@click.stop="
() => {
async () => {
if (!currentNode) return;
editByTree = currentNode.type as 'type' | 'group';
if (currentNode.type === 'group') {
clearFormGroup();
assignFormDataGroup(currentNode);
await assignFormDataGroup(currentNode);
isEdit = true;
currentIdGrop = currentNode.id;

2
src/stores/my-branch/index.ts
View file

@ -45,7 +45,7 @@ const useMyBranch = defineStore('useMyBranchStore', () => {
}
async function fetchListMyBranch(userId: string) {
const res = await api.get<Pagination<Branch[]>>(`/user/${userId}/branch`, {
const res = await api.get<Pagination<Branch[]>>(`/branch`, {
headers: {
'X-Rtid': flowStore.rtid,
},

5
src/stores/product-service/types.ts
View file

@ -195,11 +195,12 @@ export type ProductGroup = {
detail: string;
remark: string;
status: Status;
registeredBranchId: string;
createdBy: CreatedBy;
createdAt: string;
updatedBy: UpdatedBy;
updatedAt: string;
_count: { product: number; type: number; service: number };
_count: { product: number; service: number };
};
export interface ProductGroupCreate {
@ -207,6 +208,7 @@ export interface ProductGroupCreate {
detail: string;
name: string;
code: string;
registeredBranchId: string;
}
export interface ProductGroupUpdate {
@ -215,4 +217,5 @@ export interface ProductGroupUpdate {
name: string;
code: string;
status: Status;
registeredBranchId?: string;
}