jws-frontend/src/pages/05_quotation/QuotationForm.vue

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { QSelect, useQuasar } from 'quasar';

import WorkerItem from 'components/05_quotation/WorkerItem.vue';
import QuotationFormInfo from './QuotationFormInfo.vue';
import { AddButton, SaveButton } from 'components/button';
import ToggleButton from 'src/components/button/ToggleButton.vue';
import ProductItem from 'src/components/05_quotation/ProductItem.vue';
import { setLocale } from 'src/utils/datetime';
import { useI18n } from 'vue-i18n';

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

const { locale } = useI18n();
const $q = useQuasar();

const selectedBranchIssuer = ref('');
const selectedCustomer = ref('');
const toggleWorker = ref(true);

const quotationNo = ref('');
const actor = ref('');
const workName = ref('');
const contactor = ref('');
const telephone = ref('');
const documentReceivePoint = ref('');
const dueDate = ref('');
const payType = ref('');
const paySplitCount = ref(1);
const payBank = ref('');

function changeMode(mode: string) {
  if (mode === 'light') {
    localStorage.setItem('currentTheme', 'light');
    $q.dark.set(false);
    return;
  }

  if (mode === 'dark') {
    localStorage.setItem('currentTheme', 'dark');
    $q.dark.set(true);
    return;
  }

  if (mode === 'baseOnDevice') {
    localStorage.setItem('currentTheme', 'baseOnDevice');
    if (
      window.matchMedia &&
      window.matchMedia('(prefers-color-scheme: dark)').matches
    ) {
      $q.dark.set(true);
    } else {
      $q.dark.set(false);
    }
    return;
  }
}

onMounted(async () => {
  const getCurLang = localStorage.getItem('currentLanguage');
  if (getCurLang === 'English') {
    locale.value = 'eng';
    setLocale('en-gb');
  }
  if (getCurLang === 'ไทย') {
    locale.value = 'tha';
    setLocale('th');
  }

  const getCurTheme = localStorage.getItem('currentTheme');
  if (
    getCurTheme === 'light' ||
    getCurTheme === 'dark' ||
    getCurTheme === 'baseOnDevice'
  ) {
    changeMode(getCurTheme);
  } else {
    changeMode('light');
  }
});
</script>

<template>
  <div class="fullscreen column surface-0">
    <div class="color-bar">
      <div class="blue-segment"></div>
      <div class="orange-segment"></div>
      <div class="gray-segment"></div>
    </div>

    <header class="row q-pa-md items-center">
      <div style="flex: 1" class="row items-center">
        <q-img src="/icons/favicon-512x512.png" width="4rem" />
        <span class="column text-h6 text-bold q-ml-md">
          {{ $t('quotation.title') }}
          <span class="text-caption text-regular app-text-muted">
            {{ $t('quotation.processOn', { msg: '27 มีนาคม 2567 16:00:01' }) }}
          </span>
        </span>
      </div>
      <q-select
        v-model="selectedBranchIssuer"
        :options="[{ label: 'Issuer 1', value: 'Issuer 1' }]"
        :label="$t('quotation.branch')"
        id="select-branch-issuer"
        for="select-branch-issuer"
        style="width: 300px"
        class="q-mr-md"
        outlined
        dense
      />
      <q-select
        v-model="selectedCustomer"
        :options="[{ label: 'Customer 1', value: 'Customer 1' }]"
        :label="$t('quotation.customer')"
        id="select-customer"
        for="select-customer"
        style="width: 300px"
        outlined
        dense
      />
    </header>

    <article
      class="row col"
      style="flex-grow: 1; overflow-y: hidden"
      :style="{
        overflowY: $q.screen.gt.sm ? 'hidden' : 'auto',
      }"
    >
      <section
        class="col-12 col-sm-9 row"
        style="padding: var(--size-3); overflow-y: auto"
        :style="{
          paddingRight: $q.screen.gt.sm ? 'var(--size-2)' : 'var(--size-3)',
          maxHeight: $q.screen.gt.sm ? '100%' : undefined,
        }"
      >
        <div class="col q-gutter-y-md">
          <q-expansion-item
            for="item-up"
            id="item-up"
            dense
            class="overflow-hidden"
            switch-toggle-side
            default-opened
            style="border-radius: var(--radius-2)"
            expand-icon="mdi-chevron-down-circle"
            header-class="surface-1"
          >
            <template v-slot:header>
              <div class="row full-width items-center q-pr-md q-py-sm">
                <span
                  class="text-weight-medium q-mr-md"
                  style="font-size: 18px"
                >
                  {{ $t('quotation.employeeList') }}
                </span>
                <ToggleButton class="q-mr-sm" v-model="toggleWorker" />
                {{
                  toggleWorker ? $t('general.specify') : $t('general.noSpecify')
                }}
              </div>
              <AddButton icon-only class="q-ml-auto" @click.stop="" />
            </template>

            <div class="surface-1 q-pa-md full-width">
              <WorkerItem
                :rows="[
                  {
                    foreignRefNo: '123',
                    employeeName: '123',
                    birthDate: '123',
                    gender: '123',
                    age: '123',
                    nationality: '123',
                    documentExpireDate: '123',
                    imgUrl: '/images/employee-avatar.png',
                    status: 'ACTIVE',
                  },
                ]"
              />
            </div>
          </q-expansion-item>

          <q-expansion-item
            for="item-up"
            id="item-up"
            dense
            class="overflow-hidden"
            switch-toggle-side
            default-opened
            style="border-radius: var(--radius-2)"
            expand-icon="mdi-chevron-down-circle"
            header-class="surface-1"
          >
            <template v-slot:header>
              <div class="row full-width items-center q-pr-md q-py-sm">
                <span class="text-weight-medium" style="font-size: 18px">
                  {{ $t('quotation.productList') }}
                </span>
              </div>
              <AddButton icon-only class="q-ml-auto" @click.stop="" />
            </template>
            <div class="surface-1 q-pa-md full-width">
              <ProductItem
                :rows="[
                  {
                    code: '123456',
                    list: 'aaa',
                    type: 'product',
                    amount: 0,
                    pricePerUnit: 0,
                    discount: 0,
                    tax: 0,
                    sumPrice: 0,
                  },
                ]"
              />
            </div>
          </q-expansion-item>

          <q-expansion-item
            for="item-up"
            id="item-up"
            dense
            class="overflow-hidden"
            switch-toggle-side
            default-opened
            style="border-radius: var(--radius-2)"
            expand-icon="mdi-chevron-down-circle"
            header-class="surface-1"
          >
            <template v-slot:header>
              <div class="row full-width items-center q-pr-md q-py-sm">
                <span class="text-weight-medium" style="font-size: 18px">
                  {{ $t('productService.group.title') }}
                </span>
              </div>
            </template>
            <div class="surface-1 q-pa-md full-width">
              <q-editor
                dense
                :model-value="''"
                min-height="5rem"
                class="full-width"
                toolbar-bg="input-border"
                style="cursor: auto; color: var(--foreground)"
                :flat="!readonly"
                :readonly="readonly"
                :style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
                :toolbar="[['left', 'center', 'justify'], ['clip']]"
                :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
                :toolbar-color="
                  readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
                "
                :definitions="{
                  clip: {
                    icon: 'mdi-paperclip',
                    tip: 'Upload',
                    handler: () => console.log('upload'),
                  },
                }"
              />
            </div>
          </q-expansion-item>
          <!-- <AppBox bordered style="padding: var(--size-3)">
            <div class="row items-center q-mb-sm">
              <span style="flex: 1">
                {{ $t('quotation.employeeList') }}
                <q-toggle
                  v-model="toggleWorker"
                  id="toggle-status"
                  size="md"
                  padding="none"
                  class="q-ml-md"
                  dense
                />
              </span>
              <AddButton icon-only />
            </div>

            <AppBox class="surface-2 worker-list" v-if="toggleWorker" bordered>
              <WorkerItem
                v-for="_ in Array(20)"
                :data="{
                  no: 1,
                  refNo: 'CC6613334',
                  nationality: 'Thai',
                  birthDate: '1 May 2001',
                  age: '23 Years',
                  fullName: 'Methapon Metanipat',
                  docExpireDate: '16 May 2025',
                }"
                color="male"
              />
            </AppBox>
          </AppBox> -->
        </div>
      </section>

      <div
        class="col-12 col-sm-3"
        style="padding: var(--size-3); overflow-y: auto"
        :style="{
          paddingLeft: $q.screen.gt.sm ? 'var(--size-1)' : 'var(--size-3)',
          maxHeight: $q.screen.gt.sm ? '100%' : undefined,
        }"
      >
        <QuotationFormInfo
          v-model:quotation-no="quotationNo"
          v-model:actor="actor"
          v-model:work-name="workName"
          v-model:contactor="contactor"
          v-model:telephone="telephone"
          v-model:document-receive-point="documentReceivePoint"
          v-model:due-date="dueDate"
          v-model:pay-type="payType"
          v-model:pay-bank="payBank"
          v-model:pay-split-count="paySplitCount"
          :readonly
        />
      </div>
    </article>

    <footer class="surface-1 q-pa-md">
      <div class="row full-width justify-between">
        <q-btn dense outline color="primary" class="rounded" padding="2px 8px">
          <q-icon name="mdi-play-box-outline" size="xs" class="q-mr-xs" />
          {{ $t('general.view', { msg: $t('general.example') }) }}
        </q-btn>
        <SaveButton solid />
      </div>
    </footer>
  </div>
</template>

<style scoped>
.worker-list > :deep(*:not(:last-child)) {
  margin-bottom: var(--size-2);
}

.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  font-size: 1.5rem;
  padding: var(--size-1);
  border-radius: var(--radius-2);
}

.bg-color-orange {
  --_color: var(--yellow-7-hsl);
  color: white;
  background: hsla(var(--_color));
}

.dark .bg-color-orange {
  --_color: var(--orange-6-hsl);
}

.bg-color-orange-light {
  --_color: var(--yellow-7-hsl);
  background: hsla(var(--_color) / 0.2);
}
.dark .bg-color-orange {
  --_color: var(--orange-6-hsl / 0.2);
}

.color-bar {
  width: 100%;
  height: 1vh;
  background: linear-gradient(
    90deg,
    rgba(245, 159, 0, 1) 0%,
    rgba(255, 255, 255, 1) 77%,
    rgba(204, 204, 204, 1) 100%
  );
  display: flex;
  overflow: hidden;
}

.blue-segment {
  background-color: var(--yellow-7);
  flex-grow: 4;
}

.orange-segment {
  background-color: hsla(var(--yellow-7-hsl) / 0.2);
  flex-grow: 0.5;
}

.gray-segment {
  background-color: #ccc;
  flex-grow: 1;
}

.blue-segment,
.orange-segment,
.gray-segment {
  transform: skewX(-60deg);
}

:deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {
  color: var(--brand-1);
}

:deep(.q-editor__toolbar-group):nth-child(2) {
  margin-left: auto !important;
}

:deep(.q-editor__toolbar.row.no-wrap.scroll-x) {
  background-color: var(--surface-2) !important;
}

:deep(.q-editor__toolbar) {
  border-color: var(--surface-3) !important;
}
</style>