Add edit status functionality See merge request pleroma/pleroma-fe!1537shigusegubu-vue3
tusooa
1 year ago
commit
2bea5d8128
@ -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" |
||||
:post-handler="doEditStatus" |
||||
:disable-polls="true" |
||||
:disable-visibility-selector="true" |
||||
@posted="closeModal" |
||||
/> |
||||
</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"> |
||||
{{ $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" |
||||
:is-preview="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