Notifications

lib/Controller/PageController.php

@@ -26,5 +26,4 @@ public function index(string $path): TemplateResponse {
 
 		return $response;
 	}
-
 }

src/components/LeftSidebar.vue

@@ -5,19 +5,34 @@
 				:title="t('my_company', 'Home')"
 				icon="icon-home"
 				:exact="true" />
+			<NcAppNavigationItem :to="{name: 'notifications'}"
+				:title="t('my_company', 'Notifications')"
+				:exact="true">
+				<NcIconSvgWrapper slot="icon" :svg="iconNotifications" />
+			</NcAppNavigationItem>
 		</template>
 	</NcAppNavigation>
 </template>
 
 <script>
+// eslint-disable-next-line n/no-missing-import, import/no-unresolved
+import iconNotifications from 'apps/announcementcenter/img/announcementcenter.svg?raw'
+
 import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 
 export default {
 	name: 'LeftSidebar',
 	components: {
 		NcAppNavigation,
 		NcAppNavigationItem,
+		NcIconSvgWrapper,
+	},
+	data() {
+		return {
+			iconNotifications,
+		}
 	},
 }
 </script>

src/store/index.js

@@ -1,8 +1,10 @@
+// eslint-disable-next-line n/no-missing-import, import/no-unresolved
+import announcementsStore from 'apps/announcementcenter/src/store/announcementsStore.js'
 import Vue from 'vue'
 import Vuex, { Store } from 'vuex'
 
 import storeConfig from './storeConfig.js'
 
 Vue.use(Vuex)
 
-export default new Store(storeConfig)
+export default new Store({ ...storeConfig, ...announcementsStore })

src/views/Notifications.vue

@@ -0,0 +1,99 @@
+<template>
+	<div>
+		<div id="personal-settings">
+			<h2 class="hidden-visually">
+				{{ t('my_company', 'Notifications') }}
+			</h2>
+			<transition-group name="fade-collapse" tag="div">
+				<Announcement v-for="announcement in announcements"
+					:key="announcement.id"
+					:is-admin="isAdmin"
+					:author-id="announcement.author_id"
+					v-bind="announcement"
+					@click="onClickAnnouncement" />
+			</transition-group>
+		</div>
+	</div>
+</template>
+
+<script>
+// eslint-disable-next-line n/no-missing-import, import/no-unresolved
+import { getAnnouncements } from 'apps/announcementcenter/src/services/announcementsService.js'
+
+import { loadState } from '@nextcloud/initial-state'
+
+// eslint-disable-next-line n/no-missing-import, import/no-unresolved
+import Announcement from 'apps/announcementcenter/src/Components/Announcement.vue'
+
+export default {
+	name: 'Notifications',
+	components: {
+		Announcement,
+	},
+
+	data() {
+		return {
+			tokens: loadState('settings', 'app_tokens'),
+			canCreateToken: loadState('settings', 'can_create_app_token'),
+			isAdmin: false,
+			commentsView: null,
+			activeId: 0,
+		}
+	},
+
+	computed: {
+		announcements() {
+			const announcements = this.$store.getters.announcements
+			return announcements.sort((a1, a2) => {
+				return a2.time - a1.time
+			})
+		},
+	},
+
+	async mounted() {
+		await this.loadAnnouncements()
+	},
+
+	methods: {
+		async loadAnnouncements() {
+			const response = await getAnnouncements()
+			const announcements = response.data?.ocs?.data || []
+
+			announcements.forEach(announcement => {
+				this.$store.dispatch('addAnnouncement', announcement)
+			})
+		},
+
+		/**
+		 * Load the comments of the announcements
+		 *
+		 * @param {number} id the announcement
+		 */
+		async onClickAnnouncement(id) {
+			if (id === this.activeId) {
+				return
+			}
+
+			this.activeId = id
+
+			if (!this.activateAnnouncementHasComments) {
+				return
+			}
+
+			if (id === 0) {
+				// Destroy the comments view as the sidebar is destroyed
+				this.commentsView = null
+				return
+			}
+
+			if (!this.commentsView) {
+				// Create a new comments view when there is none
+				this.commentsView = new OCA.Comments.View('announcement')
+			}
+
+			await this.commentsView.update(id)
+			this.commentsView.$mount(this.$refs.sidebar)
+		},
+	},
+}
+</script>