Skip to content

Commit 35ad873

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

14 files changed

Lines changed: 148 additions & 468 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: 59 additions & 34 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';
@@ -33,24 +33,31 @@ const { noteHistory = undefined } = defineProps<{
3333
noteHistory?: NoteHistory;
3434
}>();
3535
36+
const NOTES_TAB_INDEX = {
37+
ENQUIRY: 1,
38+
SUBMISSION: 3
39+
};
40+
3641
// Composables
3742
const { t } = useI18n();
3843
const authzStore = useAuthZStore();
3944
const confirmDialog = useConfirm();
45+
const enquiryStore = useEnquiryStore();
4046
const projectStore = useProjectStore();
4147
const router = useRouter();
4248
const toast = useToast();
4349
const { options } = useCodeStore();
4450
4551
// Store
4652
const { getProject } = storeToRefs(projectStore);
53+
const { getEnquiry } = storeToRefs(enquiryStore);
4754
4855
// State
56+
const createdByFullNames: Ref<Record<string, string>> = ref({});
4957
const formRef: Ref<InstanceType<typeof Form> | null> = ref(null);
5058
const initialFormValues: Ref<any | undefined> = ref(undefined);
51-
const visible = defineModel<boolean>('visible');
5259
const shownToProponent: Ref<boolean> = ref(false);
53-
const createdByFullNames: Ref<Record<string, string>> = ref({});
60+
const visible = defineModel<boolean>('visible');
5461
5562
// Injections
5663
const projectRouteName = inject(projectRouteNameKey);
@@ -61,12 +68,7 @@ const formSchema = object({
6168
.nullable()
6269
.when('type', {
6370
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-
),
71+
then: (schema) => schema.required(t('note.noteForm.bfDateReqd')),
7072
otherwise: (schema) => schema.nullable()
7173
})
7274
.label('Bring forward date'),
@@ -79,25 +81,37 @@ const formSchema = object({
7981
.label('Bring forward state'),
8082
note: string().label('Note'),
8183
type: string().oneOf(NOTE_TYPE_LIST).label('Note type'),
82-
title: string().required().max(255, 'Title too long').label('Title')
84+
title: string().required().max(255, 'Title too long').label('Title'),
85+
escalationType: mixed()
86+
.when(['escalateToSupervisor', 'escalateToDirector'], {
87+
is: (escalateToSupervisor: boolean, escalateToDirector: boolean) => escalateToSupervisor || escalateToDirector,
88+
then: (schema) => schema.required(t('note.noteForm.escalationTypeReqd')),
89+
otherwise: (schema) => schema.nullable()
90+
})
91+
.label('Escalation type')
8392
});
8493
8594
function initializeFormValues() {
8695
if (noteHistory) {
8796
initialFormValues.value = {
88-
activityId: noteHistory?.activityId,
97+
activityId: noteHistory.activityId,
8998
bringForwardDate: noteHistory?.bringForwardDate ? new Date(noteHistory.bringForwardDate) : null,
9099
bringForwardState: noteHistory?.bringForwardState ?? null,
91100
escalateToSupervisor: noteHistory?.escalateToSupervisor,
92101
escalateToDirector: noteHistory?.escalateToDirector,
93102
escalationType: noteHistory?.escalationType,
94-
noteHistoryId: noteHistory?.noteHistoryId,
95-
type: noteHistory?.type ?? NoteType.GENERAL,
96-
title: noteHistory?.title
103+
noteHistoryId: noteHistory.noteHistoryId,
104+
type: noteHistory.type,
105+
title: noteHistory.title
97106
};
98107
shownToProponent.value = noteHistory.shownToProponent;
108+
} else {
109+
initialFormValues.value = {
110+
type: NoteType.GENERAL
111+
};
99112
}
100113
}
114+
// }
101115
102116
function onInvalidSubmit(e: any) {
103117
scrollToFirstError(e.errors);
@@ -106,20 +120,20 @@ function onInvalidSubmit(e: any) {
106120
function onDelete() {
107121
if (noteHistory) {
108122
confirmDialog.require({
109-
message: t(shownToProponent.value ? 'noteHistoryModal.deleteMessageIfShown' : 'noteHistoryModal.deleteMessage'),
110-
header: t('noteHistoryModal.deleteHeader'),
111-
acceptLabel: t('noteHistoryModal.confirm'),
123+
message: t(shownToProponent.value ? 'note.noteForm.deleteMessageIfShown' : 'note.noteForm.deleteMessage'),
124+
header: t('note.noteForm.deleteHeader'),
125+
acceptLabel: t('note.noteForm.confirm'),
112126
acceptClass: 'p-button-danger',
113-
rejectLabel: t('noteHistoryModal.cancel'),
127+
rejectLabel: t('note.noteForm.cancel'),
114128
rejectProps: { outlined: true },
115129
accept: () => {
116130
noteHistoryService
117131
.deleteNoteHistory(noteHistory?.noteHistoryId as string)
118132
.then(() => {
119-
toast.success(t('noteHistoryModal.noteDeleted'));
120-
toTheProject();
133+
toast.success(t('note.noteForm.noteDeleted'));
134+
getProject.value ? toTheProject() : toTheEnquiry();
121135
})
122-
.catch((e: any) => toast.error(t('noteHistoryModal.noteDeleteFailed'), e.message));
136+
.catch((e: any) => toast.error(t('note.noteForm.noteDeleteFailed'), e.message));
123137
}
124138
});
125139
}
@@ -145,20 +159,20 @@ async function onSubmit(data: any) {
145159
if (!noteHistory) {
146160
await noteHistoryService.createNoteHistory({
147161
...body,
148-
activityId: getProject.value?.activityId,
162+
activityId: getProject.value?.activityId || getEnquiry.value?.activityId,
149163
note: data.note
150164
});
151165
} else {
152166
await noteHistoryService.updateNoteHistory(data.noteHistoryId, {
153167
...body,
154-
activityId: getProject.value?.activityId,
168+
activityId: getProject.value?.activityId || getEnquiry.value?.activityId,
155169
note: data.note
156170
});
157171
}
158-
toast.success(t('noteHistoryModal.noteSaved'));
159-
toTheProject();
172+
toast.success(t('note.noteForm.noteSaved'));
173+
getProject.value ? toTheProject() : toTheEnquiry();
160174
} catch (e: any) {
161-
toast.error(t('noteHistoryModal.noteSaveFailed'), e.message);
175+
toast.error(t('note.noteForm.noteSaveFailed'), e.message);
162176
} finally {
163177
visible.value = false;
164178
}
@@ -167,6 +181,7 @@ async function onSubmit(data: any) {
167181
function onTypeChange(e: SelectChangeEvent) {
168182
if (e.value === NoteType.BRING_FORWARD) {
169183
formRef.value?.setFieldValue('bringForwardState', BringForwardType.UNRESOLVED);
184+
shownToProponent.value = false;
170185
}
171186
}
172187
@@ -183,7 +198,17 @@ function toTheProject() {
183198
name: projectRouteName?.value,
184199
params: { projectId: getProject.value?.projectId },
185200
query: {
186-
initialTab: '3'
201+
initialTab: NOTES_TAB_INDEX.SUBMISSION
202+
}
203+
});
204+
}
205+
206+
function toTheEnquiry() {
207+
router.push({
208+
name: projectRouteName?.value,
209+
params: { enquiryId: getEnquiry.value?.enquiryId },
210+
query: {
211+
initialTab: NOTES_TAB_INDEX.ENQUIRY
187212
}
188213
});
189214
}
@@ -199,13 +224,13 @@ onBeforeMount(async () => {
199224
<template>
200225
<div class="flex flex-row gap-x-3 my-4">
201226
<div class="flex flex-row gap-x-1">
202-
<span class="text-[var(--p-bcblue-900)]">{{ t('noteHistoryModal.created') }}:</span>
227+
<span class="text-[var(--p-bcblue-900)]">{{ t('note.noteForm.created') }}:</span>
203228
<span>
204229
{{ formatDate(noteHistory?.createdAt || new Date().toISOString()) }}
205230
</span>
206231
</div>
207232
<div class="flex flex-row gap-x-1">
208-
<span class="text-[var(--p-bcblue-900)]">{{ t('noteHistoryModal.lastUpdated') }}:</span>
233+
<span class="text-[var(--p-bcblue-900)]">{{ t('note.noteForm.lastUpdated') }}:</span>
209234
<span>{{ formatDate(noteHistory?.updatedAt) }}</span>
210235
</div>
211236
</div>
@@ -259,12 +284,12 @@ onBeforeMount(async () => {
259284
v-if="values.type === NoteType.GENERAL"
260285
class="flex flex-col gap-y-4"
261286
>
262-
<span class="font-bold">{{ t('noteHistoryModal.showProponent') }}</span>
287+
<span class="font-bold">{{ t('note.noteForm.showProponent') }}</span>
263288
<ToggleSwitch
264289
v-model="shownToProponent"
265290
class="mr-1"
266291
name="shownToProponent"
267-
:label="t('noteHistoryModal.showProponent')"
292+
:label="t('note.noteForm.showProponent')"
268293
/>
269294
</div>
270295

@@ -275,13 +300,13 @@ onBeforeMount(async () => {
275300
<Checkbox
276301
v-if="authzStore.isInGroup([GroupName.NAVIGATOR, GroupName.NAVIGATOR_READ_ONLY])"
277302
name="escalateToSupervisor"
278-
:label="t('noteHistoryModal.escalateToSupervisor')"
303+
:label="t('note.noteForm.escalateToSupervisor')"
279304
:bold="false"
280305
/>
281306
<Checkbox
282307
v-if="authzStore.isInGroup([GroupName.ADMIN, GroupName.DEVELOPER, GroupName.SUPERVISOR])"
283308
name="escalateToDirector"
284-
:label="t('noteHistoryModal.escalateToDirector')"
309+
:label="t('note.noteForm.escalateToDirector')"
285310
:bold="false"
286311
/>
287312
<DatePicker
@@ -328,7 +353,7 @@ onBeforeMount(async () => {
328353
icon="pi pi-times"
329354
@click="
330355
() => {
331-
toTheProject();
356+
getProject ? toTheProject() : toTheEnquiry();
332357
}
333358
"
334359
/>

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

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import { computed, onBeforeMount, ref } from 'vue';
33
import { useI18n } from 'vue-i18n';
44
5-
import NoteHistoryModal from '@/components/note/NoteHistoryModal.vue';
65
import StatusPill from '@/components/common/StatusPill.vue';
76
import { Button, Card, Divider } from '@/lib/primevue';
87
import { userService } from '@/services';
@@ -31,7 +30,6 @@ const emit = defineEmits(['editNoteHistory', 'updateNoteHistory', 'deleteNoteHis
3130
const appStore = useAppStore();
3231
3332
// State
34-
const noteHistoryModalVisible: Ref<boolean> = ref(false);
3533
const userName: Ref<string | undefined> = ref(createdByFullName);
3634
3735
// Composables
@@ -60,7 +58,7 @@ onBeforeMount(() => {
6058
<h3
6159
class="cursor-pointer truncate max-w-[50ch] inline-block hover:underline"
6260
:disabled="!editable || !useAuthZStore().can(appStore.getInitiative, Resource.NOTE, Action.UPDATE)"
63-
@click="noteHistoryModalVisible = true"
61+
@click="emit('editNoteHistory', noteHistory.noteHistoryId)"
6462
>
6563
{{ noteHistory.title }}
6664
</h3>
@@ -146,19 +144,6 @@ onBeforeMount(() => {
146144
</div>
147145
</template>
148146
</Card>
149-
150-
<NoteHistoryModal
151-
v-if="noteHistory && noteHistoryModalVisible"
152-
v-model:visible="noteHistoryModalVisible"
153-
:activity-id="noteHistory.activityId"
154-
:note-history="noteHistory"
155-
@delete-note-history="
156-
(history: NoteHistory) => {
157-
emit('deleteNoteHistory', history);
158-
}
159-
"
160-
@update-note-history="(history: NoteHistory) => emit('updateNoteHistory', history)"
161-
/>
162147
</template>
163148

164149
<style scoped lang="scss">

0 commit comments

Comments
 (0)