Skip to content

Commit ec299b6

Browse files
sanjaytkbabusanjaytkbabu
committed
Tracker improvements proponent notes
1 parent a70a071 commit ec299b6

7 files changed

Lines changed: 202 additions & 102 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: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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: Array<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+
>
24+
<template #header>
25+
<span class="p-dialog-title">{{ t('note.shownToProponentModal.attnReqd') }}</span>
26+
</template>
27+
28+
<div
29+
v-for="history of noteHistory"
30+
:key="history.noteHistoryId"
31+
class="mb-5"
32+
>
33+
<div class="flex flex-col">
34+
<div class="font-bold mb-1">{{ formatDateLong(history.note?.[0]?.createdAt) }}</div>
35+
<div class="font-bold">{{ history.title }}</div>
36+
<div>{{ history.note?.[0]?.note }}</div>
37+
</div>
38+
</div>
39+
</Dialog>
40+
</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",
@@ -572,6 +571,16 @@
572571
"login": "Log in",
573572
"logout": "Log out"
574573
},
574+
"note": {
575+
"noteBanner": {
576+
"attnReqd": "Attention required",
577+
"updatedOn": "Updated on",
578+
"viewAll": "View all"
579+
},
580+
"shownToProponentModal": {
581+
"attnReqd": "Attention required"
582+
}
583+
},
575584
"noteHistoryModal": {
576585
"cancel": "Cancel",
577586
"confirm": "Confirm",

‎frontend/src/store/projectStore.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,16 @@ export const useProjectStore = defineStore('project', () => {
8484
}),
8585
getDocuments: computed(() => state.documents.value),
8686
getNoteHistory: computed(() => state.noteHistory.value),
87+
// Get array of note history that is shown to the proponent in descending order of creation date of the note
88+
getNoteHistoryShownToProponent: computed(() => {
89+
return state.noteHistory.value
90+
.filter((noteHistory) => noteHistory.shownToProponent)
91+
.sort((a, b) => {
92+
const aCreatedAt = a.note?.[0]?.createdAt ?? 0;
93+
const bCreatedAt = b.note?.[0]?.createdAt ?? 0;
94+
return new Date(bCreatedAt).getTime() - new Date(aCreatedAt).getTime();
95+
});
96+
}),
8797
getPermits: computed(() => state.permits.value),
8898
getRelatedEnquiries: computed(() => state.relatedEnquiries.value),
8999
getProject: computed(() => state.project.value)

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

Lines changed: 13 additions & 50 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 NoteBanner from '@/components/note/NoteBanner.vue';
11+
import ShownToProponentModal from '@/components/note/ShownToProponentModal.vue';
1012
import BasicProjectInfoCard from '@/components/projectCommon/BasicProjectInfoCard.vue';
1113
import { AskMyNavigator } from '@/components/common/icons';
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, Tabs, TabList, TabPanel, TabPanels, 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 && getNoteHistoryShownToProponent[0].note.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,11 @@ 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+
dismissable-mask
288+
/>
326289
</template>
327290

328291
<style scoped lang="scss">

‎frontend/src/views/external/housing/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 NoteBanner from '@/components/note/NoteBanner.vue';
11+
import ShownToProponentModal from '@/components/note/ShownToProponentModal.vue';
1012
import BasicProjectInfoCard from '@/components/projectCommon/BasicProjectInfoCard.vue';
1113
import { AskMyNavigator } from '@/components/common/icons';
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, Tabs, TabList, TabPanel, TabPanels, 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 && getNoteHistoryShownToProponent[0].note.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,11 @@ 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+
dismissable-mask
278+
/>
317279
</template>
318280

319281
<style scoped lang="scss">

0 commit comments

Comments
 (0)