logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git
commit: fa5d35523dd081b6948d38325374cac5707b7868
parent 1b796691b0c396c1780e5520bf285e22923f3b6a
Author: Sean King <seanking2919@protonmail.com>
Date:   Mon, 20 Jun 2022 22:52:08 -0600

Add ability to view status history for edited statuses

Diffstat:

Msrc/App.js2++
Msrc/App.vue1+
Msrc/components/extra_buttons/extra_buttons.js23+++++++++++++++++++++--
Msrc/components/extra_buttons/extra_buttons.vue11+++++++++++
Asrc/components/status_history_modal/status_history_modal.js60++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Asrc/components/status_history_modal/status_history_modal.vue46++++++++++++++++++++++++++++++++++++++++++++++
Msrc/i18n/en.json3++-
Msrc/main.js2++
Asrc/modules/statusHistory.js25+++++++++++++++++++++++++
Msrc/modules/statuses.js3+++
Msrc/services/api/api.service.js17++++++++---------
Msrc/services/entity_normalizer/entity_normalizer.service.js6+++++-
12 files changed, 186 insertions(+), 13 deletions(-)

diff --git a/src/App.js b/src/App.js @@ -13,6 +13,7 @@ import DesktopNav from './components/desktop_nav/desktop_nav.vue' import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue' import EditStatusModal from './components/edit_status_modal/edit_status_modal.vue' import PostStatusModal from './components/post_status_modal/post_status_modal.vue' +import StatusHistoryModal from './components/status_history_modal/status_history_modal.vue' import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue' import { windowWidth, windowHeight } from './services/window_utils/window_utils' import { mapGetters } from 'vuex' @@ -37,6 +38,7 @@ export default { UserReportingModal, PostStatusModal, EditStatusModal, + StatusHistoryModal, GlobalNoticeList }, data: () => ({ diff --git a/src/App.vue b/src/App.vue @@ -53,6 +53,7 @@ <UserReportingModal /> <PostStatusModal /> <EditStatusModal /> + <StatusHistoryModal /> <SettingsModal /> <div id="modal" /> <GlobalNoticeList /> diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js @@ -6,7 +6,8 @@ import { faEyeSlash, faThumbtack, faShareAlt, - faExternalLinkAlt + faExternalLinkAlt, + faHistory } from '@fortawesome/free-solid-svg-icons' import { faBookmark as faBookmarkReg, @@ -21,7 +22,8 @@ library.add( faThumbtack, faShareAlt, faExternalLinkAlt, - faFlag + faFlag, + faHistory ) const ExtraButtons = { @@ -84,6 +86,20 @@ const ExtraButtons = { visibility: this.status.visibility, statusContentType: data.content_type })) + }, + showStatusHistory () { + let originalStatus = {} + Object.assign(originalStatus, this.status) + delete originalStatus.attachments + delete originalStatus.created_at + delete originalStatus.emojis + delete originalStatus.text + delete originalStatus.raw_html + delete originalStatus.nsfw + delete originalStatus.poll + delete originalStatus.summary + delete originalStatus.summary_raw_html + this.$store.dispatch('openStatusHistoryModal', originalStatus) } }, computed: { @@ -104,6 +120,9 @@ const ExtraButtons = { }, statusLink () { return `${this.$store.state.instance.server}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}` + }, + isEdited () { + return this.status.edited_at !== null } } } diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue @@ -85,6 +85,17 @@ /><span>{{ $t("status.edit") }}</span> </button> <button + v-if="isEdited" + class="button-default dropdown-item dropdown-item-icon" + @click.prevent="showStatusHistory" + @click="close" + > + <FAIcon + fixed-width + icon="history" + /><span>{{ $t("status.status_history") }}</span> + </button> + <button v-if="canDelete" class="button-default dropdown-item dropdown-item-icon" @click.prevent="deleteStatus" diff --git a/src/components/status_history_modal/status_history_modal.js b/src/components/status_history_modal/status_history_modal.js @@ -0,0 +1,60 @@ +import { get } from 'lodash' +import Modal from '../modal/modal.vue' +import Status from '../status/status.vue' + +const StatusHistoryModal = { + components: { + Modal, + Status + }, + data () { + return { + statuses: [] + } + }, + computed: { + modalActivated () { + return this.$store.state.statusHistory.modalActivated + }, + params () { + return this.$store.state.statusHistory.params + }, + statusId () { + return this.params.id + }, + historyCount () { + return this.statuses.length + }, + history () { + return this.statuses + } + }, + watch: { + params (newVal, oldVal) { + const newStatusId = get(newVal, 'id') !== get(oldVal, 'id') + if (newStatusId) { + this.resetHistory() + } + + if (newStatusId || get(newVal, 'edited_at') !== get(oldVal, 'edited_at')) { + this.fetchStatusHistory() + } + } + }, + methods: { + resetHistory () { + this.statuses = [] + }, + fetchStatusHistory () { + this.$store.dispatch('fetchStatusHistory', this.params) + .then(data => { + this.statuses = data + }) + }, + closeModal () { + this.$store.dispatch('closeStatusHistoryModal') + } + } +} + +export default StatusHistoryModal diff --git a/src/components/status_history_modal/status_history_modal.vue b/src/components/status_history_modal/status_history_modal.vue @@ -0,0 +1,46 @@ +<template> + <Modal + v-if="modalActivated" + class="status-history-modal-view" + @backdropClicked="closeModal" + > + <div class="status-history-modal-panel panel"> + <div class="panel-heading"> + {{ $t('status.status_history') }} ({{ historyCount }}) + </div> + <div class="panel-body"> + <div + v-if="historyCount > 0" + class="history-body" + > + <status + v-for="status in history" + :key="status.id" + :statusoid="status" + :isPreview="true" + class="conversation-status status-fadein panel-body" + /> + </div> + </div> + </div> + </Modal> +</template> + +<script src="./status_history_modal.js"></script> + +<style lang="scss"> +.modal-view.status-history-modal-view { + align-items: flex-start; +} +.status-history-modal-panel { + flex-shrink: 0; + margin-top: 25%; + margin-bottom: 2em; + width: 100%; + max-width: 700px; + + @media (orientation: landscape) { + margin-top: 8%; + } +} +</style> diff --git a/src/i18n/en.json b/src/i18n/en.json @@ -795,7 +795,8 @@ "ancestor_follow_with_icon": "{icon} {text}", "show_all_conversation_with_icon": "{icon} {text}", "show_all_conversation": "Show full conversation ({numStatus} other status) | Show full conversation ({numStatus} other statuses)", - "show_only_conversation_under_this": "Only show replies to this status" + "show_only_conversation_under_this": "Only show replies to this status", + "status_history": "Status history" }, "user_card": { "approve": "Approve", diff --git a/src/main.js b/src/main.js @@ -19,6 +19,7 @@ import reportsModule from './modules/reports.js' import pollsModule from './modules/polls.js' import postStatusModule from './modules/postStatus.js' import editStatusModule from './modules/editStatus.js' +import statusHistoryModule from './modules/statusHistory.js' import chatsModule from './modules/chats.js' @@ -84,6 +85,7 @@ const persistedStateOptions = { polls: pollsModule, postStatus: postStatusModule, editStatus: editStatusModule, + statusHistory: statusHistoryModule, chats: chatsModule }, plugins, diff --git a/src/modules/statusHistory.js b/src/modules/statusHistory.js @@ -0,0 +1,25 @@ +const statusHistory = { + state: { + params: {}, + modalActivated: false + }, + mutations: { + openStatusHistoryModal (state, params) { + state.params = params + state.modalActivated = true + }, + closeStatusHistoryModal (state) { + state.modalActivated = false + } + }, + actions: { + openStatusHistoryModal ({ commit }, params) { + commit('openStatusHistoryModal', params) + }, + closeStatusHistoryModal ({ commit }) { + commit('closeStatusHistoryModal') + } + } +} + +export default statusHistory diff --git a/src/modules/statuses.js b/src/modules/statuses.js @@ -606,6 +606,9 @@ const statuses = { fetchStatusSource ({ rootState, dispatch }, status) { return apiService.fetchStatusSource({ id: status.id, credentials: rootState.users.currentUser.credentials }) }, + fetchStatusHistory ({ rootState, dispatch }, status) { + return apiService.fetchStatusHistory({ status }) + }, deleteStatus ({ rootState, commit }, status) { commit('setDeleted', { status }) apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials }) diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js @@ -425,17 +425,16 @@ const fetchStatusSource = ({ id, credentials }) => { .then((data) => parseSource(data)) } -const fetchStatusHistory = ({ id, credentials }) => { - let url = MASTODON_STATUS_HISTORY_URL(id) - return fetch(url, { headers: authHeaders(credentials) }) +const fetchStatusHistory = ({ status, credentials }) => { + let url = MASTODON_STATUS_HISTORY_URL(status.id) + return promisedRequest({ url, credentials }) .then((data) => { - if (data.ok) { - return data - } - throw new Error('Error fetching history', data) + data.reverse() + return data.map((item) => { + item.originalStatus = status + return parseStatus(item) + }) }) - .then((data) => data.json()) - .then((data) => parseStatus(data)) } const tagUser = ({ tag, credentials, user }) => { diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js @@ -275,7 +275,7 @@ export const parseStatus = (data) => { output.tags = data.tags - output.is_edited = data.edited_at !== null + output.edited_at = data.edited_at if (data.pleroma) { const { pleroma } = data @@ -378,6 +378,10 @@ export const parseStatus = (data) => { output.favoritedBy = [] output.rebloggedBy = [] + if (data.hasOwnProperty('originalStatus')) { + Object.assign(output, data.originalStatus) + } + return output }