jws-frontend/src/components/DrawerInfo.vue

<script setup lang="ts">
import { ref } from 'vue';
import {
  EditButton,
  DeleteButton,
  CancelButton,
  SaveButton,
  UndoButton,
} from 'src/components/button';

withDefaults(
  defineProps<{
    title: string;
    category?: string;
    isEdit?: boolean;
    bgOn?: boolean;
    statusBranch?: string;
    badgeLabel?: string;
    badgeClass?: string;
    bgColor?: string;
    showEdit?: boolean;
    editData?: (...args: unknown[]) => void;
    deleteData?: (...args: unknown[]) => void;
    submit?: (...args: unknown[]) => void;
    close?: (...args: unknown[]) => void;
    undo?: (...args: unknown[]) => void;
    beforeClose?: (...args: unknown[]) => boolean;
  }>(),
  {
    showEdit: true,
  },
);

const windowSize = ref(window.innerWidth);

const drawerOpen = defineModel<boolean>('drawerOpen', {
  default: false,
});

const myForm = ref();

function reset() {
  if (myForm.value) {
    myForm.value.resetValidation();
  }
}
</script>
<template>
  <q-drawer
    no-swipe-open
    @before-hide="reset"
    @hide="close"
    @update:model-value="(v) => (drawerOpen = beforeClose ? beforeClose() : v)"
    :width="$q.screen.gt.xs ? windowSize * 0.85 : windowSize"
    v-model="drawerOpen"
    behavior="mobile"
    side="right"
    show-if-above
  >
    <q-form
      ref="myForm"
      class="full-height"
      greedy
      @submit.prevent
      @validation-success="submit"
    >
      <div
        class="column justify-between full-height"
        style="padding: 0; border-radius: var(--radius-2)"
      >
        <!-- header -->
        <div class="bordered-b q-pa-lg row items-center">
          <div v-if="showEdit">
            <div v-if="isEdit" class="row">
              <UndoButton
                class="q-mr-md"
                id="btn-info-undo"
                iconOnly
                @click="undo"
              />
              <div style="width: 36.8px"></div>
            </div>
            <div v-else class="row">
              <EditButton
                id="btn-info-edit"
                class="q-mr-md"
                iconOnly
                @click="editData"
              />
              <DeleteButton id="btn-info-delete" iconOnly @click="deleteData" />
            </div>
          </div>

          <div class="col text-weight-bold text-center">
            <text
              v-if="badgeLabel"
              class="badge-label badge text-caption q-px-sm q-mr-sm"
              :class="badgeClass"
            >
              {{ badgeLabel }}
            </text>
            <text v-if="category" class="app-text-muted q-mr-sm">
              {{ category }}
            </text>
            {{ 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 class="q-mr-md" style="width: 36.8px"></div>
          <CancelButton
            icon-only
            id="btn-info-cancel"
            @click="
              () => {
                drawerOpen = beforeClose ? beforeClose() : !drawerOpen;
                close?.();
              }
            "
            type="reset"
            resetValidation
          />
        </div>

        <!-- body -->
        <div
          class="col form-body full-width"
          :class="`${bgColor || 'surface-0'} ${$q.dark.isActive && 'dark'}`"
        >
          <slot></slot>
          <slot name="info"></slot>
        </div>

        <!-- footer -->
        <div class="bordered-t q-pr-lg row items-center justify-end q-py-md">
          <CancelButton id="btn-info-cancel" outlined @click="close" />
          <SaveButton
            class="q-ml-md"
            id="btn-info-save"
            v-if="isEdit"
            type="submit"
            solid
          />
        </div>
      </div>
    </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-body {
  --_body-bg: var(--sand-0);
  background-color: var(--_body-bg);
  background-repeat: no-repeat;
  background-size: cover;
  &.dark {
    --_body-bg: var(--gray-10);
  }
}

.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);
  }
}

.badge-label {
  display: inline-block;
  text-wrap: nowrap;
}

.badge {
  display: inline-block;
  border-radius: var(--radius-6);
  background-color: var(--surface-tab);
  text-wrap: nowrap;
}
</style>