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

feat: add request list expansion (messenger, duty)

Browse source
This commit is contained in:
puriphatt 2024-12-26 10:31:57 +07:00
parent fe3bb520f3
commit 5890f07d89
6 changed files with 335 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

155
src/pages/08_request-list/DutyExpansion.vue Normal file
View file

@ -0,0 +1,155 @@
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import FormGroupHead from './FormGroupHead.vue';
import FormDuty from './FormDuty.vue';
import { UndoButton, SaveButton, EditButton } from 'src/components/button';
import { AttributesForm, Step } from 'src/stores/request-list/types';
import { useRequestList } from 'src/stores/request-list';
const props = defineProps<{
readonly?: boolean;
step: Step;
}>();
const requestListStore = useRequestList();
const state = reactive({
isEdit: false,
});
const defaultForm = {
customerDuty: false,
customerDutyCost: 30,
companyDuty: false,
companyDutyCost: 30,
responsibleUserLocal: true,
responsibleUserId: '',
individualDuty: false,
individualDutyCost: 10,
};
const attributesForm = defineModel<AttributesForm>('attributesForm', {
default: {
customerDuty: false,
customerDutyCost: 30,
companyDuty: false,
companyDutyCost: 30,
responsibleUserLocal: true,
responsibleUserId: '',
individualDuty: false,
individualDutyCost: 10,
},
});
const formData = ref<AttributesForm>(defaultForm);
function triggerUndo() {
assignToForm();
state.isEdit = false;
}
async function triggerSubmit() {
const payload = {
...props.step,
...formData.value,
attributes: {},
};
const res = await requestListStore.editStatusRequestWork(payload);
if (res) {
attributesForm.value = JSON.parse(JSON.stringify(formData.value));
state.isEdit = false;
}
}
function triggerEdit() {
state.isEdit = true;
}
function assignToForm() {
formData.value = JSON.parse(JSON.stringify(attributesForm.value));
}
</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"
@before-show="assignToForm"
>
<template #header>
<span>
{{ $t('duty.text') }}
</span>
<nav class="q-ml-auto row" v-if="!readonly">
<UndoButton
v-if="state.isEdit"
id="btn-info-basic-undo"
icon-only
type="button"
@click.stop="triggerUndo"
/>
<SaveButton
v-if="state.isEdit"
id="btn-info-basic-save"
icon-only
type="submit"
@click.stop="triggerSubmit"
/>
<EditButton
v-if="!state.isEdit"
id="btn-info-basic-edit"
icon-only
@click.stop="triggerEdit"
type="button"
/>
</nav>
</template>
<main class="row">
<section class="col-12">
<FormGroupHead>
{{ $t('duty.text', { subject: $t('general.customer') }) }}
</FormGroupHead>
<FormDuty
class="surface-1"
:readonly="!state.isEdit"
v-model:duty="formData.customerDuty"
v-model:duty-cost="formData.customerDutyCost"
cost
/>
</section>
<section class="col-12">
<FormGroupHead>
{{ $t('duty.text', { subject: $t('general.company') }) }}
</FormGroupHead>
<FormDuty
class="surface-1"
:readonly="!state.isEdit"
v-model:duty="formData.companyDuty"
v-model:duty-cost="formData.companyDutyCost"
cost
/>
</section>
<section class="col-12">
<FormGroupHead>
{{ $t('duty.text', { subject: $t('general.individual') }) }}
</FormGroupHead>
<FormDuty
:options="[10]"
:readonly="!state.isEdit"
class="surface-1"
v-model:duty="formData.individualDuty"
v-model:duty-cost="formData.individualDutyCost"
cost
/>
</section>
</main>
</q-expansion-item>
</template>
<style scoped></style>

59
src/pages/08_request-list/FormExpansion.vue
View file

