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

fix(04): group form & info + change status

Browse source
This commit is contained in:
puriphatt 2024-08-07 10:11:53 +00:00
parent ba66eaf959
commit 9193a6a810
3 changed files with 288 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
public/images/product-service-group-banner.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 388 KiB

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

@ -7,6 +7,7 @@ import { ref } from 'vue';
const remark = defineModel<string>('remark'); const remark = defineModel<string>('remark');
const detail = defineModel<string>('detail'); const detail = defineModel<string>('detail');
const name = defineModel<string>('name'); const name = defineModel<string>('name');
const code = defineModel<string>('code');
const serviceCode = defineModel<string>('serviceCode'); const serviceCode = defineModel<string>('serviceCode');
const serviceName = defineModel<string>('serviceNameTh'); const serviceName = defineModel<string>('serviceNameTh');
@ -37,130 +38,153 @@ const branchFilter = selectFilterOptionRefMod(
</script> </script>
<template> <template>
<div class="col-3 app-text-muted"> <div class="row col-12">
• {{ $t(`formDialogTitleInformation`) }} <div class="col-12 q-pb-sm text-weight-bold text-body1">
</div> <q-icon
<div v-if="!service" class="col-9 row q-col-gutter-md"> flat
<q-input size="xs"
lazy-rules="ondemand" class="q-pa-sm rounded q-mr-xs"
:dense="dense" color="info"
outlined name="mdi-office-building-outline"
:readonly="readonly" style="background-color: var(--surface-3)"
hide-bottom-space />
class="col-12" {{ $t(`formDialogTitleInformation`) }}
:label=" </div>
$t(isType ? 'productAndServiceTypeName' : 'productAndServiceGroupName') <div v-if="!service" class="col-12 row q-col-gutter-sm">
" <q-input
v-model="name" lazy-rules="ondemand"
:rules="[(val: string) => !!val || $t('pleaseInformation')]" :dense="dense"
/> outlined
<q-input readonly
lazy-rules="ondemand" :disable="!readonly"
:dense="dense" hide-bottom-space
outlined class="col-6"
:readonly="readonly" :label="$t('productAndServiceGroupCode')"
hide-bottom-space v-model="code"
type="textarea" />
class="col-12" <q-input
:label="$t('detail')" lazy-rules="ondemand"
v-model="detail" :dense="dense"
:for="`input-detail`" outlined
/> :readonly="readonly"
<q-input hide-bottom-space
lazy-rules="ondemand" class="col-6"
:dense="dense" :label="
outlined $t(
:readonly="readonly" isType ? 'productAndServiceTypeName' : 'productAndServiceGroupName',
hide-bottom-space )
type="textarea" "
class="col-12" v-model="name"
:label="$t('formDialogInputRemark')" :rules="[(val: string) => !!val || $t('pleaseInformation')]"
v-model="remark" />
:for="`input-remark`" <q-input
/> lazy-rules="ondemand"
</div> :dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
type="textarea"
class="col-12"
:label="$t('detail')"
v-model="detail"
:for="`input-detail`"
/>
<q-input
lazy-rules="ondemand"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
type="textarea"
class="col-12"
:label="$t('formDialogInputRemark')"
v-model="remark"
:for="`input-remark`"
/>
</div>
<div v-if="service" class="col-9 row q-col-gutter-md"> <div v-if="service" class="col-9 row q-col-gutter-md">
<q-input <q-input
lazy-rules="ondemand" lazy-rules="ondemand"
id="input-service-code" id="input-service-code"
for="input-service-code" for="input-service-code"
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-3" class="col-3"
:label="$t('serviceCode')" :label="$t('serviceCode')"
v-model="serviceCode" v-model="serviceCode"
:rules="[(val: string) => !!val || $t('pleaseInformation')]" :rules="[(val: string) => !!val || $t('pleaseInformation')]"
/> />
<q-select <q-select
outlined outlined
clearable clearable
use-input use-input
fill-input fill-input
emit-value emit-value
map-options map-options
hide-selected hide-selected
hide-bottom-space hide-bottom-space
class="col-3" class="col-3"
option-value="id" option-value="id"
option-label="name" option-label="name"
lazy-rules="ondemand" lazy-rules="ondemand"
v-model="registeredBranchId" v-model="registeredBranchId"
id="input-source-nationality" id="input-source-nationality"
for="input-source-nationality" for="input-source-nationality"
:dense="dense" :dense="dense"
:readonly="readonly" :readonly="readonly"
:options="branchOptions" :options="branchOptions"
:hide-dropdown-icon="readonly" :hide-dropdown-icon="readonly"
:label="$t('registeredBranch')" :label="$t('registeredBranch')"
:rules="[ :rules="[
(val) => { (val) => {
const roles = getRole() || []; const roles = getRole() || [];
const isSpecialRole = ['admin', 'system', 'head_of_admin'].some( const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(
(role) => roles.includes(role), (role) => roles.includes(role),
); );
return isSpecialRole || !!val || 'กรุณากรอกข้อมูล'; return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
}, },
]" ]"
@filter="branchFilter" @filter="branchFilter"
> >
<template v-slot:no-option> <template v-slot:no-option>
<q-item> <q-item>
<q-item-section class="text-grey"> <q-item-section class="text-grey">
{{ $t('noResults') }} {{ $t('noResults') }}
</q-item-section> </q-item-section>
</q-item> </q-item>
</template> </template>
</q-select> </q-select>
<q-input <q-input
lazy-rules="ondemand" lazy-rules="ondemand"
id="input-service-name" id="input-service-name"
for="input-service-name" for="input-service-name"
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-6" class="col-6"
:label="$t('serviceName')" :label="$t('serviceName')"
v-model="serviceName" v-model="serviceName"
/> />
<q-input <q-input
lazy-rules="ondemand" lazy-rules="ondemand"
id="input-service-description" id="input-service-description"
for="input-service-description" for="input-service-description"
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
type="textarea" type="textarea"
class="col-12" class="col-12"
:label="$t('serviceDetail')" :label="$t('serviceDetail')"
v-model="serviceDescription" v-model="serviceDescription"
/> />
</div>
</div> </div>
</template> </template>

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

@ -28,6 +28,9 @@ import InfoForm from 'components/02_personnel-management/InfoForm.vue';
import NoData from 'components/NoData.vue'; import NoData from 'components/NoData.vue';
import PaginationComponent from 'src/components/PaginationComponent.vue'; import PaginationComponent from 'src/components/PaginationComponent.vue';
import TreeCompoent from 'src/components/TreeCompoent.vue'; import TreeCompoent from 'src/components/TreeCompoent.vue';
import DialogForm from 'src/components/DialogForm.vue';
import ProfileBanner from 'src/components/ProfileBanner.vue';
import SideMenu from 'src/components/SideMenu.vue';
import useFlowStore from 'src/stores/flow'; import useFlowStore from 'src/stores/flow';
import useMyBranchStore from 'src/stores/my-branch'; import useMyBranchStore from 'src/stores/my-branch';
@ -159,14 +162,14 @@ const treeProductTypeAndGroup = computed(() => {
type: 'group', type: 'group',
children: children:
item.id === currentIdGrop.value item.id === currentIdGrop.value
? recordTreeProductType.value[currentIdGrop.value]?.map((x) => ({ ? (recordTreeProductType.value[currentIdGrop.value]?.map((x) => ({
...x, ...x,
type: 'type', type: 'type',
})) ?? [] })) ?? [])
: recordTreeProductType.value[item.id]?.map((x) => ({ : (recordTreeProductType.value[item.id]?.map((x) => ({
...x, ...x,
type: 'type', type: 'type',
})) ?? item._count.type > 0 })) ?? item._count.type > 0)
? [ ? [
{ {
id: '', id: '',
@ -416,6 +419,9 @@ const currentIdType = ref<string>('');
const currentIdService = ref<string>(''); const currentIdService = ref<string>('');
const currentIdProduct = ref<string>(''); const currentIdProduct = ref<string>('');
const currentStatusGroup = ref<Status>('CREATED');
const currentStatusType = ref<Status>('CREATED');
const branchOption = ref<{ id: string; name: string }[]>([]); const branchOption = ref<{ id: string; name: string }[]>([]);
const currentStatus = ref<Status | 'All'>('All'); const currentStatus = ref<Status | 'All'>('All');
@ -688,9 +694,10 @@ async function toggleStatusType(id: string, status: Status) {
} }
async function toggleStatusGroup(id: string, status: Status) { async function toggleStatusGroup(id: string, status: Status) {
await editProductService(id, { const res = await editProductService(id, {
status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE', status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
}); });
if (res) currentStatusGroup.value = res.status;
await fetchListGroups(); await fetchListGroups();
flowStore.rotate(); flowStore.rotate();
@ -858,6 +865,8 @@ function undoProductGroup() {
function assignFormDataGroup(data: ProductGroup) { function assignFormDataGroup(data: ProductGroup) {
previousValue.value = data; previousValue.value = data;
currentStatusGroup.value = data.status;
currentIdGrop.value = data.id;
formDataGroup.value = { formDataGroup.value = {
remark: data.remark, remark: data.remark,
@ -975,7 +984,7 @@ function clearFormGroup() {
name: '', name: '',
code: '', code: '',
}; };
currentStatusGroup.value = 'CREATED';
dialogInputForm.value = false; dialogInputForm.value = false;
} }
@ -3311,23 +3320,82 @@ watch(
</div> </div>
</div> </div>
<FormDialog <DialogForm
v-model:modal="dialogInputForm" v-model:modal="dialogInputForm"
noAddress noAddress
:title="$t('addProduct')" :title="$t('addProduct')"
:submit="() => (productMode === 'type' ? submitType() : submitGroup())" :submit="() => (productMode === 'type' ? submitType() : submitGroup())"
:close="clearFormGroup" :close="clearFormGroup"
> >
<template #information> <div class="q-mx-lg q-mt-lg">
<BasicInformation <ProfileBanner
dense active
:isType="productMode === 'type'" hideFade
v-model:remark="formDataGroup.remark" useToggle
v-model:name="formDataGroup.name" icon="mdi-folder-plus"
v-model:detail="formDataGroup.detail" :title="formDataGroup.name"
:caption="formDataGroup.code"
:menu="[
{
icon: 'mdi-office-building-outline',
color: 'hsl(var(--info-bg))',
bgColor: 'var(--surface-1)',
},
]"
fallbackCover="/images/product-service-group-banner.png"
color="hsla(var(--pink-6-hsl)/1)"
bg-color="hsla(var(--pink-6-hsl)/0.1)"
v-model:toggle-status="currentStatusGroup"
@update:toggle-status="
() => {
currentStatusGroup =
currentStatusGroup === 'CREATED' ? 'INACTIVE' : 'CREATED';
}
"
/> />
</template> </div>
</FormDialog> <div
class="col surface-1 q-ma-lg rounded bordered scroll row relative-position"
id="group-form"
>
<div
class="col"
style="height: 100%; max-height: 100; overflow-y: auto"
v-if="$q.screen.gt.sm"
>
<div class="q-py-md q-pl-md q-pr-sm">
<SideMenu
:menu="[
{
name: $t('formDialogTitleInformation'),
anchor: 'form-group',
},
]"
background="transparent"
:active="{
background: 'hsla(var(--blue-6-hsl) / .2)',
foreground: 'var(--blue-6)',
}"
scroll-element="#group-form"
/>
</div>
</div>
<div
class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
id="customer-form-content"
style="height: 100%; max-height: 100%; overflow-y: auto"
>
<BasicInformation
ide="form-group"
dense
:isType="productMode === 'type'"
v-model:remark="formDataGroup.remark"
v-model:name="formDataGroup.name"
v-model:detail="formDataGroup.detail"
/>
</div>
</div>
</DialogForm>
<DrawerInfo <DrawerInfo
:show-edit="!currentStatusProduct" :show-edit="!currentStatusProduct"
@ -3373,11 +3441,61 @@ watch(
:delete-data="() => deleteProductById()" :delete-data="() => deleteProductById()"
:close="() => (drawerInfo = false)" :close="() => (drawerInfo = false)"
> >
<template #info> <InfoForm>
<InfoForm noAddress> <div class="q-mx-lg q-mt-lg">
<template #information> <ProfileBanner
<!-- <AppBox class="q-ma-md" bordered> --> :active="currentStatusGroup !== 'INACTIVE'"
hideFade
useToggle
icon="mdi-folder-plus"
fallbackCover="/images/product-service-group-banner.png"
v-model:toggle-status="currentStatusGroup"
color="hsla(var(--pink-6-hsl)/1)"
bg-color="hsla(var(--pink-6-hsl)/0.1)"
:title="formDataGroup.name"
:caption="formDataGroup.code"
:toggleTitle="$t('formDialogTitleUserStatus')"
:menu="[
{
icon: 'mdi-office-building-outline',
color: 'hsl(var(--info-bg))',
bgColor: 'var(--surface-1)',
},
]"
@update:toggle-status="
async (v) => {
await triggerChangeStatus(currentIdGrop, v, 'group');
}
"
/>
</div>
<div
class="col surface-1 q-ma-lg rounded bordered scroll row"
id="group-info"
>
<div class="col">
<div style="position: sticky; top: 0" class="q-pa-sm">
<SideMenu
:menu="[
{
name: $t('formDialogTitleInformation'),
anchor: 'info-group',
},
]"
background="transparent"
:active="{
background: 'hsla(var(--blue-6-hsl) / .2)',
foreground: 'var(--blue-6)',
}"
scroll-element="#group-info"
/>
</div>
</div>
<div class="col-10 q-pa-md q-gutter-y-xl">
<BasicInformation <BasicInformation
id="info-group"
dense dense
:isType="productMode === 'type'" :isType="productMode === 'type'"
:readonly="!isEdit" :readonly="!isEdit"
@ -3386,10 +3504,9 @@ watch(
v-model:code="formDataGroup.code" v-model:code="formDataGroup.code"
v-model:detail="formDataGroup.detail" v-model:detail="formDataGroup.detail"
/> />
<!-- </AppBox> --> </div>
</template> </div>
</InfoForm> </InfoForm>
</template>
</DrawerInfo> </DrawerInfo>
<FormDialog <FormDialog
@ -4086,8 +4203,8 @@ watch(
} }
.status-inactive { .status-inactive {
--_branch-status-color: var(--red-4-hsl); --_branch-status-color: var(--stone-5-hsl);
--_branch-badge-bg: var(--red-4-hsl); --_branch-badge-bg: var(--stone-5-hsl);
filter: grayscale(0.5); filter: grayscale(0.5);
opacity: 0.5; opacity: 0.5;
} }