Implement deleting announcement

src/components/announcement/announcement.js

@@ -1,9 +1,13 @@
+import { mapState } from 'vuex'
 
 const Announcement = {
   props: {
     announcement: Object
   },
   computed: {
+    ...mapState({
+      currentUser: state => state.users.currentUser
+    }),
     content () {
       return this.announcement.content
     },
@@ -16,6 +20,9 @@ const Announcement = {
       if (!this.isRead) {
         return this.$store.dispatch('markAnnouncementAsRead', this.announcement.id)
       }
+    },
+    deleteAnnouncement () {
+      return this.$store.dispatch('deleteAnnouncement', this.announcement.id)
     }
   }
 }

src/components/announcement/announcement.vue

@@ -12,12 +12,20 @@
     </div>
     <div class="footer">
       <button
+        v-if="currentUser"
         class="btn button-default"
         :class="{ toggled: isRead }"
         @click="markAsRead"
       >
         {{ $t('announcements.mark_as_read_action') }}
       </button>
+      <button
+        v-if="currentUser && currentUser.role === 'admin'"
+        class="btn button-default"
+        @click="deleteAnnouncement"
+      >
+        {{ $t('announcements.delete_action') }}
+      </button>
     </div>
   </div>
 </template>
@@ -37,5 +45,15 @@
   .heading, .body {
     margin-bottom: var(--status-margin, $status-margin);
   }
+
+  .footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+
+    .btn {
+      min-width: 10em;
+    }
+  }
 }
 </style>

src/modules/announcements.js

@@ -59,6 +59,12 @@ const announcements = {
         .then(() => {
           return store.dispatch('fetchAnnouncements')
         })
+    },
+    deleteAnnouncement (store, id) {
+      return store.rootState.api.backendInteractor.deleteAnnouncement({ id })
+        .then(() => {
+          return store.dispatch('fetchAnnouncements')
+        })
     }
   }
 }

src/services/api/api.service.js

@@ -103,6 +103,7 @@ const PLEROMA_DELETE_CHAT_MESSAGE_URL = (chatId, messageId) => `/api/v1/pleroma/
 const PLEROMA_ADMIN_REPORTS = '/api/pleroma/admin/reports'
 const PLEROMA_BACKUP_URL = '/api/v1/pleroma/backups'
 const PLEROMA_POST_ANNOUNCEMENT_URL = '/api/v1/pleroma/admin/announcements'
+const PLEROMA_DELETE_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcements/${id}`
 
 const oldfetch = window.fetch
 
@@ -1399,6 +1400,14 @@ const postAnnouncement = ({ credentials, content, startsAt, endsAt, allDay }) =>
   })
 }
 
+const deleteAnnouncement = ({ id, credentials }) => {
+  return promisedRequest({
+    url: PLEROMA_DELETE_ANNOUNCEMENT_URL(id),
+    credentials,
+    method: 'DELETE'
+  })
+}
+
 export const getMastodonSocketURI = ({ credentials, stream, args = {} }) => {
   return Object.entries({
     ...(credentials
@@ -1728,7 +1737,8 @@ const apiService = {
   fetchUserInLists,
   fetchAnnouncements,
   dismissAnnouncement,
-  postAnnouncement
+  postAnnouncement,
+  deleteAnnouncement
 }
 
 export default apiService