@ -1,9 +1,8 @@
<script setup lang="ts">
import { reactive, ref } from 'vue';
import FormGroupHead from './FormGroupHead.vue';
import FormDuty from './FormDuty.vue';
import FormIssue from './FormIssue.vue';
import FormResponsibleUser from './FormResponsibleUser.vue';
import { UndoButton, SaveButton, EditButton } from 'src/components/button';
import { AttributesForm, Step } from 'src/stores/request-list/types';
@ -12,7 +11,6 @@ import { useRequestList } from 'src/stores/request-list';
const props = defineProps<{
readonly?: boolean;
step: Step;
responsibleAreaDistrictId?: string;
}>();
const requestListStore = useRequestList();
@ -45,7 +43,6 @@ const attributesForm = defineModel<AttributesForm>('attributesForm', {
},
});
const isExpand = ref(false);
const formData = ref<AttributesForm>(defaultForm);
function triggerUndo() {
@ -78,7 +75,6 @@ function assignToForm() {
<template>
<q-expansion-item
dense
v-model="isExpand"
class="overflow-hidden bordered full-width"
switch-toggle-side
style="border-radius: var(--radius-2)"
@ -115,64 +111,13 @@ function assignToForm() {
</nav>
</template>
<main class="row" v-if="isExpand">
<section class="col-12">
<FormGroupHead>
{{ $t('duty.text', { subject: $t('general.customer') }) }}
</FormGroupHead>
<FormDuty
class="surface-1"
:readonly="!state.isEdit"
v-model:duty="formData.customerDuty"
v-model:duty-cost="formData.customerDutyCost"
cost
/>
</section>
<section class="col-12">
<FormGroupHead>
{{ $t('duty.text', { subject: $t('general.company') }) }}
</FormGroupHead>
<FormDuty
class="surface-1"
:readonly="!state.isEdit"
v-model:duty="formData.companyDuty"
v-model:duty-cost="formData.companyDutyCost"
cost
/>
</section>
<main class="row">
<section class="col-12">
<FormGroupHead>
{{ $t('quotation.templateForm') }}
</FormGroupHead>
<FormIssue :readonly="!state.isEdit" />
</section>
<section class="col-12">
<FormGroupHead>
{{
$t('general.select', { msg: $t('requestList.employeeMessenger') })
}}
</FormGroupHead>
<FormResponsibleUser
:readonly="!state.isEdit"
class="surface-1"
v-model:responsible-user-local="formData.responsibleUserLocal"
v-model:responsible-user-id="formData.responsibleUserId"
:district-id="responsibleAreaDistrictId"
/>
</section>
<section class="col-12">
<FormGroupHead>
{{ $t('duty.text', { subject: $t('general.individual') }) }}
</FormGroupHead>
<FormDuty
:options="[10]"
:readonly="!state.isEdit"
class="surface-1"
v-model:duty="formData.individualDuty"
v-model:duty-cost="formData.individualDutyCost"
cost
/>
</section>
</main>
</q-expansion-item>
</template>

1
src/pages/08_request-list/FormResponsibleUser.vue
View file

@ -42,6 +42,7 @@ watch(responsibleUserLocal, (lhs, rhs) => {
<div class="col-12 row">
<SelectUser
:required="false"
:key="responsibleUserLocal?.toString()"
class="col-md-5 col-12"
v-model:value="responsibleUserId"

133
src/pages/08_request-list/MessengerExpansion.vue Normal file
View file

@ -0,0 +1,133 @@
<script setup lang="ts">
import { reactive, ref } from 'vue';
import FormGroupHead from './FormGroupHead.vue';
import FormResponsibleUser from './FormResponsibleUser.vue';
import { UndoButton, SaveButton, EditButton } from 'src/components/button';
import { AttributesForm, Step } from 'src/stores/request-list/types';
import { useRequestList } from 'src/stores/request-list';
const props = defineProps<{
readonly?: boolean;
step: Step;
responsibleAreaDistrictId?: string;
}>();
const requestListStore = useRequestList();
const state = reactive({
isEdit: false,
});
const defaultForm = {
customerDuty: false,
customerDutyCost: 30,
companyDuty: false,
companyDutyCost: 30,
responsibleUserLocal: true,
responsibleUserId: '',
individualDuty: false,
individualDutyCost: 10,
};
const attributesForm = defineModel<AttributesForm>('attributesForm', {
default: {
customerDuty: false,
customerDutyCost: 30,
companyDuty: false,
companyDutyCost: 30,
responsibleUserLocal: true,
responsibleUserId: '',
individualDuty: false,
individualDutyCost: 10,
},
});
const formData = ref<AttributesForm>(defaultForm);
function triggerUndo() {
assignToForm();
state.isEdit = false;
}
async function triggerSubmit() {
const payload = {
...props.step,
...formData.value,
attributes: {},
};
const res = await requestListStore.editStatusRequestWork(payload);
if (res) {
attributesForm.value = JSON.parse(JSON.stringify(formData.value));
state.isEdit = false;
}
}
function triggerEdit() {
state.isEdit = true;
}
function assignToForm() {
formData.value = JSON.parse(JSON.stringify(attributesForm.value));
}
</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"
@before-show="assignToForm"
>
<template #header>
<span>
{{ $t('requestList.employeeMessenger') }}
</span>
<nav class="q-ml-auto row" v-if="!readonly">
<UndoButton
v-if="state.isEdit"
id="btn-info-basic-undo"
icon-only
type="button"
@click.stop="triggerUndo"
/>
<SaveButton
v-if="state.isEdit"
id="btn-info-basic-save"
icon-only
type="submit"
@click.stop="triggerSubmit"
/>
<EditButton
v-if="!state.isEdit"
id="btn-info-basic-edit"
icon-only
@click.stop="triggerEdit"
type="button"
/>
</nav>
</template>
<main class="row">
<section class="col-12">
<FormGroupHead>
{{
$t('general.select', { msg: $t('requestList.employeeMessenger') })
}}
</FormGroupHead>
<FormResponsibleUser
:readonly="!state.isEdit"
class="surface-1"
v-model:responsible-user-local="formData.responsibleUserLocal"
v-model:responsible-user-id="formData.responsibleUserId"
:district-id="responsibleAreaDistrictId"
/>
</section>
</main>
</q-expansion-item>
</template>
<style></style>

5
src/pages/08_request-list/PropertiesExpansion.vue
View file

@ -131,7 +131,10 @@ defineEmits<{
<span
v-for="(prop, i) in propertiesToShow.filter(
(v) =>
v.fieldName !== 'documentCheck' && v.fieldName !== 'designForm',
v.fieldName !== 'documentCheck' &&
v.fieldName !== 'designForm' &&
v.fieldName !== 'duty' &&
v.fieldName !== 'messenger',
)"
:key="i"
class="row items-center q-pb-sm"

44
src/pages/08_request-list/RequestListView.vue
View file

@ -11,6 +11,8 @@ import PropertiesExpansion from './PropertiesExpansion.vue';
import FormGroupHead from './FormGroupHead.vue';
import AvatarGroup from 'src/components/shared/AvatarGroup.vue';
import { StateButton } from 'components/button';
import DutyExpansion from './DutyExpansion.vue';
import MessengerExpansion from './MessengerExpansion.vue';
// NOTE: Store
import { baseUrl } from 'src/stores/utils';
@ -633,7 +635,7 @@ function goToQuotation(
v.productService.work?.attributes?.workflowStep[
pageState.currentStep - 1
]?.attributes?.properties;
console.log(v);
return Object.assign(v, {
_documentExpansion: _props.some(
(v: PropVariant) => v.fieldName === 'documentCheck',
@ -641,6 +643,12 @@ function goToQuotation(
_formExpansion: _props.some(
(v: PropVariant) => v.fieldName === 'designForm',
),
_dutyExpansion: _props.some(
(v: PropVariant) => v.fieldName === 'duty',
),
_messengerExpansion: _props.some(
(v: PropVariant) => v.fieldName === 'messenger',
),
});
})
.sort(
@ -692,10 +700,10 @@ function goToQuotation(
class="column surface-1 q-px-sm bordered-t q-pb-sm q-gutter-y-sm"
>
<DocumentExpansion
v-if="value._documentExpansion"
:readonly="
data.requestDataStatus === RequestDataStatus.Canceled
"
v-if="value._documentExpansion"
ref="refDocumentExpansion"
:attributes="value.attributes"
@change-status="
@ -742,11 +750,25 @@ function goToQuotation(
}"
:listDocument="product?.document"
/>
<FormExpansion
<DutyExpansion
v-if="value._dutyExpansion"
:readonly="
data.requestDataStatus === RequestDataStatus.Canceled
"
:step="{
step: pageState.currentStep,
requestWorkId: value.id || '',
}"
:id="value.id"
:attributes-form="
value.stepStatus?.[pageState.currentStep - 1]
"
/>
<MessengerExpansion
v-if="value._messengerExpansion"
:readonly="
data.requestDataStatus === RequestDataStatus.Canceled
"
v-if="value._formExpansion"
:step="{
step: pageState.currentStep,
requestWorkId: value.id || '',
@ -759,6 +781,20 @@ function goToQuotation(
data.quotation.customerBranch.districtId
"
/>
<FormExpansion
v-if="value._formExpansion"
:readonly="
data.requestDataStatus === RequestDataStatus.Canceled
"
:step="{
step: pageState.currentStep,
requestWorkId: value.id || '',
}"
:id="value.id"
:attributes-form="
value.stepStatus?.[pageState.currentStep - 1]
"
/>
<PropertiesExpansion
:id="value.id"
:readonly="