jws-frontend/src/components/01_branch-management/CardDetailsComponent.vue

<script setup lang="ts">
import { Icon } from '@iconify/vue';
import { Branch } from '../../stores/branch/types';
import AppBox from '../app/AppBox.vue';

defineProps<{
  data?: Branch;
}>();
</script>

<template>
  <div class="q-pa-md">
    <div class="flex q-gutter-x-md" style="align-items: center">
      <Icon icon="ic:baseline-home" />
      <div class="text-h6">
        {{ data?.isHeadOffice ? $t('branchHQLabel') : $t('branchLabel') }}
      </div>

      <div
        class="text-h6 color-card-text-code"
        :class="{ dark: $q.dark.isActive }"
      >
        {{ data?.code }}
      </div>
      <div
        class="q-px-sm"
        style="
          color: var(--teal-6);
          background: hsla(var(--teal-6-hsl) / 0.08);
          border-radius: 25px;
        "
      >
        {{ data?.status }}
      </div>
    </div>

    <div class="row">
      <div class="col q-pa-sm card-details-variable">
        <AppBox class="bordered row q-pa-sm" bordered>
          <div class="col-5 color-text-static">รหัสสาขา</div>
          <div class="col-7">{{ data?.code }}</div>
          <div class="col-5 color-text-static">เลขประชำตัวผู้เสียภาษี</div>
          <div class="col-7">{{ data?.taxNo }}</div>
          <div class="col-5 color-text-static">ชื่อสาขา ภาษาไทย</div>
          <div class="col-7">{{ data?.name }}</div>
          <div class="col-5 color-text-static">ชื่อสาขา ภาษาอังกฤษ</div>
          <div class="col-7">{{ data?.nameEN }}</div>

          <div
            class="color-card-text-code col-12 q-my-md text-weight-bold"
            :class="{ dark: $q.dark.isActive }"
          >
            ที่อยู่สาขา
          </div>

          <div class="col-3 color-text-static">ที่อยู่</div>
          <div class="col-9">{{ data?.address }}</div>
          <div class="col-3 color-text-static">แขวง/ตำบล</div>
          <div class="col-3">
            {{ data?.subDistrict?.name }}
          </div>
          <div class="col-3 color-text-static">เขต/อำเภอ</div>
          <div class="col-3">{{ data?.district?.name }}</div>
          <div class="col-3 color-text-static">จังหวัด</div>
          <div class="col-3">{{ data?.province?.name }}</div>
          <div class="col-3 color-text-static">รหัสไปรษณีย์</div>
          <div class="col-3">{{ data?.zipCode }}</div>

          <div
            class="color-card-text-code col-12 q-my-md text-weight-bold"
            :class="{ dark: $q.dark.isActive }"
          >
            ที่อยู่สาขา ENG
          </div>

          <div class="col-3 color-text-static">Address</div>
          <div class="col-9">{{ data?.addressEN }}</div>
          <div class="col-3 color-text-static">Subdistrict</div>
          <div class="col-3">{{ data?.subDistrict?.nameEN }}</div>
          <div class="col-3 color-text-static">District</div>
          <div class="col-3">{{ data?.district?.nameEN }}</div>
          <div class="col-3 color-text-static">Province</div>
          <div class="col-3">{{ data?.province?.nameEN }}</div>
          <div class="col-3 color-text-static">Zip code</div>
          <div class="col-3">{{ data?.zipCode }}</div>
        </AppBox>
      </div>

      <div class="col q-pa-sm">
        <AppBox bordered>
          <div class="row">
            <div class="col-8">
              <div class="row card-details-row-height">
                <div class="col-5 color-text-static">เบอร์โทรศัพท์สาขา</div>
                <div class="col">{{ data?.telephoneNo }}</div>
              </div>
              <div class="row card-details-row-height">
                <div class="col-5 color-text-static">อีเมลติดต่อสาขา</div>
                <div class="col">{{ data?.email }}</div>
              </div>
            </div>
            <div class="col full-width">
              <div
                class="column"
                style="border-radius: 6px; border: 1px solid #e0e0e0"
              >
                <div
                  class="col q-pa-sm"
                  style="border-bottom: 1px solid #e0e0e0"
                >
                  Id line
                </div>
                <div class="col flex flex-center full-width bg-grey-3 q-pa-sm">
                  <q-img
                    src="/qrcode.png"
                    spinner-color="white"
                    style="height: 80px; max-width: 80px"
                  />
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col color-text-static">location</div>
            <div class="col"></div>
          </div>
        </AppBox>
      </div>
    </div>
  </div>
</template>

<style scoped>
.color-card-text-code {
  --_color-card-text-code: var(--gray-12);
  color: var(--_color-card-text-code);

  &.dark {
    --_color-card-text-code: var(--cyan-6);
  }
}

.color-text-static {
  --_details-text-static-color: var(--gray-6);
  color: var(--_details-text-static-color);
}

.card-details-row-height {
  height: 40px;
}
</style>