jws-frontend/src/pages/09_task-order/expansion/DocumentExpansion.vue

<script lang="ts" setup>
import SelectBranch from 'src/components/shared/select/SelectBranch.vue';
import SelectInstitution from 'src/components/shared/select/SelectInstitution.vue';
import DatePicker from 'src/components/shared/DatePicker.vue';

import { getName } from 'src/services/keycloak';

defineProps<{
  readonly?: boolean;
  taskListGroup: boolean;
  institutionGroup: string[];
}>();

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

const taskName = defineModel<string>('taskName');
const contactName = defineModel<string>('contactName');
const contactTel = defineModel<string>('contactTel');
</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('taskOrder.issueBranch')}${$i18n.locale === 'tha' ? $t('taskOrder.title') : ''}`"
        v-model:value="registeredBranchId"
      />
      <SelectInstitution
        :readonly
        required
        class="col-md-4 col-12"
        :label="`${$t('general.agencies')}`"
        v-model:value="institutionId"
        :disabled="taskListGroup"
        :params="{ payload: { group: institutionGroup } }"
      />
      <DatePicker
        :label="$t('taskOrder.issueDate')"
        class="col-md-2 col-6"
        :model-value="issueDate || new Date(Date.now())"
        :readonly
        :disabled="!readonly"
      />
      <q-input
        :label="$t('taskOrder.code')"
        outlined
        dense
        class="col-md-2 col-6"
        :readonly
        :disable="!readonly"
        :model-value="code"
      />

      <q-input
        :readonly
        :label="$t('general.name', { msg: $t('taskOrder.title') })"
        outlined
        dense
        class="col-md-4 col-6"
        v-model="taskName"
      />
      <q-input
        :readonly
        :label="$t('taskOrder.contactName')"
        outlined
        dense
        class="col-md col-6"
        v-model="contactName"
      />
      <q-input
        :readonly
        :label="$t('general.telephone')"
        outlined
        dense
        class="col"
        v-model="contactTel"
      />
      <q-input
        :readonly
        :label="$t('taskOrder.madeBy')"
        outlined
        dense
        class="col"
        :disable="!readonly"
        :model-value="getName()"
      />
    </main>
  </q-expansion-item>
</template>
<style scoped></style>