fix: Update label from 'Publish On' to 'Active On' in AnnouncementsPa…

…ge and Announcement Form (#728)
bcgov · Sep 6, 2024 · db60c7f · db60c7f
1 parent 33f1b03
commit db60c7f
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 15 deletions.
diff --git a/admin-frontend/src/components/AnnouncementsPage.vue b/admin-frontend/src/components/AnnouncementsPage.vue
@@ -202,7 +202,7 @@ const headers = ref<any>([
     key: AnnouncementKeys.TITLE,
   },
   {
-    title: 'Publish On',
+    title: 'Active On',
     align: 'start',
     sortable: true,
     key: AnnouncementKeys.PUBLISH_DATE,

diff --git a/admin-frontend/src/components/__tests__/AddAnnouncementPage.spec.ts b/admin-frontend/src/components/__tests__/AddAnnouncementPage.spec.ts
@@ -87,7 +87,7 @@ describe('AddAnnouncementPage', () => {
     expect(getByRole('button', { name: 'Save' })).toBeInTheDocument();
     expect(getByLabelText('Title')).toBeInTheDocument();
     expect(getByLabelText('Description')).toBeInTheDocument();
-    expect(getByLabelText('Publish On')).toBeInTheDocument();
+    expect(getByLabelText('Active On')).toBeInTheDocument();
     expect(getByLabelText('Expires On')).toBeInTheDocument();
     expect(getByRole('checkbox', { name: 'No expiry' })).toBeInTheDocument();
     expect(getByLabelText('Link URL')).toBeInTheDocument();
@@ -102,7 +102,7 @@ describe('AddAnnouncementPage', () => {
     const displayLinkAs = getByLabelText('Display URL As');
     await fireEvent.update(title, 'Test Title');
     await fireEvent.update(description, 'Test Description');
-    const publishOn = getByLabelText('Publish On');
+    const publishOn = getByLabelText('Active On');
     const publishDate = formatDate(LocalDate.now());
     await setDate(publishOn, () => {
       return getByLabelText(publishDate);
@@ -174,7 +174,7 @@ describe('AddAnnouncementPage', () => {
       await fireEvent.update(description, 'Test Description');
       await fireEvent.update(linkUrl, 'https://example.com');
       await fireEvent.update(displayLinkAs, 'Example.pdf');
-      const publishOn = getByLabelText('Publish On');
+      const publishOn = getByLabelText('Active On');
       const publishDate = formatDate(LocalDate.now());
       await setDate(publishOn, () => {
         return getByLabelText(publishDate);
@@ -197,7 +197,7 @@ describe('AddAnnouncementPage', () => {
     const displayLinkAs = getByLabelText('Display URL As');
     await fireEvent.update(title, 'Test Title');
     await fireEvent.update(description, 'Test Description');
-    const publishOn = getByLabelText('Publish On');
+    const publishOn = getByLabelText('Active On');
     const publishDate = formatDate(LocalDate.now());
     await setDate(publishOn, () => {
       return getByLabelText(publishDate);
@@ -298,7 +298,7 @@ describe('AddAnnouncementPage', () => {
         const linkUrl = getByLabelText('Link URL');
         await fireEvent.update(title, 'Test Title');
         await fireEvent.update(description, 'Test Description');
-        const publishOn = getByLabelText('Publish On');
+        const publishOn = getByLabelText('Active On');
         const publishDate = formatDate(LocalDate.now());
         await setDate(publishOn, () => {
           return getByLabelText(publishDate);
@@ -325,7 +325,7 @@ describe('AddAnnouncementPage', () => {
         const displayLinkAs = getByLabelText('Display URL As');
         await fireEvent.update(title, 'Test Title');
         await fireEvent.update(description, 'Test Description');
-        const publishOn = getByLabelText('Publish On');
+        const publishOn = getByLabelText('Active On');
         const publishDate = formatDate(LocalDate.now());
         await setDate(publishOn, () => {
           return getByLabelText(publishDate);
@@ -357,7 +357,7 @@ describe('AddAnnouncementPage', () => {
         const displayLinkAs = getByLabelText('Display URL As');
         await fireEvent.update(title, 'Test Title');
         await fireEvent.update(description, 'Test Description');
-        const publishOn = getByLabelText('Publish On');
+        const publishOn = getByLabelText('Active On');
         const publishDate = formatDate(LocalDate.now());
         await setDate(publishOn, () => {
           return getByLabelText(publishDate);
@@ -384,7 +384,7 @@ describe('AddAnnouncementPage', () => {
         const displayLinkAs = getByLabelText('Display URL As');
         await fireEvent.update(title, 'Test Title');
         await fireEvent.update(description, 'Test Description');
-        const publishOn = getByLabelText('Publish On');
+        const publishOn = getByLabelText('Active On');
         const publishDate = formatDate(LocalDate.now());
         await setDate(publishOn, () => {
           return getByLabelText(publishDate);
@@ -412,7 +412,7 @@ describe('AddAnnouncementPage', () => {
         const fileName = getByLabelText('Display File Link As');
         await fireEvent.update(title, 'Test Title');
         await fireEvent.update(description, 'Test Description');
-        const publishOn = getByLabelText('Publish On');
+        const publishOn = getByLabelText('Active On');
         const publishDate = formatDate(LocalDate.now());
         await setDate(publishOn, () => {
           return getByLabelText(publishDate);
@@ -440,7 +440,7 @@ describe('AddAnnouncementPage', () => {
         const displayLinkAs = getByLabelText('Display URL As');
         await fireEvent.update(title, 'Test Title');
         await fireEvent.update(description, 'Test Description');
-        const publishOn = getByLabelText('Publish On');
+        const publishOn = getByLabelText('Active On');
         const publishDate = formatDate(LocalDate.now());
         await setDate(publishOn, () => {
           return getByLabelText(publishDate);
@@ -531,7 +531,7 @@ describe('AddAnnouncementPage', () => {
       const displayLinkAs = getByLabelText('Display URL As');
       await fireEvent.update(title, 'Test Title');
       await fireEvent.update(description, 'Test Description');
-      const publishOn = getByLabelText('Publish On');
+      const publishOn = getByLabelText('Active On');
       const publishDate = formatDate(LocalDate.now());
       await setDate(publishOn, () => {
         return getByLabelText(publishDate);

diff --git a/admin-frontend/src/components/__tests__/EditAnnouncementPage.spec.ts b/admin-frontend/src/components/__tests__/EditAnnouncementPage.spec.ts
@@ -8,6 +8,7 @@ import * as directives from 'vuetify/directives';
 import { useAnnouncementSelectionStore } from '../../store/modules/announcementSelectionStore';
 import EditAnnouncementPage from '../EditAnnouncementPage.vue';
 import { AnnouncementResourceType } from '../../types/announcements';
+import { convert, LocalDate } from '@js-joda/core';
 
 global.ResizeObserver = require('resize-observer-polyfill');
 
@@ -124,6 +125,39 @@ describe('EditAnnouncementPage', () => {
       });
     });
 
+    describe('when expires_on is in the past', () => {
+      it('should show error message', async () => {
+        store.setAnnouncement({
+          announcement_id: '1',
+          title: 'title',
+          description: 'description',
+          published_on: new Date(),
+          expires_on: convert(LocalDate.now().minusDays(1)).toDate(),
+          status: 'PUBLISHED',
+          announcement_resource: [
+            {
+              resource_type: 'LINK',
+              display_name: 'link',
+              resource_url: 'https://example.com',
+            },
+          ],
+        } as any);
+        const { getByText, getByLabelText, getByRole } = await wrappedRender();
+        expect(getByLabelText('Publish')).toBeChecked();
+        expect(getByLabelText('Title')).toHaveValue('title');
+        expect(getByLabelText('Description')).toHaveValue('description');
+        const saveButton = getByRole('button', { name: 'Save' });
+        await fireEvent.click(saveButton);
+        await waitFor(() => {
+          expect(
+            getByText(
+              'Expires On date cannot be in the past. Please choose another date.',
+            ),
+          ).toBeVisible();
+        });
+      });
+    });
+
     describe('when announcement is updated', () => {
       it('should show success notification', async () => {
         store.setAnnouncement({
@@ -144,7 +178,7 @@ describe('EditAnnouncementPage', () => {
         expect(getByLabelText('Publish')).toBeChecked();
         expect(getByLabelText('Title')).toHaveValue('title');
         expect(getByLabelText('Description')).toHaveValue('description');
-        
+
         const noExpiry = getByRole('checkbox', { name: 'No expiry' });
         await fireEvent.click(noExpiry);
         const saveButton = getByRole('button', { name: 'Save' });

diff --git a/admin-frontend/src/components/announcements/AnnouncementForm.vue b/admin-frontend/src/components/announcements/AnnouncementForm.vue
@@ -103,7 +103,7 @@
                         'text-error': errors.published_on != null,
                       }"
                     >
-                      Publish On
+                      Active On
                     </p>
                   </v-col>
                   <v-col cols="6">
@@ -114,7 +114,8 @@
                       :enable-time-picker="true"
                       arrow-navigation
                       auto-apply
-                      :aria-labels="{ input: 'Publish On' }"
+                      :disabled="announcement?.status === 'PUBLISHED'"
+                      :aria-labels="{ input: 'Active On' }"
                     >
                       <template #day="{ day, date }">
                         <span :aria-label="formatDate(date)">
@@ -493,6 +494,19 @@ const { handleSubmit, setErrors, errors, meta, values } = useForm({
 
       return true;
     },
+    expires_on(value) {
+      debugger
+      if (!value) {
+        return true;
+      }
+
+      const expiryDate = LocalDate.from(nativeJs(value));
+      if (expiryDate.isBefore(LocalDate.now())) {
+        return 'Expires On date cannot be in the past. Please choose another date.';
+      }
+
+      return true;
+    },
     async attachment(value) {
       if (!value) return true;
       try {