chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

feat: task order (#141)

Browse source 
* feat: task order => routes

* feat: Page

* refactor: pagination

* refactor: taskOrder => table, card and constants

* feat: add structure select request list comp

* fix: re-export type

* refactor: edit path route of task order

* feat: trigger task order

* refactor: edit type task statss

* feat: table select request list

* feat: i18n

* refactor: quasar expansion chevron color

* refactor: type

* refactor: state btn status done

* feat: task order => order view layout

* feat: task order => remark expansion

* fix: task order => rename attachment to additional file

* feat: upload file section optional layout

* feat: task order => additional file expansion

* feat: task order => payment expansion

* feat: conditionally add urgent

* feat: send id together with link

* refactor: edit type

* feat: new form.ts

* refactor: edit url

* refactor: edit id trigger

* feat: select institution component

* feat: task order code i18n

* feat: task order => document expansion form

* feat: fallback address on null

* refactor: add type for table

* feat: add filter parameter

* refactor: edit name routes

* refactor: add type of task order payload

* refactor: by value form

* refactor: responsive quotation form info

* refactor: submit form

* refactor: add i18n

* refactor: status canceled

* refactor: handle task status

* refactor: handle mode view

* refactor: addtaskstatus

* refactor: i18n & constants

* refactor: table employee

* refactor: select ready request work

* refactor: handle save form

* refactor: edit layout btn

* feat: undo()

* cleanup delete import

* feat: closetab

* refactor: handle readonly

* fix: body edit

* refactor: handle readonly uploadfile

* feat: import manage attachment

* refactor: quotation/task-order => type

* refactor: select ready request work

* refactor: i18n & constants

* chore: clean duplicate i18n

* refactor: type according to backend relation

* refactor: edit base url

* feat: upload file

* feat: fetch file list

* feat: get url file

* refactor: set default opened

* refactor: type

* feat: removefile

* feat: task order => select product

* feat: add parameter only active branch is selectable

* refactor: add i18n

* feat: set layout

* feat: add info product expansion

* refactor: new info messenger

* refactor: add slot name value

* refactor: add i18n

* refactor: edit type task status

* refactor: use date format

* refactor: value can null

* refactor: add i18n

* cleanup

* feat: productlistinput

* refactor: edit i18n

* refactor: edit redo

* refactor: add slot

* feat: task order => i18n

* refactor: task order => constant

* refactor: taskOrder => status type and index

* feat: taskOrder => ReceiveDialog

* refactor: wording

* refactor: table employee due date

* refactor: receive task i18n

* feat: trigger receive & task stat in receive page

* refactor: receive dialog task in cart  i18n

* fix: remove task-order/receive/add

* feat: receivetabletaskorder

* refactor: fetch task on receive dialog

* feat: add separate api get user task

* refactor: receive fetch (messenger)

* refactor: edit layout table

* refactor: task order i18n & constant

* refactor: task order change tab and stat (messenger and !messenger)

* fix: task order status display & receive badge color (card)

* refactor: trigger receive view

* fix: add receive task condition

* feat: total count

* feat: prepare information

* fix: i18n error task order not found

* refacor: value

* feat: select worker

* refactor: status i18n & constant

* refactor: table employee props (check box, step)

* fix: order => select ready task

* refactor: order => toggle status

* refactor: receive => receive dialog

* feat: featch value

* refactor: task status display components

* refactor: status active can is null

* feat: update status tab

* refactor: data display

* refactor: i18n & fullTaskOrder variable

* refactor: task receive view

* refactor: add type responsible user

* refactor: set group messenger

* cleanup:

* refactor: i18n / clone full task order / service => workflow type

* refactor: receive view

* refactor: show info messenger

* refactor: handle flow step

* refactor: receive view => opacity when pending

* feat: add workflow template name and step name

* feat: display workflow data on table

* feat: add template step identifier

* fix: edit does not change workflow id if changed

* feat: detect if same template and step

* refactor: handle template

* refactor: add slot name product

* refactor: map step in list product

* refactor: bind data messenger list group

* refactor: change endpoint name

* chore: add helper package

* feat: changetaskstatus

* refactor: update type

* refactor: set color btn

* refactor: add step

* refactor: add resposible institution

* feat: disabled

* refactor: map responsible institution

* fix: order view => readonly

* chore: clean

* refactor: edit url api

* refactor: edit name type

* refactor: add slots action

* refactor: add type row

* refactor: add opts of task status

* refactor: add select status

* refactor: handle btn

* refactor: add btn change task status

* refactor: edit i18n redo th

* refactor: sort status opts

* feat: receive & order banner img

* refactor: fetch status after submit

* refactor: handle create only

* refactor: task order status type Accept (messenger only)

* feat: receive messenger profile

* refactor: receive toggle status (display only)

* fix: document expansion readonly

* feat: confirmsendingbtn

* refactor: constant and task order status

* feat: receive task list count

* refactor: post or get

* refactor: define props institution group

* refactor: fetch status after submit

* refactor: handle create

* refactor: handle query

* refactor: update endpoint to support accept multiple order

* refactor: change function name

* feat: receive => functional accept task order

* feat: task status count

* feat: receive stat card count

* refactor: order messenger profile

* refactor: edit value to be task status

* refactor: handle status of type order

* refactor: use componet task status

* refactor: handle show btn saving status

* refactor: order => task status

* refactor: edit selectStatus => changeStatus

* refactor: edit @click btn confirmssending

* refactor: add i18n

* refactor: add function get template data

* refactor: add change status

* refactor: handle type receive

* feat: order => auto change tab by status

* refactor: fetch task after change status

* feat: fail remark dialog

* refactor: display step order (table employee)

* refactor: fail remark dialog

* refactor: order => open ready request dialog map selected

* refactor: task list type & change status param

* refactor: table task order, td background when selected

* refactor: order => change status param

* refactor: order => selectedEmployee variable type

* refactor: task status component => shield btn

* refactor: receive => change status

* refactor: order => step btn waiting

* fix: step btn waiting condition

* refactor: filter selectable task (Failed)

* refactor: find index condition on check

* refactor: no request list available

* refactor: fail btn no-wrap

* refactor: fail dialog readonly

* fix: reset state on open dialog

* fix: wrong title position

* refactor: hide task status drop down icon

* fix: handle check condition

* refactor: add userTask type and status

* feat: submit task order function

* refactor: table employee checkbox display condition

* refactor: main layout

* fix: task order validate i18n

* refactor: table task order add submit status

* refactor: status list

* refactor: info product => user task status

* feat: receive => submit task & step

* refactor: i18n

* feat: complete task oder function

* refactor: task status component no action props

* refactor: info messenger status

* refactor: receive and order view

* refactor: order complete view

* refactor: order => complete color and title

* refactor: calc price on table

* refactor: quotation table i18n + product image

* refactor: remove urgent checkbox

* refactor: task status color

* feat: calc summary price

* fix: data is not available

* feat: add doc view structure

* refactor: format address text

* feat: fetch document data from api

* fix: value is null

* fix: regression cannot edit package

* feat: add document view for task order

* feat: add view document button

* feat: update type add discount

* feat: readonly on cancel

* feat: add discount from relation

* refactor: add taskProduct on submit order

* refactor: order => task product discount

* refactor: order => date, task status count, view example

* refactor: receive date

* refactor: receive task status count

---------

Co-authored-by: puriphatt <puriphat@frappet.com>
Co-authored-by: nwpptrs <jay02499@gmail.com>
Co-authored-by: Thanaphon Frappet <thanaphon@frappet.com>
Co-authored-by: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Co-authored-by: oat_dev <nattapon@frappet.com>
This commit is contained in:
Methapon Metanipat 2024-12-25 11:59:49 +07:00 • committed by GitHub
parent cd0831bac1
commit 9eff614dbd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
56 changed files with 6981 additions and 361 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/pages/09_task-order/expansion/AdditionalFileExpansion.vue Normal file
View file

@ -0,0 +1,55 @@
<script lang="ts" setup>
import UploadFileSection from 'src/components/upload-file/UploadFileSection.vue';
defineProps<{
readonly?: boolean;
transformUrl?: (url: string) => string | Promise<string>;
}>();
const emit = defineEmits<{
(e: 'fetchFileList'): void;
(e: 'upload', file: FileList): void;
(e: 'remove', name: string): void;
}>();
const fileData = defineModel<
{
name: string;
progress: number;
loaded: number;
total: number;
url?: string;
}[]
>('fileData', { default: [] });
</script>
<template>
<q-expansion-item
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"
@after-show="() => $emit('fetchFileList')"
>
<template #header>
<span>
{{ $t('quotation.additionalFile') }}
</span>
</template>
<main class="q-px-md q-py-sm surface-1">
<UploadFileSection
multiple
:layout="$q.screen.gt.sm ? 'column' : 'row'"
:readonly
:label="$t('general.upload', { msg: $t('general.attachment') })"
:transform-url="transformUrl"
v-model:file-data="fileData"
@update:file="(f) => $emit('upload', f as unknown as FileList)"
@close="(v) => $emit('remove', v)"
/>
</main>
</q-expansion-item>
</template>
<style scoped></style>

108
src/pages/09_task-order/expansion/DocumentExpansion.vue Normal file
View file

@ -0,0 +1,108 @@
<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>

63
src/pages/09_task-order/expansion/PaymentExpansion.vue Normal file
View file

@ -0,0 +1,63 @@
<script lang="ts" setup>
import QuotationFormInfo from 'src/pages/05_quotation/QuotationFormInfo.vue';
defineProps<{
complete?: boolean;
}>();
const payType = defineModel<
| 'Full'
| 'Split'
| 'SplitCustom'
| 'BillFull'
| 'BillSplit'
| 'BillSplitCustom'
>('payType', { default: 'Full' });
const paySplit = defineModel<{ no: number; name?: string; amount: number }[]>(
'paySplit',
{ default: [] },
);
const summaryPrice = defineModel<{
totalPrice: number;
totalDiscount: number;
vat: number;
vatExcluded: number;
finalPrice: number;
}>('summaryPrice', {
required: true,
default: {
totalPrice: 0,
totalDiscount: 0,
vat: 0,
vatExcluded: 0,
finalPrice: 0,
},
});
</script>
<template>
<q-expansion-item
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.payment') }}
</span>
</template>
<main class="q-px-md q-py-sm surface-1">
<QuotationFormInfo
task-order
:task-order-complete="complete"
v-model:pay-type="payType"
v-model:pay-split="paySplit"
v-model:summary-price="summaryPrice"
/>
</main>
</q-expansion-item>
</template>
<style scoped></style>

310
src/pages/09_task-order/expansion/ProductExpansion.vue Normal file
View file

@ -0,0 +1,310 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { QTableSlots } from 'quasar';
import { AddButton } from 'src/components/button';
import TableEmployee from '../TableEmployee.vue';
import { RequestWork } from 'src/stores/request-list';
import { productColumn } from '../constants';
import { baseUrl, formatNumberDecimal, commaInput } from 'src/stores/utils';
import { precisionRound } from 'src/utils/arithmetic';
import { useConfigStore } from 'stores/config';
import { storeToRefs } from 'pinia';
const currentBtnOpen = ref<boolean[]>([]);
const configStore = useConfigStore();
const { data: config } = storeToRefs(configStore);
// TODO: replace discount
const discount4Show = ref<string[]>([]);
const taskProduct = defineModel<{ productId: string; discount?: number }[]>(
'taskProduct',
{
default: [],
},
);
defineProps<{
readonly?: boolean;
taskList: {
product: RequestWork['productService']['product'];
list: RequestWork[];
}[];
}>();
defineEmits<{
(e: 'addProduct'): void;
}>();
defineExpose({
calcPricePerUnit,
});
function openList(index: number) {
if (!currentBtnOpen.value[index]) {
currentBtnOpen.value.map((v, i) => {
if (i !== index) {
currentBtnOpen.value[i] = false;
}
});
}
currentBtnOpen.value[index] = !currentBtnOpen.value[index];
}
function calcPricePerUnit(product: RequestWork['productService']['product']) {
return product.vatIncluded
? precisionRound(product.serviceCharge / (1 + (config.value?.vat || 0.07)))
: product.serviceCharge;
}
function calcPrice(
product: RequestWork['productService']['product'],
amount: number,
) {
const disc =
taskProduct.value.find((v) => v.productId === product.id)?.discount || 0;
const pricePerUnit = calcPricePerUnit(product);
return precisionRound(
pricePerUnit * amount -
disc +
precisionRound(
product.calcVat
? (pricePerUnit * (disc ? amount : 1) - disc) *
(config.value?.vat || 0.07)
: 0,
) *
(!disc ? amount : 1),
);
}
</script>
<template>
<q-expansion-item
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"
default-opened
>
<template #header>
<span
class="row items-center justify-between full-width"
style="min-height: 31.01px"
>
{{ $t('general.information', { msg: $t('taskOrder.productList') }) }}
<AddButton
icon-only
@click.stop="$emit('addProduct')"
v-if="!readonly"
/>
</span>
</template>
<main class="q-px-md q-py-sm surface-1">
<q-table
:columns="productColumn"
:rows="taskList"
bordered
flat
hide-pagination
card-container-class="q-col-gutter-sm"
class="full-width"
:rows-per-page-options="[0]"
:no-data-label="$t('general.noDataTable')"
>
<template v-slot:header="props">
<q-tr
style="background-color: hsla(var(--info-bg) / 0.07)"
:props="props"
>
<q-th v-for="col in props.cols" :key="col.name" :props="props">
{{ col.label && $t(col.label) }}
{{ col.label === 'quotation.vat' ? '%' : '' }}
</q-th>
<q-th></q-th>
</q-tr>
</template>
<template
v-slot:body="props: {
row: {
product: RequestWork['productService']['product'];
list: RequestWork[];
};
} & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
>
<q-tr class="text-center">
<q-td>
{{ props.rowIndex + 1 }}
</q-td>
<q-td>
{{ props.row.product.code }}
</q-td>
<q-td style="width: 100%" class="text-left">
<q-avatar class="q-mr-sm" size="md">
<q-img
class="text-center"
:ratio="1"
:src="`${baseUrl}/product/${props.row.product.id}/image/${props.row.product.selectedImage}`"
>
<template #error>
<q-icon
class="full-width full-height"
name="mdi-shopping-outline"
:style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
/>
</template>
</q-img>
</q-avatar>
{{ props.row.product.name }}
</q-td>
<q-td>
{{ props.row.list.length }}
</q-td>
<q-td class="text-right">
{{
formatNumberDecimal(
calcPricePerUnit(props.row.product) +
(props.row.product.calcVat
? calcPricePerUnit(props.row.product) *
(config?.vat || 0.07)
: 0),
2,
)
}}
</q-td>
<!-- TODO: display price detail -->
<q-td align="center">
<q-input
:readonly
:bg-color="readonly ? 'transparent' : ''"
dense
min="0"
outlined
input-class="text-right"
style="width: 90px"
debounce="500"
:model-value="
commaInput(
taskProduct
.find((v) => v.productId === props.row.product.id)
?.discount?.toString() || '0',
)
"
@update:model-value="
(v) => {
if (typeof v === 'string')
discount4Show[props.rowIndex] = commaInput(v);
const x = parseFloat(
discount4Show[props.rowIndex] &&
typeof discount4Show[props.rowIndex] === 'string'
? discount4Show[props.rowIndex].replace(/,/g, '')
: '',
);
const product = taskProduct.find(
(v) => v.productId === props.row.product.id,
);
if (product) {
product.discount = x;
}
}
"
/>
</q-td>
<!-- before vat -->
<q-td class="text-right">
{{ formatNumberDecimal(calcPricePerUnit(props.row.product), 2) }}
</q-td>
<!-- vat -->
<q-td class="text-right">
{{
formatNumberDecimal(
props.row.product.calcVat
? precisionRound(
(calcPricePerUnit(props.row.product) *
props.row.list.length -
(taskProduct.find(
(v) => v.productId === props.row.product.id,
)?.discount || 0)) *
(config?.vat || 0.07),
)
: 0,
2,
)
}}
</q-td>
<!-- total -->
<q-td class="text-right">
{{
formatNumberDecimal(
calcPrice(props.row.product, props.row.list.length),
2,
)
}}
</q-td>
<q-td>
<q-btn
dense
flat
class="rounded"
@click.stop="openList(props.rowIndex)"
>
<div class="row items-center no-wrap">
<q-icon name="mdi-account-group-outline" />
<q-icon
class="btn-arrow-right"
:class="{
active: currentBtnOpen[props.rowIndex],
}"
size="xs"
:name="`mdi-chevron-${currentBtnOpen[props.rowIndex] ? 'down' : 'up'}`"
/>
</div>
</q-btn>
</q-td>
</q-tr>
<q-tr v-show="currentBtnOpen[props.rowIndex]" :props="props">
<q-td colspan="100%" style="padding: 16px">
<TableEmployee step-on :rows="props.row.list" />
</q-td>
</q-tr>
</template>
</q-table>
<div class="q-pt-md row items-center">
<span class="q-ml-auto q-mr-sm">
{{
$t('general.numberOf', {
msg: $t('productService.product.product'),
})
}}
</span>
<div class="surface-3 q-px-sm rounded">{{ taskList.length }}</div>
</div>
</main>
</q-expansion-item>
</template>
<style scoped>
.product-status {
padding-left: 8px;
border-radius: 20px;
color: hsl(var(--_color));
background: hsla(var(--_color) / 0.15);
&.warning {
--_color: var(--warning-bg);
}
&.positive {
--_color: var(--positive-bg);
}
&.negative {
--_color: var(--negative-bg);
}
}
</style>

