jws-frontend/src/components/FormDialog.vue

<script setup lang="ts">
import AppBox from 'components/app/AppBox.vue';
import FormAddress from './02_personnel-management/FormAddress.vue';

defineProps<{
  title: string;
  titleFormAddress?: string;
  addressTitle?: string;
  addressTitleEN?: string;
  addressSeparator?: boolean;
  branchStatus?: string;
  badgeLabel?: string;
  customerLabel?: string;
  badgeClass?: string;
  noFooter?: boolean;
  noAppBox?: boolean;
  maxWidth?: number;
  submit?: (...args: unknown[]) => void;
  close?: (...args: unknown[]) => void;
}>();

const modal = defineModel('modal', { default: false });
const address = defineModel('address', { default: '' });
const addressEN = defineModel('addressEN', { default: '' });
const provinceId = defineModel<string | null | undefined>('provinceId');
const districtId = defineModel<string | null | undefined>('districtId');
const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
const zipCode = defineModel<string>('zipCode', { default: '' });
</script>
<template>
  <q-dialog v-model="modal" @hide="close">
    <AppBox
      style="padding: 0; border-radius: var(--radius-2); max-height: 100%"
      :style="`max-width:${maxWidth ? maxWidth : '85'}%`"
    >
      <q-form greedy @submit.prevent @validation-success="submit">
        <!-- header -->
        <div class="form-header q-py-sm q-px-lg">
          <div class="row items-center">
            <div style="width: 31.98px"></div>
            <div class="col text-subtitle1 text-weight-bold text-center">
              {{ title }}

              <text v-if="customerLabel">
                :
                <text
                  class="text-customer"
                  :class="{ 'dark-text': $q.dark.isActive }"
                  :style="`color: ${customerLabel === 'customerLegalEntity' ? 'var(--purple-8)' : 'var(--green-9)'} `"
                >
                  {{ $t(customerLabel) }}
                </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>
            <q-btn
              round
              flat
              id="closeDialog"
              icon="mdi-close"
              padding="xs"
              class="close-btn"
              :class="{ dark: $q.dark.isActive }"
              v-close-popup
              @click="close"
            />
          </div>
        </div>

        <!-- body -->
        <div
          class="row form-body q-pa-lg"
          :class="{ dark: $q.dark.isActive }"
          :style="$q.screen.gt.sm ? '' : 'overflow-y: auto; max-height: 75vh'"
        >
          <!-- prepend -->
          <div
            class="column"
            :class="$q.screen.gt.sm ? 'col-2  q-pr-lg' : 'col-12'"
            v-if="$slots.prepend && !$slots.append"
          >
            <slot name="prepend"></slot>
          </div>

          <div class="row col-12" v-if="$slots.body">
            <slot name="body"></slot>
          </div>

          <!-- center -->
          <AppBox
            v-if="!noAppBox"
            bordered
            class="column full-height"
            :class="`${$slots.prepend ? ($q.screen.gt.sm ? 'col-10' : 'col-12') : $slots.append ? 'col-6' : 'col-12'}`"
            style="padding-right: 0; padding-bottom: 0"
          >
            <div
              class="row col-12 q-col-gutter-y-md q-pr-md q-mb-md items-start"
              :style="$q.screen.gt.sm ? 'overflow-y: auto; height: 60vh' : ''"
            >
              <slot name="information"></slot>
              <slot name="person"></slot>
              <slot v-if="!noFooter" name="address">
                <FormAddress
                  dense
                  outlined
                  :title="titleFormAddress"
                  :separator="addressSeparator"
                  v-model:address="address"
                  v-model:addressEN="addressEN"
                  v-model:provinceId="provinceId"
                  v-model:districtId="districtId"
                  v-model:subDistrictId="subDistrictId"
                  v-model:zipCode="zipCode"
                  :addressTitle="addressTitle || ''"
                  :addressTitleEN="addressTitleEN || ''"
                  v-if="!$slots.address"
                />
              </slot>
              <slot name="qr-code"></slot>
              <slot name="location"></slot>
              <slot name="by-type"></slot>
            </div>
          </AppBox>

          <!-- append -->
          <q-item-section
            class="column col-6"
            v-if="$slots.append && !$slots.prepend"
          >
            <slot name="append"></slot>
          </q-item-section>
        </div>

        <!-- footer -->
        <div
          v-if="!noFooter"
          class="form-footer q-py-sm q-pr-lg text-right q-gutter-x-lg"
        >
          <q-btn
            dense
            outline
            unelevated
            id="cancelBtn"
            class="q-px-md app-text-negative"
            :label="$t('cancel')"
            @click="close"
            v-close-popup
          />
          <q-btn
            dense
            unelevated
            id="submitBtn"
            type="submit"
            color="primary"
            class="q-px-md"
            :label="$t('save')"
          />
        </div>
      </q-form>
    </AppBox>
  </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%);
  }
}
</style>