jws-frontend/src/pages/05_quotation/preview/ViewHeader.vue

<script lang="ts" setup>
import { dateFormat } from 'src/utils/datetime';

// NOTE: Import stores
import { formatAddress } from 'src/utils/address';

// NOTE  Import Types
import { Branch } from 'src/stores/branch/types';
import { CustomerBranchRelation, Details } from 'src/stores/quotations/types';
// NOTE: Import Components

enum View {
  Quotation,
  Invoice,
  Payment,
  Receipt,
}

defineProps<{
  branch: Branch;
  customer: CustomerBranchRelation;
  details: Details;
  view: View;
}>();

function titleMode(mode: View): string {
  if (mode === View.Quotation) {
    return 'preview.title.quotation';
  }
  if (mode === View.Invoice) {
    return 'preview.title.invoice';
  }
  if (mode === View.Payment) {
    return 'preview.title.payment';
  }
  if (mode === View.Receipt) {
    return 'preview.title.receipt';
  }

  return '';
}
</script>

<template>
  <div class="row items-center q-mb-lg">
    <div class="column" style="width: 50%">
      <img src="/logo.png" width="192px" style="object-fit: scale-down" />
    </div>
    <div
      class="column"
      style="text-align: center; width: 50%; font-weight: 800; font-size: 24px"
    >
      {{ $t(titleMode(view)) }}
    </div>
  </div>

  <article class="detail-card">
    <section class="detail-customer-info">
      <article>
        <b>
          {{ !!branch.virtual ? '' : $t('general.company') }} {{ branch.name }}
        </b>

        <span v-if="branch.province && branch.district && branch.subDistrict">
          {{
            formatAddress({
              address: branch.address,
              addressEN: branch.addressEN,
              moo: branch.moo,
              mooEN: branch.mooEN,
              soi: branch.soi,
              soiEN: branch.soiEN,
              street: branch.street,
              streetEN: branch.streetEN,
              province: branch.province,
              district: branch.district,
              subDistrict: branch.subDistrict,
            })
          }}
        </span>
        <span>เลขประจำตัวผู้เสียภาษี {{ branch.taxNo }}</span>
        <span>เบอร์โทร {{ branch.telephoneNo }}</span>
        <span>{{ branch.webUrl }}</span>
      </article>
      <article>
        <b>ลูกค้า</b>
        <span>
          {{
            formatAddress({
              address: customer.address,
              addressEN: customer.addressEN,
              moo: customer.moo,
              mooEN: customer.mooEN,
              soi: customer.soi,
              soiEN: customer.soiEN,
              street: customer.street,
              streetEN: customer.streetEN,
              province: customer.province,
              district: customer.district,
              subDistrict: customer.subDistrict,
            })
          }}
        </span>
        <span>เลขประจำตัวผู้เสียภาษี {{ customer.citizenId }}</span>
        <span>เบอร์โทร {{ customer.telephoneNo }}</span>
      </article>
    </section>
    <section class="detail-quotation-info">
      <div>
        <div>{{ $t('general.itemNo', { msg: `${$t(titleMode(view))}` }) }}</div>
        <div>{{ details.code }}</div>
      </div>
      <div>
        <div>วันที่ใบเสนอราคา</div>
        <div>{{ dateFormat(details.createdAt, true, false, true) }}</div>
      </div>
      <div>
        <div>ผู้ขาย</div>
        <div>{{ details.createdBy }}</div>
      </div>
      <div>
        <div>เงื่อนไขการชำระ</div>
        <div>
          {{ $t(`quotation.type.${details.payCondition}`) }}
        </div>
      </div>
      <div>
        <div>ชื่องาน</div>
        <div>{{ details.workName }}</div>
      </div>
      <div>
        <div>ผู้ติดต่อ</div>
        <div>{{ details.contactName }}</div>
      </div>
      <div>
        <div>วันครบกำหนดชำระ</div>
        <div>{{ dateFormat(details.dueDate, true, false, true) }}</div>
      </div>
    </section>
  </article>
</template>

<style scoped>
.detail-card {
  display: flex;
  gap: 16px;

  & > * {
    flex-grow: 1;
  }

  & > :first-child {
    max-width: 57.5%;
  }
}

.detail-customer-info {
  display: flex;
  flex-direction: column;
  gap: 16px;

  & > * {
    display: flex;
    flex-direction: column;

    & > :first-child {
      color: var(--main);
    }
  }
}

.detail-quotation-info {
  & > * {
    display: flex;

    & > :first-child {
      color: var(--main);
    }

    & > * {
      width: 50%;
    }
  }
}
</style>