Skip to content

Commit 5e7ae51

Browse files
sanjaytkbabusanjaytkbabu
committed
Replaced note modals with pages for enquiries & addressed comments
1 parent 5dfa78a commit 5e7ae51

16 files changed

Lines changed: 179 additions & 481 deletions

File tree

‎frontend/src/components/form/DatePicker.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,10 @@ const { errorMessage, handleBlur, value } = useField<Date>(name);
5656
/>
5757
<small :id="`${name}-help`">{{ helpText }}</small>
5858
<div>
59-
<ErrorMessage :name="name" />
59+
<ErrorMessage
60+
:name="name"
61+
class="app-error-message"
62+
/>
6063
</div>
6164
</div>
6265
</template>

‎frontend/src/components/housing/submission/SubmissionsNavigator.vue‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import {
2121
useToast
2222
} from '@/lib/primevue';
2323
import { useAppStore, useAuthNStore, useAuthZStore } from '@/store';
24-
import { Action, BasicResponse, Resource, RouteName, StorageKey } from '@/utils/enums/application';
24+
import { Action, BasicResponse, Initiative, Resource, RouteName, StorageKey } from '@/utils/enums/application';
2525
import { NoteType } from '@/utils/enums/projectCommon';
2626
import { formatDate } from '@/utils/formatters';
2727
import { projectServiceKey } from '@/utils/keys';
@@ -30,11 +30,6 @@ import type { Ref } from 'vue';
3030
import type { BringForward, ElectrificationProject, Enquiry, HousingProject, Permit, Statistics } from '@/types';
3131
3232
// Constants
33-
const NOTES_TAB_INDEX = {
34-
ENQUIRY: 1,
35-
SUBMISSION: 3
36-
};
37-
3833
const TAB_INDEX = {
3934
SUBMISSION: 0,
4035
ENQUIRY: 1
@@ -126,20 +121,20 @@ function getBringForwardStyling(bf: BringForward) {
126121
return pastOrToday ? 'pastOrToday' : withinWeek ? 'withinWeek' : withinMonth ? 'withinMonth' : undefined;
127122
}
128123
129-
// function getNameObject(bf: BringForward) {
130-
// if (bf.electrificationProjectId) return RouteName.INT_ELECTRIFICATION_PROJECT;
131-
// if (bf.housingProjectId) return RouteName.INT_HOUSING_PROJECT;
132-
// if (bf.enquiryId) return RouteName.INT_HOUSING_ENQUIRY;
133-
// }
134-
135124
function getNameObject(bf: BringForward) {
136125
if (bf.electrificationProjectId) return RouteName.INT_ELECTRIFICATION_PROJECT_NOTE;
137126
if (bf.housingProjectId) return RouteName.INT_HOUSING_PROJECT_NOTE;
138-
if (bf.enquiryId) return RouteName.INT_HOUSING_ENQUIRY;
127+
if (bf.enquiryId) {
128+
switch (useAppStore().getInitiative) {
129+
case Initiative.ELECTRIFICATION:
130+
return RouteName.INT_ELECTRIFICATION_ENQUIRY_NOTE;
131+
case Initiative.HOUSING:
132+
return RouteName.INT_HOUSING_ENQUIRY_NOTE;
133+
}
134+
}
139135
}
140136
141137
function getParamObject(bf: BringForward) {
142-
console.log('bf', bf);
143138
if (bf.electrificationProjectId) {
144139
return {
145140
projectId: bf.electrificationProjectId,
@@ -152,10 +147,17 @@ function getParamObject(bf: BringForward) {
152147
noteHistoryId: bf.noteId
153148
};
154149
}
150+
if (bf.enquiryId) {
151+
return {
152+
noteHistoryId: bf.noteId
153+
};
154+
}
155+
}
156+
157+
function getQueryObject(bf: BringForward) {
155158
if (bf.enquiryId) {
156159
return {
157160
enquiryId: bf.enquiryId
158-
// noteHistoryId: bf.noteId
159161
};
160162
}
161163
}
@@ -282,7 +284,8 @@ watchEffect(() => {
282284
<router-link
283285
:to="{
284286
name: getNameObject(bf),
285-
params: getParamObject(bf)
287+
params: getParamObject(bf),
288+
query: getQueryObject(bf)
286289
}"
287290
>
288291
{{ bf.title }}, {{ bf.projectName ?? NoteType.BRING_FORWARD }}

‎frontend/src/components/note/NoteForm.vue‎

Lines changed: 72 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import Banner from '@/components/common/Banner.vue';
1010
import Divider from '@/components/common/Divider.vue';
1111
import { Button, Card, useConfirm, ToggleSwitch, useToast } from '@/lib/primevue';
1212
import { userService } from '@/services';
13-
import { useAuthZStore, useProjectStore } from '@/store';
13+
import { useAuthZStore, useEnquiryStore, useProjectStore } from '@/store';
1414
import { GroupName } from '@/utils/enums/application';
1515
import { formatDate } from '@/utils/formatters';
1616
import { projectRouteNameKey } from '@/utils/keys';
@@ -29,28 +29,36 @@ import type { SelectChangeEvent } from 'primevue/select';
2929
import type { NoteHistory } from '@/types';
3030
3131
// Props
32-
const { noteHistory = undefined } = defineProps<{
32+
const { editable, noteHistory = undefined } = defineProps<{
33+
editable?: boolean;
3334
noteHistory?: NoteHistory;
3435
}>();
3536
37+
const NOTES_TAB_INDEX = {
38+
ENQUIRY: 1,
39+
SUBMISSION: 3
40+
};
41+
3642
// Composables
3743
const { t } = useI18n();
3844
const authzStore = useAuthZStore();
3945
const confirmDialog = useConfirm();
46+
const enquiryStore = useEnquiryStore();
4047
const projectStore = useProjectStore();
4148
const router = useRouter();
4249
const toast = useToast();
4350
const { options } = useCodeStore();
4451
4552
// Store
4653
const { getProject } = storeToRefs(projectStore);
54+
const { getEnquiry } = storeToRefs(enquiryStore);
4755
4856
// State
57+
const createdByFullNames: Ref<Record<string, string>> = ref({});
4958
const formRef: Ref<InstanceType<typeof Form> | null> = ref(null);
5059
const initialFormValues: Ref<any | undefined> = ref(undefined);
51-
const visible = defineModel<boolean>('visible');
5260
const shownToProponent: Ref<boolean> = ref(false);
53-
const createdByFullNames: Ref<Record<string, string>> = ref({});
61+
const visible = defineModel<boolean>('visible');
5462
5563
// Injections
5664
const projectRouteName = inject(projectRouteNameKey);
@@ -61,12 +69,7 @@ const formSchema = object({
6169
.nullable()
6270
.when('type', {
6371
is: (type: string) => type === NoteType.BRING_FORWARD,
64-
then: (schema) =>
65-
schema.test(
66-
'bring forward required',
67-
'Bring forward date is a required field',
68-
(value) => value instanceof Date
69-
),
72+
then: (schema) => schema.required(t('note.noteForm.bfDateReqd')),
7073
otherwise: (schema) => schema.nullable()
7174
})
7275
.label('Bring forward date'),
@@ -79,25 +82,37 @@ const formSchema = object({
7982
.label('Bring forward state'),
8083
note: string().label('Note'),
8184
type: string().oneOf(NOTE_TYPE_LIST).label('Note type'),
82-
title: string().required().max(255, 'Title too long').label('Title')
85+
title: string().required().max(255, 'Title too long').label('Title'),
86+
escalationType: mixed()
87+
.when(['escalateToSupervisor', 'escalateToDirector'], {
88+
is: (escalateToSupervisor: boolean, escalateToDirector: boolean) => escalateToSupervisor || escalateToDirector,
89+
then: (schema) => schema.required(t('note.noteForm.escalationTypeReqd')),
90+
otherwise: (schema) => schema.nullable()
91+
})
92+
.label('Escalation type')
8393
});
8494
8595
function initializeFormValues() {
8696
if (noteHistory) {
8797
initialFormValues.value = {
88-
activityId: noteHistory?.activityId,
98+
activityId: noteHistory.activityId,
8999
bringForwardDate: noteHistory?.bringForwardDate ? new Date(noteHistory.bringForwardDate) : null,
90100
bringForwardState: noteHistory?.bringForwardState ?? null,
91101
escalateToSupervisor: noteHistory?.escalateToSupervisor,
92102
escalateToDirector: noteHistory?.escalateToDirector,
93103
escalationType: noteHistory?.escalationType,
94-
noteHistoryId: noteHistory?.noteHistoryId,
95-
type: noteHistory?.type ?? NoteType.GENERAL,
96-
title: noteHistory?.title
104+
noteHistoryId: noteHistory.noteHistoryId,
105+
type: noteHistory.type,
106+
title: noteHistory.title
97107
};
98108
shownToProponent.value = noteHistory.shownToProponent;
109+
} else {
110+
initialFormValues.value = {
111+
type: NoteType.GENERAL
112+
};
99113
}
100114
}
115+
// }
101116
102117
function onInvalidSubmit(e: any) {
103118
scrollToFirstError(e.errors);
@@ -106,20 +121,20 @@ function onInvalidSubmit(e: any) {
106121
function onDelete() {
107122
if (noteHistory) {
108123
confirmDialog.require({
109-
message: t(shownToProponent.value ? 'noteHistoryModal.deleteMessageIfShown' : 'noteHistoryModal.deleteMessage'),
110-
header: t('noteHistoryModal.deleteHeader'),
111-
acceptLabel: t('noteHistoryModal.confirm'),
124+
message: t(shownToProponent.value ? 'note.noteForm.deleteMessageIfShown' : 'note.noteForm.deleteMessage'),
125+
header: t('note.noteForm.deleteHeader'),
126+
acceptLabel: t('note.noteForm.confirm'),
112127
acceptClass: 'p-button-danger',
113-
rejectLabel: t('noteHistoryModal.cancel'),
128+
rejectLabel: t('note.noteForm.cancel'),
114129
rejectProps: { outlined: true },
115130
accept: () => {
116131
noteHistoryService
117132
.deleteNoteHistory(noteHistory?.noteHistoryId as string)
118133
.then(() => {
119-
toast.success(t('noteHistoryModal.noteDeleted'));
120-
toTheProject();
134+
toast.success(t('note.noteForm.noteDeleted'));
135+
getProject.value ? toTheProject() : toTheEnquiry();
121136
})
122-
.catch((e: any) => toast.error(t('noteHistoryModal.noteDeleteFailed'), e.message));
137+
.catch((e: any) => toast.error(t('note.noteForm.noteDeleteFailed'), e.message));
123138
}
124139
});
125140
}
@@ -145,20 +160,20 @@ async function onSubmit(data: any) {
145160
if (!noteHistory) {
146161
await noteHistoryService.createNoteHistory({
147162
...body,
148-
activityId: getProject.value?.activityId,
163+
activityId: getProject.value?.activityId || getEnquiry.value?.activityId,
149164
note: data.note
150165
});
151166
} else {
152167
await noteHistoryService.updateNoteHistory(data.noteHistoryId, {
153168
...body,
154-
activityId: getProject.value?.activityId,
169+
activityId: getProject.value?.activityId || getEnquiry.value?.activityId,
155170
note: data.note
156171
});
157172
}
158-
toast.success(t('noteHistoryModal.noteSaved'));
159-
toTheProject();
173+
toast.success(t('note.noteForm.noteSaved'));
174+
getProject.value ? toTheProject() : toTheEnquiry();
160175
} catch (e: any) {
161-
toast.error(t('noteHistoryModal.noteSaveFailed'), e.message);
176+
toast.error(t('note.noteForm.noteSaveFailed'), e.message);
162177
} finally {
163178
visible.value = false;
164179
}
@@ -167,6 +182,7 @@ async function onSubmit(data: any) {
167182
function onTypeChange(e: SelectChangeEvent) {
168183
if (e.value === NoteType.BRING_FORWARD) {
169184
formRef.value?.setFieldValue('bringForwardState', BringForwardType.UNRESOLVED);
185+
shownToProponent.value = false;
170186
}
171187
}
172188
@@ -183,7 +199,17 @@ function toTheProject() {
183199
name: projectRouteName?.value,
184200
params: { projectId: getProject.value?.projectId },
185201
query: {
186-
initialTab: '3'
202+
initialTab: NOTES_TAB_INDEX.SUBMISSION
203+
}
204+
});
205+
}
206+
207+
function toTheEnquiry() {
208+
router.push({
209+
name: projectRouteName?.value,
210+
params: { enquiryId: getEnquiry.value?.enquiryId },
211+
query: {
212+
initialTab: NOTES_TAB_INDEX.ENQUIRY
187213
}
188214
});
189215
}
@@ -199,13 +225,13 @@ onBeforeMount(async () => {
199225
<template>
200226
<div class="flex flex-row gap-x-3 my-4">
201227
<div class="flex flex-row gap-x-1">
202-
<span class="text-[var(--p-bcblue-900)]">{{ t('noteHistoryModal.created') }}:</span>
228+
<span class="text-[var(--p-bcblue-900)]">{{ t('note.noteForm.created') }}:</span>
203229
<span>
204230
{{ formatDate(noteHistory?.createdAt || new Date().toISOString()) }}
205231
</span>
206232
</div>
207233
<div class="flex flex-row gap-x-1">
208-
<span class="text-[var(--p-bcblue-900)]">{{ t('noteHistoryModal.lastUpdated') }}:</span>
234+
<span class="text-[var(--p-bcblue-900)]">{{ t('note.noteForm.lastUpdated') }}:</span>
209235
<span>{{ formatDate(noteHistory?.updatedAt) }}</span>
210236
</div>
211237
</div>
@@ -236,18 +262,21 @@ onBeforeMount(async () => {
236262
name="type"
237263
label="Note type"
238264
:options="NOTE_TYPE_LIST"
265+
:disabled="!editable"
239266
@on-change="onTypeChange"
240267
/>
241268
<InputText
242269
class="w-1/2"
243270
name="title"
244271
label="Note title"
272+
:disabled="!editable"
245273
/>
246274
</div>
247275

248276
<TextArea
249277
name="note"
250278
label="Note"
279+
:disabled="!editable"
251280
/>
252281
</div>
253282

@@ -259,12 +288,13 @@ onBeforeMount(async () => {
259288
v-if="values.type === NoteType.GENERAL"
260289
class="flex flex-col gap-y-4"
261290
>
262-
<span class="font-bold">{{ t('noteHistoryModal.showProponent') }}</span>
291+
<span class="font-bold">{{ t('note.noteForm.showProponent') }}</span>
263292
<ToggleSwitch
264293
v-model="shownToProponent"
265294
class="mr-1"
266295
name="shownToProponent"
267-
:label="t('noteHistoryModal.showProponent')"
296+
:label="t('note.noteForm.showProponent')"
297+
:disabled="!editable"
268298
/>
269299
</div>
270300

@@ -275,20 +305,23 @@ onBeforeMount(async () => {
275305
<Checkbox
276306
v-if="authzStore.isInGroup([GroupName.NAVIGATOR, GroupName.NAVIGATOR_READ_ONLY])"
277307
name="escalateToSupervisor"
278-
:label="t('noteHistoryModal.escalateToSupervisor')"
308+
:label="t('note.noteForm.escalateToSupervisor')"
279309
:bold="false"
310+
:disabled="!editable"
280311
/>
281312
<Checkbox
282313
v-if="authzStore.isInGroup([GroupName.ADMIN, GroupName.DEVELOPER, GroupName.SUPERVISOR])"
283314
name="escalateToDirector"
284-
:label="t('noteHistoryModal.escalateToDirector')"
315+
:label="t('note.noteForm.escalateToDirector')"
285316
:bold="false"
317+
:disabled="!editable"
286318
/>
287319
<DatePicker
288320
v-if="values.type === NoteType.BRING_FORWARD"
289321
class="my-2"
290322
name="bringForwardDate"
291323
label="Bring forward date"
324+
:disabled="!editable"
292325
/>
293326
<div
294327
v-if="values.escalateToSupervisor || values.escalateToDirector"
@@ -300,12 +333,14 @@ onBeforeMount(async () => {
300333
option-label="label"
301334
option-value="value"
302335
:options="options.EscalationType"
336+
:disabled="!editable"
303337
/>
304338
</div>
305339
<Select
306340
name="bringForwardState"
307341
label="Bring forward state"
308342
:options="BRING_FORWARD_TYPE_LIST"
343+
:disabled="!editable"
309344
/>
310345
</div>
311346
</div>
@@ -321,14 +356,15 @@ onBeforeMount(async () => {
321356
label="Save"
322357
type="submit"
323358
icon="pi pi-check"
359+
:disabled="!editable"
324360
/>
325361
<Button
326362
class="p-button-outlined mr-2"
327363
label="Cancel"
328364
icon="pi pi-times"
329365
@click="
330366
() => {
331-
toTheProject();
367+
getProject ? toTheProject() : toTheEnquiry();
332368
}
333369
"
334370
/>
@@ -341,6 +377,7 @@ onBeforeMount(async () => {
341377
class="p-button-outlined p-button-danger mr-2"
342378
label="Delete"
343379
icon="pi pi-trash"
380+
:disabled="!editable"
344381
@click="onDelete"
345382
/>
346383
</div>

0 commit comments

Comments
 (0)