jws-frontend/src/pages/11_credit-note/expansion/DocumentExpansion.vue

<script lang="ts" setup>
import SelectBranch from 'src/components/shared/select/SelectBranch.vue';
import SelectCustomer from 'src/components/shared/select/SelectCustomer.vue';
import DatePicker from 'src/components/shared/DatePicker.vue';
import DataDisplay from 'src/components/08_request-list/DataDisplay.vue';

defineProps<{
  readonly?: boolean;
}>();

defineEmits<{
  (e: 'gotoQuotation'): void;
}>();

const registeredBranchId = defineModel<string>('registeredBranchId');
const customerId = defineModel<string>('customerId');
const issueDate = defineModel<string>('issueDate');

const quotationCode = defineModel<string>('quotationCode');
const quotationWorkName = defineModel<string>('quotationWorkName');
const quotationContactName = defineModel<string>('quotationContactName');
const quotationContactTel = defineModel<string>('quotationContactTel');
const quotationCreatedBy = defineModel<string>('quotationCreatedBy');
</script>
<template>
  <q-expansion-item
    default-opened
    dense
    class="overflow-hidden bordered full-width"
    switch-toggle-side
    style="border-radius: var(--radius-2)"
    expand-icon="mdi-chevron-down-circle"
    header-class="surface-1 q-py-sm text-medium text-body1"
  >
    <template #header>
      <span>
        {{ $t('general.information', { msg: $t('general.document') }) }}
      </span>
    </template>

    <main class="q-px-md q-py-sm surface-1 row q-col-gutter-sm">
      <SelectBranch
        readonly
        class="col-md-4 col-12"
        :label="`${$t('creditNote.label.quotationRegisteredBranch')}`"
        v-model:value="registeredBranchId"
      />
      <SelectCustomer
        readonly
        simple
        class="col-md-4 col-12"
        :label="`${$t('creditNote.label.customer')}`"
        v-model:value="customerId"
      />
      <DatePicker
        :label="$t('general.createdAt')"
        class="col-md-4 col-6"
        :model-value="issueDate || new Date(Date.now())"
        :readonly
        :disabled="!readonly"
      />

      <DataDisplay
        clickable
        class="col-md col-6"
        style="padding-inline: 20px"
        :label="$t('creditNote.label.quotationCode')"
        :value="quotationCode"
        @label-click="$emit('gotoQuotation')"
      />

      <q-input
        :readonly
        :label="$t('creditNote.label.quotationWorkName')"
        outlined
        dense
        class="col-md col-6"
        v-model="quotationWorkName"
      />
      <q-input
        :readonly
        :label="$t('quotation.contactName')"
        outlined
        dense
        class="col-md col-6"
        v-model="quotationContactName"
      />
      <q-input
        :readonly
        :label="$t('general.telephone')"
        outlined
        dense
        class="col-md col-6"
        v-model="quotationContactTel"
      />
      <q-input
        :readonly
        :label="$t('creditNote.label.quotationCreatedBy')"
        outlined
        dense
        class="col-md col-6"
        :disable="!readonly"
        :model-value="quotationCreatedBy || '-'"
      />
    </main>
  </q-expansion-item>
</template>
<style scoped></style>