67
src/pages/09_task-order/expansion/RemarkExpansion.vue Normal file
View file

@ -0,0 +1,67 @@
<script lang="ts" setup>
defineProps<{
readonly?: boolean;
}>();
const remark = defineModel<string>('remark', { default: '' });
</script>
<template>
<q-expansion-item
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.remark') }}
</span>
</template>
<main class="surface-1 q-pa-md full-width">
<q-editor
dense
:readonly="readonly"
:model-value="remark"
min-height="5rem"
class="full-width"
toolbar-bg="input-border"
style="cursor: auto; color: var(--foreground)"
:content-class="readonly ? 'q-mt-sm' : 'bordered q-mt-sm rounded'"
:flat="!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',
disable: readonly,
handler: () => console.log('upload'),
},
}"
@update:model-value="
(v) => {
remark = v;
}
"
/>
</main>
</q-expansion-item>
</template>
<style scoped>
: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>

149
src/pages/09_task-order/expansion/receive/InfoMessengerExpansion.vue Normal file
View file

@ -0,0 +1,149 @@
<script lang="ts" setup>
// NOTE: Import stores
import { dateFormat } from 'src/utils/datetime';
// NOTE Import Types
import {
TaskOrderStatus,
TaskStatus,
UserTaskStatus,
} from 'src/stores/task-order/types';
// NOTE: Import Components
import BadgeComponent from 'src/components/BadgeComponent.vue';
import DataDisplay from 'src/components/08_request-list/DataDisplay.vue';
defineProps<{
gender?: string;
contactName?: string;
contactTel?: string;
contactUrl?: string;
email?: string;
receivedDate?: Date | string;
deliveryDate?: Date | string;
status?: UserTaskStatus;
}>();
</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('personnel.MESSENGER') }) }}
</span>
</template>
<main
class="surface-1"
:class="{ muted: status === UserTaskStatus.Pending }"
>
<div class="row q-col-gutter-sm q-px-md q-py-sm">
<DataDisplay
class="col-md col-6"
:label="$t('taskOrder.recipientOrSender')"
>
<template #value>
<q-avatar size="md" class="q-mr-xs">
<q-img class="text-center" :ratio="1" :src="contactUrl">
<template #error>
<div
class="no-padding full-width full-height flex items-center justify-center"
:style="`${gender ? 'background: white' : 'background: linear-gradient(135deg,rgba(43, 137, 223, 1) 0%, rgba(230, 51, 81, 1) 100%);'}`"
>
<q-img
v-if="gender"
:src="
gender === 'male'
? '/no-img-man.png'
: '/no-img-female.png'
"
/>
<q-icon
v-else
size="sm"
name="mdi-account-outline"
style="color: white"
/>
</div>
</template>
</q-img>
</q-avatar>
{{ contactName }}
</template>
</DataDisplay>
<DataDisplay
class="col-md col-6"
:label="$t('general.telephone')"
:value="contactTel || '-'"
/>
<DataDisplay
class="col-md col-6"
:label="$t('form.email')"
:value="email || '-'"
/>
<DataDisplay
class="col-md col-6"
:label="$t('taskOrder.workStartDate')"
>
<template #value>
{{ receivedDate ? dateFormat(receivedDate) : '-' }}
</template>
</DataDisplay>
<DataDisplay
class="col-md col-6"
:label="$t('taskOrder.workSubmissionDate')"
>
<template #value>
{{ deliveryDate ? dateFormat(deliveryDate) : '-' }}
</template>
</DataDisplay>
<DataDisplay class="col-md col-6" :label="$t('general.status')">
<template #value>
<BadgeComponent
v-if="status"
hide-icon
:title="
$t(
`taskOrder.${
{
Pending: 'waitReceive',
Accept: 'receiveTask',
Submit: 'sentTask',
}[status] ?? 'waitReceive'
}`,
)
"
:hsla-color="
{
Pending: '--info-bg',
Accept: '--info-bg',
Submit: '--positive-bg',
}[status] ?? '--info-bg'
"
/>
</template>
</DataDisplay>
</div>
<slot name="product"></slot>
</main>
</q-expansion-item>
</template>
<style scoped>
.muted {
& .col-md {
opacity: 50%;
}
}
</style>

