Implement posting announcements

This commit is contained in:
Tusooa Zhu 2022-03-17 14:54:52 -04:00 committed by tusooa
parent e5b49ae34b
commit e494e74643
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
4 changed files with 136 additions and 1 deletions

View File

@ -1,16 +1,44 @@
import { mapState } from 'vuex'
import Announcement from '../announcement/announcement.vue' import Announcement from '../announcement/announcement.vue'
const AnnouncementsPage = { const AnnouncementsPage = {
components: { components: {
Announcement Announcement
}, },
data () {
return {
newAnnouncement: {
content: ''
},
posting: false,
error: undefined
}
},
mounted () { mounted () {
this.$store.dispatch('fetchAnnouncements') this.$store.dispatch('fetchAnnouncements')
}, },
computed: { computed: {
...mapState({
currentUser: state => state.users.currentUser
}),
announcements () { announcements () {
return this.$store.state.announcements.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
}
} }
} }

View File

@ -6,6 +6,51 @@
</span> </span>
</div> </div>
<div class="panel-body"> <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 <section
v-for="announcement in announcements" v-for="announcement in announcements"
:key="announcement.id" :key="announcement.id"
@ -19,3 +64,34 @@
</template> </template>
<script src="./announcements_page.js"></script> <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>

View File

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

View File

@ -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_DELETE_CHAT_MESSAGE_URL = (chatId, messageId) => `/api/v1/pleroma/chats/${chatId}/messages/${messageId}`
const PLEROMA_ADMIN_REPORTS = '/api/pleroma/admin/reports' const PLEROMA_ADMIN_REPORTS = '/api/pleroma/admin/reports'
const PLEROMA_BACKUP_URL = '/api/v1/pleroma/backups' const PLEROMA_BACKUP_URL = '/api/v1/pleroma/backups'
const PLEROMA_POST_ANNOUNCEMENT_URL = '/api/v1/pleroma/admin/announcements'
const oldfetch = window.fetch 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 = {} }) => { export const getMastodonSocketURI = ({ credentials, stream, args = {} }) => {
return Object.entries({ return Object.entries({
...(credentials ...(credentials
@ -1703,7 +1727,8 @@ const apiService = {
setReportState, setReportState,
fetchUserInLists, fetchUserInLists,
fetchAnnouncements, fetchAnnouncements,
dismissAnnouncement dismissAnnouncement,
postAnnouncement
} }
export default apiService export default apiService