From 3ab48c4c8cda6bff320fb9b2752eb8707d5db7ac Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 20 Jun 2023 17:22:47 +0200
Subject: [PATCH 01/40] create BroadcastContainer component

---
 .../Broadcasts/BroadcastContainer.vue         | 121 ++++++++++++++++++
 .../Broadcasts/BroadcastsOverlay.vue          | 117 +----------------
 2 files changed, 125 insertions(+), 113 deletions(-)
 create mode 100644 client/src/components/Notifications/Broadcasts/BroadcastContainer.vue

diff --git a/client/src/components/Notifications/Broadcasts/BroadcastContainer.vue b/client/src/components/Notifications/Broadcasts/BroadcastContainer.vue
new file mode 100644
index 000000000000..7fd269e2f888
--- /dev/null
+++ b/client/src/components/Notifications/Broadcasts/BroadcastContainer.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faInfoCircle, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton } from "bootstrap-vue";
+import { PropType } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import { useMarkdown } from "@/composables/markdown";
+import { type BroadcastNotification, useBroadcastsStore } from "@/stores/broadcastsStore";
+
+import Heading from "@/components/Common/Heading.vue";
+
+library.add(faInfoCircle, faTimes);
+
+const props = defineProps({
+    broadcast: {
+        type: Object as PropType<BroadcastNotification>,
+        required: true,
+    },
+    previewMode: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const router = useRouter();
+const broadcastsStore = useBroadcastsStore();
+const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true });
+
+function getBroadcastVariant(item: BroadcastNotification) {
+    switch (item.variant) {
+        case "urgent":
+            return "danger";
+        default:
+            return item.variant;
+    }
+}
+
+function onActionClick(item: BroadcastNotification, link: string) {
+    if (link.startsWith("/")) {
+        router.push(link);
+    } else {
+        window.open(link, "_blank");
+    }
+    props.previewMode && broadcastsStore.dismissBroadcast(item);
+}
+</script>
+
+<template>
+    <BRow
+        align-v="center"
+        class="broadcast-banner m-0"
+        :class="{ 'non-urgent': broadcast.variant !== 'urgent', 'fixed-position': !previewMode }">
+        <BCol cols="auto">
+            <FontAwesomeIcon
+                class="mx-2"
+                fade
+                size="2xl"
+                :class="`text-${getBroadcastVariant(broadcast)}`"
+                :icon="faInfoCircle" />
+        </BCol>
+        <BCol>
+            <BRow align-v="center">
+                <Heading size="md" bold>
+                    {{ broadcast.content.subject }}
+                </Heading>
+            </BRow>
+            <BRow align-v="center">
+                <span class="broadcast-message" v-html="renderMarkdown(broadcast.content.message)" />
+            </BRow>
+            <BRow>
+                <BButton
+                    v-for="actionLink in broadcast.content.action_links"
+                    :key="actionLink.action_name"
+                    class="mx-1"
+                    :title="actionLink.action_name"
+                    variant="primary"
+                    @click="onActionClick(broadcast, actionLink.link)">
+                    {{ actionLink.action_name }}
+                </BButton>
+            </BRow>
+        </BCol>
+        <BCol v-if="!previewMode" cols="auto" align-self="center" class="p-0">
+            <BButton
+                variant="light"
+                class="align-items-center d-flex"
+                @click="broadcastsStore.dismissBroadcast(broadcast)">
+                <FontAwesomeIcon class="mx-1" icon="times" />
+                Dismiss
+            </BButton>
+        </BCol>
+    </BRow>
+</template>
+
+<style lang="scss" scoped>
+.broadcast-banner {
+    width: 100%;
+    color: white;
+    display: flex;
+    z-index: 9999;
+    padding: 1rem;
+    min-height: 6rem;
+    backdrop-filter: blur(0.2rem);
+    justify-content: space-between;
+    background-color: rgb(0, 0, 0, 0.7);
+    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5);
+
+    .broadcast-message {
+        font-size: large;
+    }
+}
+
+.fixed-position {
+    position: fixed;
+}
+
+.non-urgent {
+    bottom: 0;
+}
+</style>
diff --git a/client/src/components/Notifications/Broadcasts/BroadcastsOverlay.vue b/client/src/components/Notifications/Broadcasts/BroadcastsOverlay.vue
index e1af53357fb4..f47467442446 100644
--- a/client/src/components/Notifications/Broadcasts/BroadcastsOverlay.vue
+++ b/client/src/components/Notifications/Broadcasts/BroadcastsOverlay.vue
@@ -1,135 +1,26 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faInfoCircle, faTimes } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
-import { useRouter } from "vue-router/composables";
 
-import { useMarkdown } from "@/composables/markdown";
 import { type BroadcastNotification, useBroadcastsStore } from "@/stores/broadcastsStore";
 
-import Heading from "@/components/Common/Heading.vue";
+import BroadcastContainer from "@/components/Notifications/Broadcasts/BroadcastContainer.vue";
 
-library.add(faInfoCircle, faTimes);
-
-const router = useRouter();
-
-const broadcastsStore = useBroadcastsStore();
 const { activeBroadcasts } = storeToRefs(useBroadcastsStore());
-const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true });
 
 const currentBroadcast = computed(() => getNextActiveBroadcast());
 
-const remainingBroadcastsCountText = computed(() => {
-    const count = activeBroadcasts.value.length - 1;
-    return count > 0 ? `${count} more` : "";
-});
-
-function getNextActiveBroadcast(): BroadcastNotification | undefined {
-    return activeBroadcasts.value.sort(sortByPublicationTime).at(0);
-}
-
 function sortByPublicationTime(a: BroadcastNotification, b: BroadcastNotification) {
     return new Date(a.publication_time).getTime() - new Date(b.publication_time).getTime();
 }
 
-function getBroadcastVariant(item: BroadcastNotification) {
-    switch (item.variant) {
-        case "urgent":
-            return "danger";
-        default:
-            return item.variant;
-    }
-}
-
-function onActionClick(item: BroadcastNotification, link: string) {
-    if (link.startsWith("/")) {
-        router.push(link);
-    } else {
-        window.open(link, "_blank");
-    }
-    onDismiss(item);
-}
-
-function onDismiss(item: BroadcastNotification) {
-    broadcastsStore.dismissBroadcast(item);
+function getNextActiveBroadcast(): BroadcastNotification | undefined {
+    return activeBroadcasts.value.sort(sortByPublicationTime).at(0);
 }
 </script>
 
 <template>
     <div v-if="currentBroadcast">
-        <BRow
-            align-v="center"
-            class="broadcast-banner m-0"
-            :class="{ 'non-urgent': currentBroadcast.variant !== 'urgent' }">
-            <BCol cols="auto">
-                <FontAwesomeIcon
-                    class="mx-2"
-                    size="2xl"
-                    :class="`text-${getBroadcastVariant(currentBroadcast)}`"
-                    :icon="faInfoCircle" />
-            </BCol>
-            <BCol>
-                <BRow align-v="center">
-                    <Heading size="md" bold>
-                        {{ currentBroadcast.content.subject }}
-                    </Heading>
-                </BRow>
-                <BRow align-v="center">
-                    <span class="broadcast-message" v-html="renderMarkdown(currentBroadcast.content.message)" />
-                </BRow>
-                <BRow>
-                    <div v-if="currentBroadcast.content.action_links">
-                        <BButton
-                            v-for="actionLink in currentBroadcast.content.action_links"
-                            :key="actionLink.action_name"
-                            :title="actionLink.action_name"
-                            variant="primary"
-                            @click="onActionClick(currentBroadcast, actionLink.link)">
-                            {{ actionLink.action_name }}
-                        </BButton>
-                    </div>
-                </BRow>
-            </BCol>
-            <BCol cols="auto" align-self="center" class="p-0">
-                <BButton
-                    id="dismiss-button"
-                    variant="light"
-                    class="align-items-center d-flex"
-                    @click="onDismiss(currentBroadcast)">
-                    <FontAwesomeIcon class="mx-1" icon="times" />
-                    Dismiss
-                </BButton>
-                <div v-if="remainingBroadcastsCountText" class="text-center mt-2">
-                    {{ remainingBroadcastsCountText }}...
-                </div>
-            </BCol>
-        </BRow>
+        <BroadcastContainer :options="{ currentBroadcast }" />
     </div>
 </template>
-
-<style lang="scss" scoped>
-.broadcast-banner {
-    width: 100%;
-    color: white;
-    display: flex;
-    z-index: 9999;
-    padding: 1rem;
-    position: fixed;
-    min-height: 6rem;
-    backdrop-filter: blur(0.2rem);
-    justify-content: space-between;
-    background-color: rgb(0, 0, 0, 0.7);
-    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5);
-
-    .broadcast-message {
-        font-size: large;
-    }
-}
-
-.non-urgent {
-    bottom: 0;
-}
-</style>

From a9e4125ff072dc3a315b975982a411139e9d60ab Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 20 Jun 2023 17:23:45 +0200
Subject: [PATCH 02/40] add disabled prop to AsyncButton

---
 client/src/components/Common/AsyncButton.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Common/AsyncButton.vue b/client/src/components/Common/AsyncButton.vue
index f9f2691cd39c..2d6ccd4881e7 100644
--- a/client/src/components/Common/AsyncButton.vue
+++ b/client/src/components/Common/AsyncButton.vue
@@ -29,6 +29,11 @@ const props = defineProps({
         required: false,
         default: "link",
     },
+    disabled: {
+        type: Boolean,
+        required: false,
+        default: false,
+    },
 });
 
 async function onClick() {
@@ -44,7 +49,7 @@ async function onClick() {
         :title="title"
         :size="size"
         :variant="variant"
-        :disabled="loading"
+        :disabled="loading || disabled"
         @click="onClick">
         <span v-if="loading" class="loading-icon fa fa-spinner fa-spin" title="loading"></span>
         <FontAwesomeIcon v-else :icon="props.icon" @click="onClick" />

From 533cd8adce85caad288ebb519412a15b7d07365a Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 20 Jun 2023 17:25:11 +0200
Subject: [PATCH 03/40] create broadcasts.services for admin panel

---
 .../Notifications/broadcasts.services.ts      | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 client/src/components/admin/Notifications/broadcasts.services.ts

diff --git a/client/src/components/admin/Notifications/broadcasts.services.ts b/client/src/components/admin/Notifications/broadcasts.services.ts
new file mode 100644
index 000000000000..a62dbb267363
--- /dev/null
+++ b/client/src/components/admin/Notifications/broadcasts.services.ts
@@ -0,0 +1,29 @@
+import { type components, fetcher } from "@/schema";
+
+type BroadcastNotificationResponse = components["schemas"]["BroadcastNotificationResponse"];
+
+const getBroadcast = fetcher.path("/api/notifications/broadcast/{notification_id}").method("get").create();
+export async function loadBroadcast(id: string): Promise<BroadcastNotificationResponse> {
+    const { data } = await getBroadcast({ notification_id: id });
+    return data;
+}
+
+const getBroadcasts = fetcher.path("/api/notifications/broadcast").method("get").create();
+export async function loadBroadcasts(): Promise<BroadcastNotificationResponse[]> {
+    const { data } = await getBroadcasts({});
+    return data;
+}
+
+const postBroadcast = fetcher.path("/api/notifications/broadcast").method("post").create();
+type BroadcastNotificationCreateRequest = components["schemas"]["BroadcastNotificationCreateRequest"];
+export async function createBroadcast(broadcast: BroadcastNotificationCreateRequest) {
+    const { data } = await postBroadcast(broadcast);
+    return data;
+}
+
+const putBroadcast = fetcher.path("/api/notifications/broadcast/{notification_id}").method("put").create();
+type NotificationBroadcastUpdateRequest = components["schemas"]["NotificationBroadcastUpdateRequest"];
+export async function updateBroadcast(id: string, broadcast: NotificationBroadcastUpdateRequest) {
+    const { data } = await putBroadcast({ notification_id: id, ...broadcast });
+    return data;
+}

From 500235ebd38ef3fde5d3eff7b8a3398b97d2c83b Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 20 Jun 2023 17:29:14 +0200
Subject: [PATCH 04/40] create BroadcastForm to create new/edit a broadcast

---
 .../admin/Notifications/BroadcastForm.vue     | 230 ++++++++++++++++++
 1 file changed, 230 insertions(+)
 create mode 100644 client/src/components/admin/Notifications/BroadcastForm.vue

diff --git a/client/src/components/admin/Notifications/BroadcastForm.vue b/client/src/components/admin/Notifications/BroadcastForm.vue
new file mode 100644
index 000000000000..dea492ede22f
--- /dev/null
+++ b/client/src/components/admin/Notifications/BroadcastForm.vue
@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import Vue, { computed, ref } from "vue";
+import { type components } from "@/schema";
+import { Toast } from "@/composables/toast";
+import { useRouter } from "vue-router/composables";
+import Heading from "@/components/Common/Heading.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+import FormElement from "@/components/Form/FormElement.vue";
+import AsyncButton from "@/components/Common/AsyncButton.vue";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import BroadcastContainer from "@/components/Notifications/Broadcasts/BroadcastContainer.vue";
+import { createBroadcast, loadBroadcast, updateBroadcast } from "@/components/admin/Notifications/broadcasts.services";
+
+type BroadcastNotificationCreateRequest = components["schemas"]["BroadcastNotificationCreateRequest"];
+
+const props = defineProps({
+    id: {
+        type: String,
+        default: null,
+    },
+});
+
+const router = useRouter();
+
+const title = computed(() => {
+    if (props.id) {
+        return "Edit Broadcast";
+    } else {
+        return "New Broadcast";
+    }
+});
+
+const loading = ref(false);
+const broadcast = ref<BroadcastNotificationCreateRequest>({
+    source: "admin",
+    variant: "info",
+    content: {
+        subject: "",
+        message: "",
+    },
+});
+
+const requiredFieldsFilled = computed(() => {
+    return broadcast.value.content.subject !== "" && broadcast.value.content.message !== "";
+});
+
+function addActionLink() {
+    if (!broadcast.value.content.action_links) {
+        Vue.set(broadcast.value.content, "action_links", []);
+    }
+
+    broadcast.value.content.action_links?.push({
+        action_name: "",
+        link: "",
+    });
+}
+
+async function createOrUpdateBroadcast() {
+    try {
+        if (props.id) {
+            await updateBroadcast(props.id, broadcast.value);
+            Toast.success("Broadcast updated");
+        } else {
+            await createBroadcast(broadcast.value);
+            Toast.success("Broadcast created");
+        }
+        router.push("/admin/notifications/");
+    } catch (error: any) {
+        Toast.error(error.err_msg);
+    }
+}
+
+async function loadBroadcastData() {
+    if (props.id) {
+        loading.value = true;
+        try {
+            broadcast.value = await loadBroadcast(props.id);
+        } catch (error: any) {
+            Toast.error(error.err_msg);
+        }
+        loading.value = false;
+    }
+}
+loadBroadcastData();
+</script>
+
+<template>
+    <div>
+        <Heading> {{ title }} </Heading>
+
+        <BAlert v-if="loading" show>
+            <LoadingSpan message="Loading broadcast" />
+        </BAlert>
+
+        <div v-else>
+            <FormElement
+                id="broadcast-subject"
+                v-model="broadcast.content.subject"
+                type="text"
+                title="Subject"
+                :optional="false"
+                help="This will be displayed in the broadcast banner. It should be short and to the point."
+                placeholder="Enter subject"
+                required />
+
+            <FormElement
+                id="broadcast-variant"
+                v-model="broadcast.variant"
+                type="select"
+                title="Variant"
+                :optional="false"
+                help="This will determine the position and the icon of the broadcast banner. Urgent broadcasts will be displayed at the top of the page otherwise they will be displayed at the bottom."
+                :options="[
+                    ['Info', 'info'],
+                    ['Warning', 'warning'],
+                    ['Urgent', 'urgent'],
+                ]" />
+
+            <FormElement
+                id="broadcast-message"
+                v-model="broadcast.content.message"
+                type="text"
+                title="Message"
+                :optional="false"
+                help="The message can be written in markdown."
+                placeholder="Enter message"
+                required />
+
+            <BFormGroup id="broadcast-action-link-group" label="Action Links" label-for="broadcast-action-link">
+                <BRow
+                    v-for="(actionLink, index) in broadcast.content.action_links"
+                    :key="actionLink.action_name"
+                    class="my-2">
+                    <BCol cols="auto">
+                        <BFormInput
+                            :id="`broadcast-action-link-name-${{ index }}`"
+                            v-model="actionLink.action_name"
+                            type="text"
+                            placeholder="Enter action name"
+                            required />
+                    </BCol>
+                    <BCol>
+                        <BFormInput
+                            :id="`broadcast-action-link-link-${{ index }}`"
+                            v-model="actionLink.link"
+                            type="url"
+                            placeholder="Enter action link"
+                            required />
+                    </BCol>
+                    <BCol cols="auto">
+                        <BButton
+                            :id="`delete-action-link-${{ index }}}`"
+                            v-b-tooltip.hover.bottom
+                            title="Delete action link"
+                            variant="error-outline"
+                            role="button"
+                            @click="
+                                broadcast.content.action_links.splice(
+                                    broadcast.content.action_links.indexOf(actionLink),
+                                    1
+                                )
+                            ">
+                            <FontAwesomeIcon icon="times" />
+                        </BButton>
+                    </BCol>
+                </BRow>
+
+                <BButton
+                    id="create-action-link"
+                    title="Add new action link"
+                    variant="outline-primary"
+                    role="button"
+                    @click="addActionLink">
+                    <FontAwesomeIcon icon="plus" />
+                    Add action link
+                </BButton>
+            </BFormGroup>
+
+            <BRow align-v="center">
+                <BCol>
+                    <BFormGroup
+                        id="broadcast-publication-time-group"
+                        label="Publication Time"
+                        label-for="broadcast-publication-time"
+                        description="The broadcast will be displayed from this time onwards. Default is the time of creation.">
+                        <BFormInput
+                            id="broadcast-publication-time"
+                            :value.sync="broadcast.publication_time"
+                            type="datetime-local"
+                            placeholder="Enter publication time"
+                            required />
+                    </BFormGroup>
+                </BCol>
+                <BCol>
+                    <BFormGroup
+                        id="broadcast-expiration-time-group"
+                        label="Expiration Time"
+                        label-for="broadcast-expiration-time"
+                        description="The broadcast will not be displayed and will be deleted from the database after this time. Default is 6 months from the creation time.">
+                        <BFormInput
+                            id="broadcast-expiration-time"
+                            v-model="broadcast.expiration_time"
+                            type="datetime-local"
+                            placeholder="Enter expiration time"
+                            required />
+                    </BFormGroup>
+                </BCol>
+            </BRow>
+
+            <BRow align-v="center" class="m-1">
+                <Heading size="md"> Preview </Heading>
+            </BRow>
+
+            <BroadcastContainer :broadcast="broadcast" preview-mode />
+
+            <BRow class="m-2" align-h="center">
+                <AsyncButton
+                    icon="save"
+                    :title="!requiredFieldsFilled ? 'Please fill all required fields' : ''"
+                    variant="primary"
+                    size="md"
+                    :disabled="!requiredFieldsFilled"
+                    :action="createOrUpdateBroadcast">
+                    <span v-if="props.id" v-localize> Update Broadcast </span>
+                    <span v-else v-localize> Create Broadcast </span>
+                </AsyncButton>
+            </BRow>
+        </div>
+    </div>
+</template>

From c1b33f08b0ae7373fbc1194e844e37b1b12af20c Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 20 Jun 2023 17:30:49 +0200
Subject: [PATCH 05/40] create BroadcastsList that shows all broadcasts with
 delete and edit actions

---
 .../admin/Notifications/BroadcastsList.vue    | 178 ++++++++++++++++++
 1 file changed, 178 insertions(+)
 create mode 100644 client/src/components/admin/Notifications/BroadcastsList.vue

diff --git a/client/src/components/admin/Notifications/BroadcastsList.vue b/client/src/components/admin/Notifications/BroadcastsList.vue
new file mode 100644
index 000000000000..f03f71705e73
--- /dev/null
+++ b/client/src/components/admin/Notifications/BroadcastsList.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { type components } from "@/schema";
+import { Toast } from "@/composables/toast";
+import UtcDate from "@/components/UtcDate.vue";
+import { useRouter } from "vue-router/composables";
+import { useMarkdown } from "@/composables/markdown";
+import Heading from "@/components/Common/Heading.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { useConfirmDialog } from "@/composables/confirmDialog";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BroadcastNotification } from "@/stores/broadcastsStore";
+import { loadBroadcasts, updateBroadcast } from "@/components/admin/Notifications/broadcasts.services";
+import { faBroadcastTower, faClock, faEdit, faHourglassHalf, faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+
+library.add(faBroadcastTower, faClock, faEdit, faHourglassHalf, faInfoCircle);
+
+type BroadcastNotificationResponse = components["schemas"]["BroadcastNotificationResponse"];
+
+const router = useRouter();
+const { confirm } = useConfirmDialog();
+const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true });
+
+const loadingBroadcasts = ref(false);
+const broadcasts = ref<BroadcastNotificationResponse[]>([]);
+
+function getBroadcastVariant(item: BroadcastNotification) {
+    switch (item.variant) {
+        case "urgent":
+            return "danger";
+        default:
+            return item.variant;
+    }
+}
+
+function broadcastPublished(item: BroadcastNotification) {
+    return new Date(item.publication_time) < new Date();
+}
+
+function onEditClick(item: BroadcastNotification) {
+    router.push(`/admin/notifications/edit_broadcast/${item.id}`);
+}
+
+async function deleteBroadcast(item: BroadcastNotification) {
+    const confirmed = await confirm("Are you sure you want to delete this broadcast?", "Delete broadcast");
+    if (confirmed) {
+        await updateBroadcast(item.id, { expiration_time: new Date().toISOString().slice(0, 23) });
+        await loadBroadcastsList();
+        Toast.info("Broadcast marked as expired and will be removed from the database");
+    }
+}
+
+function getBroadcastPublicity(item: BroadcastNotification) {
+    if (broadcastPublished(item)) {
+        return `Published on ${new Date(item.publication_time + "Z").toLocaleString()}`;
+    } else {
+        return `Scheduled to publish on ${new Date(item.publication_time + "Z").toLocaleString()}`;
+    }
+}
+
+function getBroadcastExpiry(item: BroadcastNotification) {
+    if (item.expiration_time) {
+        return `Expires on ${new Date(item.expiration_time + "Z").toLocaleString()}`;
+    } else {
+        return "Does not expire";
+    }
+}
+
+function onActionClick(item: BroadcastNotification, link: string) {
+    if (link.startsWith("/")) {
+        router.push(link);
+    } else {
+        window.open(link, "_blank");
+    }
+}
+
+async function loadBroadcastsList() {
+    loadingBroadcasts.value = true;
+    broadcasts.value = await loadBroadcasts();
+    broadcasts.value.sort((a, b) => new Date(b.create_time).getTime() - new Date(a.create_time).getTime());
+    loadingBroadcasts.value = false;
+}
+loadBroadcastsList();
+</script>
+
+<template>
+    <div>
+        <Heading size="md" class="mb-2"> Broadcasts list </Heading>
+
+        <BAlert v-if="loadingBroadcasts" variant="info" show>
+            <LoadingSpan message="Loading broadcasts" />
+        </BAlert>
+
+        <BAlert v-else-if="broadcasts.length === 0" variant="info" show>
+            No broadcasts to show. Use the button above to create a new broadcast.
+        </BAlert>
+
+        <div v-else class="mx-1">
+            <BCard v-for="broadcast in broadcasts" :key="broadcast.id" class="mb-2">
+                <BRow align-v="center" align-h="between" class="mb-0 mx-0">
+                    <Heading size="md" class="mb-0">
+                        <FontAwesomeIcon :class="`text-${getBroadcastVariant(broadcast)}`" :icon="faInfoCircle" />
+                        {{ broadcast.content.subject }}
+                    </Heading>
+                    <BRow align-h="end" align-v="center">
+                        <UtcDate class="mx-2" :date="broadcast.create_time" mode="elapsed" />
+                        <BInputGroup>
+                            <BButton
+                                id="edit-broadcast-button"
+                                v-b-tooltip.hover
+                                variant="link"
+                                title="Edit broadcast"
+                                @click="onEditClick(broadcast)">
+                                <FontAwesomeIcon :icon="faEdit" />
+                            </BButton>
+                            <BButton
+                                id="delete-button"
+                                v-b-tooltip.hover
+                                variant="link"
+                                title="Delete broadcast"
+                                @click="() => deleteBroadcast(broadcast)">
+                                <FontAwesomeIcon icon="trash" />
+                            </BButton>
+                        </BInputGroup>
+                    </BRow>
+                </BRow>
+
+                <BRow align-v="center" align-h="between" class="mx-0">
+                    <BCol>
+                        <BRow align-v="center">
+                            <span class="broadcast-message" v-html="renderMarkdown(broadcast.content.message)" />
+                        </BRow>
+                        <BRow>
+                            <BButton
+                                v-for="actionLink in broadcast.content.action_links"
+                                :key="actionLink.action_name"
+                                class="mx-1"
+                                :title="actionLink.action_name"
+                                variant="primary"
+                                @click="onActionClick(broadcast, actionLink.link)">
+                                {{ actionLink.action_name }}
+                            </BButton>
+                        </BRow>
+                    </BCol>
+                    <BCol>
+                        <BRow align-v="center" align-h="end">
+                            <FontAwesomeIcon
+                                :icon="broadcastPublished(broadcast) ? faBroadcastTower : faClock"
+                                :class="broadcastPublished(broadcast) ? 'published' : 'scheduled'"
+                                class="mx-1" />
+                            {{ getBroadcastPublicity(broadcast) }}
+                        </BRow>
+                        <BRow align-v="center" align-h="end">
+                            <FontAwesomeIcon :icon="faHourglassHalf" class="mx-1 expire" />
+                            {{ getBroadcastExpiry(broadcast) }}
+                        </BRow>
+                    </BCol>
+                </BRow>
+            </BCard>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@import "scss/theme/blue.scss";
+.published {
+    color: $brand-primary;
+}
+
+.scheduled {
+    color: $brand-warning;
+}
+
+.expire {
+    color: $brand-info;
+}
+</style>

