From fab72940c4d8d2affa34578a4ce4c94300de124f Mon Sep 17 00:00:00 2001 From: floatingghost Date: Mon, 18 Jul 2022 13:08:50 +0000 Subject: [PATCH] announcements (#42) Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/42 --- package.json | 14 +- src/App.scss | 1 - src/boot/after_store.js | 1 + src/boot/routes.js | 6 +- src/components/announcement/announcement.js | 105 ++++ src/components/announcement/announcement.vue | 136 +++++ .../announcement_editor.js | 13 + .../announcement_editor.vue | 60 ++ .../announcements_page/announcements_page.js | 55 ++ .../announcements_page/announcements_page.vue | 79 +++ src/components/desktop_nav/desktop_nav.scss | 4 + src/components/emoji_picker/emoji_picker.js | 5 +- src/components/emoji_picker/emoji_picker.vue | 1 + src/components/mobile_nav/mobile_nav.js | 2 +- src/components/mobile_nav/mobile_nav.vue | 2 +- src/components/nav_panel/nav_panel.js | 8 +- src/components/nav_panel/nav_panel.vue | 18 + src/components/notifications/notifications.js | 4 +- .../tabs/data_import_export_tab.js | 29 +- .../tabs/data_import_export_tab.vue | 61 +++ src/components/side_drawer/side_drawer.js | 2 +- src/components/side_drawer/side_drawer.vue | 20 + src/components/timeago/timeago.vue | 2 +- src/i18n/ca.json | 1 - src/i18n/de.json | 1 - src/i18n/en.json | 82 +-- src/i18n/eo.json | 1 - src/i18n/es.json | 3 +- src/i18n/eu.json | 3 +- src/i18n/fi.json | 3 +- src/i18n/fr.json | 3 +- src/i18n/he.json | 3 +- src/i18n/id.json | 3 +- src/i18n/it.json | 1 - src/i18n/ja_easy.json | 3 +- src/i18n/ja_pedantic.json | 3 +- src/i18n/messages.js | 1 + src/i18n/nb.json | 3 +- src/i18n/nl.json | 1 - src/i18n/oc.json | 3 +- src/i18n/pl.json | 3 +- src/i18n/pt.json | 1 - src/i18n/ru.json | 3 +- src/i18n/service_worker_messages.js | 1 + src/i18n/sk.json | 512 ++++++++++++++++++ src/i18n/uk.json | 1 - src/i18n/vi.json | 3 +- src/i18n/zh.json | 3 +- src/i18n/zh_Hant.json | 1 - src/main.js | 4 +- src/modules/announcements.js | 118 ++++ src/modules/api.js | 13 + .../announcements_fetcher.service.js | 22 + src/services/api/api.service.js | 96 +++- .../backend_interactor_service.js | 5 + src/services/date_utils/date_utils.js | 16 +- .../services/date_utils/date_utils.spec.js | 10 +- yarn.lock | 131 +++-- 58 files changed, 1514 insertions(+), 175 deletions(-) create mode 100644 src/components/announcement/announcement.js create mode 100644 src/components/announcement/announcement.vue create mode 100644 src/components/announcement_editor/announcement_editor.js create mode 100644 src/components/announcement_editor/announcement_editor.vue create mode 100644 src/components/announcements_page/announcements_page.js create mode 100644 src/components/announcements_page/announcements_page.vue create mode 100644 src/i18n/sk.json create mode 100644 src/modules/announcements.js create mode 100644 src/services/announcements_fetcher/announcements_fetcher.service.js diff --git a/package.json b/package.json index 1ef35f4a..09ba18ac 100644 --- a/package.json +++ b/package.json @@ -21,10 +21,10 @@ "@fortawesome/fontawesome-svg-core": "1.3.0", "@fortawesome/free-regular-svg-icons": "5.15.4", "@fortawesome/free-solid-svg-icons": "5.15.4", - "@fortawesome/vue-fontawesome": "3.0.0-5", + "@fortawesome/vue-fontawesome": "3.0.1", "@kazvmoe-infra/pinch-zoom-element": "1.2.0", - "@vuelidate/core": "2.0.0-alpha.41", - "@vuelidate/validators": "2.0.0-alpha.27", + "@vuelidate/core": "2.0.0-alpha.42", + "@vuelidate/validators": "2.0.0-alpha.30", "body-scroll-lock": "2.7.1", "chromatism": "3.0.0", "click-outside-vue3": "4.0.1", @@ -86,7 +86,7 @@ "html-webpack-plugin": "3.2.0", "http-proxy-middleware": "0.21.0", "inject-loader": "2.0.1", - "iso-639-1": "2.1.13", + "iso-639-1": "2.1.15", "isparta-loader": "2.0.0", "json-loader": "0.5.7", "karma": "6.3.17", @@ -107,8 +107,8 @@ "ora": "0.4.1", "postcss-loader": "3.0.0", "raw-loader": "0.5.1", - "sass": "1.20.1", - "sass-loader": "7.2.0", + "sass": "1.53.0", + "sass-loader": "7.3.1", "selenium-server": "2.53.1", "semver": "5.7.1", "serviceworker-webpack-plugin": "1.0.1", @@ -123,7 +123,7 @@ "vue-style-loader": "4.1.2", "webpack": "4.46.0", "webpack-dev-middleware": "3.7.3", - "webpack-hot-middleware": "2.24.3", + "webpack-hot-middleware": "2.25.1", "webpack-merge": "0.20.0" }, "engines": { diff --git a/src/App.scss b/src/App.scss index 5cd0b96e..7e6d0dfc 100644 --- a/src/App.scss +++ b/src/App.scss @@ -310,7 +310,6 @@ nav { border-top-right-radius: 0; } - .underlay, #sidebar, #notifs-column { display: none; diff --git a/src/boot/after_store.js b/src/boot/after_store.js index f655c38f..b8bbbe38 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -370,6 +370,7 @@ const afterStoreSetup = async ({ store, i18n }) => { // Start fetching things that don't need to block the UI store.dispatch('fetchMutes') + store.dispatch('startFetchingAnnouncements') getTOS({ store }) getStickers({ store }) diff --git a/src/boot/routes.js b/src/boot/routes.js index 1ab8209d..00f553c2 100644 --- a/src/boot/routes.js +++ b/src/boot/routes.js @@ -23,6 +23,7 @@ import RemoteUserResolver from 'components/remote_user_resolver/remote_user_reso import Lists from 'components/lists/lists.vue' import ListTimeline from 'components/list_timeline/list_timeline.vue' import ListEdit from 'components/list_edit/list_edit.vue' +import AnnouncementsPage from 'components/announcements_page/announcements_page.vue' export default (store) => { const validateAuthenticatedRoute = (to, from, next) => { @@ -72,10 +73,11 @@ export default (store) => { { name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) }, { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute }, { name: 'about', path: '/about', component: About }, - { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile }, { name: 'lists', path: '/lists', component: Lists }, { name: 'list-timeline', path: '/lists/:id', component: ListTimeline }, - { name: 'list-edit', path: '/lists/:id/edit', component: ListEdit } + { name: 'list-edit', path: '/lists/:id/edit', component: ListEdit }, + { name: 'announcements', path: '/announcements', component: AnnouncementsPage }, + { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile } ] if (store.state.instance.pleromaChatMessagesAvailable) { diff --git a/src/components/announcement/announcement.js b/src/components/announcement/announcement.js new file mode 100644 index 00000000..993e3655 --- /dev/null +++ b/src/components/announcement/announcement.js @@ -0,0 +1,105 @@ +import { mapState } from 'vuex' +import AnnouncementEditor from '../announcement_editor/announcement_editor.vue' +import RichContent from '../rich_content/rich_content.jsx' +import localeService from '../../services/locale/locale.service.js' + +const Announcement = { + components: { + AnnouncementEditor, + RichContent + }, + data () { + return { + editing: false, + editedAnnouncement: { + content: '', + startsAt: undefined, + endsAt: undefined, + allDay: undefined + }, + editError: '' + } + }, + props: { + announcement: Object + }, + computed: { + ...mapState({ + currentUser: state => state.users.currentUser + }), + content () { + return this.announcement.content + }, + isRead () { + return this.announcement.read + }, + publishedAt () { + const time = this.announcement['published_at'] + if (!time) { + return + } + + return this.formatTimeOrDate(time, localeService.internalToBrowserLocale(this.$i18n.locale)) + }, + startsAt () { + const time = this.announcement['starts_at'] + if (!time) { + return + } + + return this.formatTimeOrDate(time, localeService.internalToBrowserLocale(this.$i18n.locale)) + }, + endsAt () { + const time = this.announcement['ends_at'] + if (!time) { + return + } + + return this.formatTimeOrDate(time, localeService.internalToBrowserLocale(this.$i18n.locale)) + }, + inactive () { + return this.announcement.inactive + } + }, + methods: { + markAsRead () { + if (!this.isRead) { + return this.$store.dispatch('markAnnouncementAsRead', this.announcement.id) + } + }, + deleteAnnouncement () { + return this.$store.dispatch('deleteAnnouncement', this.announcement.id) + }, + formatTimeOrDate (time, locale) { + const d = new Date(time) + return this.announcement['all_day'] ? d.toLocaleDateString(locale) : d.toLocaleString(locale) + }, + enterEditMode () { + this.editedAnnouncement.content = this.announcement.pleroma['raw_content'] + this.editedAnnouncement.startsAt = this.announcement['starts_at'] + this.editedAnnouncement.endsAt = this.announcement['ends_at'] + this.editedAnnouncement.allDay = this.announcement['all_day'] + this.editing = true + }, + submitEdit () { + this.$store.dispatch('editAnnouncement', { + id: this.announcement.id, + ...this.editedAnnouncement + }) + .then(() => { + this.editing = false + }) + .catch(error => { + this.editError = error.error + }) + }, + cancelEdit () { + this.editing = false + }, + clearError () { + this.editError = undefined + } + } +} + +export default Announcement diff --git a/src/components/announcement/announcement.vue b/src/components/announcement/announcement.vue new file mode 100644 index 00000000..5f64232a --- /dev/null +++ b/src/components/announcement/announcement.vue @@ -0,0 +1,136 @@ + + + + + diff --git a/src/components/announcement_editor/announcement_editor.js b/src/components/announcement_editor/announcement_editor.js new file mode 100644 index 00000000..79a03afe --- /dev/null +++ b/src/components/announcement_editor/announcement_editor.js @@ -0,0 +1,13 @@ +import Checkbox from '../checkbox/checkbox.vue' + +const AnnouncementEditor = { + components: { + Checkbox + }, + props: { + announcement: Object, + disabled: Boolean + } +} + +export default AnnouncementEditor diff --git a/src/components/announcement_editor/announcement_editor.vue b/src/components/announcement_editor/announcement_editor.vue new file mode 100644 index 00000000..0f29f9f7 --- /dev/null +++ b/src/components/announcement_editor/announcement_editor.vue @@ -0,0 +1,60 @@ +