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

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

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