From 8ed73dbd2029a9803d07bbcc60cabccc73f3a639 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 20 Jun 2023 17:34:05 +0200
Subject: [PATCH 06/40] create notifications.services for admin panel

---
 .../Notifications/notifications.services.ts   | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 client/src/components/admin/Notifications/notifications.services.ts

diff --git a/client/src/components/admin/Notifications/notifications.services.ts b/client/src/components/admin/Notifications/notifications.services.ts
new file mode 100644
index 000000000000..a2170f7479d0
--- /dev/null
+++ b/client/src/components/admin/Notifications/notifications.services.ts
@@ -0,0 +1,42 @@
+import axios from "axios";
+import { type components, fetcher } from "@/schema";
+
+const getNotification = fetcher.path("/api/notifications/{notification_id}").method("get").create();
+type NotificationResponse = components["schemas"]["NotificationResponse"];
+export async function loadNotification(id: string): Promise<NotificationResponse> {
+    const { data } = await getNotification({ notification_id: id });
+    return data;
+}
+
+const postNotification = fetcher.path("/api/notifications").method("post").create();
+type NotificationCreateRequest = components["schemas"]["NotificationCreateRequest"];
+export async function createNotification(notification: NotificationCreateRequest) {
+    const { data } = await postNotification(notification);
+    return data;
+}
+
+const putNotification = fetcher.path("/api/notifications/{notification_id}").method("put").create();
+type UserNotificationUpdateRequest = components["schemas"]["UserNotificationUpdateRequest"];
+export async function updateNotification(id: string, notification: UserNotificationUpdateRequest) {
+    const { data } = await putNotification({ notification_id: id, ...notification });
+    return data;
+}
+
+const getRolesReq = fetcher.path("/api/roles").method("get").create();
+type RoleModelResponse = components["schemas"]["RoleModelResponse"];
+export async function getRoles(): Promise<RoleModelResponse[]> {
+    const { data } = await getRolesReq({});
+    return data;
+}
+
+type GroupModel = components["schemas"]["GroupModel"];
+export async function getGroups(): Promise<GroupModel[]> {
+    const { data } = await axios.get("/api/groups");
+    return data;
+}
+
+type UserModel = components["schemas"]["UserModel"];
+export async function getUsers(): Promise<UserModel[]> {
+    const { data } = await axios.get("/api/users");
+    return data;
+}

From 9acd44d739449ec6e0225cbb5d4cc09d07b6a039 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 20 Jun 2023 17:35:02 +0200
Subject: [PATCH 07/40] create NotificationForm to create a notification

---
 .../admin/Notifications/NotificationForm.vue  | 241 ++++++++++++++++++
 1 file changed, 241 insertions(+)
 create mode 100644 client/src/components/admin/Notifications/NotificationForm.vue

diff --git a/client/src/components/admin/Notifications/NotificationForm.vue b/client/src/components/admin/Notifications/NotificationForm.vue
new file mode 100644
index 000000000000..5e7f550bc4ed
--- /dev/null
+++ b/client/src/components/admin/Notifications/NotificationForm.vue
@@ -0,0 +1,241 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { type components } from "@/schema";
+import { Toast } from "@/composables/toast";
+import { useRouter } from "vue-router/composables";
+import Heading from "@/components/Common/Heading.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+import FormElement from "@/components/Form/FormElement.vue";
+import AsyncButton from "@/components/Common/AsyncButton.vue";
+import {
+    createNotification,
+    getGroups,
+    getRoles,
+    getUsers,
+} from "@/components/admin/Notifications/notifications.services";
+
+type NotificationRecipients = components["schemas"]["NotificationRecipients"];
+
+type NotificationCreateData = {
+    source: string;
+    category: "message";
+    variant: "info" | "warning" | "urgent";
+    content: {
+        category: "message";
+        subject: string;
+        message: string;
+    };
+};
+
+const props = defineProps({
+    id: {
+        type: String,
+        default: null,
+    },
+});
+
+const router = useRouter();
+
+const loading = ref(false);
+const roles = ref<[string, string][]>([]);
+const users = ref<[string, string][]>([]);
+const groups = ref<[string, string][]>([]);
+const recipients = ref<NotificationRecipients>({
+    role_ids: [],
+    user_ids: [],
+    group_ids: [],
+});
+const notification = ref<NotificationCreateData>({
+    source: "admin",
+    category: "message",
+    variant: "info",
+    content: {
+        category: "message",
+        subject: "",
+        message: "",
+    },
+});
+
+const title = computed(() => {
+    if (props.id) {
+        return "Edit Notification";
+    } else {
+        return "New Notification";
+    }
+});
+const requiredFieldsFilled = computed(() => {
+    return (
+        notification.value.content.subject !== "" ||
+        notification.value.content.message !== "" ||
+        (recipients.value.user_ids?.length !== 0 &&
+            recipients.value.role_ids?.length !== 0 &&
+            recipients.value.group_ids?.length !== 0)
+    );
+});
+
+async function loadUsers() {
+    try {
+        const tmp = await getUsers();
+        users.value = tmp.map((user) => {
+            return [`${user.username} | ${user.email}`, user.id];
+        });
+    } catch (error: any) {
+        Toast.error(error.err_msg);
+    }
+}
+
+async function loadRoles() {
+    try {
+        const tmp = await getRoles();
+        roles.value = tmp.map((role) => {
+            return [`${role.name} | ${role.description}`, role.id];
+        });
+    } catch (error: any) {
+        Toast.error(error.err_msg);
+    }
+}
+
+async function loadGroups() {
+    try {
+        const tmp = await getGroups();
+        groups.value = tmp.map((group) => {
+            return [`${group.name}`, group.id];
+        });
+    } catch (error: any) {
+        Toast.error(error.err_msg);
+    }
+}
+
+loadUsers();
+loadRoles();
+loadGroups();
+
+async function createNewNotification() {
+    try {
+        await createNotification({
+            recipients: recipients.value,
+            notification: notification.value,
+        });
+        Toast.success("Notification created");
+        router.push("/admin/notifications");
+    } catch (error: any) {
+        Toast.error(error.err_msg);
+    }
+}
+</script>
+
+<template>
+    <div>
+        <Heading> {{ title }} </Heading>
+
+        <BAlert v-if="loading" show>
+            <LoadingSpan message="Loading notification" />
+        </BAlert>
+
+        <div v-else>
+            <FormElement
+                id="notification-subject"
+                v-model="notification.content.subject"
+                type="text"
+                title="Subject"
+                :optional="false"
+                help="This will be the subject of the notification"
+                placeholder="Enter subject"
+                required />
+
+            <FormElement
+                id="notification-message"
+                v-model="notification.content.message"
+                type="text"
+                title="Message"
+                :optional="false"
+                help="The message can be written in markdown."
+                placeholder="Enter message"
+                required />
+
+            <FormElement
+                id="notification-variant"
+                v-model="notification.variant"
+                type="select"
+                title="Variant"
+                :optional="false"
+                help="This will change the color of the notification"
+                :options="[
+                    ['Info', 'info'],
+                    ['Warning', 'warning'],
+                    ['Urgent', 'urgent'],
+                ]" />
+
+            <FormElement
+                id="notification-recipients-user-ids"
+                v-model="recipients.user_ids"
+                type="select"
+                title="User recipients"
+                help="The users that will receive the notification"
+                multiple
+                :options="users" />
+
+            <FormElement
+                id="notification-recipients-role-ids"
+                v-model="recipients.role_ids"
+                type="select"
+                title="Role recipients"
+                help="The roles that will receive the notification"
+                multiple
+                :options="roles" />
+
+            <FormElement
+                id="notification-recipients-group-ids"
+                v-model="recipients.group_ids"
+                type="select"
+                title="Group recipients"
+                help="The groups that will receive the notification"
+                multiple
+                :options="groups" />
+
+            <BRow align-v="center">
+                <BCol>
+                    <BFormGroup
+                        id="notification-publication-time-group"
+                        label="Publication Time"
+                        label-for="notification-publication-time"
+                        description="The notification will be displayed after this time. Default is the current time.">
+                        <BFormInput
+                            id="notification-publication-time"
+                            :value.sync="notification.publication_time"
+                            type="datetime-local"
+                            placeholder="Enter publication time"
+                            required />
+                    </BFormGroup>
+                </BCol>
+                <BCol>
+                    <BFormGroup
+                        id="notification-expiration-time-group"
+                        label="Expiration Time"
+                        label-for="notification-expiration-time"
+                        description="The notification will be deleted from the database after this time. Default is 6 months from the creation time.">
+                        <BFormInput
+                            id="notification-expiration-time"
+                            v-model="notification.expiration_time"
+                            type="datetime-local"
+                            placeholder="Enter expiration time"
+                            required />
+                    </BFormGroup>
+                </BCol>
+            </BRow>
+
+            <BRow class="m-2" align-h="center">
+                <AsyncButton
+                    icon="save"
+                    :title="!requiredFieldsFilled ? 'Please fill all required fields' : ''"
+                    variant="primary"
+                    size="md"
+                    :disabled="!requiredFieldsFilled"
+                    :action="createNewNotification">
+                    <span v-if="props.id" v-localize> Update Notification </span>
+                    <span v-else v-localize> Create Notification </span>
+                </AsyncButton>
+            </BRow>
+        </div>
+    </div>
+</template>

From 54d2e2c97a0d76ca050ebfe4c9b5c4861fc74e9a Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 20 Jun 2023 17:36:03 +0200
Subject: [PATCH 08/40] add admin paths for notifications and broadcasts

---
 client/src/components/admin/AdminPanel.vue    |  5 ++++
 client/src/components/admin/Home.vue          |  6 ++++
 .../src/entry/analysis/routes/admin-routes.js | 28 +++++++++++++++++++
 lib/galaxy/webapps/galaxy/buildapp.py         |  1 +
 4 files changed, 40 insertions(+)

diff --git a/client/src/components/admin/AdminPanel.vue b/client/src/components/admin/AdminPanel.vue
index 303880658037..3f654e735c0a 100644
--- a/client/src/components/admin/AdminPanel.vue
+++ b/client/src/components/admin/AdminPanel.vue
@@ -79,6 +79,11 @@ export default {
                             title: "Local Data",
                             route: "/admin/data_manager",
                         },
+                        {
+                            id: "admin-link-notifications",
+                            title: "Notifications",
+                            route: "/admin/notifications",
+                        },
                     ],
                 },
                 {
diff --git a/client/src/components/admin/Home.vue b/client/src/components/admin/Home.vue
index 459132fd328a..c0a4ced8836e 100644
--- a/client/src/components/admin/Home.vue
+++ b/client/src/components/admin/Home.vue
@@ -43,6 +43,12 @@
                 - Manage the reference (and other) data that is stored within Tool Data Tables. See
                 <a href="https://galaxyproject.org/admin/tools/data-managers" target="_blank">wiki</a> for details.
             </li>
+            <li>
+                <strong>
+                    <router-link to="/admin/notifications">Notifications and Broadcasts</router-link>
+                </strong>
+                - Manage the notifications and broadcast messages that are displayed to users.
+            </li>
         </ul>
 
         <Heading h2 icon="fa-user" size="md">User Management</Heading>
diff --git a/client/src/entry/analysis/routes/admin-routes.js b/client/src/entry/analysis/routes/admin-routes.js
index 76f97e42a8df..43b739dfac41 100644
--- a/client/src/entry/analysis/routes/admin-routes.js
+++ b/client/src/entry/analysis/routes/admin-routes.js
@@ -5,6 +5,9 @@ import DataManagerJob from "components/admin/DataManager/DataManagerJob";
 import DataManagerJobs from "components/admin/DataManager/DataManagerJobs";
 import DataManagerTable from "components/admin/DataManager/DataManagerTable";
 import DataManagerView from "components/admin/DataManager/DataManagerView";
+import NotificationsManagement from "components/admin/Notifications/NotificationsManagement";
+import BroadcastForm from "components/admin/Notifications/BroadcastForm.vue";
+import NotificationForm from "components/admin/Notifications/NotificationForm.vue";
 import DataTables from "components/admin/DataTables";
 import DataTypes from "components/admin/DataTypes";
 import ToolboxDependencies from "components/admin/Dependencies/Landing";
@@ -94,6 +97,31 @@ export default [
                 ],
             },
 
