feat: enhance FormProperty with status management and input options

src/components/04_property-management/FormProperty.vue

@@ -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
-    <div
+    :class="{ 'surface-1 rounded bordered': readonly }"
-      :class="{ 'surface-1 rounded bordered': readonly }"
+    style="border: 1px solid transparent"
-      style="border: 1px solid transparent"
+  >
-    >
+    <div class="col-12 q-pb-sm text-weight-bold text-body1 row items-center">
-      <div class="q-col-gutter-sm">
+      <q-icon
-        <q-input
+        size="xs"
-          :for="`input-name-${onDrawer ? 'drawer' : 'dialog'}`"
+        class="q-pa-sm rounded q-mr-xs"
-          :bg-color="readonly ? 'transparent' : ''"
+        color="info"
-          :readonly
+        name="mdi-map-marker-radius-outline"
-          class="col-md-6 col-12"
+        style="background-color: var(--surface-3)"
-          hide-bottom-space
+      />
-          dense
+      {{ $t('general.information', { msg: $t('property.title') }) }}
-          outlined
+      <span
-          :label="$t('property.dialog.name')"
+        class="row items-center text-weight-regular text-body2"
-          :model-value="!readonly ? name : name || '-'"
+        :class="{ 'q-ml-lg': $q.screen.gt.xs, 'q-mt-sm': $q.screen.lt.sm }"
-          @update:model-value="(v) => (name = v?.toString() || '')"
+      >
-          :rules="[(val: string) => !!val || $t('form.error.required')]"
+        <ToggleButton
+          class="q-mr-sm"
+          two-way
+          :model-value="status !== 'INACTIVE'"
+          @click="
+            () => {
+              onDrawer
+                ? $emit('changeStatus')
+                : status !== 'INACTIVE'
+                  ? (status = 'INACTIVE')
+                  : (status = 'CREATED');
+            }
+          "
         />
-
+        {{ $t('status.title') }}
-        <q-input
+      </span>
-          :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>
     </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>

src/pages/04_property-managment/PropertyDialog.vue

@@ -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">
+    <section
-      <div class="surface-1 rounded bordered q-pa-md full-height full-width">
+      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>