jws-frontend/src/components/DrawerInfo.vue

<script setup lang="ts">
import { computed, ref } from 'vue';
import AppBox from './app/AppBox.vue';

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;
  }>(),
  {
    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"
    :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">
              <q-btn
                round
                flat
                id="closeDialog"
                icon="mdi-arrow-left"
                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>

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

        <!-- 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-gutter-x-lg q-py-md"
        >
          <q-btn
            v-if="isEdit"
            id="cancelBtn"
            unelevated
            class="btn-cancel-dialog"
            color="grey-4"
            type="reset"
            text-color="grey-10"
            @click="close"
            :label="$t('cancel')"
          />
          <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>
      </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>