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

<script lang="ts" setup>
import { computed } from '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>
  <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');
            }
          "
        />
        {{ $t('status.title') }}
      </span>
    </div>

    <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>
: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>