Skip to content

Commit 8e2e36c

Browse files
kyle1morelkyle1morel
authored
Merge pull request #350 from bcgov/feature/tracker-improvements-proponent-notes
Tracker Improvements Proponent Notes
2 parents 0752472 + 3bfbc72 commit 8e2e36c

8 files changed

Lines changed: 204 additions & 105 deletions

File tree

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<script setup lang="ts">
2+
import { useI18n } from 'vue-i18n';
3+
4+
import { Button } from '@/lib/primevue';
5+
import { formatDate } from '@/utils/formatters';
6+
7+
import type { Note } from '@/types';
8+
9+
// Props
10+
const { note } = defineProps<{
11+
note: Note;
12+
}>();
13+
14+
// Emits
15+
const emit = defineEmits(['noteBanner:show-history']);
16+
17+
// Composables
18+
const { t } = useI18n();
19+
</script>
20+
21+
<template>
22+
<div
23+
v-if="note"
24+
class="bg-[var(--p-gold-100)] border rounded-sm border-[var(--p-gold-900)] px-4 py-2"
25+
>
26+
<div class="grid grid-cols-7 gap-4 items-center">
27+
<div class="col-span-2">
28+
<span class="font-bold mr-4">{{ t('note.noteBanner.attnReqd') }}:</span>
29+
<span class="font-bold">{{ t('note.noteBanner.updatedOn') }} {{ formatDate(note.createdAt) }}</span>
30+
</div>
31+
<div class="col-span-4 truncate">{{ note.note }}</div>
32+
<div class="flex justify-end">
33+
<Button
34+
size="small"
35+
:label="t('note.noteBanner.viewAll')"
36+
outlined
37+
@click="emit('noteBanner:show-history')"
38+
/>
39+
</div>
40+
</div>
41+
</div>
42+
</template>
43+
44+
<style scoped lang="scss">
45+
.p-button-outlined {
46+
background-color: white;
47+
}
48+
</style>

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<script setup lang="ts">
2+
import { useI18n } from 'vue-i18n';
3+
4+
import { Dialog } from '@/lib/primevue';
5+
import { formatDateLong } from '@/utils/formatters';
6+
7+
import type { NoteHistory } from '@/types';
8+
9+
// Props
10+
const { noteHistory } = defineProps<{
11+
noteHistory: readonly NoteHistory[];
12+
}>();
13+
14+
// Composables
15+
const { t } = useI18n();
16+
</script>
17+
18+
<template>
19+
<Dialog
20+
:draggable="false"
21+
:modal="true"
22+
class="app-info-dialog w-6/12"
23+
dismissable-mask
24+
>
25+
<template #header>
26+
<span class="p-dialog-title">{{ t('note.shownToProponentModal.attnReqd') }}</span>
27+
</template>
28+
29+
<div
30+
v-for="history of noteHistory"
31+
:key="history.noteHistoryId"
32+
class="mb-5"
33+
>
34+
<div class="flex flex-col">
35+
<div class="font-bold mb-1">{{ formatDateLong(history.note?.[0]?.createdAt) }}</div>
36+
<div class="font-bold">{{ history.title }}</div>
37+
<div>{{ history.note?.[0]?.note }}</div>
38+
</div>
39+
</div>
40+
</Dialog>
41+
</template>

