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

fix: change order wrong value in workflow management page (#50)

Browse source 
* fix: responsible person not display correctly after move

* fix: typo
This commit is contained in:
Methapon Metanipat 2024-11-01 17:20:11 +07:00 • committed by GitHub
parent 0ef389c69b
commit 9655597679
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 34 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/components/04_flow-management/FormFlow.vue
View file

@ -74,7 +74,7 @@ async function getUserList(opts?: { query: string }) {
// if (resUser) userInTable.value.push(resUser);
// }
function selectResponiblePerson(stepIndex: number, responsiblePerson: User) {
function selectResponsiblePerson(stepIndex: number, responsiblePerson: User) {
const currStep = flowData.value.step[stepIndex];
const existPersonIndex = currStep.responsiblePersonId?.findIndex(
(p) => p === responsiblePerson.id,
@ -86,11 +86,11 @@ function selectResponiblePerson(stepIndex: number, responsiblePerson: User) {
if (!userInTable.value[stepIndex]) {
userInTable.value[stepIndex] = {
name: flowData.value.step[stepIndex].name,
resposiblePerson: [],
responsiblePerson: [],
};
}
userInTable.value[stepIndex]?.resposiblePerson.push({
userInTable.value[stepIndex]?.responsiblePerson.push({
id: responsiblePerson.id,
selectedImage: responsiblePerson.selectedImage,
gender: responsiblePerson.gender,
@ -103,7 +103,7 @@ function selectResponiblePerson(stepIndex: number, responsiblePerson: User) {
});
} else {
currStep.responsiblePersonId?.splice(Number(existPersonIndex), 1);
userInTable.value[stepIndex]?.resposiblePerson.splice(
userInTable.value[stepIndex]?.responsiblePerson.splice(
Number(existPersonIndex),
1,
);
@ -234,7 +234,10 @@ onMounted(async () => {
round
:disable="props.rowIndex === 0"
style="color: hsl(var(--text-mute-2))"
@click.stop="moveItemUp(flowData.step, props.rowIndex)"
@click.stop="
moveItemUp(flowData.step, props.rowIndex);
moveItemUp(userInTable, props.rowIndex);
"
/>
<q-btn
:id="`btn-down-${props.rowIndex}`"
@ -247,7 +250,10 @@ onMounted(async () => {
class="q-mx-sm"
:disable="props.rowIndex === flowData.step.length - 1"
style="color: hsl(var(--text-mute-2))"
@click.stop="moveItemDown(flowData.step, props.rowIndex)"
@click.stop="
moveItemDown(flowData.step, props.rowIndex);
moveItemDown(userInTable, props.rowIndex);
"
/>
<q-avatar
@ -288,21 +294,21 @@ onMounted(async () => {
<q-img
class="text-center"
:ratio="1"
:src="`${baseUrl}/user/${userInTable[props.rowIndex]?.resposiblePerson[0]?.id}/profile-image/${userInTable[props.rowIndex]?.resposiblePerson[0]?.selectedImage}`"
:src="`${baseUrl}/user/${userInTable[props.rowIndex]?.responsiblePerson[0]?.id}/profile-image/${userInTable[props.rowIndex]?.responsiblePerson[0]?.selectedImage}`"
>
<template #error>
<div
class="no-padding full-width full-height flex items-center justify-center"
:style="`${userInTable[props.rowIndex]?.resposiblePerson[0].gender ? 'background: white' : 'background: linear-gradient(135deg,rgba(43, 137, 223, 1) 0%, rgba(230, 51, 81, 1) 100%);'}`"
:style="`${userInTable[props.rowIndex]?.responsiblePerson[0].gender ? 'background: white' : 'background: linear-gradient(135deg,rgba(43, 137, 223, 1) 0%, rgba(230, 51, 81, 1) 100%);'}`"
>
<q-img
v-if="
userInTable[props.rowIndex]?.resposiblePerson[0]
?.gender
userInTable[props.rowIndex]
?.responsiblePerson[0]?.gender
"
:src="
userInTable[props.rowIndex]?.resposiblePerson[0]
?.gender === 'male'
userInTable[props.rowIndex]
?.responsiblePerson[0]?.gender === 'male'
? '/no-img-man.png'
: '/no-img-female.png'
"
@ -323,24 +329,25 @@ onMounted(async () => {
>
<span>
{{
`${optionStore.mapOption(userInTable[props.rowIndex]?.resposiblePerson[0]?.namePrefix || '')} ${
`${optionStore.mapOption(userInTable[props.rowIndex]?.responsiblePerson[0]?.namePrefix || '')} ${
$i18n.locale === 'eng'
? userInTable[props.rowIndex]?.resposiblePerson[0]
?.firstNameEN
: userInTable[props.rowIndex]?.resposiblePerson[0]
?.firstName
? userInTable[props.rowIndex]
?.responsiblePerson[0]?.firstNameEN
: userInTable[props.rowIndex]
?.responsiblePerson[0]?.firstName
} ${
$i18n.locale === 'eng'
? userInTable[props.rowIndex]?.resposiblePerson[0]
?.lastNameEN
: userInTable[props.rowIndex]?.resposiblePerson[0]
?.lastName
? userInTable[props.rowIndex]
?.responsiblePerson[0]?.lastNameEN
: userInTable[props.rowIndex]
?.responsiblePerson[0]?.lastName
}`
}}
</span>
<span class="text-caption app-text-muted">
{{
userInTable[props.rowIndex]?.resposiblePerson[0]?.code
userInTable[props.rowIndex]?.responsiblePerson[0]
?.code
}}
</span>
</div>
@ -380,7 +387,7 @@ onMounted(async () => {
clickable
class="column"
@click.stop="
selectResponiblePerson(props.rowIndex, person)
selectResponsiblePerson(props.rowIndex, person)
"
>
<div class="row items-center no-wrap">
@ -390,7 +397,7 @@ onMounted(async () => {
props.row.responsiblePersonId.includes(person.id)
"
@click.stop="
selectResponiblePerson(props.rowIndex, person)
selectResponsiblePerson(props.rowIndex, person)
"
/>
<q-avatar class="q-ml-sm" size="md">

4
src/pages/04_flow-managment/MainPage.vue
View file

@ -194,9 +194,9 @@ function assignFormData(workflowData: WorkflowTemplate) {
status: workflowData.status,
name: workflowData.name,
step: workflowData.step.map((s, i) => {
userInTable.value[i] = { name: s.name, resposiblePerson: [] };
userInTable.value[i] = { name: s.name, responsiblePerson: [] };
s.responsiblePerson.forEach((p) => {
userInTable.value[i].resposiblePerson.push({
userInTable.value[i].responsiblePerson.push({
id: p.user.id,
selectedImage: p.user.selectedImage,
gender: p.user.gender,

2
src/stores/workflow-template/types.ts
View file

@ -43,7 +43,7 @@ export type WorkflowTemplatePayload = {
export type WorkflowUserInTable = {
name: string;
resposiblePerson: {
responsiblePerson: {
id: string;
selectedImage?: string;
gender: string;