fix: Update announcement save confirmation messages (#730)

bcgov · Sep 6, 2024 · 9ccfae4 · 9ccfae4
1 parent d454219
commit 9ccfae4
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 36 deletions.
diff --git a/admin-frontend/src/components/AddAnnouncementPage.vue b/admin-frontend/src/components/AddAnnouncementPage.vue
@@ -2,12 +2,20 @@
   <AnnouncementForm
     :announcement="null"
     title="Add Announcement"
-    @save="submit"
     :mode="AnnouncementFormMode.CREATE"
+    @save="submit"
   ></AnnouncementForm>
+  <v-overlay
+    :persistent="true"
+    :model-value="isProcessing"
+    class="align-center justify-center"
+  >
+    <spinner />
+  </v-overlay>
 </template>
 
 <script lang="ts" setup>
+import Spinner from './Spinner.vue';
 import {
   AnnouncementFormValue,
   AnnouncementFormMode,
@@ -18,13 +26,16 @@ import { useAnnouncementSelectionStore } from '../store/modules/announcementSele
 import { useAnnouncementSearchStore } from '../store/modules/announcementSearchStore';
 import { NotificationService } from '../services/notificationService';
 import ApiService from '../services/apiService';
+import { ref } from 'vue';
 
 const router = useRouter();
 const selectionStore = useAnnouncementSelectionStore();
 const announcementSearch = useAnnouncementSearchStore();
+const isProcessing = ref<boolean>(false);
 
 const submit = async (data: AnnouncementFormValue) => {
   try {
+    isProcessing.value = true;
     await ApiService.addAnnouncement(data);
     NotificationService.pushNotificationSuccess(
       'Announcement saved successfully',
@@ -35,6 +46,8 @@ const submit = async (data: AnnouncementFormValue) => {
   } catch (error) {
     console.error('Failed to save announcement', error);
     NotificationService.pushNotificationError('Failed to save announcement');
+  } finally {
+    isProcessing.value = false;
   }
 };
 </script>
diff --git a/admin-frontend/src/components/EditAnnouncementPage.vue b/admin-frontend/src/components/EditAnnouncementPage.vue
@@ -2,23 +2,32 @@
   <AnnouncementForm
     :announcement="announcement"
     title="Edit Announcement"
-    @save="submit"
     :mode="AnnouncementFormMode.EDIT"
+    @save="submit"
   ></AnnouncementForm>
+  <v-overlay
+    :persistent="true"
+    :model-value="isProcessing"
+    class="align-center justify-center"
+  >
+    <spinner />
+  </v-overlay>
 </template>
 
 <script lang="ts" setup>
-import { onBeforeMount, onBeforeUnmount } from 'vue';
+import { onBeforeMount, onBeforeUnmount, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import {
   AnnouncementFormValue,
   AnnouncementFormMode,
 } from '../types/announcements';
+import Spinner from './Spinner.vue';
 import AnnouncementForm from './announcements/AnnouncementForm.vue';
 import { NotificationService } from '../services/notificationService';
 import { useAnnouncementSelectionStore } from '../store/modules/announcementSelectionStore';
 import { useAnnouncementSearchStore } from '../store/modules/announcementSearchStore';
 import { useRouter } from 'vue-router';
+const isProcessing = ref<boolean>(false);
 
 const router = useRouter();
 const selectionStore = useAnnouncementSelectionStore();
@@ -27,6 +36,7 @@ const { announcement } = storeToRefs(selectionStore);
 
 const submit = async (data: AnnouncementFormValue) => {
   try {
+    isProcessing.value = true;
     await selectionStore.saveChanges(data);
     NotificationService.pushNotificationSuccess(
       'Announcement saved successfully',
@@ -36,6 +46,8 @@ const submit = async (data: AnnouncementFormValue) => {
   } catch (error) {
     console.error('Failed to save announcement', error);
     NotificationService.pushNotificationError('Failed to save announcement');
+  } finally {
+    isProcessing.value = false;
   }
 };
 

diff --git a/admin-frontend/src/components/__tests__/AddAnnouncementPage.spec.ts b/admin-frontend/src/components/__tests__/AddAnnouncementPage.spec.ts
@@ -113,13 +113,10 @@ describe('AddAnnouncementPage', () => {
     await fireEvent.update(displayLinkAs, 'Example.pdf');
     await markAsPublish();
     await fireEvent.click(saveButton);
-    await waitFor(() => {
-      expect(
-        screen.getByText('Are you sure you want to publish this announcement?'),
-      ).toBeInTheDocument();
+    await waitFor(async () => {
+      const confirmButton = getByRole('button', { name: 'Confirm' });
+      await fireEvent.click(confirmButton);
     });
-    const continueButton = screen.getByRole('button', { name: 'Confirm' });
-    await fireEvent.click(continueButton);
     await waitFor(() => {
       expect(mockAddAnnouncement).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -147,6 +144,10 @@ describe('AddAnnouncementPage', () => {
     await fireEvent.update(linkUrl, 'https://example.com');
     await fireEvent.update(displayLinkAs, 'Example.pdf');
     await fireEvent.click(saveButton);
+    await waitFor(async () => {
+      const confirmButton = getByRole('button', { name: 'Confirm' });
+      await fireEvent.click(confirmButton);
+    });
 
     await waitFor(() => {
       expect(mockAddAnnouncement).toHaveBeenCalledWith(
@@ -208,13 +209,10 @@ describe('AddAnnouncementPage', () => {
     await fireEvent.update(displayLinkAs, 'Example.pdf');
     await markAsPublish();
     await fireEvent.click(saveButton);
-    await waitFor(() => {
-      expect(
-        screen.getByText('Are you sure you want to publish this announcement?'),
-      ).toBeInTheDocument();
+    await waitFor(async () => {
+      const cancelButton = getByRole('button', { name: 'Cancel' });
+      await fireEvent.click(cancelButton);
     });
-    const cancelButton = screen.getByRole('button', { name: 'Cancel' });
-    await fireEvent.click(cancelButton);
     await waitFor(() => {
       expect(mockAddAnnouncement).not.toHaveBeenCalled();
     });
@@ -542,15 +540,11 @@ describe('AddAnnouncementPage', () => {
       await fireEvent.update(displayLinkAs, 'Example.pdf');
       await markAsPublish();
       await fireEvent.click(saveButton);
-      await waitFor(() => {
-        expect(
-          screen.getByText(
-            'Are you sure you want to publish this announcement?',
-          ),
-        ).toBeInTheDocument();
+
+      await waitFor(async () => {
+        const confirmButton = getByRole('button', { name: 'Confirm' });
+        await fireEvent.click(confirmButton);
       });
-      const continueButton = screen.getByRole('button', { name: 'Confirm' });
-      await fireEvent.click(continueButton);
       await waitFor(() => {
         expect(mockError).toHaveBeenCalled();
       });

diff --git a/admin-frontend/src/components/__tests__/EditAnnouncementPage.spec.ts b/admin-frontend/src/components/__tests__/EditAnnouncementPage.spec.ts
@@ -174,7 +174,7 @@ describe('EditAnnouncementPage', () => {
             },
           ],
         } as any);
-        const { getByRole, getByLabelText } = await wrappedRender();
+        const { queryByRole, getByRole, getByLabelText } = await wrappedRender();
         expect(getByLabelText('Publish')).toBeChecked();
         expect(getByLabelText('Title')).toHaveValue('title');
         expect(getByLabelText('Description')).toHaveValue('description');
@@ -183,6 +183,14 @@ describe('EditAnnouncementPage', () => {
         await fireEvent.click(noExpiry);
         const saveButton = getByRole('button', { name: 'Save' });
         await fireEvent.click(saveButton);
+        await waitFor(async () => {
+          const confirmButton = getByRole('button', { name: 'Confirm' });
+          await fireEvent.click(confirmButton);
+        });
+        await waitFor(() => {
+          const confirmButton = queryByRole('button', { name: 'Confirm' }); 
+          expect(confirmButton).toBeNull();
+        });
         await waitFor(() => {
           expect(mockUpdateAnnouncement).toHaveBeenCalled();
           expect(mockSuccess).toHaveBeenCalled();
@@ -440,6 +448,10 @@ describe('EditAnnouncementPage', () => {
         const saveButton = getByRole('button', { name: 'Save' });
 
         await fireEvent.click(saveButton);
+        await waitFor(async () => {
+          const confirmButton = getByRole('button', { name: 'Confirm' });
+          await fireEvent.click(confirmButton);
+        });
         await waitFor(() => {
           expect(mockUpdateAnnouncement).toHaveBeenCalled();
           expect(mockError).toHaveBeenCalled();

diff --git a/admin-frontend/src/components/announcements/AnnouncementForm.vue b/admin-frontend/src/components/announcements/AnnouncementForm.vue
@@ -364,11 +364,7 @@
       </p>
     </template>
   </ConfirmationDialog>
-  <ConfirmationDialog ref="publishConfirmationDialog">
-    <template #message>
-      <p>Are you sure you want to publish this announcement?</p>
-    </template>
-  </ConfirmationDialog>
+  <ConfirmationDialog ref="publishConfirmationDialog"> </ConfirmationDialog>
 </template>
 
 <script lang="ts" setup>
@@ -402,6 +398,7 @@ import ApiService from '../../services/apiService';
 import { v4 } from 'uuid';
 import AnnouncementStatusChip from './AnnouncementStatusChip.vue';
 import type { VTextField } from 'vuetify/components';
+import { LocalDateTime } from '@js-joda/core';
 
 // References to component's exported properties
 const announcementTitleRef = ref<VTextField | null>(null);
@@ -765,15 +762,44 @@ const handleSave = handleSubmit(async (values) => {
     return true;
   }
 
-  if (
-    status.value === 'PUBLISHED' &&
-    (mode === AnnouncementFormMode.CREATE ||
-      announcement?.status !== 'PUBLISHED')
-  ) {
+  let confirmationSettings;
+
+  if (values.status === 'DRAFT') {
+    confirmationSettings = {
+      title: 'Confirm Draft',
+      message:
+        'Do you want to save the announcement as a draft? It will not be published to the public site. Do you want to continue?',
+    };
+  } else {
+    if (
+      mode === AnnouncementFormMode.CREATE ||
+      announcement?.status !== 'PUBLISHED'
+    ) {
+      const publishDate = LocalDateTime.from(nativeJs(values.published_on));
+      const publishDateString = publishDate.format(
+        DateTimeFormatter.ofPattern('MMM d, yyyy').withLocale(Locale.CANADA),
+      );
+      const publishTimeString = publishDate.format(
+        DateTimeFormatter.ofPattern('hh:mm a').withLocale(Locale.CANADA),
+      );
+      confirmationSettings = {
+        title: 'Confirm Publish',
+        message: `This announcement will be published to the public site on ${publishDateString} at ${publishTimeString}. Do you want to continue?`,
+      };
+    } else {
+      confirmationSettings = {
+        title: 'Confirm Update',
+        message:
+          'This published message will be updated on the public site with the changes you’ve made. Do you want to continue?',
+      };
+    }
+  }
+
+  if (confirmationSettings) {
     isConfirmDialogVisible.value = true;
     const confirmation = await publishConfirmationDialog.value?.open(
-      'Confirm Publish',
-      undefined,
+      confirmationSettings.title,
+      confirmationSettings.message,
       {
         titleBold: true,
         resolveText: 'Confirm',