import FormRecipient from "./generic/FormRecipient.js";
export default {
name: 'Message',
components: {
FormRecipient
},
data() {
return {
type: window.TYPEUSER,
phone: '',
message_id: '',
loading: false,
}
},
computed: {
phone_id() {
return this.phone + this.type;
}
},
methods: {
openModal() {
$('#modalMessageRevoke').modal({
onApprove: function () {
return false;
}
}).modal('show');
},
isValidForm() {
if (this.type !== window.TYPESTATUS && !this.phone.trim()) {
return false;
}
if (!this.message_id.trim()) {
return false;
}
return true;
},
async handleSubmit() {
if (!this.isValidForm() || this.loading) {
return;
}
try {
let response = await this.submitApi()
showSuccessInfo(response)
$('#modalMessageRevoke').modal('hide');
} catch (err) {
showErrorInfo(err)
}
},
async submitApi() {
this.loading = true;
try {
const payload = {phone: this.phone_id}
let response = await window.http.post(`/message/${this.message_id}/revoke`, payload)
this.handleReset();
return response.data.message;
} catch (error) {
if (error.response) {
throw new Error(error.response.data.message);
}
throw new Error(error.message);
} finally {
this.loading = false;
}
},
handleReset() {
this.phone = '';
this.message_id = '';
this.type = window.TYPEUSER;
},
},
template: `
<div class="red card" @click="openModal()" style="cursor: pointer">
<div class="content">
<a class="ui red right ribbon label">Message</a>
<div class="header">Revoke Message</div>
<div class="description">
any message in private or group chat
</div>
</div>
</div>
<!-- Modal MessageRevoke -->
<div class="ui small modal" id="modalMessageRevoke">
<i class="close icon"></i>
<div class="header">
Revoke Message
</div>
<div class="content">
<form class="ui form">
<FormRecipient v-model:type="type" v-model:phone="phone"/>
<div class="field">
<label> Message ID</label>
<input v-model="message_id" type="text" placeholder="Please enter your message id"
aria-label="message id">
</div>
</form>
</div>
<div class="actions">
<button class="ui approve positive right labeled icon button" :class="{'loading': this.loading, 'disabled': !isValidForm() || loading}"
@click="handleSubmit">
Send
<i class="send icon"></i>
</button>
</div>
</div>
`
}