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

feat: enhance FormProperty with status management and input options

Browse source
This commit is contained in:
puriphatt 2025-03-11 11:29:29 +07:00
parent 1268f6e35f
commit 4c36fde097
2 changed files with 249 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

101
src/pages/04_property-managment/PropertyDialog.vue
View file

@ -1,5 +1,4 @@
<script lang="ts" setup>
import DialogForm from 'src/components/DialogForm.vue';
import SideMenu from 'src/components/SideMenu.vue';
import DrawerInfo from 'src/components/DrawerInfo.vue';
import FormProperty from 'src/components/04_property-management/FormProperty.vue';
@ -46,7 +45,7 @@ defineEmits<{
</script>
<template>
<DialogFormContainer
width="60vw"
width="65vw"
height="500px"
v-model="model"
@submit="() => $emit('submit')"
@ -57,27 +56,69 @@ defineEmits<{
/>
</template>
<section class="q-pa-md col full-width">
<div class="surface-1 rounded bordered q-pa-md full-height full-width">
<section
class="col surface-1 rounded bordered scroll row relative-position"
:class="{
'q-mx-lg q-my-md': $q.screen.gt.sm,
'q-mx-md q-my-sm': !$q.screen.gt.sm,
}"
>
<div
class="rounded row"
style="position: absolute; z-index: 999; right: 0; top: 0"
:class="{
'q-py-md q-px-lg': $q.screen.gt.sm,
'q-pa-sm': !$q.screen.gt.sm,
}"
>
<div class="surface-1 row rounded">
<SaveButton id="btn-info-basic-save" icon-only type="submit" />
</div>
</div>
<section
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('general.information', {
msg: $t('property.title'),
}),
anchor: 'form-property-dialog',
},
]"
background="transparent"
:active="{
background: 'hsla(var(--blue-6-hsl) / .2)',
foreground: 'var(--blue-6)',
}"
scroll-element="#flow-form-dialog"
></SideMenu>
</div>
</section>
<section
class="col-12 col-md-10"
:class="{
'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-pa-sm': !$q.screen.gt.sm,
}"
style="height: 100%; max-height: 100%; overflow-y: auto"
id="form-property-dialog"
>
<FormProperty
v-model:name="formProperty.name"
v-model:name-en="formProperty.nameEN"
v-model:type="formProperty.type"
v-model:registered-branch-id="formProperty.registeredBranchId"
v-model:status="formProperty.status"
/>
</div>
</section>
</section>
<template #footer>
<CancelButton class="q-ml-auto" outlined @click="$emit('close')" />
<SaveButton
:label="$t(`general.add`, { text: $t('property.title') })"
class="q-ml-sm"
icon="mdi-check"
solid
type="submit"
/>
</template>
</DialogFormContainer>
<DrawerInfo
@ -158,6 +199,31 @@ defineEmits<{
</div>
</div>
<section
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('general.information', {
msg: $t('property.title'),
}),
anchor: 'form-property-dialog',
},
]"
background="transparent"
:active="{
background: 'hsla(var(--blue-6-hsl) / .2)',
foreground: 'var(--blue-6)',
}"
scroll-element="#flow-form-dialog"
></SideMenu>
</div>
</section>
<section
class="col-12 col-md-10"
:class="{
@ -168,11 +234,14 @@ defineEmits<{
id="flow-form-drawer"
>
<FormProperty
onDrawer
:readonly="!isEdit"
v-model:name="formProperty.name"
v-model:name-en="formProperty.nameEN"
v-model:type="formProperty.type"
v-model:registered-branch-id="formProperty.registeredBranchId"
v-model:status="formProperty.status"
@change-status="$emit('changeStatus')"
/>
</section>
</div>