+            // notifications and broadcasts
+            {
+                path: "notifications",
+                component: NotificationsManagement,
+            },
+
+            {
+                path: "notifications/create_new_broadcast",
+                name: "NewBroadcast",
+                component: BroadcastForm,
+            },
+
+            {
+                path: "notifications/edit_broadcast/:id",
+                name: "EditBroadcast",
+                component: BroadcastForm,
+                props: true,
+            },
+
+            {
+                path: "notifications/create_new_notification",
+                name: "NewNotification",
+                component: NotificationForm,
+            },
+
             // grids
             {
                 path: "forms",
diff --git a/lib/galaxy/webapps/galaxy/buildapp.py b/lib/galaxy/webapps/galaxy/buildapp.py
index 236da06dd71d..b24bba59ce34 100644
--- a/lib/galaxy/webapps/galaxy/buildapp.py
+++ b/lib/galaxy/webapps/galaxy/buildapp.py
@@ -194,6 +194,7 @@ def app_pair(global_conf, load_app_kwds=None, wsgi_preflight=True, **kwargs):
     webapp.add_client_route("/admin/invocations")
     webapp.add_client_route("/admin/toolbox_dependencies")
     webapp.add_client_route("/admin/data_manager{path_info:.*}")
+    webapp.add_client_route("/admin/notifications{path_info:.*}")
     webapp.add_client_route("/admin/error_stack")
     webapp.add_client_route("/admin/users")
     webapp.add_client_route("/admin/users/create")

From 865148ce9248d76af66736ee789a00568a697ada Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 20 Jun 2023 17:37:17 +0200
Subject: [PATCH 09/40] create NotificationsManagement component

---
 .../Notifications/NotificationsManagement.vue | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 client/src/components/admin/Notifications/NotificationsManagement.vue

diff --git a/client/src/components/admin/Notifications/NotificationsManagement.vue b/client/src/components/admin/Notifications/NotificationsManagement.vue
new file mode 100644
index 000000000000..75d9727dd5a6
--- /dev/null
+++ b/client/src/components/admin/Notifications/NotificationsManagement.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router/composables";
+import Heading from "@/components/Common/Heading.vue";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import BroadcastsList from "@/components/admin/Notifications/BroadcastsList.vue";
+
+const router = useRouter();
+
+function goToCreateNewNotification() {
+    router.push("/admin/notifications/create_new_notification");
+}
+
+function goToCreateNewBroadcast() {
+    router.push("/admin/notifications/create_new_broadcast");
+}
+</script>
+
+<template>
+    <div aria-labelledby="notifications-managements">
+        <div class="d-flex justify-content-between">
+            <Heading id="notifications-title">Notifications and Broadcasts</Heading>
+            <div>
+                <BButton class="mb-2" variant="outline-primary" @click="goToCreateNewNotification">
+                    <FontAwesomeIcon icon="plus" />
+                    Send new notification
+                </BButton>
+                <BButton class="mb-2" variant="outline-primary" @click="goToCreateNewBroadcast">
+                    <FontAwesomeIcon icon="plus" />
+                    Create new broadcast
+                </BButton>
+            </div>
+        </div>
+
+        <BroadcastsList />
+    </div>
+</template>

From b5e9fbbaf753f4a40327cd8b1f4fdcc77187fe92 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 6 Jul 2023 15:53:33 +1000
Subject: [PATCH 10/40] Update BroadcastContainer props interface and bootstrap
 components imports

---
 .../Broadcasts/BroadcastContainer.vue         | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Notifications/Broadcasts/BroadcastContainer.vue b/client/src/components/Notifications/Broadcasts/BroadcastContainer.vue
index 7fd269e2f888..f3b16119e23e 100644
--- a/client/src/components/Notifications/Broadcasts/BroadcastContainer.vue
+++ b/client/src/components/Notifications/Broadcasts/BroadcastContainer.vue
@@ -2,8 +2,7 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faInfoCircle, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton } from "bootstrap-vue";
-import { PropType } from "vue";
+import { BButton, BCol, BRow } from "bootstrap-vue";
 import { useRouter } from "vue-router/composables";
 
 import { useMarkdown } from "@/composables/markdown";
@@ -13,16 +12,12 @@ import Heading from "@/components/Common/Heading.vue";
 
 library.add(faInfoCircle, faTimes);
 
-const props = defineProps({
-    broadcast: {
-        type: Object as PropType<BroadcastNotification>,
-        required: true,
-    },
-    previewMode: {
-        type: Boolean,
-        default: false,
-    },
-});
+interface Props {
+    previewMode?: boolean;
+    broadcast: BroadcastNotification;
+}
+
+const props = defineProps<Props>();
 
 const router = useRouter();
 const broadcastsStore = useBroadcastsStore();

From ed0e48f81f9eabbc1ab75db36d0267d34581f65d Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 7 Jul 2023 11:08:37 +1000
Subject: [PATCH 11/40] rename `createNotification` service method to
 `sendNotification`

---
 .../components/admin/Notifications/notifications.services.ts   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/admin/Notifications/notifications.services.ts b/client/src/components/admin/Notifications/notifications.services.ts
index a2170f7479d0..2b1fb6fab2c0 100644
--- a/client/src/components/admin/Notifications/notifications.services.ts
+++ b/client/src/components/admin/Notifications/notifications.services.ts
@@ -1,4 +1,5 @@
 import axios from "axios";
+
 import { type components, fetcher } from "@/schema";
 
 const getNotification = fetcher.path("/api/notifications/{notification_id}").method("get").create();
@@ -10,7 +11,7 @@ export async function loadNotification(id: string): Promise<NotificationResponse
 
 const postNotification = fetcher.path("/api/notifications").method("post").create();
 type NotificationCreateRequest = components["schemas"]["NotificationCreateRequest"];
