refactor: bind form crud

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

@@ -0,0 +1,124 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import SelectBranch from '../shared/select/SelectBranch.vue';
+import { getRole } from 'src/services/keycloak';
+
+const name = defineModel<string>('name');
+const nameEN = defineModel<string>('nameEn');
+const type = defineModel<Record<string, any>>('type');
+const registeredBranchId = defineModel<string>('registeredBranchId');
+
+const isAdmin = computed(() => {
+  const roles = getRole() || [];
+  return roles.includes('system');
+});
+
+defineProps<{
+  readonly?: boolean;
+  onDrawer?: boolean;
+  inputOnly?: boolean;
+}>();
+</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')]"
+        />
+
+        <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>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+:deep(.responsible-search .q-field__control) {
+  height: 36px;
+  font-size: 12px;
+}
+
+:deep(
+    .q-item__section.column.q-item__section--side.justify-center.q-item__section--avatar.q-focusable.relative-position.cursor-pointer
+  ) {
+  justify-content: start !important;
+  padding-right: 8px !important;
+  padding-top: 16px;
+  min-width: 0px;
+}
+
+:deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {
+  color: hsl(var(--text-mute));
+}
+
+:deep(
+    i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
+  ) {
+  color: var(--brand-1);
+}
+
+:deep(
+    .q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.expansion-rounded.surface-2
+      .q-focus-helper
+  ) {
+  visibility: hidden;
+}
+
+:deep(.q-dialog.fullscreen.no-pointer-events.q-dialog--modal) {
+  visibility: hidden;
+}
+</style>