‎frontend/src/locales/en-CA.json‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@
5151
"projectView": {
5252
"agency": "Agency",
5353
"askMyNavigator": "Ask my Navigator",
54-
"beAware": "Please be aware!",
5554
"completedAuths": "Completed authorizations",
5655
"createdBy": "Created by",
5756
"crumbAppsPermits": "Applications and Permits",
@@ -578,6 +577,16 @@
578577
"login": "Log in",
579578
"logout": "Log out"
580579
},
580+
"note": {
581+
"noteBanner": {
582+
"attnReqd": "Attention required",
583+
"updatedOn": "Updated on",
584+
"viewAll": "View all"
585+
},
586+
"shownToProponentModal": {
587+
"attnReqd": "Attention required"
588+
}
589+
},
581590
"noteHistoryModal": {
582591
"cancel": "Cancel",
583592
"confirm": "Confirm",

‎frontend/src/store/projectStore.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,16 @@ export const useProjectStore = defineStore('project', () => {
9494
}),
9595
getDocuments: computed(() => state.documents.value),
9696
getNoteHistory: computed(() => state.noteHistory.value),
97+
// Get array of note history that is shown to the proponent in descending order of creation date of the note
98+
getNoteHistoryShownToProponent: computed(() => {
99+
return state.noteHistory.value
100+
.filter((noteHistory) => noteHistory.shownToProponent)
101+
.sort((a, b) => {
102+
const aCreatedAt = a.note[0].createdAt!;
103+
const bCreatedAt = b.note[0].createdAt!;
104+
return new Date(bCreatedAt).getTime() - new Date(aCreatedAt).getTime();
105+
});
106+
}),
97107
getPermits: computed(() => state.permits.value),
98108
getRelatedEnquiries: computed(() => state.relatedEnquiries.value),
99109
getProject: computed(() => state.project.value)

‎frontend/src/types/NoteHistory.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export type NoteHistory = {
1010
escalateToSupervisor: boolean;
1111
escalationType: string | null;
1212
isDeleted: boolean;
13-
note: Array<Note>;
13+
note: Note[];
1414
shownToProponent: boolean;
1515
title: string;
1616
type: string;

‎frontend/src/views/external/electrification/project/ProjectView.vue‎

Lines changed: 13 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ import { useRouter } from 'vue-router';
77
import AuthorizationCardLite from '@/components/authorization/AuthorizationCardLite.vue';
88
import AuthorizationCardProponent from '@/components/authorization/AuthorizationCardProponent.vue';
99
import RequiredAuths from '@/components/authorization/RequiredAuths.vue';
10-
import BasicProjectInfoCard from '@/components/projectCommon/BasicProjectInfoCard.vue';
1110
import { AskMyNavigator } from '@/components/common/icons';
11+
import NoteBanner from '@/components/note/NoteBanner.vue';
12+
import ShownToProponentModal from '@/components/note/ShownToProponentModal.vue';
13+
import BasicProjectInfoCard from '@/components/projectCommon/BasicProjectInfoCard.vue';
1214
import RelatedEnquiryListProponent from '@/components/projectCommon/enquiry/RelatedEnquiryListProponent.vue';
13-
import { Button, Dialog, Tab, Tabs, TabList, TabPanel, TabPanels, useToast } from '@/lib/primevue';
15+
import { Button, Tab, TabList, TabPanel, TabPanels, Tabs, useToast } from '@/lib/primevue';
1416
import {
1517
contactService,
1618
enquiryService,
@@ -27,7 +29,6 @@ import { enquiryRouteNameKey, navigationPermissionKey } from '@/utils/keys';
2729
2830
import type { Ref } from 'vue';
2931
import type { Contact } from '@/types';
30-
import { formatDateLong } from '@/utils/formatters';
3132
3233
// Props
3334
const { initialTab = '0', projectId } = defineProps<{
@@ -49,7 +50,7 @@ const {
4950
getAuthsNeeded,
5051
getAuthsNotNeeded,
5152
getAuthsOnGoing,
52-
getNoteHistory,
53+
getNoteHistoryShownToProponent,
5354
getProject,
5455
getRelatedEnquiries
5556
} = storeToRefs(projectStore);
@@ -162,31 +163,6 @@ onBeforeMount(async () => {
162163
:value="activeTab"
163164
class="mt-3"
164165
>
165-
<!-- TODO: Where does this go now after the rebase? -->
166-
<!-- <div
167-
v-if="getNoteHistory.length"
168-
class="bg-[var(--p-green-100)] p-4"
169-
>
170-
<div class="grid grid-cols-6 gap-4 items-center">
171-
<div class="font-bold">{{ t('e.common.projectView.beAware') }}</div>
172-
<div class="font-bold">
173-
Updated on {{ formatDate(getNoteHistory[0].updatedAt ?? getNoteHistory[0].createdAt) }}
174-
</div>
175-
<div class="col-span-3 font-bold truncate">{{ getNoteHistory[0].note[0].note }}</div>
176-
<div class="flex justify-end">
177-
<Button
178-
class="p-button-sm header-btn"
179-
label="View all"
180-
outlined
181-
@click="noteHistoryVisible = true"
182-
/>
183-
</div>
184-
</div>
185-
</div>
186-
<div
187-
v-if="getProject?.submissionType === SubmissionType.INAPPLICABLE"
188-
class="inapplicable-block p-4 mt-12"
189-
> -->
190166
<TabList>
191167
<Tab :value="0">
192168
<font-awesome-icon
@@ -211,6 +187,11 @@ onBeforeMount(async () => {
211187
:activity-id="getProject.activityId"
212188
@basic-project-info:navigate-to-submission-intake-view="navigateToSubmissionIntakeView"
213189
/>
190+
<NoteBanner
191+
v-if="getNoteHistoryShownToProponent.length"
192+
:note="getNoteHistoryShownToProponent[0].note[0]"
193+
@note-banner:show-history="noteHistoryVisible = true"
194+
/>
214195

215196
<div class="disclaimer-block p-8 mt-8">
216197
{{ t('e.common.projectView.disclaimer') }}
@@ -300,29 +281,10 @@ onBeforeMount(async () => {
300281
</TabPanels>
301282
</Tabs>
302283
</div>
303-
304-
<Dialog
284+
<ShownToProponentModal
305285
v-model:visible="noteHistoryVisible"
306-
:draggable="false"
307-
:modal="true"
308-
class="app-info-dialog w-6/12"
309-
>
310-
<template #header>
311-
<span class="p-dialog-title">{{ t('e.common.projectView.beAware') }}</span>
312-
</template>
313-
314-
<div
315-
v-for="history of getNoteHistory"
316-
:key="history.noteHistoryId"
317-
class="mb-5"
318-
>
319-
<div class="flex flex-col">
320-
<div class="font-bold mb-1">{{ formatDateLong(history.createdAt) }}</div>
321-
<div class="font-bold">{{ history.title }}</div>
322-
<div>{{ history.note[0].note }}</div>
323-
</div>
324-
</div>
325-
</Dialog>
286+
:note-history="getNoteHistoryShownToProponent"
287+
/>
326288
</template>
327289

328290
<style scoped lang="scss">

‎frontend/src/views/external/housing/project/ProjectView.vue‎

Lines changed: 13 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ import { useRouter } from 'vue-router';
77
import AuthorizationCardLite from '@/components/authorization/AuthorizationCardLite.vue';
88
import AuthorizationCardProponent from '@/components/authorization/AuthorizationCardProponent.vue';
99
import RequiredAuths from '@/components/authorization/RequiredAuths.vue';
10-
import BasicProjectInfoCard from '@/components/projectCommon/BasicProjectInfoCard.vue';
1110
import { AskMyNavigator } from '@/components/common/icons';
11+
import NoteBanner from '@/components/note/NoteBanner.vue';
12+
import ShownToProponentModal from '@/components/note/ShownToProponentModal.vue';
13+
import BasicProjectInfoCard from '@/components/projectCommon/BasicProjectInfoCard.vue';
1214
import RelatedEnquiryListProponent from '@/components/projectCommon/enquiry/RelatedEnquiryListProponent.vue';
13-
import { Button, Dialog, Tab, Tabs, TabList, TabPanel, TabPanels, useToast } from '@/lib/primevue';
15+
import { Button, Tab, TabList, TabPanel, TabPanels, Tabs, useToast } from '@/lib/primevue';
1416
import { contactService, enquiryService, housingProjectService, noteHistoryService, permitService } from '@/services';
1517
import { useAuthZStore, useProjectStore } from '@/store';
1618
import { NavigationPermission } from '@/store/authzStore';
@@ -21,7 +23,6 @@ import { enquiryRouteNameKey, navigationPermissionKey } from '@/utils/keys';
2123
2224
import type { Ref } from 'vue';
2325
import type { Contact } from '@/types';
24-
import { formatDateLong } from '@/utils/formatters';
2526
2627
// Props
2728
const { initialTab = '0', projectId } = defineProps<{
@@ -43,7 +44,7 @@ const {
4344
getAuthsNeeded,
4445
getAuthsNotNeeded,
4546
getAuthsOnGoing,
46-
getNoteHistory,
47+
getNoteHistoryShownToProponent,
4748
getProject,
4849
getRelatedEnquiries
4950
} = storeToRefs(projectStore);
@@ -151,32 +152,6 @@ onBeforeMount(async () => {
151152
:value="activeTab"
152153
class="mt-3"
153154
>
154-
<!-- TODO: Where does this go now after the rebase? -->
155-
<!-- <div
156-
v-if="getNoteHistory.length"
157-
class="bg-[var(--p-green-100)] p-4"
158-
>
159-
<div class="grid grid-cols-6 gap-4 items-center">
160-
<div class="font-bold">{{ t('e.common.projectView.beAware') }}</div>
161-
<div class="font-bold">
162-
Updated on {{ formatDate(getNoteHistory[0].updatedAt ?? getNoteHistory[0].createdAt) }}
163-
</div>
164-
<div class="col-span-3 font-bold truncate">{{ getNoteHistory[0].note[0].note }}</div>
165-
<div class="flex justify-end">
166-
<Button
167-
class="p-button-sm header-btn"
168-
label="View all"
169-
outlined
170-
@click="noteHistoryVisible = true"
171-
/>
172-
</div>
173-
</div>
174-
</div>
175-
176-
<div
177-
v-if="getProject?.submissionType === SubmissionType.INAPPLICABLE"
178-
class="inapplicable-block p-4 mt-12"
179-
> -->
180155
<TabList>
181156
<Tab :value="0">
182157
<font-awesome-icon
@@ -201,6 +176,11 @@ onBeforeMount(async () => {
201176
:activity-id="getProject.activityId"
202177
@basic-project-info:navigate-to-submission-intake-view="navigateToSubmissionIntakeView"
203178
/>
179+
<NoteBanner
180+
v-if="getNoteHistoryShownToProponent.length"
181+
:note="getNoteHistoryShownToProponent[0].note[0]"
182+
@note-banner:show-history="noteHistoryVisible = true"
183+
/>
204184

205185
<div class="disclaimer-block p-8 mt-8">
206186
{{ t('e.common.projectView.disclaimer') }}
@@ -291,29 +271,10 @@ onBeforeMount(async () => {
291271
</TabPanels>
292272
</Tabs>
293273
</div>
294-
295-
<Dialog
274+
<ShownToProponentModal
296275
v-model:visible="noteHistoryVisible"
297-
:draggable="false"
298-
:modal="true"
299-
class="app-info-dialog w-6/12"
300-
>
301-
<template #header>
302-
<span class="p-dialog-title">{{ t('e.common.projectView.beAware') }}</span>
303-
</template>
304-
305-
<div
306-
v-for="history of getNoteHistory"
307-
:key="history.noteHistoryId"
308-
class="mb-5"
309-
>
310-
<div class="flex flex-col">
311-
<div class="font-bold mb-1">{{ formatDateLong(history.createdAt) }}</div>
312-
<div class="font-bold">{{ history.title }}</div>
313-
<div>{{ history.note[0].note }}</div>
314-
</div>
315-
</div>
316-
</Dialog>
276+
:note-history="getNoteHistoryShownToProponent"
277+
/>
317278
</template>
318279

319280
<style scoped lang="scss">

0 commit comments

Comments
 (0)