Skip to content

Commit

Permalink
feat: admin announcement preview updates (#656)
Browse files Browse the repository at this point in the history
  • Loading branch information
banders authored Aug 16, 2024
1 parent 752f02c commit f94309a
Show file tree
Hide file tree
Showing 7 changed files with 64 additions and 30 deletions.
7 changes: 5 additions & 2 deletions admin-frontend/src/components/AddAnnouncementPage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
7 changes: 5 additions & 2 deletions admin-frontend/src/components/EditAnnouncementPage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
@@ -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');

Expand Down Expand Up @@ -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(),
Expand Down Expand Up @@ -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(),
Expand Down
35 changes: 28 additions & 7 deletions admin-frontend/src/components/announcements/AnnouncementForm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -227,6 +238,7 @@ import {
Announcement,
AnnouncementFilterType,
AnnouncementSortType,
AnnouncementFormMode,
} from '../../types/announcements';
import { useField, useForm } from 'vee-validate';
import * as zod from 'zod';
Expand All @@ -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;
Expand All @@ -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: {
Expand Down Expand Up @@ -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,
];
}
Expand Down Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
@@ -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();
Expand Down Expand Up @@ -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),
Expand All @@ -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',
Expand All @@ -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',
Expand Down
20 changes: 10 additions & 10 deletions admin-frontend/src/store/modules/announcementSelectionStore.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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
Expand All @@ -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 {
Expand Down
6 changes: 6 additions & 0 deletions admin-frontend/src/types/announcements.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
}

0 comments on commit f94309a

Please sign in to comment.