140
src/pages/09_task-order/expansion/receive/InfoProductExpansion.vue Normal file
View file

@ -0,0 +1,140 @@
<script lang="ts" setup>
// NOTE: Import stores
// NOTE Import Types
import { ProductRelation } from 'src/stores/quotations/types';
// NOTE: Import Components
import FormGroupHead from 'src/pages/08_request-list/FormGroupHead.vue';
import DataDisplay from 'src/components/08_request-list/DataDisplay.vue';
import SelectBranch from 'src/components/shared/select/SelectBranch.vue';
import BadgeComponent from 'src/components/BadgeComponent.vue';
import { TaskOrderStatus, UserTaskStatus } from 'src/stores/task-order/types';
// TODO: เอา รับค่าโดยใช้ defineProps
defineProps<{
code?: string;
taskName?: string;
issueBranch?: string;
agencies?: string;
madeBy?: string;
contactTel?: string;
contactName?: string;
userTaskStatus?: UserTaskStatus;
product?: ProductRelation;
}>();
function mapStatus(value: string, type: 'status' | 'color') {
const mappings: Record<string, Record<'status' | 'color', string>> = {
Pending: {
status: 'taskOrder.taskInCart',
color: '--blue-6-hsl',
},
Accept: {
status: 'taskOrder.inProgress',
color: '--blue-6-hsl',
},
Submit: {
status: 'taskOrder.sentTask',
color: '--blue-6-hsl',
},
InProgress: {
status: 'taskOrder.inProgress',
color: '--blue-6-hsl',
},
Validate: {
status: 'taskOrder.inProgress',
color: '--blue-6-hsl',
},
Complete: {
status: 'taskOrder.sentTask',
color: '--blue-6-hsl',
},
};
return mappings[value]?.[type] || '';
}
</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('taskOrder.productList', { msg: $t('personnel.MESSENGER') }) }}
</span>
</template>
<main class="surface-1">
<!-- TODO: เอา DataDisplay มาใส่ตรงนี้ -->
<div class="row q-col-gutter-sm q-px-md q-py-sm">
<DataDisplay
class="col-md-2 col-6"
:label="$t('taskOrder.workOrderCode')"
:value="code || '-'"
/>
<DataDisplay
class="col-md-2 col-6"
:label="$t('taskOrder.workOrderName')"
:value="taskName || '-'"
/>
<SelectBranch
class="col-md-2 col-6 fix-padding"
:label="$t('taskOrder.workOrderName')"
:value="issueBranch"
readonly
/>
<DataDisplay
class="col-md-2 col-6"
:label="$t('general.agencies')"
:value="agencies || '-'"
/>
<DataDisplay
class="col-md-2 col-6"
:label="$t('taskOrder.madeBy')"
:value="madeBy || '-'"
/>
<DataDisplay
class="col-md-2 col-6"
:label="$t('taskOrder.telephone')"
:value="contactTel || '-'"
/>
<DataDisplay
class="col-md-2 col-6"
:label="$t('branch.form.contactName')"
:value="contactName || '-'"
/>
<DataDisplay class="col-md-2 col-6" :label="$t('general.status')">
<template #value>
<BadgeComponent
v-if="userTaskStatus"
hide-icon
:hsla-color="mapStatus(userTaskStatus, 'color')"
:title="$t(mapStatus(userTaskStatus, 'status'))"
/>
</template>
</DataDisplay>
</div>
<FormGroupHead>
{{ $t('productService.title') }}
</FormGroupHead>
<slot :product="product"></slot>
</main>
</q-expansion-item>
</template>
<style scoped>
:deep(.fix-padding.q-field--outlined .q-field__control) {
padding: 0;
}
</style>

