Co-authored-by: Sean King <seanking2919@protonmail.com> Co-authored-by: Tusooa Zhu <tusooa@kazv.moe> Co-authored-by: FloatingGhost <hannah@coffee-and-dreams.uk> Reviewed-on: AkkomaGang/pleroma-fe#158pull/161/head
parent
6084cbbb00
commit
2da92fcd13
@ -0,0 +1,75 @@
|
||||
import PostStatusForm from '../post_status_form/post_status_form.vue'
|
||||
import Modal from '../modal/modal.vue'
|
||||
import statusPosterService from '../../services/status_poster/status_poster.service.js'
|
||||
import get from 'lodash/get'
|
||||
|
||||
const EditStatusModal = {
|
||||
components: {
|
||||
PostStatusForm,
|
||||
Modal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
resettingForm: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isLoggedIn () {
|
||||
return !!this.$store.state.users.currentUser
|
||||
},
|
||||
modalActivated () {
|
||||
return this.$store.state.editStatus.modalActivated
|
||||
},
|
||||
isFormVisible () {
|
||||
return this.isLoggedIn && !this.resettingForm && this.modalActivated
|
||||
},
|
||||
params () {
|
||||
return this.$store.state.editStatus.params || {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
params (newVal, oldVal) {
|
||||
if (get(newVal, 'statusId') !== get(oldVal, 'statusId')) {
|
||||
this.resettingForm = true
|
||||
this.$nextTick(() => {
|
||||
this.resettingForm = false
|
||||
})
|
||||
}
|
||||
},
|
||||
isFormVisible (val) {
|
||||
if (val) {
|
||||
this.$nextTick(() => this.$el && this.$el.querySelector('textarea').focus())
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doEditStatus ({ status, spoilerText, sensitive, media, contentType, poll }) {
|
||||
const params = {
|
||||
store: this.$store,
|
||||
statusId: this.$store.state.editStatus.params.statusId,
|
||||
status,
|
||||
spoilerText,
|
||||
sensitive,
|
||||
poll,
|
||||
media,
|
||||
contentType
|
||||
}
|
||||
|
||||
return statusPosterService.editStatus(params)
|
||||
.then((data) => {
|
||||
return data
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Error editing status', err)
|
||||
return {
|
||||
error: err.message
|
||||
}
|
||||
})
|
||||
},
|
||||
closeModal () {
|
||||
this.$store.dispatch('closeEditStatusModal')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default EditStatusModal
|
||||
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<Modal
|
||||
v-if="isFormVisible"
|
||||
class="edit-form-modal-view"
|
||||
@backdropClicked="closeModal"
|
||||
>
|
||||
<div class="edit-form-modal-panel panel">
|
||||
<div class="panel-heading">
|
||||
{{ $t('post_status.edit_status') }}
|
||||
</div>
|
||||
<PostStatusForm
|
||||
class="panel-body"
|
||||
v-bind="params"
|
||||
@posted="closeModal"
|
||||
:disablePolls="true"
|
||||
:disableVisibilitySelector="true"
|
||||
:post-handler="doEditStatus"
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script src="./edit_status_modal.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
.modal-view.edit-form-modal-view {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.edit-form-modal-panel {
|
||||
flex-shrink: 0;
|
||||
margin-top: 25%;
|
||||
margin-bottom: 2em;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
|
||||
@media (orientation: landscape) {
|
||||
margin-top: 8%;
|
||||
}
|
||||
|
||||
.form-bottom-left {
|
||||
max-width: 6.5em;
|
||||
|
||||
.emoji-icon {
|
||||
justify-content: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -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
|
||||
@ -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">
|
||||
{{ $tc('status.edit_history_modal_title', historyCount - 1, { historyCount: historyCount - 1 }) }}
|
||||
</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>
|
||||
@ -0,0 +1,25 @@
|
||||
const editStatus = {
|
||||
state: {
|
||||
params: null,
|
||||
modalActivated: false
|
||||
},
|
||||
mutations: {
|
||||
openEditStatusModal (state, params) {
|
||||
state.params = params
|
||||
state.modalActivated = true
|
||||
},
|
||||
closeEditStatusModal (state) {
|
||||
state.modalActivated = false
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
openEditStatusModal ({ commit }, params) {
|
||||
commit('openEditStatusModal', params)
|
||||
},
|
||||
closeEditStatusModal ({ commit }) {
|
||||
commit('closeEditStatusModal')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default editStatus
|
||||
@ -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
|
||||
Loading…
Reference in new issue