Implement posting announcements

src/components/announcements_page/announcements_page.js

@@ -1,16 +1,44 @@
+import { mapState } from 'vuex'
 import Announcement from '../announcement/announcement.vue'
 
 const AnnouncementsPage = {
   components: {
     Announcement
   },
+  data () {
+    return {
+      newAnnouncement: {
+        content: ''
+      },
+      posting: false,
+      error: undefined
+    }
+  },
   mounted () {
     this.$store.dispatch('fetchAnnouncements')
   },
   computed: {
+    ...mapState({
+      currentUser: state => state.users.currentUser
+    }),
     announcements () {
       return this.$store.state.announcements.announcements
     }
+  },
+  methods: {
+    postAnnouncement () {
+      this.posting = true
+      this.$store.dispatch('postAnnouncement', this.newAnnouncement)
+        .catch(error => {
+          this.error = error.error
+        })
+        .finally(() => {
+          this.posting = false
+        })
+    },
+    clearError () {
+      this.error = undefined
+    }
   }
 }
 

src/components/announcements_page/announcements_page.vue

@@ -6,6 +6,51 @@
       </span>
     </div>
     <div class="panel-body">
+      <section
+        v-if="currentUser && currentUser.role === 'admin'"
+      >
+        <div class="post-form">
+          <div class="heading">
+            <h4>{{ $t('announcements.post_form_header') }}</h4>
+          </div>
+          <div class="body">
+            <textarea
+              ref="textarea"
+              v-model="newAnnouncement.content"
+              class="post-textarea"
+              rows="1"
+              cols="1"
+              :placeholder="$t('announcements.post_placeholder')"
+              :disabled="posting"
+            />
+          </div>
+          <div class="footer">
+            <button
+              class="btn button-default post-button"
+              :disabled="posting"
+              @click.prevent="postAnnouncement"
+            >
+              {{ $t('announcements.post_action') }}
+            </button>
+            <div
+              v-if="error"
+              class="alert error"
+            >
+              {{ $t('announcements.post_error', { error }) }}
+              <button
+                class="button-unstyled"
+                @click="clearError"
+              >
+                <FAIcon
+                  class="fa-scale-110 fa-old-padding"
+                  icon="times"
+                  :title="$t('announcements.close_error')"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
       <section
         v-for="announcement in announcements"
         :key="announcement.id"
@@ -19,3 +64,34 @@
 </template>
 
 <script src="./announcements_page.js"></script>
+
+<style lang="scss">
+@import "../../variables";
+
+.announcements-page {
+  .post-form {
+    padding: var(--status-margin, $status-margin);
+
+    .heading, .body {
+      margin-bottom: var(--status-margin, $status-margin);
+    }
+
+    .body {
+      display: flex;
+      align-items: stretch;
+      flex-direction: column;
+    }
+
+    .post-textarea {
+      resize: vertical;
+      height: 10em;
+      overflow: none;
+      box-sizing: content-box;
+    }
+
+    .post-button {
+      min-width: 10em;
+    }
+  }
+}
+</style>

src/modules/announcements.js

@@ -53,6 +53,12 @@ const announcements = {
       const interval = store.state.fetchAnnouncementsTimer
       store.commit('setFetchAnnouncementsTimer', undefined)
       clearInterval(interval)
+    },
+    postAnnouncement (store, { content, startsAt, endsAt, allDay }) {
+      return store.rootState.api.backendInteractor.postAnnouncement({ content, startsAt, endsAt, allDay })
+        .then(() => {
+          return store.dispatch('fetchAnnouncements')
+        })
     }
   }
 }

src/services/api/api.service.js

@@ -102,6 +102,7 @@ const PLEROMA_CHAT_READ_URL = id => `/api/v1/pleroma/chats/${id}/read`
 const PLEROMA_DELETE_CHAT_MESSAGE_URL = (chatId, messageId) => `/api/v1/pleroma/chats/${chatId}/messages/${messageId}`
 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 oldfetch = window.fetch
 
@@ -1375,6 +1376,29 @@ const dismissAnnouncement = ({ id, credentials }) => {
   })
 }
 
+const postAnnouncement = ({ credentials, content, startsAt, endsAt, allDay }) => {
+  const payload = { content }
+
+  if (typeof startsAt !== 'undefined') {
+    payload['starts_at'] = startsAt
+  }
+
+  if (typeof endsAt !== 'undefined') {
+    payload['ends_at'] = endsAt
+  }
+
+  if (typeof allDay !== 'undefined') {
+    payload['all_day'] = allDay
+  }
+
+  return promisedRequest({
+    url: PLEROMA_POST_ANNOUNCEMENT_URL,
+    credentials,
+    method: 'POST',
+    payload
+  })
+}
+
 export const getMastodonSocketURI = ({ credentials, stream, args = {} }) => {
   return Object.entries({
     ...(credentials
@@ -1703,7 +1727,8 @@ const apiService = {
   setReportState,
   fetchUserInLists,
   fetchAnnouncements,
-  dismissAnnouncement
+  dismissAnnouncement,
+  postAnnouncement
 }
 
 export default apiService