84
src/pages/09_task-order/expansion/receive/TableProductExpantion.vue Normal file
View file

@ -0,0 +1,84 @@
<script setup lang="ts">
import { ProductRelation } from 'src/stores/quotations/types';
import { receiveProductColumn } from 'src/pages/09_task-order/constants';
import { computed } from 'vue';
import { QTableSlots } from 'quasar';
const datarows = [
{
order: 1,
requestListCode: 'RL-20231201',
flow: 'Step 1: Review',
quotation: 'John Doe',
age: '30 ปี',
nationality: 'Thai',
documentExpireDate: '2024-12-31',
numberOfDay: '12',
quotationCode: 'QT-987654',
},
];
</script>
<template>
<q-expansion-item
dense
class="overflow-hidden 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"
@click=""
>
<template #header>
<div class="row items-center">
<q-avatar class="q-mr-sm" size="md">
<q-icon
class="full-width full-height"
name="mdi-shopping"
:style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
/>
</q-avatar>
<div class="colum">
<div class="col">
<span>
ค่าบริการและค่าดำเนินงานยื่นขอบัญชีรายชื่อ (Name list)
สัญชาติเมียนมา
</span>
</div>
<div class="col app-text-muted">AC103</div>
</div>
</div>
</template>
<main><!-- TODO add table --></main>
</q-expansion-item>
</template>
<style scoped>
:deep(tr:nth-child(2n)) {
background: #f9fafc;
&.dark {
background: hsl(var(--gray-11-hsl) / 0.2);
}
}
.active {
background-color: hsla(var(--info-bg) / 0.1);
color: hsl(var(--info-bg));
}
.doc-status {
padding-left: 8px;
border-radius: 20px;
&.await {
color: var(--yellow-6);
background: hsla(var(--yellow-6-hsl) / 0.15);
}
&.in-progress {
color: var(--orange-5);
background: hsla(var(--orange-5-hsl) / 0.15);
}
&.completed {
color: var(--green-5);
background: hsla(var(--green-5-hsl) / 0.15);
}
}
</style>