add processing state and close modal after api request is completed

This commit is contained in:
taehoon 2019-03-20 12:20:31 -04:00
parent 1878e56c16
commit 1b07c6ae4f
3 changed files with 11 additions and 7 deletions

View file

@ -11,7 +11,8 @@ const UserReportingModal = {
return { return {
comment: '', comment: '',
forward: false, forward: false,
statusIdsToReport: [] statusIdsToReport: [],
processing: false
} }
}, },
computed: { computed: {
@ -40,6 +41,7 @@ const UserReportingModal = {
this.comment = '' this.comment = ''
this.forward = false this.forward = false
this.statusIdsToReport = [] this.statusIdsToReport = []
this.processing = false
} }
}, },
methods: { methods: {
@ -47,12 +49,18 @@ const UserReportingModal = {
this.$store.dispatch('closeUserReportingModal') this.$store.dispatch('closeUserReportingModal')
}, },
reportUser () { reportUser () {
this.processing = true
const params = { const params = {
userId: this.userId,
comment: this.comment, comment: this.comment,
forward: this.forward, forward: this.forward,
statusIds: this.statusIdsToReport statusIds: this.statusIdsToReport
} }
this.$store.dispatch('reportUser', params) this.$store.state.api.backendInteractor.reportUser(params)
.then(() => {
this.processing = false
this.closeModal()
})
}, },
isChecked (statusId) { isChecked (statusId) {
return this.statusIdsToReport.indexOf(statusId) !== -1 return this.statusIdsToReport.indexOf(statusId) !== -1

View file

@ -19,7 +19,7 @@
<Checkbox v-model="forward">Forward to {{remoteInstance}}</Checkbox> <Checkbox v-model="forward">Forward to {{remoteInstance}}</Checkbox>
</div> </div>
<div> <div>
<button class="btn btn-default" @click="reportUser">Submit</button> <button class="btn btn-default" @click="reportUser" :disabled="processing">Submit</button>
</div> </div>
</div> </div>
<div class="user-reporting-panel-right"> <div class="user-reporting-panel-right">

View file

@ -23,10 +23,6 @@ const reports = {
}, },
closeUserReportingModal ({ commit }) { closeUserReportingModal ({ commit }) {
commit('closeUserReportingModal') commit('closeUserReportingModal')
},
reportUser ({ state, rootState, commit }, params) {
rootState.api.backendInteractor.reportUser({ userId: state.userId, ...params })
.then(result => console.log(result))
} }
} }
} }