jws-frontend/src/components/DrawerInfo.vue

<script setup lang="ts">
import { ref } from 'vue';

defineProps<{
  title: string;
  isEdit?: boolean;
  bgOn?: boolean;
  statusBranch?: string;
  editData?: (...args: unknown[]) => void;
  deleteData?: (...args: unknown[]) => void;
  submit?: (...args: unknown[]) => void;
  close?: (...args: unknown[]) => void;
  undo?: (...args: unknown[]) => void;
}>();

// const drawerWidth = ref(window.screen.width * 0.8);
const drawerOpen = defineModel<boolean>('drawerOpen', {
  default: false,
});

const myForm = ref();

function reset() {
  if (myForm.value) {
    myForm.value.resetValidation();
  }
}
</script>
<template>
  <q-drawer
    @before-hide="reset"
    @hide="close"
    :width="$q.screen.gt.md ? 1200 : $q.screen.gt.xs ? 700 : 900"
    :breakpoint="1366"
    v-model="drawerOpen"
    behavior="mobile"
    side="right"
    show-if-above
  >
    <q-form
      ref="myForm"
      class="full-height"
      greedy
      @submit.prevent
      @validation-success="submit"
    >
      <AppBox
        class="column justify-between full-height"
        style="padding: 0; border-radius: var(--radius-2)"
      >
        <div class="form-header col q-px-lg row items-center">
          <div v-if="isEdit" class="row">
            <q-btn
              round
              flat
              id="closeDialog"
              icon="mdi-undo"
              padding="xs"
              class="q-mr-md"
              :class="{ dark: $q.dark.isActive }"
              style="color: var(--brand-1)"
              @click="undo"
            />
            <div style="width: 31.98px"></div>
          </div>
          <div v-else>
            <q-btn
              round
              flat
              id="editDialog"
              icon="mdi-pencil-outline"
              padding="xs"
              class="q-mr-md"
              :class="{ dark: $q.dark.isActive }"
              style="color: var(--brand-1)"
              @click="editData"
            />
            <q-btn
              round
              flat
              id="deleteDialog"
              icon="mdi-trash-can-outline"
              padding="xs"
              :class="{ dark: $q.dark.isActive }"
              style="color: hsl(var(--negative-bg))"
              @click="deleteData"
            />
          </div>

          <div class="col text-subtitle1 text-weight-bold text-center">
            {{ title }}

            <text
              v-if="!!statusBranch"
              class="branch-badge branch-card__badge"
              :class="{
                'branch-card__inactive ': statusBranch === 'INACTIVE',
              }"
            >
              {{
                statusBranch === 'INACTIVE'
                  ? $t('statusINACTIVE')
                  : $t('statusACTIVE')
              }}
            </text>
          </div>

          <div style="width: 31.98px"></div>
          <q-btn
            round
            flat
            id="closeDialog"
            icon="mdi-close"
            padding="xs"
            class="close-btn"
            :class="{ dark: $q.dark.isActive }"
            type="reset"
            @click="close"
            resetValidation
          />
        </div>

        <div
          class="col-10 form-body"
          style="position: relative"
          :class="{ dark: $q.dark.isActive }"
          :style="` ${bgOn ? `background-image: url(/personnel-info-bg-${$q.dark.isActive ? 'dark' : 'light'}.png)` : ''}`"
        >
          <slot name="info"></slot>
        </div>

        <div
          class="form-footer col q-pr-lg row items-center justify-end q-gutter-x-lg"
        >
          <q-btn
            dense
            outline
            unelevated
            id="cancelBtn"
            class="q-px-md app-text-negative"
            :label="$t('cancel')"
            type="reset"
            @click="close"
          />
          <q-btn
            v-if="isEdit"
            dense
            unelevated
            id="submitBtn"
            type="submit"
            color="primary"
            class="q-px-md"
            :label="$t('save')"
          />
          <q-btn
            v-else
            dense
            unelevated
            id="okBtn"
            color="primary"
            class="q-px-md"
            :label="$t('agree')"
            @click="close"
          />
        </div>
      </AppBox>
    </q-form>
  </q-drawer>
</template>

<style scoped lang="scss">
.close-btn {
  color: hsl(var(--negative-bg));
  background-color: hsla(var(--negative-bg) / 0.1);

  &.dark {
    background-color: transparent;
    border: 1px solid hsl(var(--negative-bg));
  }
}

.form-header {
  border-bottom: 1px solid var(--border-color);
}

.form-body {
  --_body-bg: var(--sand-0);
  background-color: var(--_body-bg);
  background-repeat: no-repeat;
  background-size: cover;
  &.dark {
    --_body-bg: var(--gray-10);
  }
}

.form-footer {
  border-top: 1px solid var(--border-color);
}

.branch-badge {
  --_branch-badge-fg: var(--green-8-hsl);
  --_branch-badge-bg: var(--green-6-hsl);

  &.branch-card__inactive {
    --_branch-badge-fg: var(--red-4-hsl);
    --_branch-badge-bg: var(--red-4-hsl);
  }

  &.branch-card__badge {
    display: inline-block;
    border-radius: 999rem;
    padding-inline: var(--size-2);
    color: hsl(var(--_branch-badge-fg));
    background-color: hsla(var(--_branch-badge-bg) / 0.1);
  }
}
</style>