-export async function createNotification(notification: NotificationCreateRequest) {
+export async function sendNotification(notification: NotificationCreateRequest) {
     const { data } = await postNotification(notification);
     return data;
 }

From 278f9aa7f5d611647623d288fafe8d9966d29fa7 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 7 Jul 2023 11:09:26 +1000
Subject: [PATCH 12/40] add `previewMode` in MessageNotification

---
 .../Notifications/Categories/MessageNotification.vue           | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Notifications/Categories/MessageNotification.vue b/client/src/components/Notifications/Categories/MessageNotification.vue
index 8f79f19e57cf..42cdd86322fa 100644
--- a/client/src/components/Notifications/Categories/MessageNotification.vue
+++ b/client/src/components/Notifications/Categories/MessageNotification.vue
@@ -14,6 +14,7 @@ import NotificationActions from "@/components/Notifications/NotificationActions.
 library.add(faInbox);
 
 interface Props {
+    previewMode?: boolean;
     notification: MessageNotification;
 }
 
@@ -38,7 +39,7 @@ const notificationVariant = computed(() => {
                 <FontAwesomeIcon :class="`text-${notificationVariant}`" icon="inbox" />
                 {{ notification.content.subject }}
             </Heading>
-            <NotificationActions :notification="notification" />
+            <NotificationActions v-if="!previewMode" :notification="notification" />
         </BRow>
         <BRow>
             <span id="notification-message" v-html="renderMarkdown(notification.content.message)" />

From 68295f7ddf333ecc8a00a6e9fc1f804abada02b2 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 7 Jul 2023 11:11:02 +1000
Subject: [PATCH 13/40] fix date-time format conversion in BroadcastForm

---
 .../admin/Notifications/BroadcastForm.vue     | 93 +++++++++++++------
 1 file changed, 63 insertions(+), 30 deletions(-)

diff --git a/client/src/components/admin/Notifications/BroadcastForm.vue b/client/src/components/admin/Notifications/BroadcastForm.vue
index dea492ede22f..ab2025b5a092 100644
--- a/client/src/components/admin/Notifications/BroadcastForm.vue
+++ b/client/src/components/admin/Notifications/BroadcastForm.vue
@@ -1,15 +1,21 @@
 <script setup lang="ts">
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton, BCol, BFormGroup, BFormInput, BRow } from "bootstrap-vue";
+import { format } from "date-fns";
 import Vue, { computed, ref } from "vue";
-import { type components } from "@/schema";
-import { Toast } from "@/composables/toast";
 import { useRouter } from "vue-router/composables";
+
+import { createBroadcast, loadBroadcast, updateBroadcast } from "@/components/admin/Notifications/broadcasts.services";
+import { Toast } from "@/composables/toast";
+import { type components } from "@/schema";
+
+import AsyncButton from "@/components/Common/AsyncButton.vue";
 import Heading from "@/components/Common/Heading.vue";
-import LoadingSpan from "@/components/LoadingSpan.vue";
 import FormElement from "@/components/Form/FormElement.vue";
-import AsyncButton from "@/components/Common/AsyncButton.vue";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import LoadingSpan from "@/components/LoadingSpan.vue";
 import BroadcastContainer from "@/components/Notifications/Broadcasts/BroadcastContainer.vue";
-import { createBroadcast, loadBroadcast, updateBroadcast } from "@/components/admin/Notifications/broadcasts.services";
+
+const dateTimeFormat = "yyyy-MM-dd'T'HH:mm:ss.SSSSSS";
 
 type BroadcastNotificationCreateRequest = components["schemas"]["BroadcastNotificationCreateRequest"];
 
@@ -31,25 +37,29 @@ const title = computed(() => {
 });
 
 const loading = ref(false);
-const broadcast = ref<BroadcastNotificationCreateRequest>({
+
+const broadcastData = ref<BroadcastNotificationCreateRequest>({
     source: "admin",
     variant: "info",
     content: {
         subject: "",
         message: "",
     },
+    expiration_time: new Date(Date.now() + 6 * 30 * 24 * 60 * 60 * 1000).toISOString().slice(0, 16),
+    publication_time: new Date().toISOString().slice(0, 16),
 });
 
+const broadcastPublished = ref(false);
 const requiredFieldsFilled = computed(() => {
-    return broadcast.value.content.subject !== "" && broadcast.value.content.message !== "";
+    return broadcastData.value.content.subject !== "" && broadcastData.value.content.message !== "";
 });
 
 function addActionLink() {
-    if (!broadcast.value.content.action_links) {
-        Vue.set(broadcast.value.content, "action_links", []);
+    if (!broadcastData.value.content.action_links) {
+        Vue.set(broadcastData.value.content, "action_links", []);
     }
 
-    broadcast.value.content.action_links?.push({
+    broadcastData.value.content.action_links?.push({
         action_name: "",
         link: "",
     });
@@ -57,11 +67,21 @@ function addActionLink() {
 
 async function createOrUpdateBroadcast() {
     try {
+        const tmp = broadcastData.value;
+
+        if (tmp.publication_time) {
+            tmp.publication_time = format(new Date(tmp.publication_time), dateTimeFormat);
+        }
+
+        if (tmp.expiration_time) {
+            tmp.expiration_time = format(new Date(tmp.expiration_time), dateTimeFormat);
+        }
+
         if (props.id) {
-            await updateBroadcast(props.id, broadcast.value);
+            await updateBroadcast(props.id, tmp);
             Toast.success("Broadcast updated");
         } else {
-            await createBroadcast(broadcast.value);
+            await createBroadcast(tmp);
             Toast.success("Broadcast created");
         }
         router.push("/admin/notifications/");
@@ -71,17 +91,30 @@ async function createOrUpdateBroadcast() {
 }
 
 async function loadBroadcastData() {
-    if (props.id) {
-        loading.value = true;
-        try {
-            broadcast.value = await loadBroadcast(props.id);
-        } catch (error: any) {
-            Toast.error(error.err_msg);
+    loading.value = true;
+    try {
+        const loadedBroadcast = await loadBroadcast(props.id);
+
+        broadcastData.value.publication_time = new Date(loadedBroadcast.publication_time).toISOString().slice(0, 16);
+
+        if (loadedBroadcast.expiration_time) {
+            broadcastData.value.expiration_time = new Date(loadedBroadcast.expiration_time).toISOString().slice(0, 16);
+        }
+
+        broadcastData.value = loadedBroadcast;
+
+        if (broadcastData.value.publication_time) {
+            broadcastPublished.value = new Date(broadcastData.value.publication_time) < new Date();
         }
-        loading.value = false;
+    } catch (error: any) {
+        Toast.error(error.err_msg);
     }
+    loading.value = false;
+}
+
+if (props.id) {
+    loadBroadcastData();
 }
-loadBroadcastData();
 </script>
 
 <template>
@@ -95,7 +128,7 @@ loadBroadcastData();
         <div v-else>
             <FormElement
                 id="broadcast-subject"
-                v-model="broadcast.content.subject"
+                v-model="broadcastData.content.subject"
                 type="text"
                 title="Subject"
                 :optional="false"
@@ -105,7 +138,7 @@ loadBroadcastData();
 
             <FormElement
                 id="broadcast-variant"
-                v-model="broadcast.variant"
+                v-model="broadcastData.variant"
                 type="select"
                 title="Variant"
                 :optional="false"
@@ -118,7 +151,7 @@ loadBroadcastData();
 
             <FormElement
                 id="broadcast-message"
-                v-model="broadcast.content.message"
+                v-model="broadcastData.content.message"
                 type="text"
                 title="Message"
                 :optional="false"
@@ -128,7 +161,7 @@ loadBroadcastData();
 
             <BFormGroup id="broadcast-action-link-group" label="Action Links" label-for="broadcast-action-link">
                 <BRow
-                    v-for="(actionLink, index) in broadcast.content.action_links"
+                    v-for="(actionLink, index) in broadcastData.content.action_links"
                     :key="actionLink.action_name"
                     class="my-2">
                     <BCol cols="auto">
@@ -155,8 +188,8 @@ loadBroadcastData();
                             variant="error-outline"
                             role="button"
                             @click="
-                                broadcast.content.action_links.splice(
-                                    broadcast.content.action_links.indexOf(actionLink),
+                                broadcastData.content.action_links.splice(
+                                    broadcastData.content.action_links.indexOf(actionLink),
                                     1
                                 )
                             ">
@@ -185,7 +218,7 @@ loadBroadcastData();
                         description="The broadcast will be displayed from this time onwards. Default is the time of creation.">
                         <BFormInput
                             id="broadcast-publication-time"
-                            :value.sync="broadcast.publication_time"
+                            v-model="broadcastData.publication_time"
                             type="datetime-local"
                             placeholder="Enter publication time"
                             required />
@@ -199,7 +232,7 @@ loadBroadcastData();
                         description="The broadcast will not be displayed and will be deleted from the database after this time. Default is 6 months from the creation time.">
                         <BFormInput
                             id="broadcast-expiration-time"
-                            v-model="broadcast.expiration_time"
+                            v-model="broadcastData.expiration_time"
                             type="datetime-local"
                             placeholder="Enter expiration time"
                             required />
@@ -211,7 +244,7 @@ loadBroadcastData();
                 <Heading size="md"> Preview </Heading>
             </BRow>
 
-            <BroadcastContainer :broadcast="broadcast" preview-mode />
+            <BroadcastContainer :broadcast="broadcastData" preview-mode />
 
             <BRow class="m-2" align-h="center">
                 <AsyncButton

From 9194e5b84b43ca7808b7274035bbd0eb55170368 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 7 Jul 2023 11:13:07 +1000
Subject: [PATCH 14/40] fix date-time format conversion in NotificationForm,
 types and load recipients

---
 .../admin/Notifications/NotificationForm.vue  | 187 +++++++++---------
 1 file changed, 89 insertions(+), 98 deletions(-)

diff --git a/client/src/components/admin/Notifications/NotificationForm.vue b/client/src/components/admin/Notifications/NotificationForm.vue
index 5e7f550bc4ed..2b5b68b873bf 100644
--- a/client/src/components/admin/Notifications/NotificationForm.vue
+++ b/client/src/components/admin/Notifications/NotificationForm.vue
@@ -1,122 +1,114 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
-import { type components } from "@/schema";
-import { Toast } from "@/composables/toast";
+import { BAlert, BCard, BCol, BFormGroup, BFormInput, BRow } from "bootstrap-vue";
+import { format } from "date-fns";
+import { computed, type Ref, ref } from "vue";
 import { useRouter } from "vue-router/composables";
-import Heading from "@/components/Common/Heading.vue";
-import LoadingSpan from "@/components/LoadingSpan.vue";
-import FormElement from "@/components/Form/FormElement.vue";
-import AsyncButton from "@/components/Common/AsyncButton.vue";
+
 import {
-    createNotification,
     getGroups,
     getRoles,
     getUsers,
+    sendNotification,
 } from "@/components/admin/Notifications/notifications.services";
+import { Toast } from "@/composables/toast";
+import { type components } from "@/schema";
+
+import AsyncButton from "@/components/Common/AsyncButton.vue";
+import Heading from "@/components/Common/Heading.vue";
+import FormElement from "@/components/Form/FormElement.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+import MessageNotification from "@/components/Notifications/Categories/MessageNotification.vue";
+
+const dateTimeFormat = "yyyy-MM-dd'T'HH:mm:ss.SSSSSS";
 
-type NotificationRecipients = components["schemas"]["NotificationRecipients"];
+type SelectOption = [string, string];
+type NotificationCreateData = components["schemas"]["NotificationCreateData"];
+type NotificationCreateRequest = components["schemas"]["NotificationCreateRequest"];
 
-type NotificationCreateData = {
-    source: string;
+interface MessageNotificationCreateData extends NotificationCreateData {
     category: "message";
-    variant: "info" | "warning" | "urgent";
-    content: {
-        category: "message";
-        subject: string;
-        message: string;
-    };
-};
-
-const props = defineProps({
-    id: {
-        type: String,
-        default: null,
-    },
-});
+    content: components["schemas"]["MessageNotificationContent"];
+}
+
+interface MessageNotificationCreateRequest extends NotificationCreateRequest {
+    notification: MessageNotificationCreateData;
+}
 
 const router = useRouter();
 
 const loading = ref(false);
-const roles = ref<[string, string][]>([]);
-const users = ref<[string, string][]>([]);
-const groups = ref<[string, string][]>([]);
-const recipients = ref<NotificationRecipients>({
-    role_ids: [],
-    user_ids: [],
-    group_ids: [],
-});
-const notification = ref<NotificationCreateData>({
-    source: "admin",
-    category: "message",
-    variant: "info",
-    content: {
+const roles = ref<SelectOption[]>([]);
+const users = ref<SelectOption[]>([]);
+const groups = ref<SelectOption[]>([]);
+const notificationData = ref<MessageNotificationCreateRequest>({
+    notification: {
+        source: "admin",
         category: "message",
-        subject: "",
-        message: "",
+        variant: "info",
+        content: {
+            category: "message",
+            subject: "",
+            message: "",
+        },
+        expiration_time: new Date(Date.now() + 6 * 30 * 24 * 60 * 60 * 1000).toISOString().slice(0, 16),
+        publication_time: new Date().toISOString().slice(0, 16),
+    },
+    recipients: {
+        user_ids: [],
+        role_ids: [],
+        group_ids: [],
     },
 });
 
-const title = computed(() => {
-    if (props.id) {
-        return "Edit Notification";
-    } else {
-        return "New Notification";
-    }
-});
 const requiredFieldsFilled = computed(() => {
     return (
-        notification.value.content.subject !== "" ||
-        notification.value.content.message !== "" ||
-        (recipients.value.user_ids?.length !== 0 &&
-            recipients.value.role_ids?.length !== 0 &&
-            recipients.value.group_ids?.length !== 0)
+        notificationData.value.notification.content.subject !== "" &&
+        notificationData.value.notification.content.message !== "" &&
+        (notificationData.value.recipients.user_ids?.length ||
+            notificationData.value.recipients.role_ids?.length ||
+            notificationData.value.recipients.group_ids?.length)
     );
 });
 
-async function loadUsers() {
+async function loadData<T>(
+    getData: () => Promise<T[]>,
+    target: Ref<SelectOption[]>,
+    formatter: (item: T) => SelectOption
+) {
     try {
-        const tmp = await getUsers();
-        users.value = tmp.map((user) => {
-            return [`${user.username} | ${user.email}`, user.id];
-        });
+        const tmp = await getData();
+        target.value = tmp.map(formatter);
     } catch (error: any) {
         Toast.error(error.err_msg);
     }
 }
 
-async function loadRoles() {
-    try {
-        const tmp = await getRoles();
-        roles.value = tmp.map((role) => {
-            return [`${role.name} | ${role.description}`, role.id];
-        });
-    } catch (error: any) {
-        Toast.error(error.err_msg);
-    }
-}
+loadData(getUsers, users, (user) => {
+    return [`${user.username} | ${user.email}`, user.id];
+});
 
-async function loadGroups() {
-    try {
-        const tmp = await getGroups();
-        groups.value = tmp.map((group) => {
-            return [`${group.name}`, group.id];
-        });
-    } catch (error: any) {
-        Toast.error(error.err_msg);
-    }
-}
+loadData(getRoles, roles, (role) => {
+    return [`${role.name} | ${role.description}`, role.id];
+});
 
-loadUsers();
-loadRoles();
-loadGroups();
+loadData(getGroups, groups, (group) => {
+    return [`${group.name}`, group.id];
+});
 
-async function createNewNotification() {
+async function sendNewNotification() {
     try {
-        await createNotification({
-            recipients: recipients.value,
-            notification: notification.value,
-        });
-        Toast.success("Notification created");
+        const tmp = notificationData.value;
+
+        if (tmp.notification.publication_time) {
+            tmp.notification.publication_time = format(new Date(tmp.notification.publication_time), dateTimeFormat);
+        }
+
+        if (tmp.notification.expiration_time) {
+            tmp.notification.expiration_time = format(new Date(tmp.notification.expiration_time), dateTimeFormat);
+        }
+
+        await sendNotification(tmp);
+        Toast.success("Notification sent");
         router.push("/admin/notifications");
     } catch (error: any) {
         Toast.error(error.err_msg);
@@ -126,7 +118,7 @@ async function createNewNotification() {
 
 <template>
     <div>
-        <Heading> {{ title }} </Heading>
+        <Heading> New Notification </Heading>
 
         <BAlert v-if="loading" show>
             <LoadingSpan message="Loading notification" />
@@ -135,7 +127,7 @@ async function createNewNotification() {
         <div v-else>
             <FormElement
                 id="notification-subject"
-                v-model="notification.content.subject"
+                v-model="notificationData.notification.content.subject"
                 type="text"
                 title="Subject"
                 :optional="false"
@@ -145,7 +137,7 @@ async function createNewNotification() {
 
             <FormElement
                 id="notification-message"
-                v-model="notification.content.message"
+                v-model="notificationData.notification.content.message"
                 type="text"
                 title="Message"
                 :optional="false"
@@ -155,7 +147,7 @@ async function createNewNotification() {
 
             <FormElement
                 id="notification-variant"
-                v-model="notification.variant"
+                v-model="notificationData.notification.variant"
                 type="select"
                 title="Variant"
                 :optional="false"
@@ -168,7 +160,7 @@ async function createNewNotification() {
 
             <FormElement
                 id="notification-recipients-user-ids"
-                v-model="recipients.user_ids"
+                v-model="notificationData.recipients.user_ids"
                 type="select"
                 title="User recipients"
                 help="The users that will receive the notification"
@@ -177,7 +169,7 @@ async function createNewNotification() {
 
             <FormElement
                 id="notification-recipients-role-ids"
-                v-model="recipients.role_ids"
+                v-model="notificationData.recipients.role_ids"
                 type="select"
                 title="Role recipients"
                 help="The roles that will receive the notification"
@@ -186,7 +178,7 @@ async function createNewNotification() {
 
             <FormElement
                 id="notification-recipients-group-ids"
-                v-model="recipients.group_ids"
+                v-model="notificationData.recipients.group_ids"
                 type="select"
                 title="Group recipients"
                 help="The groups that will receive the notification"
@@ -202,7 +194,7 @@ async function createNewNotification() {
                         description="The notification will be displayed after this time. Default is the current time.">
                         <BFormInput
                             id="notification-publication-time"
-                            :value.sync="notification.publication_time"
+                            v-model="notificationData.notification.publication_time"
                             type="datetime-local"
                             placeholder="Enter publication time"
                             required />
@@ -216,7 +208,7 @@ async function createNewNotification() {
                         description="The notification will be deleted from the database after this time. Default is 6 months from the creation time.">
                         <BFormInput
                             id="notification-expiration-time"
-                            v-model="notification.expiration_time"
+                            v-model="notificationData.notification.expiration_time"
                             type="datetime-local"
                             placeholder="Enter expiration time"
                             required />
@@ -231,9 +223,8 @@ async function createNewNotification() {
                     variant="primary"
                     size="md"
                     :disabled="!requiredFieldsFilled"
-                    :action="createNewNotification">
-                    <span v-if="props.id" v-localize> Update Notification </span>
-                    <span v-else v-localize> Create Notification </span>
+                    :action="sendNewNotification">
+                    <span v-localize> Send Notification </span>
                 </AsyncButton>
             </BRow>
         </div>

From ab8307a8abc91b943eaf952b18c886af7244f540 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 7 Jul 2023 11:13:51 +1000
Subject: [PATCH 15/40] add alert on modifying a published broadcast in
 BroadcastForm

---
 client/src/components/admin/Notifications/BroadcastForm.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/client/src/components/admin/Notifications/BroadcastForm.vue b/client/src/components/admin/Notifications/BroadcastForm.vue
index ab2025b5a092..346c23d2900c 100644
--- a/client/src/components/admin/Notifications/BroadcastForm.vue
+++ b/client/src/components/admin/Notifications/BroadcastForm.vue
@@ -126,6 +126,11 @@ if (props.id) {
         </BAlert>
 
         <div v-else>
+            <BAlert v-if="props.id && broadcastPublished" variant="warning" show>
+                This broadcast has already been published. Some users may have already seen it and changing it now will
+                not affect them.
+            </BAlert>
+
             <FormElement
                 id="broadcast-subject"
                 v-model="broadcastData.content.subject"

From 2a3fc49b55e18bf4ed7ea9575e1e9be6441a6bc9 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 7 Jul 2023 11:14:10 +1000
Subject: [PATCH 16/40] add preview in NotificationForm

---
 .../components/admin/Notifications/NotificationForm.vue   | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/client/src/components/admin/Notifications/NotificationForm.vue b/client/src/components/admin/Notifications/NotificationForm.vue
index 2b5b68b873bf..d10d258d7bd8 100644
--- a/client/src/components/admin/Notifications/NotificationForm.vue
+++ b/client/src/components/admin/Notifications/NotificationForm.vue
@@ -216,6 +216,14 @@ async function sendNewNotification() {
                 </BCol>
             </BRow>
 
+            <BRow align-v="center" class="m-1">
+                <Heading size="md"> Preview </Heading>
+            </BRow>
+
+            <BCard class="my-2">
+                <MessageNotification :notification="notificationData.notification" preview-mode />
+            </BCard>
+
             <BRow class="m-2" align-h="center">
                 <AsyncButton
                     icon="save"

From dab64710bad6df041fa09533a7834a9df7c7af2a Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 7 Jul 2023 11:27:05 +1000
Subject: [PATCH 17/40] disable broadcast actions for expired, strike their
 subject and body and add refresh button in BroadcastsList

---
 .../admin/Notifications/BroadcastsList.vue    | 79 +++++++++++++++----
 1 file changed, 64 insertions(+), 15 deletions(-)

diff --git a/client/src/components/admin/Notifications/BroadcastsList.vue b/client/src/components/admin/Notifications/BroadcastsList.vue
index f03f71705e73..65ece039d1fc 100644
--- a/client/src/components/admin/Notifications/BroadcastsList.vue
+++ b/client/src/components/admin/Notifications/BroadcastsList.vue
@@ -1,20 +1,30 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import {
+    faBroadcastTower,
+    faClock,
+    faEdit,
+    faHourglassHalf,
+    faInfoCircle,
+    faRedo,
+    faTrash,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref } from "vue";
-import { type components } from "@/schema";
-import { Toast } from "@/composables/toast";
-import UtcDate from "@/components/UtcDate.vue";
 import { useRouter } from "vue-router/composables";
+
+import { loadBroadcasts, updateBroadcast } from "@/components/admin/Notifications/broadcasts.services";
+import { useConfirmDialog } from "@/composables/confirmDialog";
 import { useMarkdown } from "@/composables/markdown";
+import { Toast } from "@/composables/toast";
+import { type components } from "@/schema";
+import { BroadcastNotification } from "@/stores/broadcastsStore";
+
 import Heading from "@/components/Common/Heading.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { useConfirmDialog } from "@/composables/confirmDialog";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BroadcastNotification } from "@/stores/broadcastsStore";
-import { loadBroadcasts, updateBroadcast } from "@/components/admin/Notifications/broadcasts.services";
-import { faBroadcastTower, faClock, faEdit, faHourglassHalf, faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import UtcDate from "@/components/UtcDate.vue";
 
-library.add(faBroadcastTower, faClock, faEdit, faHourglassHalf, faInfoCircle);
+library.add(faBroadcastTower, faClock, faEdit, faHourglassHalf, faInfoCircle, faRedo, faTrash);
 
 type BroadcastNotificationResponse = components["schemas"]["BroadcastNotificationResponse"];
 
@@ -25,6 +35,9 @@ const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true });
 const loadingBroadcasts = ref(false);
 const broadcasts = ref<BroadcastNotificationResponse[]>([]);
 
+const broadcastExpired = (item: BroadcastNotification) =>
+    item.expiration_time && new Date(item.expiration_time) < new Date();
+
 function getBroadcastVariant(item: BroadcastNotification) {
     switch (item.variant) {
         case "urgent":
@@ -61,6 +74,9 @@ function getBroadcastPublicity(item: BroadcastNotification) {
 
 function getBroadcastExpiry(item: BroadcastNotification) {
     if (item.expiration_time) {
+        if (broadcastExpired(item)) {
+            return `Expired on ${new Date(item.expiration_time + "Z").toLocaleString()}`;
+        }
         return `Expires on ${new Date(item.expiration_time + "Z").toLocaleString()}`;
     } else {
         return "Does not expire";
@@ -81,6 +97,7 @@ async function loadBroadcastsList() {
     broadcasts.value.sort((a, b) => new Date(b.create_time).getTime() - new Date(a.create_time).getTime());
     loadingBroadcasts.value = false;
 }
+
 loadBroadcastsList();
 </script>
 
@@ -97,15 +114,32 @@ loadBroadcastsList();
         </BAlert>
 
         <div v-else class="mx-1">
+            <BCard class="mb-2">
+                <BRow class="align-items-center" no-gutters>
+                    <BCol>
+                        <BRow align-h="end" align-v="center">
+                            <BButton
+                                v-b-tooltip.hover
+                                size="sm"
+                                variant="outline-primary"
+                                title="Refresh broadcasts"
+                                @click="loadBroadcastsList">
+                                <FontAwesomeIcon :icon="faRedo" />
+                            </BButton>
+                        </BRow>
+                    </BCol>
+                </BRow>
+            </BCard>
+
             <BCard v-for="broadcast in broadcasts" :key="broadcast.id" class="mb-2">
                 <BRow align-v="center" align-h="between" class="mb-0 mx-0">
-                    <Heading size="md" class="mb-0">
+                    <Heading size="md" class="mb-0" :class="broadcastExpired(broadcast) ? 'expired-broadcast' : ''">
                         <FontAwesomeIcon :class="`text-${getBroadcastVariant(broadcast)}`" :icon="faInfoCircle" />
                         {{ broadcast.content.subject }}
                     </Heading>
                     <BRow align-h="end" align-v="center">
                         <UtcDate class="mx-2" :date="broadcast.create_time" mode="elapsed" />
-                        <BInputGroup>
+                        <BInputGroup v-if="!broadcastExpired(broadcast)">
                             <BButton
                                 id="edit-broadcast-button"
                                 v-b-tooltip.hover
@@ -129,7 +163,10 @@ loadBroadcastsList();
                 <BRow align-v="center" align-h="between" class="mx-0">
                     <BCol>
                         <BRow align-v="center">
-                            <span class="broadcast-message" v-html="renderMarkdown(broadcast.content.message)" />
+                            <span
+                                class="broadcast-message"
+                                :class="broadcastExpired(broadcast) ? 'expired-broadcast' : ''"
+                                v-html="renderMarkdown(broadcast.content.message)" />
                         </BRow>
                         <BRow>
                             <BButton
@@ -152,7 +189,11 @@ loadBroadcastsList();
                             {{ getBroadcastPublicity(broadcast) }}
                         </BRow>
                         <BRow align-v="center" align-h="end">
-                            <FontAwesomeIcon :icon="faHourglassHalf" class="mx-1 expire" />
+                            <FontAwesomeIcon
+                                variant="danger"
+                                :icon="broadcastExpired(broadcast) ? faTrash : faHourglassHalf"
+                                :class="broadcastExpired(broadcast) ? 'expired' : 'expires'"
+                                class="mx-1" />
                             {{ getBroadcastExpiry(broadcast) }}
                         </BRow>
                     </BCol>
@@ -164,6 +205,10 @@ loadBroadcastsList();
 
 <style scoped lang="scss">
 @import "scss/theme/blue.scss";
+.expired-broadcast {
+    text-decoration: line-through;
+}
+
 .published {
     color: $brand-primary;
 }
@@ -172,7 +217,11 @@ loadBroadcastsList();
     color: $brand-warning;
 }
 
-.expire {
+.expires {
     color: $brand-info;
 }
+
+.expired {
+    color: $brand-danger;
+}
 </style>

From c59665df3d8b7e90591a45e96381a1261e4bcef1 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 7 Jul 2023 11:33:31 +1000
Subject: [PATCH 18/40] run eslint

---
 .../admin/Notifications/NotificationsManagement.vue         | 5 +++--
 client/src/entry/analysis/routes/admin-routes.js            | 6 +++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/client/src/components/admin/Notifications/NotificationsManagement.vue b/client/src/components/admin/Notifications/NotificationsManagement.vue
index 75d9727dd5a6..37e8720d93e9 100644
--- a/client/src/components/admin/Notifications/NotificationsManagement.vue
+++ b/client/src/components/admin/Notifications/NotificationsManagement.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { useRouter } from "vue-router/composables";
-import Heading from "@/components/Common/Heading.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { useRouter } from "vue-router/composables";
+
 import BroadcastsList from "@/components/admin/Notifications/BroadcastsList.vue";
+import Heading from "@/components/Common/Heading.vue";
 
 const router = useRouter();
 
diff --git a/client/src/entry/analysis/routes/admin-routes.js b/client/src/entry/analysis/routes/admin-routes.js
index 43b739dfac41..bf8a7de1a042 100644
--- a/client/src/entry/analysis/routes/admin-routes.js
+++ b/client/src/entry/analysis/routes/admin-routes.js
@@ -5,9 +5,6 @@ import DataManagerJob from "components/admin/DataManager/DataManagerJob";
 import DataManagerJobs from "components/admin/DataManager/DataManagerJobs";
 import DataManagerTable from "components/admin/DataManager/DataManagerTable";
 import DataManagerView from "components/admin/DataManager/DataManagerView";
-import NotificationsManagement from "components/admin/Notifications/NotificationsManagement";
-import BroadcastForm from "components/admin/Notifications/BroadcastForm.vue";
-import NotificationForm from "components/admin/Notifications/NotificationForm.vue";
 import DataTables from "components/admin/DataTables";
 import DataTypes from "components/admin/DataTypes";
 import ToolboxDependencies from "components/admin/Dependencies/Landing";
@@ -15,6 +12,9 @@ import DisplayApplications from "components/admin/DisplayApplications";
 import ErrorStack from "components/admin/ErrorStack";
 import Home from "components/admin/Home";
 import JobsList from "components/admin/JobsList";
+import BroadcastForm from "components/admin/Notifications/BroadcastForm";
+import NotificationForm from "components/admin/Notifications/NotificationForm";
+import NotificationsManagement from "components/admin/Notifications/NotificationsManagement";
 import ResetMetadata from "components/admin/ResetMetadata";
 import SanitizeAllow from "components/admin/SanitizeAllow";
 import FormGeneric from "components/Form/FormGeneric";

From a7c4f0901f789a3b694c029d66a3b299aaab0830 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 24 Jul 2023 11:03:18 +1000
Subject: [PATCH 19/40] fix date convert

---
 .../admin/Notifications/BroadcastForm.vue       | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/client/src/components/admin/Notifications/BroadcastForm.vue b/client/src/components/admin/Notifications/BroadcastForm.vue
index 346c23d2900c..77ebab0e676f 100644
--- a/client/src/components/admin/Notifications/BroadcastForm.vue
+++ b/client/src/components/admin/Notifications/BroadcastForm.vue
@@ -54,6 +54,11 @@ const requiredFieldsFilled = computed(() => {
     return broadcastData.value.content.subject !== "" && broadcastData.value.content.message !== "";
 });
 
+function convertUTCtoLocal(utcTimeString: string) {
+    const date = new Date(utcTimeString);
+    return new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
+}
+
 function addActionLink() {
     if (!broadcastData.value.content.action_links) {
         Vue.set(broadcastData.value.content, "action_links", []);
@@ -67,14 +72,16 @@ function addActionLink() {
 
 async function createOrUpdateBroadcast() {
     try {
-        const tmp = broadcastData.value;
+        const tmp = { ...broadcastData.value };
 
         if (tmp.publication_time) {
-            tmp.publication_time = format(new Date(tmp.publication_time), dateTimeFormat);
+            const publicationTimeUTC = new Date(tmp.publication_time).toISOString();
+            tmp.publication_time = format(new Date(publicationTimeUTC), dateTimeFormat);
         }
 
         if (tmp.expiration_time) {
-            tmp.expiration_time = format(new Date(tmp.expiration_time), dateTimeFormat);
+            const expirationTimeUTC = new Date(tmp.expiration_time).toISOString();
+            tmp.expiration_time = format(new Date(expirationTimeUTC), dateTimeFormat);
         }
 
         if (props.id) {
@@ -95,10 +102,10 @@ async function loadBroadcastData() {
     try {
         const loadedBroadcast = await loadBroadcast(props.id);
 
-        broadcastData.value.publication_time = new Date(loadedBroadcast.publication_time).toISOString().slice(0, 16);
+        broadcastData.value.publication_time = convertUTCtoLocal(loadedBroadcast.publication_time);
 
         if (loadedBroadcast.expiration_time) {
-            broadcastData.value.expiration_time = new Date(loadedBroadcast.expiration_time).toISOString().slice(0, 16);
+            broadcastData.value.expiration_time = convertUTCtoLocal(loadedBroadcast.expiration_time);
         }
 
         broadcastData.value = loadedBroadcast;

From 4c0f82f3a774e7a38c43319085595f8b7f87d3ec Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 24 Jul 2023 18:08:09 +1000
Subject: [PATCH 20/40] create GDateTime component

Co-authored-by: Laila Los <44241786+electronicblueberry@users.noreply.github.com>
---
 client/src/components/GDateTime.vue | 69 +++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 client/src/components/GDateTime.vue

diff --git a/client/src/components/GDateTime.vue b/client/src/components/GDateTime.vue
new file mode 100644
index 000000000000..9f149c456b88
--- /dev/null
+++ b/client/src/components/GDateTime.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { Tuple } from "types/utilityTypes";
+import { computed } from "vue";
+
+const props = defineProps<{
+    value: Date;
+}>();
+
+const emit = defineEmits<{
+    (e: "input", value: Date): void;
+}>();
+
+const date = computed(() => {
+    const year = props.value.getFullYear().toString().padStart(4, "0");
+    const month = (props.value.getMonth() + 1).toString().padStart(2, "0");
+    const day = props.value.getDate().toString().padStart(2, "0");
+
+    return `${year}-${month}-${day}`;
+});
+
+const time = computed(() => {
+    const hours = props.value.getHours().toString().padStart(2, "0");
+    const minutes = props.value.getMinutes().toString().padStart(2, "0");
+
+    return `${hours}:${minutes}`;
+});
+function updateDate(newDate: string) {
+    const matches = newDate.match(/(\d{4})-(\d{2})-(\d{2})/);
+
+    if (matches?.length && matches.length >= 4) {
+        const [_, year, month, day] = matches as Tuple<4, string>;
+
+        const date = new Date(props.value);
+
+        try {
+            date.setFullYear(parseInt(year));
+            date.setDate(1);
+            date.setMonth(0);
+            date.setMonth(parseInt(month) - 1);
+            date.setDate(parseInt(day));
+        } finally {
+            emit("input", date);
+        }
+    }
+}
+
+function updateTime(newTime: string) {
+    const matches = newTime.match(/(\d{2}):(\d{2})/);
+
+    if (matches?.length && matches.length >= 3) {
+        const [_, hours, minutes] = matches as Tuple<3, string>;
+
+        const date = new Date(props.value);
+
+        try {
+            date.setHours(parseInt(hours), parseInt(minutes));
+        } finally {
+            emit("input", date);
+        }
+    }
+}
+</script>
+
+<template>
+    <BInputGroup>
+        <BFormInput :value="date" type="date" @input="updateDate" />
+        <BFormInput :value="time" type="time" @change="updateTime" />
+    </BInputGroup>
+</template>

From 4117e2b6f03bee0572f3f21afacc4ccb8e5b0bfd Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 24 Jul 2023 18:09:56 +1000
Subject: [PATCH 21/40] use GDateTime component in NotificationForm

Co-authored-by: Laila Los <44241786+electronicblueberry@users.noreply.github.com>
---
 .../admin/Notifications/NotificationForm.vue  | 54 +++++++++----------
 1 file changed, 25 insertions(+), 29 deletions(-)

diff --git a/client/src/components/admin/Notifications/NotificationForm.vue b/client/src/components/admin/Notifications/NotificationForm.vue
index d10d258d7bd8..690318fc6b03 100644
--- a/client/src/components/admin/Notifications/NotificationForm.vue
+++ b/client/src/components/admin/Notifications/NotificationForm.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { BAlert, BCard, BCol, BFormGroup, BFormInput, BRow } from "bootstrap-vue";
-import { format } from "date-fns";
+import { BAlert, BCard, BCol, BFormGroup, BRow } from "bootstrap-vue";
 import { computed, type Ref, ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
@@ -16,11 +15,10 @@ import { type components } from "@/schema";
 import AsyncButton from "@/components/Common/AsyncButton.vue";
 import Heading from "@/components/Common/Heading.vue";
 import FormElement from "@/components/Form/FormElement.vue";
+import GDateTime from "@/components/GDateTime.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import MessageNotification from "@/components/Notifications/Categories/MessageNotification.vue";
 
-const dateTimeFormat = "yyyy-MM-dd'T'HH:mm:ss.SSSSSS";
-
 type SelectOption = [string, string];
 type NotificationCreateData = components["schemas"]["NotificationCreateData"];
 type NotificationCreateRequest = components["schemas"]["NotificationCreateRequest"];
@@ -70,6 +68,24 @@ const requiredFieldsFilled = computed(() => {
     );
 });
 
+const publicationDate = computed({
+    get: () => {
+        return new Date(`${notificationData.value.notification.publication_time}Z`);
+    },
+    set: (value: Date) => {
+        notificationData.value.notification.publication_time = value.toISOString().slice(0, 16);
+    },
+});
+
+const expirationDate = computed({
+    get: () => {
+        return new Date(`${notificationData.value.notification.expiration_time}Z`);
+    },
+    set: (value: Date) => {
+        notificationData.value.notification.expiration_time = value.toISOString().slice(0, 16);
+    },
+});
+
 async function loadData<T>(
     getData: () => Promise<T[]>,
     target: Ref<SelectOption[]>,
@@ -97,17 +113,7 @@ loadData(getGroups, groups, (group) => {
 
 async function sendNewNotification() {
     try {
-        const tmp = notificationData.value;
-
-        if (tmp.notification.publication_time) {
-            tmp.notification.publication_time = format(new Date(tmp.notification.publication_time), dateTimeFormat);
-        }
-
-        if (tmp.notification.expiration_time) {
-            tmp.notification.expiration_time = format(new Date(tmp.notification.expiration_time), dateTimeFormat);
-        }
-
-        await sendNotification(tmp);
+        await sendNotification(notificationData.value);
         Toast.success("Notification sent");
         router.push("/admin/notifications");
     } catch (error: any) {
@@ -189,29 +195,19 @@ async function sendNewNotification() {
                 <BCol>
                     <BFormGroup
                         id="notification-publication-time-group"
-                        label="Publication Time"
+                        label="Publication Time (local time)"
                         label-for="notification-publication-time"
                         description="The notification will be displayed after this time. Default is the current time.">
-                        <BFormInput
-                            id="notification-publication-time"
-                            v-model="notificationData.notification.publication_time"
-                            type="datetime-local"
-                            placeholder="Enter publication time"
-                            required />
+                        <GDateTime id="notification-publication-time" v-model="publicationDate" />
                     </BFormGroup>
                 </BCol>
                 <BCol>
                     <BFormGroup
                         id="notification-expiration-time-group"
-                        label="Expiration Time"
+                        label="Expiration Time (local time)"
                         label-for="notification-expiration-time"
                         description="The notification will be deleted from the database after this time. Default is 6 months from the creation time.">
-                        <BFormInput
-                            id="notification-expiration-time"
-                            v-model="notificationData.notification.expiration_time"
-                            type="datetime-local"
-                            placeholder="Enter expiration time"
-                            required />
+                        <GDateTime id="notification-expiration-time" v-model="expirationDate" />
                     </BFormGroup>
                 </BCol>
             </BRow>

From b1a5b1cf322c2cde6250e4b3008bb1d022e741f6 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 24 Jul 2023 18:10:58 +1000
Subject: [PATCH 22/40] use GDateTime component in BroadcastForm

Co-authored-by: Laila Los <44241786+electronicblueberry@users.noreply.github.com>
---
 .../admin/Notifications/BroadcastForm.vue     | 65 ++++++++-----------
 1 file changed, 28 insertions(+), 37 deletions(-)

diff --git a/client/src/components/admin/Notifications/BroadcastForm.vue b/client/src/components/admin/Notifications/BroadcastForm.vue
index 77ebab0e676f..087131b0dcf7 100644
--- a/client/src/components/admin/Notifications/BroadcastForm.vue
+++ b/client/src/components/admin/Notifications/BroadcastForm.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BCol, BFormGroup, BFormInput, BRow } from "bootstrap-vue";
-import { format } from "date-fns";
 import Vue, { computed, ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
@@ -12,11 +11,10 @@ import { type components } from "@/schema";
 import AsyncButton from "@/components/Common/AsyncButton.vue";
 import Heading from "@/components/Common/Heading.vue";
 import FormElement from "@/components/Form/FormElement.vue";
+import GDateTime from "@/components/GDateTime.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import BroadcastContainer from "@/components/Notifications/Broadcasts/BroadcastContainer.vue";
 
-const dateTimeFormat = "yyyy-MM-dd'T'HH:mm:ss.SSSSSS";
-
 type BroadcastNotificationCreateRequest = components["schemas"]["BroadcastNotificationCreateRequest"];
 
 const props = defineProps({
@@ -54,6 +52,24 @@ const requiredFieldsFilled = computed(() => {
     return broadcastData.value.content.subject !== "" && broadcastData.value.content.message !== "";
 });
 
+const publicationDate = computed({
+    get: () => {
+        return new Date(`${broadcastData.value.publication_time}Z`);
+    },
+    set: (value: Date) => {
+        broadcastData.value.publication_time = value.toISOString().slice(0, 16);
+    },
+});
+
+const expirationDate = computed({
+    get: () => {
+        return new Date(`${broadcastData.value.expiration_time}Z`);
+    },
+    set: (value: Date) => {
+        broadcastData.value.expiration_time = value.toISOString().slice(0, 16);
+    },
+});
+
 function convertUTCtoLocal(utcTimeString: string) {
     const date = new Date(utcTimeString);
     return new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
@@ -72,23 +88,11 @@ function addActionLink() {
 
 async function createOrUpdateBroadcast() {
     try {
-        const tmp = { ...broadcastData.value };
-
-        if (tmp.publication_time) {
-            const publicationTimeUTC = new Date(tmp.publication_time).toISOString();
-            tmp.publication_time = format(new Date(publicationTimeUTC), dateTimeFormat);
-        }
-
-        if (tmp.expiration_time) {
-            const expirationTimeUTC = new Date(tmp.expiration_time).toISOString();
-            tmp.expiration_time = format(new Date(expirationTimeUTC), dateTimeFormat);
-        }
-
         if (props.id) {
-            await updateBroadcast(props.id, tmp);
+            await updateBroadcast(props.id, broadcastData.value);
             Toast.success("Broadcast updated");
         } else {
-            await createBroadcast(tmp);
+            await createBroadcast(broadcastData.value);
             Toast.success("Broadcast created");
         }
         router.push("/admin/notifications/");
@@ -172,10 +176,7 @@ if (props.id) {
                 required />
 
             <BFormGroup id="broadcast-action-link-group" label="Action Links" label-for="broadcast-action-link">
-                <BRow
-                    v-for="(actionLink, index) in broadcastData.content.action_links"
-                    :key="actionLink.action_name"
-                    class="my-2">
+                <BRow v-for="(actionLink, index) in broadcastData.content.action_links" :key="index" class="my-2">
                     <BCol cols="auto">
                         <BFormInput
                             :id="`broadcast-action-link-name-${{ index }}`"
@@ -200,7 +201,7 @@ if (props.id) {
                             variant="error-outline"
                             role="button"
                             @click="
-                                broadcastData.content.action_links.splice(
+                                broadcastData.content.action_links?.splice(
                                     broadcastData.content.action_links.indexOf(actionLink),
                                     1
                                 )
@@ -221,33 +222,23 @@ if (props.id) {
                 </BButton>
             </BFormGroup>
 
-            <BRow align-v="center">
+            <BRow>
                 <BCol>
                     <BFormGroup
                         id="broadcast-publication-time-group"
-                        label="Publication Time"
+                        label="Publication Time (local time)"
                         label-for="broadcast-publication-time"
                         description="The broadcast will be displayed from this time onwards. Default is the time of creation.">
-                        <BFormInput
-                            id="broadcast-publication-time"
-                            v-model="broadcastData.publication_time"
-                            type="datetime-local"
-                            placeholder="Enter publication time"
-                            required />
+                        <GDateTime id="broadcast-publication-time" v-model="publicationDate" />
                     </BFormGroup>
                 </BCol>
                 <BCol>
                     <BFormGroup
                         id="broadcast-expiration-time-group"
-                        label="Expiration Time"
+                        label="Expiration Time (local time)"
                         label-for="broadcast-expiration-time"
                         description="The broadcast will not be displayed and will be deleted from the database after this time. Default is 6 months from the creation time.">
-                        <BFormInput
-                            id="broadcast-expiration-time"
-                            v-model="broadcastData.expiration_time"
-                            type="datetime-local"
-                            placeholder="Enter expiration time"
-                            required />
+                        <GDateTime id="broadcast-expiration-time" v-model="expirationDate" />
                     </BFormGroup>
                 </BCol>
             </BRow>

From e3fa40c295587d3c6845fff2e4c96ff3a6757c76 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 25 Jul 2023 12:34:09 +1000
Subject: [PATCH 23/40] fix typescript erros

Co-authored-by: Laila Los <44241786+electronicblueberry@users.noreply.github.com>
---
 .../Broadcasts/BroadcastContainer.vue         | 44 ++++++++++++-------
 .../Categories/Categories.test.ts             |  5 +--
 .../Categories/MessageNotification.vue        | 35 +++++++++------
 .../Notifications/NotificationActions.test.ts |  8 ++--
 .../Notifications/NotificationItem.vue        | 24 ++++------
 client/src/components/Notifications/index.ts  | 10 +++--
 .../admin/Notifications/BroadcastForm.vue     |  2 +-
 .../admin/Notifications/NotificationForm.vue  |  2 +-
 8 files changed, 72 insertions(+), 58 deletions(-)

diff --git a/client/src/components/Notifications/Broadcasts/BroadcastContainer.vue b/client/src/components/Notifications/Broadcasts/BroadcastContainer.vue
index f3b16119e23e..c489dcc97fa8 100644
--- a/client/src/components/Notifications/Broadcasts/BroadcastContainer.vue
+++ b/client/src/components/Notifications/Broadcasts/BroadcastContainer.vue
@@ -6,24 +6,34 @@ import { BButton, BCol, BRow } from "bootstrap-vue";
 import { useRouter } from "vue-router/composables";
 
 import { useMarkdown } from "@/composables/markdown";
+import { type components } from "@/schema";
 import { type BroadcastNotification, useBroadcastsStore } from "@/stores/broadcastsStore";
 
 import Heading from "@/components/Common/Heading.vue";
 
 library.add(faInfoCircle, faTimes);
 
-interface Props {
-    previewMode?: boolean;
-    broadcast: BroadcastNotification;
-}
+type BroadcastNotificationCreateRequest = components["schemas"]["BroadcastNotificationCreateRequest"];
+
+type Options =
+    | {
+          previewMode?: false;
+          broadcast: BroadcastNotification;
+      }
+    | {
+          previewMode: true;
+          broadcast: BroadcastNotificationCreateRequest;
+      };
 
-const props = defineProps<Props>();
+const props = defineProps<{
+    options: Options;
+}>();
 
 const router = useRouter();
 const broadcastsStore = useBroadcastsStore();
 const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true });
 
-function getBroadcastVariant(item: BroadcastNotification) {
+function getBroadcastVariant(item: { variant: string }) {
     switch (item.variant) {
         case "urgent":
             return "danger";
@@ -32,13 +42,12 @@ function getBroadcastVariant(item: BroadcastNotification) {
     }
 }
 
-function onActionClick(item: BroadcastNotification, link: string) {
+function onActionClick(link: string) {
     if (link.startsWith("/")) {
         router.push(link);
     } else {
         window.open(link, "_blank");
     }
-    props.previewMode && broadcastsStore.dismissBroadcast(item);
 }
 </script>
 
@@ -46,41 +55,44 @@ function onActionClick(item: BroadcastNotification, link: string) {
     <BRow
         align-v="center"
         class="broadcast-banner m-0"
-        :class="{ 'non-urgent': broadcast.variant !== 'urgent', 'fixed-position': !previewMode }">
+        :class="{
+            'non-urgent': props.options.broadcast.variant !== 'urgent',
+            'fixed-position': !props.options.previewMode,
+        }">
         <BCol cols="auto">
             <FontAwesomeIcon
                 class="mx-2"
                 fade
                 size="2xl"
-                :class="`text-${getBroadcastVariant(broadcast)}`"
+                :class="`text-${getBroadcastVariant(props.options.broadcast)}`"
                 :icon="faInfoCircle" />
         </BCol>
         <BCol>
             <BRow align-v="center">
                 <Heading size="md" bold>
-                    {{ broadcast.content.subject }}
+                    {{ props.options.broadcast.content.subject }}
                 </Heading>
             </BRow>
             <BRow align-v="center">
-                <span class="broadcast-message" v-html="renderMarkdown(broadcast.content.message)" />
+                <span class="broadcast-message" v-html="renderMarkdown(props.options.broadcast.content.message)" />
             </BRow>
             <BRow>
                 <BButton
-                    v-for="actionLink in broadcast.content.action_links"
+                    v-for="actionLink in props.options.broadcast.content.action_links"
                     :key="actionLink.action_name"
                     class="mx-1"
                     :title="actionLink.action_name"
                     variant="primary"
-                    @click="onActionClick(broadcast, actionLink.link)">
+                    @click="onActionClick(actionLink.link)">
                     {{ actionLink.action_name }}
                 </BButton>
             </BRow>
         </BCol>
-        <BCol v-if="!previewMode" cols="auto" align-self="center" class="p-0">
+        <BCol v-if="!props.options.previewMode" cols="auto" align-self="center" class="p-0">
             <BButton
                 variant="light"
                 class="align-items-center d-flex"
-                @click="broadcastsStore.dismissBroadcast(broadcast)">
+                @click="broadcastsStore.dismissBroadcast(props.options.broadcast)">
                 <FontAwesomeIcon class="mx-1" icon="times" />
                 Dismiss
             </BButton>
diff --git a/client/src/components/Notifications/Categories/Categories.test.ts b/client/src/components/Notifications/Categories/Categories.test.ts
index 359d67b118c0..8b41421f030b 100644
--- a/client/src/components/Notifications/Categories/Categories.test.ts
+++ b/client/src/components/Notifications/Categories/Categories.test.ts
@@ -11,10 +11,7 @@ import SharedItemNotification from "@/components/Notifications/Categories/Shared
 
 const localVue = getLocalVue(true);
 
-async function mountComponent(
-    component: typeof MessageNotification | typeof SharedItemNotification,
-    propsData: object = {}
-): Promise<Wrapper<Vue>> {
+async function mountComponent(component: object, propsData: object = {}): Promise<Wrapper<Vue>> {
     const pinia = createTestingPinia();
     setActivePinia(pinia);
 
diff --git a/client/src/components/Notifications/Categories/MessageNotification.vue b/client/src/components/Notifications/Categories/MessageNotification.vue
index 42cdd86322fa..880c625aa2a9 100644
--- a/client/src/components/Notifications/Categories/MessageNotification.vue
+++ b/client/src/components/Notifications/Categories/MessageNotification.vue
@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BCol, BRow } from "bootstrap-vue";
 import { computed } from "vue";
 
-import type { MessageNotification } from "@/components/Notifications";
+import { type MessageNotification } from "@/components/Notifications";
 import { useMarkdown } from "@/composables/markdown";
 
 import Heading from "@/components/Common/Heading.vue";
@@ -13,21 +13,30 @@ import NotificationActions from "@/components/Notifications/NotificationActions.
 
 library.add(faInbox);
 
-interface Props {
-    previewMode?: boolean;
-    notification: MessageNotification;
-}
+type PartialNotification = Partial<MessageNotification> & { content: MessageNotification["content"] };
 
-const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true });
+type Options =
+    | {
+          previewMode?: false;
+          notification: MessageNotification;
+      }
+    | {
+          previewMode: true;
+          notification: PartialNotification;
+      };
+
+const props = defineProps<{
+    options: Options;
+}>();
 
-const props = defineProps<Props>();
+const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true });
 
 const notificationVariant = computed(() => {
-    switch (props.notification.variant) {
+    switch (props.options.notification.variant) {
         case "urgent":
             return "danger";
         default:
-            return props.notification.variant;
+            return props.options.notification.variant;
     }
 });
 </script>
@@ -35,14 +44,14 @@ const notificationVariant = computed(() => {
 <template>
     <BCol>
         <BRow align-v="center">
-            <Heading size="md" :bold="!notification.seen_time" class="mb-0">
+            <Heading size="md" :bold="!props.options.notification.seen_time" class="mb-0">
                 <FontAwesomeIcon :class="`text-${notificationVariant}`" icon="inbox" />
-                {{ notification.content.subject }}
+                {{ props.options.notification?.content?.subject }}
             </Heading>
-            <NotificationActions v-if="!previewMode" :notification="notification" />
+            <NotificationActions v-if="!props.options.previewMode" :notification="props.options.notification" />
         </BRow>
         <BRow>
-            <span id="notification-message" v-html="renderMarkdown(notification.content.message)" />
+            <span id="notification-message" v-html="renderMarkdown(props.options.notification.content.message)" />
         </BRow>
     </BCol>
 </template>
diff --git a/client/src/components/Notifications/NotificationActions.test.ts b/client/src/components/Notifications/NotificationActions.test.ts
index 9a7ef7fce539..90d5185b26a7 100644
--- a/client/src/components/Notifications/NotificationActions.test.ts
+++ b/client/src/components/Notifications/NotificationActions.test.ts
@@ -16,9 +16,11 @@ async function mouthNotificationActions() {
     const pinia = createTestingPinia();
     setActivePinia(pinia);
 
-    const wrapper = mount(NotificationActions, {
+    const wrapper = mount(NotificationActions as object, {
         propsData: {
-            notification: Math.random() > 0.5 ? generateMessageNotification() : generateNewSharedItemNotification(),
+            options: {
+                notification: Math.random() > 0.5 ? generateMessageNotification() : generateNewSharedItemNotification(),
+            },
         },
         localVue,
         pinia,
@@ -50,7 +52,7 @@ async function mouthNotificationActions() {
 }
 
 function updateSeenTime(
-    wrapper: Wrapper<NotificationActions>,
+    wrapper: Wrapper<any>,
     notification: UserNotification,
     newSeenTime: string | undefined = undefined
 ) {
diff --git a/client/src/components/Notifications/NotificationItem.vue b/client/src/components/Notifications/NotificationItem.vue
index 23ab3053b73c..edcf6e4e5bb6 100644
--- a/client/src/components/Notifications/NotificationItem.vue
+++ b/client/src/components/Notifications/NotificationItem.vue
@@ -1,26 +1,18 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { type UserNotification } from ".";
 
-import type { UserNotification } from ".";
-
-import MessageNotificationComponent from "./Categories/MessageNotification.vue";
-import SharedItemNotificationComponent from "./Categories/SharedItemNotification.vue";
-
-/**
- * A map of notification categories to their corresponding Vue components.
- */
-const notificationComponentMap = {
-    message: MessageNotificationComponent,
-    new_shared_item: SharedItemNotificationComponent,
-};
+import MessageNotification from "./Categories/MessageNotification.vue";
+import SharedItemNotification from "./Categories/SharedItemNotification.vue";
 
 const props = defineProps<{
     notification: UserNotification;
 }>();
-
-const notificationComponent = computed(() => notificationComponentMap[props.notification.category]);
 </script>
 
 <template>
-    <component :is="notificationComponent" :notification="props.notification" />
+    <SharedItemNotification
+        v-if="props.notification.category === 'new_shared_item'"
+        :notification="props.notification" />
+
+    <MessageNotification v-else :options="{ notification: props.notification }" />
 </template>
diff --git a/client/src/components/Notifications/index.ts b/client/src/components/Notifications/index.ts
index 72404579a851..3ec984ca6117 100644
--- a/client/src/components/Notifications/index.ts
+++ b/client/src/components/Notifications/index.ts
@@ -1,13 +1,15 @@
-import type { components } from "@/schema";
+import { type components } from "@/schema";
 
-export type UserNotification = components["schemas"]["UserNotificationResponse"];
+export type BaseUserNotification = components["schemas"]["UserNotificationResponse"];
 
-export interface MessageNotification extends UserNotification {
+export interface MessageNotification extends BaseUserNotification {
     category: "message";
     content: components["schemas"]["MessageNotificationContent"];
 }
 
-export interface SharedItemNotification extends UserNotification {
+export interface SharedItemNotification extends BaseUserNotification {
     category: "new_shared_item";
     content: components["schemas"]["NewSharedItemNotificationContent"];
 }
+
+export type UserNotification = MessageNotification | SharedItemNotification;
diff --git a/client/src/components/admin/Notifications/BroadcastForm.vue b/client/src/components/admin/Notifications/BroadcastForm.vue
index 087131b0dcf7..61253b559ac9 100644
--- a/client/src/components/admin/Notifications/BroadcastForm.vue
+++ b/client/src/components/admin/Notifications/BroadcastForm.vue
@@ -247,7 +247,7 @@ if (props.id) {
                 <Heading size="md"> Preview </Heading>
             </BRow>
 
-            <BroadcastContainer :broadcast="broadcastData" preview-mode />
+            <BroadcastContainer :options="{ broadcast: broadcastData, previewMode: true }" />
 
             <BRow class="m-2" align-h="center">
                 <AsyncButton
diff --git a/client/src/components/admin/Notifications/NotificationForm.vue b/client/src/components/admin/Notifications/NotificationForm.vue
index 690318fc6b03..78b08f81b293 100644
--- a/client/src/components/admin/Notifications/NotificationForm.vue
+++ b/client/src/components/admin/Notifications/NotificationForm.vue
@@ -217,7 +217,7 @@ async function sendNewNotification() {
             </BRow>
 
             <BCard class="my-2">
-                <MessageNotification :notification="notificationData.notification" preview-mode />
+                <MessageNotification :options="{ notification: notificationData.notification, previewMode: true }" />
             </BCard>
 
             <BRow class="m-2" align-h="center">

From 0388f130b76b0eb65213c1439ba0306d4d727181 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 25 Jul 2023 15:20:02 +1000
Subject: [PATCH 24/40] fix typescript errorrs in notificationsStore

Co-authored-by: Laila Los <44241786+electronicblueberry@users.noreply.github.com>
---
 client/src/stores/notificationsStore.ts | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/client/src/stores/notificationsStore.ts b/client/src/stores/notificationsStore.ts
index 88f2131239ce..c8c4eb62d04b 100644
--- a/client/src/stores/notificationsStore.ts
+++ b/client/src/stores/notificationsStore.ts
@@ -30,9 +30,8 @@ export const useNotificationsStore = defineStore("notificationsStore", () => {
     const unreadNotifications = computed(() => notifications.value.filter((n) => !n.seen_time));
 
     async function loadNotifications() {
-        await loadNotificationsFromServer().then((data) => {
-            notifications.value = mergeObjectListsById(data, [], "create_time", "desc");
-        });
+        const data = (await loadNotificationsFromServer()) as UserNotification[];
+        notifications.value = mergeObjectListsById(data, [], "create_time", "desc");
     }
 
     async function getNotificationStatus() {
@@ -43,16 +42,15 @@ export const useNotificationsStore = defineStore("notificationsStore", () => {
                 await broadcastsStore.loadBroadcasts();
                 await loadNotifications();
             } else {
-                await loadNotificationsStatus(lastNotificationUpdate.value).then((data) => {
-                    totalUnreadCount.value = data.total_unread_count;
-                    notifications.value = mergeObjectListsById(
-                        notifications.value,
-                        data.notifications,
-                        "create_time",
-                        "desc"
-                    );
-                    broadcastsStore.updateBroadcasts(data.broadcasts);
-                });
+                const data = await loadNotificationsStatus(lastNotificationUpdate.value);
+                totalUnreadCount.value = data.total_unread_count;
+                notifications.value = mergeObjectListsById(
+                    notifications.value,
+                    data.notifications as UserNotification[],
+                    "create_time",
+                    "desc"
+                );
+                broadcastsStore.updateBroadcasts(data.broadcasts);
             }
             lastNotificationUpdate.value = new Date();
         } catch (e) {

From 3eebd626afcd897fcd84c113a2ee07bdeb1b6a87 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 29 Aug 2023 18:05:59 +1000
Subject: [PATCH 25/40] fix GDateTime eslint error

---
 client/src/components/GDateTime.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/GDateTime.vue b/client/src/components/GDateTime.vue
index 9f149c456b88..a67f169086be 100644
--- a/client/src/components/GDateTime.vue
+++ b/client/src/components/GDateTime.vue
@@ -28,7 +28,7 @@ function updateDate(newDate: string) {
     const matches = newDate.match(/(\d{4})-(\d{2})-(\d{2})/);
 
     if (matches?.length && matches.length >= 4) {
-        const [_, year, month, day] = matches as Tuple<4, string>;
+        const [_v, year, month, day] = matches as Tuple<4, string>;
 
         const date = new Date(props.value);
 
@@ -48,7 +48,7 @@ function updateTime(newTime: string) {
     const matches = newTime.match(/(\d{2}):(\d{2})/);
 
     if (matches?.length && matches.length >= 3) {
-        const [_, hours, minutes] = matches as Tuple<3, string>;
+        const [_v, hours, minutes] = matches as Tuple<3, string>;
 
         const date = new Date(props.value);
 

From 4a21e0df22edd76a3b5fa28fbb4cfba9f93d3e9b Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 29 Aug 2023 18:06:49 +1000
Subject: [PATCH 26/40] rename `Notifications` admin section to `Notifications
 and Broadcasts`

---
 client/src/components/admin/AdminPanel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/admin/AdminPanel.vue b/client/src/components/admin/AdminPanel.vue
index 3f654e735c0a..3a50897e213c 100644
--- a/client/src/components/admin/AdminPanel.vue
+++ b/client/src/components/admin/AdminPanel.vue
@@ -81,7 +81,7 @@ export default {
                         },
                         {
                             id: "admin-link-notifications",
-                            title: "Notifications",
+                            title: "Notifications and Broadcasts",
                             route: "/admin/notifications",
                         },
                     ],

From caaa9c5514d8737acd3251d1268ae20c1e413c3b Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 29 Aug 2023 18:08:32 +1000
Subject: [PATCH 27/40] add remaining broadcasts to BroadcastContainer

---
 .../Broadcasts/BroadcastContainer.vue         | 60 +++++++++++++------
 .../Broadcasts/BroadcastsOverlay.vue          |  2 +-
 2 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/client/src/components/Notifications/Broadcasts/BroadcastContainer.vue b/client/src/components/Notifications/Broadcasts/BroadcastContainer.vue
index c489dcc97fa8..0637e40a9898 100644
--- a/client/src/components/Notifications/Broadcasts/BroadcastContainer.vue
+++ b/client/src/components/Notifications/Broadcasts/BroadcastContainer.vue
@@ -3,6 +3,8 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faInfoCircle, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BCol, BRow } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import { useMarkdown } from "@/composables/markdown";
@@ -31,8 +33,14 @@ const props = defineProps<{
 
 const router = useRouter();
 const broadcastsStore = useBroadcastsStore();
+const { activeBroadcasts } = storeToRefs(broadcastsStore);
 const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true });
 
+const remainingBroadcastsCountText = computed(() => {
+    const count = activeBroadcasts.value.length - 1;
+    return count > 0 ? `${count} more` : "";
+});
+
 function getBroadcastVariant(item: { variant: string }) {
     switch (item.variant) {
         case "urgent":
@@ -42,60 +50,78 @@ function getBroadcastVariant(item: { variant: string }) {
     }
 }
 
-function onActionClick(link: string) {
+function onActionClick(item: BroadcastNotification, link: string) {
     if (link.startsWith("/")) {
         router.push(link);
     } else {
         window.open(link, "_blank");
     }
+
+    if (!props.options.previewMode) {
+        onDismiss(item);
+    }
+}
+
+function onDismiss(item: BroadcastNotification) {
+    broadcastsStore.dismissBroadcast(item);
 }
 </script>
 
 <template>
     <BRow
         align-v="center"
-        class="broadcast-banner m-0"
+        class="broadcast-banner"
         :class="{
             'non-urgent': props.options.broadcast.variant !== 'urgent',
             'fixed-position': !props.options.previewMode,
-        }">
+        }"
+        no-gutters>
         <BCol cols="auto">
             <FontAwesomeIcon
                 class="mx-2"
-                fade
                 size="2xl"
                 :class="`text-${getBroadcastVariant(props.options.broadcast)}`"
                 :icon="faInfoCircle" />
         </BCol>
+
         <BCol>
-            <BRow align-v="center">
+            <BRow align-v="center" no-gutters>
                 <Heading size="md" bold>
                     {{ props.options.broadcast.content.subject }}
                 </Heading>
             </BRow>
-            <BRow align-v="center">
+
+            <BRow align-v="center" no-gutters>
                 <span class="broadcast-message" v-html="renderMarkdown(props.options.broadcast.content.message)" />
             </BRow>
-            <BRow>
-                <BButton
-                    v-for="actionLink in props.options.broadcast.content.action_links"
-                    :key="actionLink.action_name"
-                    class="mx-1"
-                    :title="actionLink.action_name"
-                    variant="primary"
-                    @click="onActionClick(actionLink.link)">
-                    {{ actionLink.action_name }}
-                </BButton>
+
+            <BRow no-gutters>
+                <div v-if="props.options.broadcast.content.action_links">
+                    <BButton
+                        v-for="actionLink in props.options.broadcast.content.action_links"
+                        :key="actionLink.action_name"
+                        class="mx-1"
+                        :title="actionLink.action_name"
+                        variant="primary"
+                        @click="onActionClick(props.options.broadcast, actionLink.link)">
+                        {{ actionLink.action_name }}
+                    </BButton>
+                </div>
             </BRow>
         </BCol>
+
         <BCol v-if="!props.options.previewMode" cols="auto" align-self="center" class="p-0">
             <BButton
                 variant="light"
                 class="align-items-center d-flex"
                 @click="broadcastsStore.dismissBroadcast(props.options.broadcast)">
-                <FontAwesomeIcon class="mx-1" icon="times" />
+                <FontAwesomeIcon class="mx-1" :icon="faTimes" />
                 Dismiss
             </BButton>
+
+            <div v-if="remainingBroadcastsCountText" class="text-center mt-2">
+                {{ remainingBroadcastsCountText }}...
+            </div>
         </BCol>
     </BRow>
 </template>
diff --git a/client/src/components/Notifications/Broadcasts/BroadcastsOverlay.vue b/client/src/components/Notifications/Broadcasts/BroadcastsOverlay.vue
index f47467442446..de9b6a1c8791 100644
--- a/client/src/components/Notifications/Broadcasts/BroadcastsOverlay.vue
+++ b/client/src/components/Notifications/Broadcasts/BroadcastsOverlay.vue
@@ -21,6 +21,6 @@ function getNextActiveBroadcast(): BroadcastNotification | undefined {
 
 <template>
     <div v-if="currentBroadcast">
-        <BroadcastContainer :options="{ currentBroadcast }" />
+        <BroadcastContainer :options="{ broadcast: currentBroadcast }" />
     </div>
 </template>

From 13e5e4b17b10fa8b0492405e6011e91ef90f5d7e Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 29 Aug 2023 18:11:03 +1000
Subject: [PATCH 28/40] add overlay in BroadcastsList and some Ui improvments

---
 .../admin/Notifications/BroadcastForm.vue     |   2 +-
 .../admin/Notifications/BroadcastsList.vue    | 136 +++++++++++-------
 .../admin/Notifications/NotificationForm.vue  |   2 +-
 .../Notifications/NotificationsManagement.vue |   7 +-
 4 files changed, 91 insertions(+), 56 deletions(-)

diff --git a/client/src/components/admin/Notifications/BroadcastForm.vue b/client/src/components/admin/Notifications/BroadcastForm.vue
index 61253b559ac9..354a2b443670 100644
--- a/client/src/components/admin/Notifications/BroadcastForm.vue
+++ b/client/src/components/admin/Notifications/BroadcastForm.vue
@@ -130,7 +130,7 @@ if (props.id) {
 
 <template>
     <div>
-        <Heading> {{ title }} </Heading>
+        <Heading h1 separator inline class="flex-grow-1"> {{ title }} </Heading>
 
         <BAlert v-if="loading" show>
             <LoadingSpan message="Loading broadcast" />
diff --git a/client/src/components/admin/Notifications/BroadcastsList.vue b/client/src/components/admin/Notifications/BroadcastsList.vue
index 65ece039d1fc..63e5f4ba47d9 100644
--- a/client/src/components/admin/Notifications/BroadcastsList.vue
+++ b/client/src/components/admin/Notifications/BroadcastsList.vue
@@ -10,6 +10,7 @@ import {
     faTrash,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton, BCol, BInputGroup, BRow } from "bootstrap-vue";
 import { ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
@@ -32,7 +33,8 @@ const router = useRouter();
 const { confirm } = useConfirmDialog();
 const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true });
 
-const loadingBroadcasts = ref(false);
+const overlay = ref(false);
+const loading = ref(false);
 const broadcasts = ref<BroadcastNotificationResponse[]>([]);
 
 const broadcastExpired = (item: BroadcastNotification) =>
@@ -59,7 +61,7 @@ async function deleteBroadcast(item: BroadcastNotification) {
     const confirmed = await confirm("Are you sure you want to delete this broadcast?", "Delete broadcast");
     if (confirmed) {
         await updateBroadcast(item.id, { expiration_time: new Date().toISOString().slice(0, 23) });
-        await loadBroadcastsList();
+        await loadBroadcastsList(true);
         Toast.info("Broadcast marked as expired and will be removed from the database");
     }
 }
@@ -91,11 +93,20 @@ function onActionClick(item: BroadcastNotification, link: string) {
     }
 }
 
-async function loadBroadcastsList() {
-    loadingBroadcasts.value = true;
-    broadcasts.value = await loadBroadcasts();
-    broadcasts.value.sort((a, b) => new Date(b.create_time).getTime() - new Date(a.create_time).getTime());
-    loadingBroadcasts.value = false;
+async function loadBroadcastsList(overlayLoading = false) {
+    if (overlayLoading) {
+        overlay.value = true;
+    } else {
+        loading.value = true;
+    }
+
+    try {
+        broadcasts.value = await loadBroadcasts();
+        broadcasts.value.sort((a, b) => new Date(b.create_time).getTime() - new Date(a.create_time).getTime());
+    } finally {
+        loading.value = false;
+        overlay.value = false;
+    }
 }
 
 loadBroadcastsList();
@@ -103,9 +114,27 @@ loadBroadcastsList();
 
 <template>
     <div>
-        <Heading size="md" class="mb-2"> Broadcasts list </Heading>
+        <Heading h2 class="mb-2"> Broadcasts list </Heading>
 
-        <BAlert v-if="loadingBroadcasts" variant="info" show>
+        <div class="list-operations mb-2">
+            <BRow class="align-items-center" no-gutters>
+                <BCol>
+                    <BRow align-h="end" align-v="center" no-gutters>
+                        <BButton
+                            v-b-tooltip.hover
+                            size="sm"
+                            :disabled="loading || overlay"
+                            variant="outline-primary"
+                            title="Refresh broadcasts"
+                            @click="loadBroadcastsList">
+                            <FontAwesomeIcon :icon="faRedo" />
+                        </BButton>
+                    </BRow>
+                </BCol>
+            </BRow>
+        </div>
+
+        <BAlert v-if="loading" variant="info" show>
             <LoadingSpan message="Loading broadcasts" />
         </BAlert>
 
@@ -113,32 +142,17 @@ loadBroadcastsList();
             No broadcasts to show. Use the button above to create a new broadcast.
         </BAlert>
 
-        <div v-else class="mx-1">
-            <BCard class="mb-2">
-                <BRow class="align-items-center" no-gutters>
-                    <BCol>
-                        <BRow align-h="end" align-v="center">
-                            <BButton
-                                v-b-tooltip.hover
-                                size="sm"
-                                variant="outline-primary"
-                                title="Refresh broadcasts"
-                                @click="loadBroadcastsList">
-                                <FontAwesomeIcon :icon="faRedo" />
-                            </BButton>
-                        </BRow>
-                    </BCol>
-                </BRow>
-            </BCard>
-
-            <BCard v-for="broadcast in broadcasts" :key="broadcast.id" class="mb-2">
-                <BRow align-v="center" align-h="between" class="mb-0 mx-0">
+        <BOverlay v-else :show="overlay" rounded="sm">
+            <div v-for="broadcast in broadcasts" :key="broadcast.id" class="broadcast-card mb-2">
+                <BRow align-v="center" align-h="between" no-gutters>
                     <Heading size="md" class="mb-0" :class="broadcastExpired(broadcast) ? 'expired-broadcast' : ''">
                         <FontAwesomeIcon :class="`text-${getBroadcastVariant(broadcast)}`" :icon="faInfoCircle" />
                         {{ broadcast.content.subject }}
                     </Heading>
-                    <BRow align-h="end" align-v="center">
-                        <UtcDate class="mx-2" :date="broadcast.create_time" mode="elapsed" />
+
+                    <BRow align-h="end" align-v="center" no-gutters>
+                        <UtcDate class="mr-2" :date="broadcast.create_time" mode="elapsed" />
+
                         <BInputGroup v-if="!broadcastExpired(broadcast)">
                             <BButton
                                 id="edit-broadcast-button"
@@ -148,6 +162,7 @@ loadBroadcastsList();
                                 @click="onEditClick(broadcast)">
                                 <FontAwesomeIcon :icon="faEdit" />
                             </BButton>
+
                             <BButton
                                 id="delete-button"
                                 v-b-tooltip.hover
@@ -160,19 +175,19 @@ loadBroadcastsList();
                     </BRow>
                 </BRow>
 
-                <BRow align-v="center" align-h="between" class="mx-0">
+                <BRow align-v="center" align-h="between" no-gutters>
                     <BCol>
-                        <BRow align-v="center">
+                        <BRow align-v="center" no-gutters>
                             <span
-                                class="broadcast-message"
                                 :class="broadcastExpired(broadcast) ? 'expired-broadcast' : ''"
                                 v-html="renderMarkdown(broadcast.content.message)" />
                         </BRow>
-                        <BRow>
+
+                        <BRow no-gutters>
                             <BButton
                                 v-for="actionLink in broadcast.content.action_links"
                                 :key="actionLink.action_name"
-                                class="mx-1"
+                                class="mr-1"
                                 :title="actionLink.action_name"
                                 variant="primary"
                                 @click="onActionClick(broadcast, actionLink.link)">
@@ -180,15 +195,17 @@ loadBroadcastsList();
                             </BButton>
                         </BRow>
                     </BCol>
+
                     <BCol>
-                        <BRow align-v="center" align-h="end">
+                        <BRow align-v="center" align-h="end" no-gutters>
                             <FontAwesomeIcon
                                 :icon="broadcastPublished(broadcast) ? faBroadcastTower : faClock"
                                 :class="broadcastPublished(broadcast) ? 'published' : 'scheduled'"
                                 class="mx-1" />
                             {{ getBroadcastPublicity(broadcast) }}
                         </BRow>
-                        <BRow align-v="center" align-h="end">
+
+                        <BRow align-v="center" align-h="end" no-gutters>
                             <FontAwesomeIcon
                                 variant="danger"
                                 :icon="broadcastExpired(broadcast) ? faTrash : faHourglassHalf"
@@ -198,30 +215,43 @@ loadBroadcastsList();
                         </BRow>
                     </BCol>
                 </BRow>
-            </BCard>
-        </div>
+            </div>
+        </BOverlay>
     </div>
 </template>
 
 <style scoped lang="scss">
 @import "scss/theme/blue.scss";
-.expired-broadcast {
-    text-decoration: line-through;
-}
 
-.published {
-    color: $brand-primary;
+.list-operations {
+    border-radius: 0.5rem;
+    border: 1px solid $gray-400;
+    padding: 0.5rem;
 }
 
-.scheduled {
-    color: $brand-warning;
-}
+.broadcast-card {
+    border-radius: 0.25rem;
+    border: 1px solid $gray-300;
+    padding: 1rem;
 
-.expires {
-    color: $brand-info;
-}
+    .expired-broadcast {
+        text-decoration: line-through;
+    }
+
+    .published {
+        color: $brand-primary;
+    }
+
+    .scheduled {
+        color: $brand-warning;
+    }
+
+    .expires {
+        color: $brand-info;
+    }
 
-.expired {
-    color: $brand-danger;
+    .expired {
+        color: $brand-danger;
+    }
 }
 </style>
diff --git a/client/src/components/admin/Notifications/NotificationForm.vue b/client/src/components/admin/Notifications/NotificationForm.vue
index 78b08f81b293..24eaad0fa58d 100644
--- a/client/src/components/admin/Notifications/NotificationForm.vue
+++ b/client/src/components/admin/Notifications/NotificationForm.vue
@@ -124,7 +124,7 @@ async function sendNewNotification() {
 
 <template>
     <div>
-        <Heading> New Notification </Heading>
+        <Heading h1 separator inline class="flex-grow-1"> New Notification </Heading>
 
         <BAlert v-if="loading" show>
             <LoadingSpan message="Loading notification" />
diff --git a/client/src/components/admin/Notifications/NotificationsManagement.vue b/client/src/components/admin/Notifications/NotificationsManagement.vue
index 37e8720d93e9..0863aeae64bb 100644
--- a/client/src/components/admin/Notifications/NotificationsManagement.vue
+++ b/client/src/components/admin/Notifications/NotificationsManagement.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton } from "bootstrap-vue";
 import { useRouter } from "vue-router/composables";
 
 import BroadcastsList from "@/components/admin/Notifications/BroadcastsList.vue";
@@ -19,12 +20,16 @@ function goToCreateNewBroadcast() {
 <template>
     <div aria-labelledby="notifications-managements">
         <div class="d-flex justify-content-between">
-            <Heading id="notifications-title">Notifications and Broadcasts</Heading>
+            <Heading id="notifications-title" h1 separator inline class="flex-grow-1">
+                Notifications and Broadcasts
+            </Heading>
+
             <div>
                 <BButton class="mb-2" variant="outline-primary" @click="goToCreateNewNotification">
                     <FontAwesomeIcon icon="plus" />
                     Send new notification
                 </BButton>
+
                 <BButton class="mb-2" variant="outline-primary" @click="goToCreateNewBroadcast">
                     <FontAwesomeIcon icon="plus" />
                     Create new broadcast

From 56e77d98c0661353bb62883be54e5ba9fe3318b0 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 29 Aug 2023 18:48:56 +1000
Subject: [PATCH 29/40] add an alert in NotificationForm explains edit/delete a
 notification

---
 .../admin/Notifications/NotificationForm.vue        | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/client/src/components/admin/Notifications/NotificationForm.vue b/client/src/components/admin/Notifications/NotificationForm.vue
index 24eaad0fa58d..a31bfc3d5284 100644
--- a/client/src/components/admin/Notifications/NotificationForm.vue
+++ b/client/src/components/admin/Notifications/NotificationForm.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BCard, BCol, BFormGroup, BRow } from "bootstrap-vue";
 import { computed, type Ref, ref } from "vue";
 import { useRouter } from "vue-router/composables";
@@ -19,6 +22,8 @@ import GDateTime from "@/components/GDateTime.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import MessageNotification from "@/components/Notifications/Categories/MessageNotification.vue";
 
+library.add(faInfoCircle);
+
 type SelectOption = [string, string];
 type NotificationCreateData = components["schemas"]["NotificationCreateData"];
 type NotificationCreateRequest = components["schemas"]["NotificationCreateRequest"];
@@ -220,6 +225,14 @@ async function sendNewNotification() {
                 <MessageNotification :options="{ notification: notificationData.notification, previewMode: true }" />
             </BCard>
 
+            <BAlert show variant="info">
+                <FontAwesomeIcon class="mr-2" :icon="faInfoCircle" />
+                <span v-localize>
+                    Once you send the notification, it will be sent to all the recipients and cannot be edited or
+                    deleted.
+                </span>
+            </BAlert>
+
             <BRow class="m-2" align-h="center">
                 <AsyncButton
                     icon="save"

From 5959d3cc21f1a33c00b4d3f18e621d8eff929ae3 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 29 Aug 2023 18:49:32 +1000
Subject: [PATCH 30/40] add `created` to BroadcastsList items

---
 .../src/components/admin/Notifications/BroadcastsList.vue  | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/src/components/admin/Notifications/BroadcastsList.vue b/client/src/components/admin/Notifications/BroadcastsList.vue
index 63e5f4ba47d9..969d1eb25246 100644
--- a/client/src/components/admin/Notifications/BroadcastsList.vue
+++ b/client/src/components/admin/Notifications/BroadcastsList.vue
@@ -151,7 +151,10 @@ loadBroadcastsList();
                     </Heading>
 
                     <BRow align-h="end" align-v="center" no-gutters>
-                        <UtcDate class="mr-2" :date="broadcast.create_time" mode="elapsed" />
+                        <span>
+                            created
+                            <UtcDate class="mr-2" :date="broadcast.create_time" mode="elapsed" />
+                        </span>
 
                         <BInputGroup v-if="!broadcastExpired(broadcast)">
                             <BButton
@@ -176,7 +179,7 @@ loadBroadcastsList();
                 </BRow>
 
                 <BRow align-v="center" align-h="between" no-gutters>
-                    <BCol>
+                    <BCol cols="auto">
                         <BRow align-v="center" no-gutters>
                             <span
                                 :class="broadcastExpired(broadcast) ? 'expired-broadcast' : ''"

From 1707f3033193eaac735c8aae00c4eea79f657612 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 29 Aug 2023 19:21:38 +1000
Subject: [PATCH 31/40] fix NotificationActions test error

---
 .../Notifications/NotificationActions.test.ts          | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Notifications/NotificationActions.test.ts b/client/src/components/Notifications/NotificationActions.test.ts
index 90d5185b26a7..b31de7a4792e 100644
--- a/client/src/components/Notifications/NotificationActions.test.ts
+++ b/client/src/components/Notifications/NotificationActions.test.ts
@@ -3,6 +3,7 @@ import { getLocalVue } from "@tests/jest/helpers";
 import { mount, type Wrapper } from "@vue/test-utils";
 import flushPromises from "flush-promises";
 import { setActivePinia } from "pinia";
+import Vue from "vue";
 
 import type { UserNotification } from "@/components/Notifications/index";
 import { generateMessageNotification, generateNewSharedItemNotification } from "@/components/Notifications/test-utils";
@@ -18,9 +19,7 @@ async function mouthNotificationActions() {
 
     const wrapper = mount(NotificationActions as object, {
         propsData: {
-            options: {
-                notification: Math.random() > 0.5 ? generateMessageNotification() : generateNewSharedItemNotification(),
-            },
+            notification: Math.random() > 0.5 ? generateMessageNotification() : generateNewSharedItemNotification(),
         },
         localVue,
         pinia,
@@ -52,7 +51,7 @@ async function mouthNotificationActions() {
 }
 
 function updateSeenTime(
-    wrapper: Wrapper<any>,
+    wrapper: Wrapper<Vue>,
     notification: UserNotification,
     newSeenTime: string | undefined = undefined
 ) {
@@ -82,7 +81,8 @@ describe("NotificationActions.vue", () => {
 
         await wrapper.vm.$nextTick();
 
-        expect(spyOnUpdateNotification).toHaveBeenCalled();
+        expect(spyOnUpdateNotification).toHaveBeenCalledTimes(1);
+
         expect(wrapper.find("#expiration-time-button").exists()).toBe(true);
     });
 

From 43cfce4ac6a6e8f66272ba57942d436666e3f464 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 29 Aug 2023 19:36:05 +1000
Subject: [PATCH 32/40] fix BroadcastContainer test

---
 .../Notifications/Broadcasts/BroadcastContainer.vue        | 1 +
 .../Notifications/Broadcasts/BroadcastsOverlay.test.ts     | 7 +++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Notifications/Broadcasts/BroadcastContainer.vue b/client/src/components/Notifications/Broadcasts/BroadcastContainer.vue
index 0637e40a9898..3dec6c18928f 100644
--- a/client/src/components/Notifications/Broadcasts/BroadcastContainer.vue
+++ b/client/src/components/Notifications/Broadcasts/BroadcastContainer.vue
@@ -112,6 +112,7 @@ function onDismiss(item: BroadcastNotification) {
 
         <BCol v-if="!props.options.previewMode" cols="auto" align-self="center" class="p-0">
             <BButton
+                id="dismiss-button"
                 variant="light"
                 class="align-items-center d-flex"
                 @click="broadcastsStore.dismissBroadcast(props.options.broadcast)">
diff --git a/client/src/components/Notifications/Broadcasts/BroadcastsOverlay.test.ts b/client/src/components/Notifications/Broadcasts/BroadcastsOverlay.test.ts
index 3fac9f5966a6..210707179ffe 100644
--- a/client/src/components/Notifications/Broadcasts/BroadcastsOverlay.test.ts
+++ b/client/src/components/Notifications/Broadcasts/BroadcastsOverlay.test.ts
@@ -1,6 +1,6 @@
 import { createTestingPinia } from "@pinia/testing";
 import { getLocalVue } from "@tests/jest/helpers";
-import { shallowMount } from "@vue/test-utils";
+import { mount } from "@vue/test-utils";
 import flushPromises from "flush-promises";
 import { setActivePinia } from "pinia";
 
@@ -46,9 +46,12 @@ async function mountBroadcastsOverlayWith(broadcasts: BroadcastNotification[] =
         broadcastsStore.broadcasts = broadcastsStore.broadcasts.filter((b) => b.id !== broadcast.id);
     });
 
-    const wrapper = shallowMount(BroadcastsOverlay, {
+    const wrapper = mount(BroadcastsOverlay, {
         localVue,
         pinia,
+        stubs: {
+            BroadcastContainer: true,
+        },
     });
 
     await flushPromises();

From 116d94c5398d5fd306ee81e9e17794654799de7c Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 29 Aug 2023 21:51:17 +1000
Subject: [PATCH 33/40] fix Notifications Categories test

---
 .../components/Notifications/Categories/Categories.test.ts    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Notifications/Categories/Categories.test.ts b/client/src/components/Notifications/Categories/Categories.test.ts
index 8b41421f030b..f471dbaa6149 100644
--- a/client/src/components/Notifications/Categories/Categories.test.ts
+++ b/client/src/components/Notifications/Categories/Categories.test.ts
@@ -35,7 +35,9 @@ describe("Notifications categories", () => {
         notification.content.message = "This is a **markdown** message to test _rendering_";
 
         const wrapper = await mountComponent(MessageNotification, {
-            notification,
+            options: {
+                notification,
+            },
         });
 
         expect(wrapper.find("#notification-message").html()).toContain(

From 807b0280b75c0028b3d59bfa1d106d542ad9b036 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 30 Aug 2023 15:19:22 +1000
Subject: [PATCH 34/40] add unit tests for GDateTime

---
 client/src/components/GDateTime.test.ts | 43 +++++++++++++++++++++++++
 client/src/components/GDateTime.vue     |  4 ++-
 2 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/GDateTime.test.ts

diff --git a/client/src/components/GDateTime.test.ts b/client/src/components/GDateTime.test.ts
new file mode 100644
index 000000000000..e1303991b752
--- /dev/null
+++ b/client/src/components/GDateTime.test.ts
@@ -0,0 +1,43 @@
+import { getLocalVue } from "@tests/jest/helpers";
+import { mount } from "@vue/test-utils";
+
+import GDateTime from "./GDateTime.vue";
+
+const localVue = getLocalVue(true);
+
+async function mountGDateTime(props: object) {
+    const wrapper = mount(GDateTime as object, {
+        propsData: {
+            ...props,
+        },
+        localVue,
+    });
+
+    return wrapper;
+}
+
+describe("GDateTime.vue", () => {
+    it("emits updated date when input changes", async () => {
+        const wrapper = await mountGDateTime({
+            value: new Date("1970-01-01T00:00:00"),
+        });
+
+        const dateInput = wrapper.find('input[type="date"]');
+        await dateInput.setValue("2023-08-30");
+
+        expect(wrapper.emitted()).toHaveProperty("input");
+        expect(wrapper.emitted()?.["input"]?.[0]?.[0]).toEqual(new Date("2023-08-30T00:00:00"));
+    });
+
+    it("emits updated time when input changes", async () => {
+        const wrapper = await mountGDateTime({
+            value: new Date("1970-01-01T00:00:00"),
+        });
+
+        const timeInput = wrapper.find('input[type="time"]');
+        await timeInput.setValue("12:30");
+
+        expect(wrapper.emitted()).toHaveProperty("input");
+        expect(wrapper.emitted()?.["input"]?.[0]?.[0]).toEqual(new Date("1970-01-01T12:30:00"));
+    });
+});
diff --git a/client/src/components/GDateTime.vue b/client/src/components/GDateTime.vue
index a67f169086be..616bc8322684 100644
--- a/client/src/components/GDateTime.vue
+++ b/client/src/components/GDateTime.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { BFormInput, BInputGroup } from "bootstrap-vue";
 import { Tuple } from "types/utilityTypes";
 import { computed } from "vue";
 
@@ -24,6 +25,7 @@ const time = computed(() => {
 
     return `${hours}:${minutes}`;
 });
+
 function updateDate(newDate: string) {
     const matches = newDate.match(/(\d{4})-(\d{2})-(\d{2})/);
 
@@ -64,6 +66,6 @@ function updateTime(newTime: string) {
 <template>
     <BInputGroup>
         <BFormInput :value="date" type="date" @input="updateDate" />
-        <BFormInput :value="time" type="time" @change="updateTime" />
+        <BFormInput :value="time" type="time" @input="updateTime" />
     </BInputGroup>
 </template>

From d05bcba9f0d4c46ac964267cea0b4ade4595e3bf Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 30 Aug 2023 18:03:05 +1000
Subject: [PATCH 35/40] create test utils for admin notifications components

---
 .../admin/Notifications/test.utils.ts         | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 client/src/components/admin/Notifications/test.utils.ts

diff --git a/client/src/components/admin/Notifications/test.utils.ts b/client/src/components/admin/Notifications/test.utils.ts
new file mode 100644
index 000000000000..6b137aa636b2
--- /dev/null
+++ b/client/src/components/admin/Notifications/test.utils.ts
@@ -0,0 +1,51 @@
+import { type components } from "@/schema";
+
+type NotificationVariants = components["schemas"]["NotificationVariant"];
+type BroadcastNotificationResponse = components["schemas"]["BroadcastNotificationResponse"];
+
+export function generateRandomString() {
+    return Math.random().toString(36).substring(7) as string;
+}
+
+export function generateRandomVariant() {
+    const variants: NotificationVariants[] = ["info", "warning", "urgent"];
+    const randomIndex = Math.floor(Math.random() * variants.length);
+    return variants[randomIndex] as NotificationVariants;
+}
+
+export function generateNewBroadcast({ actionLink = false, published = false }): BroadcastNotificationResponse {
+    let baseDate;
+
+    if (published) {
+        baseDate = Date.now() - 100000;
+    } else {
+        baseDate = Date.now() + 100000;
+    }
+
+    const tmp: BroadcastNotificationResponse = {
+        id: "broadcast-" + Math.floor(Math.random() * 1000000),
+        source: generateRandomString(),
+        category: "broadcast",
+        variant: generateRandomVariant(),
+        create_time: new Date(baseDate + 1).toISOString(),
+        update_time: new Date(baseDate + 2000).toISOString(),
+        publication_time: new Date(baseDate + 3000).toISOString(),
+        expiration_time: new Date(baseDate + 86400000).toISOString(),
+        content: {
+            subject: generateRandomString(),
+            message: generateRandomString(),
+            category: "broadcast",
+        },
+    };
+
+    if (actionLink) {
+        tmp.content.action_links = [
+            {
+                link: "https://test.link",
+                action_name: generateRandomString(),
+            },
+        ];
+    }
+
+    return tmp;
+}

From 4fbf52a4ffd47c9e193e2c882d0f94460af5dc52 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 30 Aug 2023 18:03:42 +1000
Subject: [PATCH 36/40] add jest tests for BroadcastForm

---
 .../admin/Notifications/BroadcastForm.test.ts | 159 ++++++++++++++++++
 .../admin/Notifications/BroadcastForm.vue     |  12 +-
 2 files changed, 166 insertions(+), 5 deletions(-)
 create mode 100644 client/src/components/admin/Notifications/BroadcastForm.test.ts

diff --git a/client/src/components/admin/Notifications/BroadcastForm.test.ts b/client/src/components/admin/Notifications/BroadcastForm.test.ts
new file mode 100644
index 000000000000..51d2bf612316
--- /dev/null
+++ b/client/src/components/admin/Notifications/BroadcastForm.test.ts
@@ -0,0 +1,159 @@
+import { createTestingPinia } from "@pinia/testing";
+import { getLocalVue } from "@tests/jest/helpers";
+import { mount, type Wrapper } from "@vue/test-utils";
+import flushPromises from "flush-promises";
+import { setActivePinia } from "pinia";
+
+import { mockFetcher } from "@/schema/__mocks__";
+
+import { generateNewBroadcast, generateRandomString } from "./test.utils";
+
+import BroadcastForm from "./BroadcastForm.vue";
+
+jest.mock("@/schema");
+
+const SUBJECT_INPUT_SELECTOR = "#broadcast-subject";
+const MESSAGE_INPUT_SELECTOR = "#broadcast-message";
+const ACTION_LINK_SELECTOR = "#create-action-link";
+const SUBMIT_BUTTON_SELECTOR = "#broadcast-submit";
+const PUBLISHED_WARNING_SELECTOR = "#broadcast-published-warning";
+
+const localVue = getLocalVue(true);
+
+async function mountBroadcastForm(props?: object) {
+    const pinia = createTestingPinia();
+    setActivePinia(pinia);
+
+    const mockRouter = {
+        push: jest.fn(),
+    };
+
+    const wrapper = mount(BroadcastForm as object, {
+        propsData: {
+            ...props,
+        },
+        localVue,
+        pinia,
+        stubs: {
+            FontAwesomeIcon: true,
+        },
+        mocks: {
+            $router: mockRouter,
+        },
+    });
+
+    await flushPromises();
+
+    return { wrapper, mockRouter };
+}
+
+describe("BroadcastForm.vue", () => {
+    function expectSubmitButton(wrapper: Wrapper<Vue>, enabled: boolean) {
+        expect(wrapper.find(SUBMIT_BUTTON_SELECTOR).exists()).toBeTruthy();
+        expect(wrapper.find(SUBMIT_BUTTON_SELECTOR).attributes("disabled")).toBe(enabled ? undefined : "disabled");
+        expect(wrapper.find(SUBMIT_BUTTON_SELECTOR).attributes("title")).toBe(
+            enabled ? "" : "Please fill all required fields"
+        );
+    }
+
+    async function createBroadcast(wrapper: Wrapper<Vue>, mockRouter: { push: jest.Mock }, actionsLink = false) {
+        mockFetcher.path("/api/notifications/broadcast").method("post").mock({ data: {} });
+
+        expectSubmitButton(wrapper, false);
+
+        await wrapper.find(SUBJECT_INPUT_SELECTOR).setValue("Test subject");
+        await wrapper.find(MESSAGE_INPUT_SELECTOR).setValue("Test message");
+
+        if (actionsLink) {
+            await wrapper.find(ACTION_LINK_SELECTOR).trigger("click");
+
+            await wrapper.vm.$nextTick();
+
+            await wrapper.find("#broadcast-action-link-name-0").setValue("Test link name");
+            await wrapper.find("#broadcast-action-link-link-0").setValue("https://test.link");
+        }
+
+        expectSubmitButton(wrapper, true);
+
+        await wrapper.find(SUBMIT_BUTTON_SELECTOR).trigger("click");
+
+        await wrapper.vm.$nextTick();
+
+        expect(mockRouter.push).toHaveBeenCalledTimes(1);
+        expect(mockRouter.push).toHaveBeenCalledWith("/admin/notifications");
+    }
+
+    it("should render form with empty fields and submit button disabled", async () => {
+        const { wrapper } = await mountBroadcastForm();
+
+        expectSubmitButton(wrapper, false);
+    });
+
+    it("should create broadcast when all inputs are defined", async () => {
+        const { wrapper, mockRouter } = await mountBroadcastForm();
+
+        await createBroadcast(wrapper, mockRouter);
+    });
+
+    it("should create broadcast with a link when all inputs are defined", async () => {
+        const { wrapper, mockRouter } = await mountBroadcastForm();
+
+        await createBroadcast(wrapper, mockRouter, true);
+    });
+
+    it("should get broadcast data when id is defined", async () => {
+        const FAKE_BROADCAST = generateNewBroadcast({ actionLink: true });
+        mockFetcher.path("/api/notifications/broadcast/{notification_id}").method("get").mock({ data: FAKE_BROADCAST });
+
+        const { wrapper } = await mountBroadcastForm({ id: FAKE_BROADCAST.id });
+
+        await wrapper.vm.$nextTick();
+
+        expect((wrapper.find(SUBJECT_INPUT_SELECTOR).element as HTMLInputElement).value).toBe(
+            FAKE_BROADCAST.content.subject
+        );
+        expect((wrapper.find(MESSAGE_INPUT_SELECTOR).element as HTMLInputElement).value).toBe(
+            FAKE_BROADCAST.content.message
+        );
+        expect(wrapper.find("#broadcast-action-link-name-0").exists()).toBeTruthy();
+        expect(wrapper.find("#broadcast-action-link-link-0").exists()).toBeTruthy();
+    });
+
+    it("should update broadcast when id is defined and all inputs are defined", async () => {
+        const FAKE_BROADCAST = generateNewBroadcast({ actionLink: true });
+        mockFetcher.path("/api/notifications/broadcast/{notification_id}").method("get").mock({ data: FAKE_BROADCAST });
+        mockFetcher.path("/api/notifications/broadcast/{notification_id}").method("put").mock({ data: {} });
+
+        const { wrapper, mockRouter } = await mountBroadcastForm({ id: FAKE_BROADCAST.id });
+
+        const newSubject = generateRandomString();
+        await wrapper.find(SUBJECT_INPUT_SELECTOR).setValue(newSubject);
+
+        expectSubmitButton(wrapper, true);
+
+        await wrapper.find(SUBMIT_BUTTON_SELECTOR).trigger("click");
+
+        await wrapper.vm.$nextTick();
+
+        expect(mockRouter.push).toHaveBeenCalledTimes(1);
+        expect(mockRouter.push).toHaveBeenCalledWith("/admin/notifications");
+    });
+
+    it("should not show the published warning when editing a scheduled broadcast", async () => {
+        const FAKE_BROADCAST = generateNewBroadcast({ published: false });
+        mockFetcher.path("/api/notifications/broadcast/{notification_id}").method("get").mock({ data: FAKE_BROADCAST });
+
+        const { wrapper } = await mountBroadcastForm({ id: FAKE_BROADCAST.id });
+
+        expect(wrapper.find(PUBLISHED_WARNING_SELECTOR).exists()).toBeFalsy();
+    });
+
+    it("should show the published published when editing a published broadcast", async () => {
+        const FAKE_BROADCAST = generateNewBroadcast({ published: true });
+        mockFetcher.path("/api/notifications/broadcast/{notification_id}").method("get").mock({ data: FAKE_BROADCAST });
+
+        const { wrapper } = await mountBroadcastForm({ id: FAKE_BROADCAST.id });
+
+        expect(wrapper.find(PUBLISHED_WARNING_SELECTOR).exists()).toBeTruthy();
+    });
+});
diff --git a/client/src/components/admin/Notifications/BroadcastForm.vue b/client/src/components/admin/Notifications/BroadcastForm.vue
index 354a2b443670..4abe5b76bd89 100644
--- a/client/src/components/admin/Notifications/BroadcastForm.vue
+++ b/client/src/components/admin/Notifications/BroadcastForm.vue
@@ -95,9 +95,10 @@ async function createOrUpdateBroadcast() {
             await createBroadcast(broadcastData.value);
             Toast.success("Broadcast created");
         }
-        router.push("/admin/notifications/");
     } catch (error: any) {
         Toast.error(error.err_msg);
+    } finally {
+        router.push("/admin/notifications");
     }
 }
 
@@ -137,7 +138,7 @@ if (props.id) {
         </BAlert>
 
         <div v-else>
-            <BAlert v-if="props.id && broadcastPublished" variant="warning" show>
+            <BAlert v-if="props.id && broadcastPublished" id="broadcast-published-warning" variant="warning" show>
                 This broadcast has already been published. Some users may have already seen it and changing it now will
                 not affect them.
             </BAlert>
@@ -179,7 +180,7 @@ if (props.id) {
                 <BRow v-for="(actionLink, index) in broadcastData.content.action_links" :key="index" class="my-2">
                     <BCol cols="auto">
                         <BFormInput
-                            :id="`broadcast-action-link-name-${{ index }}`"
+                            :id="`broadcast-action-link-name-${index}`"
                             v-model="actionLink.action_name"
                             type="text"
                             placeholder="Enter action name"
@@ -187,7 +188,7 @@ if (props.id) {
                     </BCol>
                     <BCol>
                         <BFormInput
-                            :id="`broadcast-action-link-link-${{ index }}`"
+                            :id="`broadcast-action-link-link-${index}`"
                             v-model="actionLink.link"
                             type="url"
                             placeholder="Enter action link"
@@ -195,7 +196,7 @@ if (props.id) {
                     </BCol>
                     <BCol cols="auto">
                         <BButton
-                            :id="`delete-action-link-${{ index }}}`"
+                            :id="`delete-action-link-${index}}`"
                             v-b-tooltip.hover.bottom
                             title="Delete action link"
                             variant="error-outline"
@@ -251,6 +252,7 @@ if (props.id) {
 
             <BRow class="m-2" align-h="center">
                 <AsyncButton
+                    id="broadcast-submit"
                     icon="save"
                     :title="!requiredFieldsFilled ? 'Please fill all required fields' : ''"
                     variant="primary"

From 2ac90d6c5081876ff38d07d804c6d211e3391892 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 31 Aug 2023 12:23:35 +1000
Subject: [PATCH 37/40] use schema users api in admin notifications.services

---
 .../admin/Notifications/notifications.services.ts | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/client/src/components/admin/Notifications/notifications.services.ts b/client/src/components/admin/Notifications/notifications.services.ts
index 2b1fb6fab2c0..fd115d2e81f6 100644
--- a/client/src/components/admin/Notifications/notifications.services.ts
+++ b/client/src/components/admin/Notifications/notifications.services.ts
@@ -24,20 +24,19 @@ export async function updateNotification(id: string, notification: UserNotificat
 }
 
 const getRolesReq = fetcher.path("/api/roles").method("get").create();
-type RoleModelResponse = components["schemas"]["RoleModelResponse"];
-export async function getRoles(): Promise<RoleModelResponse[]> {
+export async function getRoles() {
     const { data } = await getRolesReq({});
     return data;
 }
 
-type GroupModel = components["schemas"]["GroupModel"];
-export async function getGroups(): Promise<GroupModel[]> {
-    const { data } = await axios.get("/api/groups");
+const getUsersReq = fetcher.path("/api/users").method("get").create();
+export async function getUsers() {
+    const { data } = await getUsersReq({});
     return data;
 }
 
-type UserModel = components["schemas"]["UserModel"];
-export async function getUsers(): Promise<UserModel[]> {
-    const { data } = await axios.get("/api/users");
+type GroupModel = components["schemas"]["GroupModel"];
+export async function getGroups(): Promise<GroupModel[]> {
+    const { data } = await axios.get("/api/groups");
     return data;
 }

From 03658e4ebd89a41ef7b163040a9742511a0bd5e4 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 31 Aug 2023 12:26:31 +1000
Subject: [PATCH 38/40] add jest test for NotificationForm

---
 .../Notifications/NotificationForm.test.ts    | 50 +++++++++++++++++++
 .../admin/Notifications/NotificationForm.vue  |  1 +
 2 files changed, 51 insertions(+)
 create mode 100644 client/src/components/admin/Notifications/NotificationForm.test.ts

diff --git a/client/src/components/admin/Notifications/NotificationForm.test.ts b/client/src/components/admin/Notifications/NotificationForm.test.ts
new file mode 100644
index 000000000000..e2d26ac3856d
--- /dev/null
+++ b/client/src/components/admin/Notifications/NotificationForm.test.ts
@@ -0,0 +1,50 @@
+import { createTestingPinia } from "@pinia/testing";
+import { getLocalVue } from "@tests/jest/helpers";
+import { mount, type Wrapper } from "@vue/test-utils";
+import flushPromises from "flush-promises";
+import { setActivePinia } from "pinia";
+import Vue from "vue";
+
+import NotificationForm from "./NotificationForm.vue";
+
+jest.mock("@/schema");
+
+const SUBMIT_BUTTON_SELECTOR = "#notification-submit";
+
+const localVue = getLocalVue(true);
+
+async function mountNotificationForm(props?: object) {
+    const pinia = createTestingPinia();
+    setActivePinia(pinia);
+
+    const wrapper = mount(NotificationForm as object, {
+        propsData: {
+            ...props,
+        },
+        localVue,
+        pinia,
+        stubs: {
+            FontAwesomeIcon: true,
+        },
+    });
+
+    await flushPromises();
+
+    return { wrapper };
+}
+
+describe("NotificationForm.vue", () => {
+    function expectSubmitButton(wrapper: Wrapper<Vue>, enabled: boolean) {
+        expect(wrapper.find(SUBMIT_BUTTON_SELECTOR).exists()).toBeTruthy();
+        expect(wrapper.find(SUBMIT_BUTTON_SELECTOR).attributes("disabled")).toBe(enabled ? undefined : "disabled");
+        expect(wrapper.find(SUBMIT_BUTTON_SELECTOR).attributes("title")).toBe(
+            enabled ? "" : "Please fill all required fields"
+        );
+    }
+
+    it("should render form with empty fields and submit button disabled", async () => {
+        const { wrapper } = await mountNotificationForm();
+
+        expectSubmitButton(wrapper, false);
+    });
+});
diff --git a/client/src/components/admin/Notifications/NotificationForm.vue b/client/src/components/admin/Notifications/NotificationForm.vue
index a31bfc3d5284..0236410c9649 100644
--- a/client/src/components/admin/Notifications/NotificationForm.vue
+++ b/client/src/components/admin/Notifications/NotificationForm.vue
@@ -235,6 +235,7 @@ async function sendNewNotification() {
 
             <BRow class="m-2" align-h="center">
                 <AsyncButton
+                    id="notification-submit"
                     icon="save"
                     :title="!requiredFieldsFilled ? 'Please fill all required fields' : ''"
                     variant="primary"

From 95dd73fcba74a4d372c7b73e5179b513524f197f Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 12 Sep 2023 15:21:02 +0200
Subject: [PATCH 39/40] use `errorMessageAsString` to cast server errors

---
 client/src/components/admin/Notifications/BroadcastForm.vue  | 5 +++--
 .../src/components/admin/Notifications/NotificationForm.vue  | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/client/src/components/admin/Notifications/BroadcastForm.vue b/client/src/components/admin/Notifications/BroadcastForm.vue
index 4abe5b76bd89..c8ad68ab7871 100644
--- a/client/src/components/admin/Notifications/BroadcastForm.vue
+++ b/client/src/components/admin/Notifications/BroadcastForm.vue
@@ -7,6 +7,7 @@ import { useRouter } from "vue-router/composables";
 import { createBroadcast, loadBroadcast, updateBroadcast } from "@/components/admin/Notifications/broadcasts.services";
 import { Toast } from "@/composables/toast";
 import { type components } from "@/schema";
+import { errorMessageAsString } from "@/utils/simple-error";
 
 import AsyncButton from "@/components/Common/AsyncButton.vue";
 import Heading from "@/components/Common/Heading.vue";
@@ -96,7 +97,7 @@ async function createOrUpdateBroadcast() {
             Toast.success("Broadcast created");
         }
     } catch (error: any) {
-        Toast.error(error.err_msg);
+        Toast.error(errorMessageAsString(error));
     } finally {
         router.push("/admin/notifications");
     }
@@ -119,7 +120,7 @@ async function loadBroadcastData() {
             broadcastPublished.value = new Date(broadcastData.value.publication_time) < new Date();
         }
     } catch (error: any) {
-        Toast.error(error.err_msg);
+        Toast.error(errorMessageAsString(error));
     }
     loading.value = false;
 }
diff --git a/client/src/components/admin/Notifications/NotificationForm.vue b/client/src/components/admin/Notifications/NotificationForm.vue
index 0236410c9649..ded986f90e33 100644
--- a/client/src/components/admin/Notifications/NotificationForm.vue
+++ b/client/src/components/admin/Notifications/NotificationForm.vue
@@ -14,6 +14,7 @@ import {
 } from "@/components/admin/Notifications/notifications.services";
 import { Toast } from "@/composables/toast";
 import { type components } from "@/schema";
+import { errorMessageAsString } from "@/utils/simple-error";
 
 import AsyncButton from "@/components/Common/AsyncButton.vue";
 import Heading from "@/components/Common/Heading.vue";
@@ -100,7 +101,7 @@ async function loadData<T>(
         const tmp = await getData();
         target.value = tmp.map(formatter);
     } catch (error: any) {
-        Toast.error(error.err_msg);
+        Toast.error(errorMessageAsString(error));
     }
 }
 
@@ -122,7 +123,7 @@ async function sendNewNotification() {
         Toast.success("Notification sent");
         router.push("/admin/notifications");
     } catch (error: any) {
-        Toast.error(error.err_msg);
+        Toast.error(errorMessageAsString(error));
     }
 }
 </script>

From 4b23c31fa961b52d4389c698565e49852b84acda Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 12 Sep 2023 15:21:44 +0200
Subject: [PATCH 40/40] refactor data type casting in notifications store

---
 client/src/stores/notificationsStore.ts             | 2 +-
 client/src/stores/services/notifications.service.ts | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/stores/notificationsStore.ts b/client/src/stores/notificationsStore.ts
index c8c4eb62d04b..2784c4deebe6 100644
--- a/client/src/stores/notificationsStore.ts
+++ b/client/src/stores/notificationsStore.ts
@@ -30,7 +30,7 @@ export const useNotificationsStore = defineStore("notificationsStore", () => {
     const unreadNotifications = computed(() => notifications.value.filter((n) => !n.seen_time));
 
     async function loadNotifications() {
-        const data = (await loadNotificationsFromServer()) as UserNotification[];
+        const data = await loadNotificationsFromServer();
         notifications.value = mergeObjectListsById(data, [], "create_time", "desc");
     }
 
diff --git a/client/src/stores/services/notifications.service.ts b/client/src/stores/services/notifications.service.ts
index 6bfca112825e..8ca375f303a7 100644
--- a/client/src/stores/services/notifications.service.ts
+++ b/client/src/stores/services/notifications.service.ts
@@ -1,10 +1,11 @@
+import type { UserNotification } from "@/components/Notifications";
 import { type components, fetcher } from "@/schema";
 
 const getNotifications = fetcher.path("/api/notifications").method("get").create();
 
 export async function loadNotificationsFromServer() {
     const { data } = await getNotifications({});
-    return data;
+    return data as UserNotification[];
 }
 
 type UserNotificationsBatchUpdateRequest = components["schemas"]["UserNotificationsBatchUpdateRequest"];