feat: menu agencies (#65)
* feat: agencies => add agencies menu --------- Co-authored-by: Methapon Metanipat <methapon@frappet.com>
This commit is contained in:
puriphatt
GitHub
parent
f6479cc72d
commit
b87e15301f
12 changed files with 1305 additions and 18 deletions
334
src/pages/07_agencies-management/AgenciesDialog.vue
Normal file
334
src/pages/07_agencies-management/AgenciesDialog.vue
Normal file
|
|
@ -0,0 +1,334 @@
|
|||
<script setup lang="ts">
|
||||
import DialogForm from 'src/components/DialogForm.vue';
|
||||
import DrawerInfo from 'src/components/DrawerInfo.vue';
|
||||
import ProfileBanner from 'src/components/ProfileBanner.vue';
|
||||
import SideMenu from 'src/components/SideMenu.vue';
|
||||
import FormBasicInfoAgencies from 'src/components/07_agencies-management/FormBasicInfoAgencies.vue';
|
||||
import AddressForm from 'src/components/form/AddressForm.vue';
|
||||
import {
|
||||
UndoButton,
|
||||
SaveButton,
|
||||
EditButton,
|
||||
DeleteButton,
|
||||
} from 'src/components/button';
|
||||
import { InstitutionPayload } from 'src/stores/institution/types';
|
||||
|
||||
const model = defineModel<boolean>({ required: true, default: false });
|
||||
const drawerModel = defineModel<boolean>('drawerModel', {
|
||||
required: true,
|
||||
default: false,
|
||||
});
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
readonly?: boolean;
|
||||
isEdit?: boolean;
|
||||
}>(),
|
||||
{ readonly: false, isEdit: false },
|
||||
);
|
||||
|
||||
defineEmits<{
|
||||
(e: 'submit'): void;
|
||||
(e: 'close'): void;
|
||||
(e: 'changeStatus'): void;
|
||||
(e: 'drawerUndo'): void;
|
||||
(e: 'drawerEdit'): void;
|
||||
(e: 'drawerDelete'): void;
|
||||
}>();
|
||||
|
||||
const data = defineModel<InstitutionPayload>('data', {
|
||||
required: true,
|
||||
default: {
|
||||
group: '',
|
||||
name: '',
|
||||
nameEN: '',
|
||||
code: '',
|
||||
addressEN: '',
|
||||
address: '',
|
||||
soi: '',
|
||||
soiEN: '',
|
||||
moo: '',
|
||||
mooEN: '',
|
||||
street: '',
|
||||
streetEN: '',
|
||||
subDistrictId: '',
|
||||
districtId: '',
|
||||
provinceId: '',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<DialogForm
|
||||
hide-footer
|
||||
:title="$t('general.add', { text: $t('agencies.title') })"
|
||||
v-model:modal="model"
|
||||
:submit="() => $emit('submit')"
|
||||
:close="() => $emit('close')"
|
||||
>
|
||||
<div
|
||||
:class="{
|
||||
'q-mx-lg q-my-md': $q.screen.gt.sm,
|
||||
'q-mx-md q-my-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
>
|
||||
<ProfileBanner
|
||||
no-image-action
|
||||
readonly
|
||||
active
|
||||
hide-fade
|
||||
hide-active
|
||||
:icon="'ph-building-office'"
|
||||
:title="data.name"
|
||||
:caption="data.code"
|
||||
:color="`hsla(var(--green-8-hsl)/1)`"
|
||||
:bg-color="`hsla(var(--green-8-hsl)/0.1)`"
|
||||
/>
|
||||
<!-- v-model:toggle-status="currentStatusGroupType"
|
||||
@update:toggle-status="
|
||||
() => {
|
||||
currentStatusGroupType =
|
||||
currentStatusGroupType === 'CREATED' ? 'INACTIVE' : 'CREATED';
|
||||
}
|
||||
" -->
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col surface-1 rounded bordered scroll row relative-position"
|
||||
:class="{
|
||||
'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
|
||||
'q-mb-sm q-mx-md': !$q.screen.gt.sm,
|
||||
}"
|
||||
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('form.field.basicInformation'),
|
||||
anchor: 'agencies-basic-info',
|
||||
},
|
||||
{
|
||||
name: $t('general.address'),
|
||||
anchor: 'agencies-address-info',
|
||||
},
|
||||
]"
|
||||
background="transparent"
|
||||
:active="{
|
||||
background: 'hsla(var(--blue-6-hsl) / .2)',
|
||||
foreground: 'var(--blue-6)',
|
||||
}"
|
||||
scroll-element="#agencies-form-content"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-12 col-md-10"
|
||||
id="agencies-form-content"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-py-md q-px-lg': !$q.screen.gt.sm,
|
||||
}"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
>
|
||||
<div
|
||||
class="q-py-md q-px-lg"
|
||||
style="position: absolute; z-index: 99999; top: 0; right: 0"
|
||||
>
|
||||
<div class="surface-1 row rounded">
|
||||
<SaveButton id="btn-info-basic-save" icon-only type="submit" />
|
||||
</div>
|
||||
</div>
|
||||
<FormBasicInfoAgencies
|
||||
id="agencies-basic-info"
|
||||
class="q-mb-xl"
|
||||
v-model:group="data.group"
|
||||
v-model:name="data.name"
|
||||
v-model:name-en="data.nameEN"
|
||||
/>
|
||||
<AddressForm
|
||||
id="agencies-address-info"
|
||||
dense
|
||||
:prefix-id="''"
|
||||
v-model:address="data.address"
|
||||
v-model:address-en="data.addressEN"
|
||||
v-model:moo="data.moo"
|
||||
v-model:moo-en="data.mooEN"
|
||||
v-model:soi="data.soi"
|
||||
v-model:soi-en="data.soiEN"
|
||||
v-model:street="data.street"
|
||||
v-model:street-en="data.streetEN"
|
||||
v-model:province-id="data.provinceId"
|
||||
v-model:district-id="data.districtId"
|
||||
v-model:sub-district-id="data.subDistrictId"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</DialogForm>
|
||||
|
||||
<DrawerInfo
|
||||
bg-on
|
||||
hide-action
|
||||
:is-edit="isEdit"
|
||||
:title="data.name"
|
||||
v-model:drawerOpen="drawerModel"
|
||||
:submit="() => $emit('submit')"
|
||||
:close="() => $emit('close')"
|
||||
>
|
||||
<div class="col column full-height">
|
||||
<div
|
||||
:class="{
|
||||
'q-mx-lg q-my-md': $q.screen.gt.sm,
|
||||
'q-mx-md q-my-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
>
|
||||
<ProfileBanner
|
||||
no-image-action
|
||||
readonly
|
||||
active
|
||||
hide-fade
|
||||
hide-active
|
||||
:icon="'ph-building-office'"
|
||||
:title="data.name"
|
||||
:caption="data.code"
|
||||
:color="`hsla(var(${'--green-8'}-hsl)/1)`"
|
||||
:bg-color="`hsla(var(${'--green-8'}-hsl)/0.1)`"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="flex: 1; width: 100%; overflow-y: auto"
|
||||
id="drawer-user-form"
|
||||
:class="{
|
||||
'q-px-lg q-pb-lg': $q.screen.gt.sm,
|
||||
'q-px-md q-pb-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="col surface-1 full-height rounded bordered scroll row relative-position"
|
||||
>
|
||||
<div
|
||||
class="rounded row"
|
||||
:class="{
|
||||
'q-py-md q-px-lg': $q.screen.gt.sm,
|
||||
'q-py-sm q-px-lg': !$q.screen.gt.sm,
|
||||
}"
|
||||
style="position: absolute; z-index: 999; top: 0; right: 0"
|
||||
>
|
||||
<div v-if="true" class="surface-1 row rounded">
|
||||
<UndoButton
|
||||
v-if="isEdit"
|
||||
id="btn-info-basic-undo"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
$emit('drawerUndo');
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<SaveButton
|
||||
v-if="isEdit"
|
||||
id="btn-info-basic-save"
|
||||
icon-only
|
||||
type="submit"
|
||||
/>
|
||||
<EditButton
|
||||
v-if="!isEdit"
|
||||
id="btn-info-basic-edit"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
$emit('drawerEdit');
|
||||
// infoDrawerEdit = true;
|
||||
// isImageEdit = true;
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<DeleteButton
|
||||
v-if="!isEdit"
|
||||
id="btn-info-basic-delete"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
$emit('drawerDelete');
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col"
|
||||
style="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('form.field.basicInformation'),
|
||||
anchor: 'agencies-basic-info',
|
||||
},
|
||||
{
|
||||
name: $t('general.address'),
|
||||
anchor: 'agencies-address-info',
|
||||
},
|
||||
]"
|
||||
background="transparent"
|
||||
:active="{
|
||||
background: 'hsla(var(--blue-6-hsl) / .2)',
|
||||
foreground: 'var(--blue-6)',
|
||||
}"
|
||||
scroll-element="#agencies-form-content"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col-12 col-md-10 relative-position"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-py-md q-px-lg': !$q.screen.gt.sm,
|
||||
}"
|
||||
id="user-form-content"
|
||||
style="height: 100%; max-height: 100; overflow-y: auto"
|
||||
>
|
||||
<FormBasicInfoAgencies
|
||||
id="agencies-basic-info"
|
||||
:readonly
|
||||
onDrawer
|
||||
class="q-mb-xl"
|
||||
v-model:group="data.group"
|
||||
v-model:name="data.name"
|
||||
v-model:name-en="data.nameEN"
|
||||
/>
|
||||
<AddressForm
|
||||
id="agencies-address-info"
|
||||
dense
|
||||
:readonly
|
||||
:prefix-id="data.code ? data.code : ''"
|
||||
v-model:address="data.address"
|
||||
v-model:address-en="data.addressEN"
|
||||
v-model:moo="data.moo"
|
||||
v-model:moo-en="data.mooEN"
|
||||
v-model:soi="data.soi"
|
||||
v-model:soi-en="data.soiEN"
|
||||
v-model:street="data.street"
|
||||
v-model:street-en="data.streetEN"
|
||||
v-model:province-id="data.provinceId"
|
||||
v-model:district-id="data.districtId"
|
||||
v-model:sub-district-id="data.subDistrictId"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DrawerInfo>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue