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

<script lang="ts" setup>
import { ref } from 'vue';
import { Icon } from '@iconify/vue';

import MainDialog from 'components/05_quotation/MainDialog.vue';
import WorkerItem from 'components/05_quotation/WorkerItem.vue';
import AppBox from 'components/app/AppBox.vue';

const dialogState = defineModel<boolean>({ default: true });

const selectedBranchIssuer = ref('');
const selectedCustomer = ref('');
const toggleWorker = ref(true);
</script>

<template>
  <MainDialog v-model:state="dialogState">
    <template #title>
      <span class="text-weight-medium" style="color: var(--brand-1)">
        {{ $t('quotation.form.createTitle') }}
      </span>
    </template>

    <div class="row q-pa-md items-center">
      <div style="flex: 1"><q-img src="/logo.png" width="8rem" /></div>
      <q-select
        v-model="selectedBranchIssuer"
        :options="[{ label: 'Issuer 1', value: 'Issuer 1' }]"
        :label="$t('quotation.form.customerBranchSelect')"
        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.form.customerSelect')"
        id="select-customer"
        for="select-customer"
        style="width: 300px"
        outlined
        dense
      />
    </div>

    <div
      class="surface-2 bordered-t row"
      style="align-items: stretch; overflow-y: auto"
    >
      <div
        class="col-12 col-sm-9 row items-stretch"
        style="padding: var(--size-3)"
      >
        <AppBox
          class="full-width"
          bordered
          style="
            padding: var(--size-3);
            max-height: calc(100vh - 300px - var(--size-3) * 2);
            overflow-y: auto;
          "
        >
          <div class="row items-center q-mb-sm">
            <span style="flex: 1">
              {{ $t('quotation.form.listWorker') }}
              <q-toggle
                v-model="toggleWorker"
                id="toggle-status"
                size="md"
                padding="none"
                class="q-ml-md"
                dense
              />
            </span>
            <button
              id="add-btn-plus"
              class="row items-center"
              style="border: none; background: transparent"
            >
              <Icon
                height="24"
                icon="pixelarticons:plus"
                class="app-text-info cursor-pointer"
              />
            </button>
          </div>

          <AppBox class="surface-2 worker-list" bordered>
            <WorkerItem
              :data="{
                no: 1,
                refNo: 'CC6613334',
                nationality: 'Thai',
                birthDate: '1 May 2001',
                age: '23 Years',
                fullName: 'Methapon Metanipat',
                docExpireDate: '16 May 2025',
              }"
              color="male"
            />
            <WorkerItem
              :data="{
                no: 1,
                refNo: 'CC6613334',
                nationality: 'Thai',
                birthDate: '1 May 2001',
                age: '23 Years',
                fullName: 'Methapon Metanipat',
                docExpireDate: '16 May 2025',
              }"
              color="male"
            />
            <q-tabs
              inline-label
              mobile-arrows
              dense
              align="left"
              class="full-width"
              active-color="info"
            >
              <q-tab name="ALL">
                <div class="row">{{ $t('all') }}</div>
              </q-tab>
              <q-tab name="USER">
                <div class="row">
                  {{ $t('USER') }}
                </div>
              </q-tab>
              <q-tab name="MESSENGER">
                <div class="row">
                  {{ $t('MESSENGER') }}
                </div>
              </q-tab>
              <q-tab name="DELEGATE">
                <div class="row">
                  {{ $t('DELEGATE') }}
                </div>
              </q-tab>
              <q-tab name="AGENCY">
                <div class="row">
                  {{ $t('AGENCY') }}
                </div>
              </q-tab>
            </q-tabs>
          </AppBox>
        </AppBox>
      </div>
      <div
        class="col-12 col-sm-3"
        style="
          padding: var(--size-3);
          padding-left: 0;
          overflow-y: auto;
          max-height: calc(100vh - 300px);
        "
      >
        <AppBox bordered class="column" style="gap: var(--size-3)">
          <div class="rounded bordered q-px-md q-py-sm row">
            <div class="col-4">{{ $t('quotation.form.labelNo') }}</div>
          </div>

          <div class="rounded bordered q-px-md q-py-sm row">
            <div class="col-4">{{ $t('quotation.form.labelDate') }}</div>
          </div>

          <div class="rounded bordered q-px-md q-py-sm row">
            <div class="col-4">{{ $t('quotation.form.labelTime') }}</div>
          </div>

          <div class="rounded bordered q-px-md q-py-sm row">
            <div class="col-4">{{ $t('quotation.form.labelProcesser') }}</div>
          </div>
        </AppBox>
      </div>
    </div>

    <template #footer>
      <div class="row justify-end full-width">
        <q-btn
          color="primary"
          dense
          no-caps
          :label="$t('quotation.form.buttonSave')"
          class="q-px-md"
        />
      </div>
    </template>
  </MainDialog>
</template>

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