From f94309a7f17484754fe2ef11bf44c08ede0eb585 Mon Sep 17 00:00:00 2001
From: Brock Anderson <brock@bandersgeo.ca>
Date: Fri, 16 Aug 2024 12:05:38 -0700
Subject: [PATCH] feat: admin announcement preview updates (#656)

---
 .../src/components/AddAnnouncementPage.vue    |  7 ++--
 .../src/components/EditAnnouncementPage.vue   |  7 ++--
 .../__tests__/EditAnnouncementPage.spec.ts    | 11 +++---
 .../announcements/AnnouncementForm.vue        | 35 +++++++++++++++----
 .../announcementSelectionStore.spec.ts        |  8 ++---
 .../modules/announcementSelectionStore.ts     | 20 +++++------
 admin-frontend/src/types/announcements.ts     |  6 ++++
 7 files changed, 64 insertions(+), 30 deletions(-)

diff --git a/admin-frontend/src/components/AddAnnouncementPage.vue b/admin-frontend/src/components/AddAnnouncementPage.vue
index 002796882..32578258f 100644
--- a/admin-frontend/src/components/AddAnnouncementPage.vue
+++ b/admin-frontend/src/components/AddAnnouncementPage.vue
@@ -3,12 +3,15 @@
     :announcement="null"
     title="Add Announcement"
     @save="submit"
-    mode="create"
+    :mode="AnnouncementFormMode.CREATE"
   ></AnnouncementForm>
 </template>
 
 <script lang="ts" setup>
-import { AnnouncementFormValue } from '../types/announcements';
+import {
+  AnnouncementFormValue,
+  AnnouncementFormMode,
+} from '../types/announcements';
 import { useRouter } from 'vue-router';
 import AnnouncementForm from './announcements/AnnouncementForm.vue';
 import { NotificationService } from '../services/notificationService';
diff --git a/admin-frontend/src/components/EditAnnouncementPage.vue b/admin-frontend/src/components/EditAnnouncementPage.vue
index bc0b3252a..8755bfdde 100644
--- a/admin-frontend/src/components/EditAnnouncementPage.vue
+++ b/admin-frontend/src/components/EditAnnouncementPage.vue
@@ -3,14 +3,17 @@
     :announcement="announcement"
     title="Edit Announcement"
     @save="submit"
-    mode="edit"
+    :mode="AnnouncementFormMode.EDIT"
   ></AnnouncementForm>
 </template>
 
 <script lang="ts" setup>
 import { onBeforeMount } from 'vue';
 import { storeToRefs } from 'pinia';
-import { AnnouncementFormValue } from '../types/announcements';
+import {
+  AnnouncementFormValue,
+  AnnouncementFormMode,
+} from '../types/announcements';
 import AnnouncementForm from './announcements/AnnouncementForm.vue';
 import { NotificationService } from '../services/notificationService';
 import { useAnnouncementSelectionStore } from '../store/modules/announcementSelectionStore';
diff --git a/admin-frontend/src/components/__tests__/EditAnnouncementPage.spec.ts b/admin-frontend/src/components/__tests__/EditAnnouncementPage.spec.ts
index 4283bcde6..9990386ab 100644
--- a/admin-frontend/src/components/__tests__/EditAnnouncementPage.spec.ts
+++ b/admin-frontend/src/components/__tests__/EditAnnouncementPage.spec.ts
@@ -1,12 +1,11 @@
-import { beforeEach, describe, it, vi, expect } from 'vitest';
-import EditAnnouncementPage from '../EditAnnouncementPage.vue';
 import { fireEvent, render, waitFor } from '@testing-library/vue';
+import { createPinia, setActivePinia } from 'pinia';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { createVuetify } from 'vuetify';
 import * as components from 'vuetify/components';
 import * as directives from 'vuetify/directives';
-import { createVuetify } from 'vuetify';
-import { createTestingPinia } from '@pinia/testing';
-import { createPinia, setActivePinia } from 'pinia';
 import { useAnnouncementSelectionStore } from '../../store/modules/announcementSelectionStore';
+import EditAnnouncementPage from '../EditAnnouncementPage.vue';
 
 global.ResizeObserver = require('resize-observer-polyfill');
 
@@ -96,6 +95,7 @@ describe('EditAnnouncementPage', () => {
     describe('when announcement is updated', () => {
       it('should show success notification', async () => {
         store.setAnnouncement({
+          announcement_id: '1',
           title: 'title',
           description: 'description',
           published_on: new Date(),
@@ -126,6 +126,7 @@ describe('EditAnnouncementPage', () => {
     describe('when announcement update fails', () => {
       it('should show error notification', async () => {
         store.setAnnouncement({
+          announcement_id: '1',
           title: 'title',
           description: 'description',
           published_on: new Date(),
diff --git a/admin-frontend/src/components/announcements/AnnouncementForm.vue b/admin-frontend/src/components/announcements/AnnouncementForm.vue
index 4efc27756..5c79a090f 100644
--- a/admin-frontend/src/components/announcements/AnnouncementForm.vue
+++ b/admin-frontend/src/components/announcements/AnnouncementForm.vue
@@ -12,14 +12,25 @@
           <div class="mr-2">Save as:</div>
           <v-radio-group inline v-model="status" class="status-options mr-2">
             <v-radio
-              v-if="!(mode === 'edit' && announcement?.status === 'PUBLISHED')"
+              v-if="
+                !(
+                  mode === AnnouncementFormMode.EDIT &&
+                  announcement?.status === 'PUBLISHED'
+                )
+              "
               label="Draft"
               value="DRAFT"
               class="mr-2"
             ></v-radio>
             <v-radio label="Publish" value="PUBLISHED"></v-radio>
           </v-radio-group>
-          <v-btn color="primary" class="ml-2" @click="handleSave()">Save</v-btn>
+          <v-btn
+            color="primary"
+            class="ml-2"
+            @click="handleSave()"
+            :disabled="!isPreviewVisible"
+            >Save</v-btn
+          >
         </div>
       </div>
 
@@ -167,7 +178,7 @@
             lg="5"
             xl="4"
             class="px-0 py-0 d-flex justify-end"
-            v-if="announcementsToPreview?.length"
+            v-if="isPreviewVisible"
           >
             <div class="previewPanel bg-previewPanel w-100 h-100 px-6 py-6">
               <v-row dense>
@@ -227,6 +238,7 @@ import {
   Announcement,
   AnnouncementFilterType,
   AnnouncementSortType,
+  AnnouncementFormMode,
 } from '../../types/announcements';
 import { useField, useForm } from 'vee-validate';
 import * as zod from 'zod';
@@ -241,7 +253,7 @@ import ApiService from '../../services/apiService';
 type Props = {
   announcement: AnnouncementFormValue | null | undefined;
   title: string;
-  mode: 'create' | 'edit';
+  mode: AnnouncementFormMode.CREATE | AnnouncementFormMode.EDIT;
 };
 
 let publishedAnnouncements: Announcement[] | undefined = undefined;
@@ -253,6 +265,7 @@ const confirmDialog = ref<typeof ConfirmationDialog>();
 const publishConfirmationDialog = ref<typeof ConfirmationDialog>();
 const { announcement, mode } = defineProps<Props>();
 const isPreviewAvailable = computed(() => values.title && values.description);
+const isPreviewVisible = computed(() => announcementsToPreview.value?.length);
 
 const { handleSubmit, setErrors, errors, meta, values } = useForm({
   initialValues: {
@@ -354,12 +367,19 @@ repeatedly).
 async function preview() {
   if (!publishedAnnouncements) {
     publishedAnnouncements = await getPublishedAnnouncements();
-    console.log(publishedAnnouncements);
   }
+  //if this is edit mode, filter out the anouncement being edited from the
+  //published announcements (we don't want it to appear twice in the preview area)
+  const publishedAnnouncementsFiltered =
+    mode == AnnouncementFormMode.CREATE
+      ? publishedAnnouncements
+      : publishedAnnouncements.filter(
+          (a) => a.announcement_id != announcement?.announcement_id,
+        );
   const currentAnnouncement = buildAnnouncementToPreview();
   announcementsToPreview.value = [
     currentAnnouncement as any,
-    ...publishedAnnouncements,
+    ...publishedAnnouncementsFiltered,
   ];
 }
 
@@ -454,7 +474,8 @@ const handleSave = handleSubmit(async (values) => {
 
   if (
     status.value === 'PUBLISHED' &&
-    (mode === 'create' || announcement?.status !== 'PUBLISHED')
+    (mode === AnnouncementFormMode.CREATE ||
+      announcement?.status !== 'PUBLISHED')
   ) {
     const confirmation = await publishConfirmationDialog.value?.open(
       'Confirm Publish',
diff --git a/admin-frontend/src/store/modules/__tests__/announcementSelectionStore.spec.ts b/admin-frontend/src/store/modules/__tests__/announcementSelectionStore.spec.ts
index 3dcc97fbc..b59a513bd 100644
--- a/admin-frontend/src/store/modules/__tests__/announcementSelectionStore.spec.ts
+++ b/admin-frontend/src/store/modules/__tests__/announcementSelectionStore.spec.ts
@@ -1,5 +1,5 @@
+import { createPinia, setActivePinia } from 'pinia';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { setActivePinia, createPinia } from 'pinia';
 import { useAnnouncementSelectionStore } from '../announcementSelectionStore';
 
 const mockUpdateAnnouncement = vi.fn();
@@ -48,7 +48,7 @@ describe('announcementSelectionStore', () => {
         expect(store.announcement).toEqual(
           expect.objectContaining({
             title: 'title',
-            id: '1',
+            announcement_id: '1',
             description: 'description',
             published_on: expect.any(Date),
             expires_on: expect.any(Date),
@@ -65,7 +65,7 @@ describe('announcementSelectionStore', () => {
       it('should reset announcement', () => {
         const store = useAnnouncementSelectionStore();
         store.announcement = {
-          id: '1',
+          announcement_id: '1',
           title: 'title',
           description: 'description',
           published_on: 'published_on',
@@ -84,7 +84,7 @@ describe('announcementSelectionStore', () => {
       it('should save changes', async () => {
         const store = useAnnouncementSelectionStore();
         store.announcement = {
-          id: '1',
+          announcement_id: '1',
           title: 'title',
           description: 'description',
           published_on: 'published_on',
diff --git a/admin-frontend/src/store/modules/announcementSelectionStore.ts b/admin-frontend/src/store/modules/announcementSelectionStore.ts
index 46255e78f..530d3f898 100644
--- a/admin-frontend/src/store/modules/announcementSelectionStore.ts
+++ b/admin-frontend/src/store/modules/announcementSelectionStore.ts
@@ -1,20 +1,15 @@
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
-import {
-  AnnouncementFormValue,
-  IAnnouncement,
-} from '../../types/announcements';
 import ApiService from '../../services/apiService';
+import { Announcement, AnnouncementFormValue } from '../../types/announcements';
 
 export const useAnnouncementSelectionStore = defineStore(
   'announcementSelection',
   () => {
-    const announcement = ref<
-      (AnnouncementFormValue & { id: string }) | undefined
-    >(undefined);
+    const announcement = ref<AnnouncementFormValue | undefined>(undefined);
 
     const setAnnouncement = (
-      data: IAnnouncement & {
+      data: Announcement & {
         announcement_resource: {
           resource_type: string;
           display_name: string;
@@ -26,7 +21,7 @@ export const useAnnouncementSelectionStore = defineStore(
         (r) => r.resource_type === 'LINK',
       );
       announcement.value = {
-        id: data.announcement_id,
+        announcement_id: data.announcement_id,
         title: data.title,
         description: data.description,
         published_on: data.published_on
@@ -47,7 +42,12 @@ export const useAnnouncementSelectionStore = defineStore(
     };
 
     const saveChanges = async (data: AnnouncementFormValue) => {
-      await ApiService.updateAnnouncement(announcement.value!.id, data);
+      if (announcement.value!?.announcement_id) {
+        await ApiService.updateAnnouncement(
+          announcement.value.announcement_id,
+          data,
+        );
+      }
     };
 
     return {
diff --git a/admin-frontend/src/types/announcements.ts b/admin-frontend/src/types/announcements.ts
index 66192dd8c..4ba2f58e2 100644
--- a/admin-frontend/src/types/announcements.ts
+++ b/admin-frontend/src/types/announcements.ts
@@ -92,7 +92,13 @@ export type AnnouncementFormValue = Pick<
   Announcement,
   'title' | 'description' | 'published_on' | 'expires_on' | 'status'
 > & {
+  announcement_id?: string;
   no_expiry?: boolean;
   linkUrl?: string;
   linkDisplayName?: string;
 };
+
+export enum AnnouncementFormMode {
+  CREATE = 'create',
+  EDIT = 'edit',
+}