jws-frontend/src/components/DialogForm.vue

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

defineProps<{
  title: string;
  branchStatus?: string;
  badgeLabel?: string;
  customerLabel?: string;
  badgeClass?: string;
  maxWidth?: string;
  width?: string;
  height?: string;
  bgColor?: string;
  employee?: boolean;
  edit?: boolean;
  hideFooter?: boolean;
  hideDelete?: boolean;
  hideBtn?: boolean;
  readonly?: boolean;
  disabledSubmit?: boolean;

  saveAmount?: number;
  submitLabel?: string;
  submitIcon?: string;
  isEdit?: boolean;
  tabsList?: { name: string; label: string }[];
  hideCloseEvent?: boolean;
  editData?: (...args: unknown[]) => void;
  deleteData?: (...args: unknown[]) => void;
  show?: (...args: unknown[]) => void;
  submit?: (...args: unknown[]) => void;
  close?: (...args: unknown[]) => void;
  undo?: (...args: unknown[]) => void;
  beforeClose?: (...args: unknown[]) => boolean;
}>();

const modal = defineModel('modal', { default: false });
const currentTab = defineModel<string>('currentTab');
</script>
<template>
  <q-dialog
    :model-value="modal"
    @update:model-value="(v) => (modal = beforeClose ? beforeClose() : v)"
    @before-show="show"
    @hide="hideCloseEvent !== undefined && hideCloseEvent ? '' : close?.()"
  >
    <div
      class="surface-1"
      style="padding: 0; border-radius: var(--radius-2); height: 100%"
      :style="`max-width:${$q.screen.xs ? '100%' : maxWidth ? maxWidth : '85%'}; width: ${$q.screen.xs ? '100%' : width ? width : '85%'}; height: ${height ? height : '85vh'} `"
    >
      <q-form
        greedy
        @submit.prevent
        @validation-success="submit"
        class="column full-height"
      >
        <!-- header -->
        <div
          class="form-header"
          :class="{
            'q-py-sm q-px-lg': $q.screen.gt.sm,
            'q-pa-xs': !$q.screen.gt.sm,
          }"
        >
          <div class="row items-center">
            <template v-if="!hideBtn">
              <div v-if="!readonly && isEdit && edit" 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-if="!readonly && !isEdit && edit">
                <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
                  v-if="edit && !hideDelete"
                  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>
            </template>

            <div style="width: 31.98px"></div>
            <div class="col text-subtitle1 text-weight-bold text-center">
              <slot name="iconTitle" />
              {{ title }}

              <text v-if="customerLabel">
                :
                <text
                  class="text-customer"
                  :class="{ 'dark-text': $q.dark.isActive }"
                  :style="`color: ${customerLabel === 'CORP' ? 'var(--purple-8)' : 'var(--green-9)'} `"
                >
                  {{
                    $t(
                      customerLabel === 'CORP'
                        ? 'customerLegalEntity'
                        : 'customerNaturalPerson',
                    )
                  }}
                </text>
              </text>

              <text v-if="branchStatus">
                {{ branchStatus }}
              </text>
              <text
                v-if="badgeLabel"
                class="badge-label q-px-sm text-caption"
                :class="badgeClass"
              >
                {{ badgeLabel }}
              </text>
            </div>
            <slot name="top-append" />
            <div>
              <CancelButton
                icon-only
                id="btn-form-close"
                @click="
                  () => {
                    modal = beforeClose ? beforeClose() : !modal;
                    close?.();
                  }
                "
                type="reset"
                resetValidation
              />
            </div>
          </div>
        </div>

        <!-- body -->
        <div
          class="col full-height column full-width"
          :class="{
            dark: $q.dark.isActive,
            'surface-2': !employee,
            'surface-tab': employee || tabsList,
          }"
          :style="`background: ${bgColor} !important`"
        >
          <div
            v-if="tabsList && tabsList.length > 0"
            class="row surface-0 q-px-md q-pt-md full-width"
            style="border-bottom: 1px solid var(--brand-1)"
          >
            <q-tabs
              inline-label
              mobile-arrows
              dense
              class="full-width"
              v-model="currentTab"
              align="left"
            >
              <q-tab
                v-for="tab in tabsList"
                v-bind:key="tab.name"
                :id="`tab-${tab.label}`"
                class="text-capitalize"
                :name="tab.name"
                :label="$t(tab.label)"
              />
            </q-tabs>
          </div>

          <div class="row col full-width scroll">
            <!-- prepend -->
            <div class="col" v-if="$slots.prepend">
              <slot name="prepend"></slot>
            </div>

            <!-- center -->
            <div class="col column full-height no-wrap">
              <slot></slot>
            </div>

            <!-- append -->
            <div class="col" v-if="$slots.append">
              <slot name="append"></slot>
            </div>
          </div>
        </div>

        <!-- footer -->
        <div
          v-if="!hideFooter"
          class="form-footer row items-center full-width justify-between surface-1"
          :class="{ 'q-pa-md': $q.screen.gt.sm, 'q-pa-sm': !$q.screen.gt.sm }"
          style="z-index: 3"
        >
          <div>
            <slot name="footer"></slot>
          </div>
          <div class="row flex justify-end">
            <CancelButton
              id="btn-form-cancel"
              outlined
              @click="close"
              v-close-popup
            />
            <SaveButton
              class="q-ml-md"
              id="btn-form-submit"
              type="submit"
              solid
              :disabled="disabledSubmit"
              :icon="submitIcon"
              :label="submitLabel"
              :amount="saveAmount"
            />
          </div>
        </div>
      </q-form>
    </div>
  </q-dialog>
</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);

  &.dark {
    --_body-bg: var(--gray-10);
  }
}

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

.badge-label {
  display: inline-block;
  border-radius: var(--radius-6);
  background-color: var(--surface-2);
  text-wrap: nowrap;
}

.text-customer {
  --_var-filter: grayscale(30%);

  filter: var(--_var-filter);
  &.dark-text {
    --_var-filter: grayscale(0%);
  }
}

.active-tab {
  color: var(--brand-1);
  background-color: var(--surface-tab);
  border-top: 1px solid var(--brand-1);
  border-left: 1px solid var(--brand-1);
  border-right: 1px solid var(--brand-1);
  border-top-left-radius: var(--radius-2);
  border-top-right-radius: var(--radius-2);
  margin-bottom: -1.5px;
  border-bottom: 3px solid var(--surface-tab);
}

.content-tab {
  border-top-left-radius: var(--radius-2);
  border-top-right-radius: var(--radius-2);
  position: relative;
}
</style>