feat: enhance FormProperty with status management and input options
This commit is contained in:
puriphatt
parent
1268f6e35f
commit
4c36fde097
2 changed files with 249 additions and 78 deletions
|
|
@ -1,89 +1,191 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import SelectBranch from '../shared/select/SelectBranch.vue';
|
||||
import { getRole } from 'src/services/keycloak';
|
||||
import SelectBranch from '../shared/select/SelectBranch.vue';
|
||||
import SelectInput from '../shared/SelectInput.vue';
|
||||
import ToggleButton from '../button/ToggleButton.vue';
|
||||
import { Status } from 'src/stores/types';
|
||||
|
||||
const name = defineModel<string>('name');
|
||||
const nameEN = defineModel<string>('nameEn');
|
||||
const type = defineModel<Record<string, any>>('type');
|
||||
const registeredBranchId = defineModel<string>('registeredBranchId');
|
||||
const status = defineModel<Status>('status');
|
||||
|
||||
const isAdmin = computed(() => {
|
||||
const roles = getRole() || [];
|
||||
return roles.includes('system');
|
||||
});
|
||||
|
||||
const typeOption = [
|
||||
{
|
||||
label: 'Text',
|
||||
value: 'string',
|
||||
color: 'var(--pink-6-hsl)',
|
||||
icon: 'mdi-alpha-t',
|
||||
},
|
||||
{
|
||||
label: 'Number',
|
||||
value: 'number',
|
||||
color: 'var(--purple-11-hsl)',
|
||||
icon: 'mdi-numeric',
|
||||
},
|
||||
{
|
||||
label: 'Date',
|
||||
value: 'date',
|
||||
color: 'var(--green-9-hsl)',
|
||||
icon: 'mdi-calendar-blank-outline',
|
||||
},
|
||||
{
|
||||
label: 'Selection',
|
||||
value: 'array',
|
||||
color: 'var(--indigo-7-hsl)',
|
||||
icon: 'mdi-code-array',
|
||||
},
|
||||
];
|
||||
|
||||
defineProps<{
|
||||
readonly?: boolean;
|
||||
onDrawer?: boolean;
|
||||
inputOnly?: boolean;
|
||||
}>();
|
||||
|
||||
defineEmits<{
|
||||
(e: 'changeStatus'): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="q-px-md q-py-sm">
|
||||
<div
|
||||
:class="{ 'surface-1 rounded bordered': readonly }"
|
||||
style="border: 1px solid transparent"
|
||||
>
|
||||
<div class="q-col-gutter-sm">
|
||||
<q-input
|
||||
:for="`input-name-${onDrawer ? 'drawer' : 'dialog'}`"
|
||||
:bg-color="readonly ? 'transparent' : ''"
|
||||
:readonly
|
||||
class="col-md-6 col-12"
|
||||
hide-bottom-space
|
||||
dense
|
||||
outlined
|
||||
:label="$t('property.dialog.name')"
|
||||
:model-value="!readonly ? name : name || '-'"
|
||||
@update:model-value="(v) => (name = v?.toString() || '')"
|
||||
:rules="[(val: string) => !!val || $t('form.error.required')]"
|
||||
<div
|
||||
:class="{ 'surface-1 rounded bordered': readonly }"
|
||||
style="border: 1px solid transparent"
|
||||
>
|
||||
<div class="col-12 q-pb-sm text-weight-bold text-body1 row items-center">
|
||||
<q-icon
|
||||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-xs"
|
||||
color="info"
|
||||
name="mdi-map-marker-radius-outline"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
{{ $t('general.information', { msg: $t('property.title') }) }}
|
||||
<span
|
||||
class="row items-center text-weight-regular text-body2"
|
||||
:class="{ 'q-ml-lg': $q.screen.gt.xs, 'q-mt-sm': $q.screen.lt.sm }"
|
||||
>
|
||||
<ToggleButton
|
||||
class="q-mr-sm"
|
||||
two-way
|
||||
:model-value="status !== 'INACTIVE'"
|
||||
@click="
|
||||
() => {
|
||||
onDrawer
|
||||
? $emit('changeStatus')
|
||||
: status !== 'INACTIVE'
|
||||
? (status = 'INACTIVE')
|
||||
: (status = 'CREATED');
|
||||
}
|
||||
"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:for="`input-nameEn-${onDrawer ? 'drawer' : 'dialog'}`"
|
||||
:bg-color="readonly ? 'transparent' : ''"
|
||||
:readonly
|
||||
class="col-md-6 col-12"
|
||||
hide-bottom-space
|
||||
dense
|
||||
outlined
|
||||
:label="$t('property.dialog.nameEn')"
|
||||
:model-value="!readonly ? nameEN : nameEN || '-'"
|
||||
@update:model-value="(v) => (nameEN = v?.toString() || '')"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:for="`input-type-${onDrawer ? 'drawer' : 'dialog'}`"
|
||||
:bg-color="readonly ? 'transparent' : ''"
|
||||
:readonly
|
||||
class="col-md-6 col-12"
|
||||
hide-bottom-space
|
||||
dense
|
||||
outlined
|
||||
:label="$t('property.dialog.type')"
|
||||
:model-value="!readonly ? type : type || '-'"
|
||||
@update:model-value="(v) => (type = v?.toString() || '')"
|
||||
:rules="[(val: string) => !!val || $t('form.error.required')]"
|
||||
/>
|
||||
|
||||
<SelectBranch
|
||||
v-if="isAdmin"
|
||||
v-model:value="registeredBranchId"
|
||||
:label="$t('quotation.branchVirtual')"
|
||||
class="col-md-6 col-12"
|
||||
:class="{
|
||||
'field-one': inputOnly && $q.screen.gt.sm,
|
||||
'q-mb-sm': inputOnly && $q.screen.lt.md,
|
||||
}"
|
||||
simple
|
||||
required
|
||||
:readonly
|
||||
/>
|
||||
</div>
|
||||
{{ $t('status.title') }}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="q-col-gutter-sm row">
|
||||
<SelectBranch
|
||||
v-if="isAdmin"
|
||||
v-model:value="registeredBranchId"
|
||||
:label="$t('quotation.branchVirtual')"
|
||||
class="col-12"
|
||||
:class="{
|
||||
'field-one': inputOnly && $q.screen.gt.sm,
|
||||
'q-mb-sm': inputOnly && $q.screen.lt.md,
|
||||
}"
|
||||
simple
|
||||
required
|
||||
:readonly
|
||||
/>
|
||||
<q-input
|
||||
:for="`input-name-${onDrawer ? 'drawer' : 'dialog'}`"
|
||||
:bg-color="readonly ? 'transparent' : ''"
|
||||
:readonly
|
||||
class="col-md-6 col-12"
|
||||
hide-bottom-space
|
||||
dense
|
||||
outlined
|
||||
:label="$t('property.dialog.name')"
|
||||
:model-value="!readonly ? name : name || '-'"
|
||||
@update:model-value="(v) => (name = v?.toString() || '')"
|
||||
:rules="[(val: string) => !!val || $t('form.error.required')]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:for="`input-nameEn-${onDrawer ? 'drawer' : 'dialog'}`"
|
||||
:bg-color="readonly ? 'transparent' : ''"
|
||||
:readonly
|
||||
class="col-md-6 col-12"
|
||||
hide-bottom-space
|
||||
dense
|
||||
outlined
|
||||
:label="$t('property.dialog.nameEn')"
|
||||
:model-value="!readonly ? nameEN : nameEN || '-'"
|
||||
@update:model-value="(v) => (nameEN = v?.toString() || '')"
|
||||
:rules="[(val: string) => !!val || $t('form.error.required')]"
|
||||
/>
|
||||
|
||||
<SelectInput
|
||||
hide-input
|
||||
:fill-input="false"
|
||||
:hide-selected="false"
|
||||
:readonly
|
||||
:for="`input-type-${onDrawer ? 'drawer' : 'dialog'}`"
|
||||
:label="$t('property.dialog.type')"
|
||||
class="col-md-6 col-12"
|
||||
v-model="type.type"
|
||||
:option="typeOption"
|
||||
:rules="[(val: string) => !!val || $t('form.error.required')]"
|
||||
>
|
||||
<template v-slot:option="{ scope }">
|
||||
<q-item
|
||||
v-if="scope.opt"
|
||||
v-bind="scope.itemProps"
|
||||
class="row items-center col-12"
|
||||
:id="`type-${scope.itemProps}`"
|
||||
>
|
||||
<q-avatar
|
||||
size="sm"
|
||||
class="q-mr-md"
|
||||
:style="`background-color: hsla(${scope.opt.color}/0.2)`"
|
||||
>
|
||||
<q-icon
|
||||
size="20px"
|
||||
:name="scope.opt.icon"
|
||||
:style="`color: hsl(${scope.opt.color})`"
|
||||
/>
|
||||
</q-avatar>
|
||||
{{ scope.opt.label }}
|
||||
</q-item>
|
||||
</template>
|
||||
|
||||
<template v-slot:selected-item="{ scope }">
|
||||
<div v-if="scope.opt" class="row items-center col-12">
|
||||
<q-avatar
|
||||
size="xs"
|
||||
class="q-mr-sm"
|
||||
:style="`background-color: hsla(${scope.opt.color}/0.2)`"
|
||||
>
|
||||
<q-icon
|
||||
size="14px"
|
||||
:name="scope.opt.icon"
|
||||
:style="`color: hsl(${scope.opt.color})`"
|
||||
/>
|
||||
</q-avatar>
|
||||
{{ scope.opt.label }}
|
||||
</div>
|
||||
</template>
|
||||
</SelectInput>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue