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

<script lang="ts" setup>
import SideMenu from 'src/components/SideMenu.vue';
import DrawerInfo from 'src/components/DrawerInfo.vue';
import FormProperty from 'src/components/04_property-management/FormProperty.vue';
import {
  UndoButton,
  SaveButton,
  EditButton,
  DeleteButton,
} from 'src/components/button';
import { Property } from 'src/stores/property/types';
import { DialogFormContainer, DialogHeader } from 'src/components/dialog';

const model = defineModel<boolean>({ required: true, default: false });
const drawerModel = defineModel<boolean>('drawerModel', {
  required: true,
  default: false,
});

const formProperty = defineModel<Property>('propertyData', {
  required: true,
  default: {
    name: '',
    nameEN: '',
    type: {},
  },
});

withDefaults(
  defineProps<{
    readonly?: boolean;
    isEdit?: boolean;
  }>(),
  { readonly: false, isEdit: false },
);

defineEmits<{
  (e: 'submit'): void;
  (e: 'close'): void;
  (e: 'changeStatus'): void;
  (e: 'drawerUndo'): void;
  (e: 'drawerEdit'): void;
  (e: 'drawerDelete'): void;
}>();
</script>
<template>
  <DialogFormContainer
    width="65vw"
    height="500px"
    v-model="model"
    @submit="() => $emit('submit')"
  >
    <template #header>
      <DialogHeader
        :title="$t(`general.add`, { text: $t('property.title') })"
      />
    </template>

    <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"
        />
      </section>
    </section>
  </DialogFormContainer>

  <DrawerInfo
    bg-on
    hide-action
    :is-edit="isEdit"
    :title="propertyData.name"
    v-model:drawerOpen="drawerModel"
    :submit="() => $emit('submit')"
    :close="() => $emit('close')"
  >
    <div class="col column full-height">
      <div
        style="flex: 1; width: 100%; overflow-y: auto"
        id="drawer-user-form"
        :class="{
          'q-px-lg q-py-md': $q.screen.gt.sm,
          'q-px-md q-py-sm': !$q.screen.gt.sm,
        }"
      >
        <div
          class="col surface-1 full-height rounded bordered scroll row relative-position"
        >
          <div
            class="rounded row"
            :class="{
              'q-py-md q-px-lg': $q.screen.gt.sm,
              'q-pa-sm': !$q.screen.gt.sm,
            }"
            style="position: absolute; z-index: 999; top: 0; right: 0"
          >
            <div
              v-if="propertyData.status !== 'INACTIVE'"
              class="surface-1 row rounded"
            >
              <UndoButton
                v-if="isEdit"
                id="btn-info-basic-undo"
                icon-only
                @click="
                  () => {
                    $emit('drawerUndo');
                  }
                "
                type="button"
              />
              <SaveButton
                v-if="isEdit"
                id="btn-info-basic-save"
                icon-only
                type="submit"
              />
              <EditButton
                v-if="!isEdit"
                id="btn-info-basic-edit"
                icon-only
                @click="
                  () => {
                    $emit('drawerEdit');
                    // infoDrawerEdit = true;
                    // isImageEdit = true;
                  }
                "
                type="button"
              />
              <DeleteButton
                v-if="!isEdit"
                id="btn-info-basic-delete"
                icon-only
                @click="
                  () => {
                    $emit('drawerDelete');
                    // onDelete(currentUser.id);
                  }
                "
                type="button"
              />
            </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="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>
      </div>
    </div>
  </DrawerInfo>
</template>
<style scoped></style>