Skip to content

Commit

Permalink
feat: take out send contact, file and video
Browse files Browse the repository at this point in the history
  • Loading branch information
@aldinokemal
aldinokemal committed Mar 13, 2024
1 parent 98f6075 commit 6282a83
Show file tree
Hide file tree
Showing 4 changed files with 397 additions and 372 deletions.
118 changes: 118 additions & 0 deletions src/views/components/SendContact.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
export default {
name: 'SendContact',
data() {
return {
type: 'user',
phone: '',
card_name: '',
card_phone: '',
loading: false,
}
},
computed: {
phone_id() {
return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
}
},
methods: {
openModal() {
$('#modalSendContact').modal({
onApprove: function () {
return false;
}
}).modal('show');
},
async handleSubmit() {
try {
this.loading = true;
let response = await this.sendApi()
showSuccessInfo(response)
$('#modalSendContact').modal('hide');
} catch (err) {
showErrorInfo(err)
} finally {
this.loading = false;
}
},
async sendApi() {
this.loading = true;
try {
const payload = {
phone: this.phone_id,
contact_name: this.card_name,
contact_phone: this.card_phone
}
let response = await window.http.post(`/send/contact`, payload)
this.handleReset();
return response.data.message;
} catch (error) {
if (error.response) {
throw new Error(error.response.data.message);
} else {
throw new Error(error.message);
}
} finally {
this.loading = false;
}
},
handleReset() {
this.phone = '';
this.card_name = '';
this.card_phone = '';
this.type = 'user';
},
},
template:`
<div class="blue card" @click="openModal()" style="cursor: pointer">
<div class="content">
<a class="ui blue right ribbon label">Send</a>
<div class="header">Send Contact</div>
<div class="description">
Send contact to user or group
</div>
</div>
</div>
<!-- Modal SendContact -->
<div class="ui small modal" id="modalSendContact">
<i class="close icon"></i>
<div class="header">
Send Contact
</div>
<div class="content">
<form class="ui form">
<div class="field">
<label>Type</label>
<select name="type" v-model="type" aria-label="type">
<option value="group">Group Message</option>
<option value="user">Private Message</option>
</select>
</div>
<div class="field">
<label>Phone / Group ID</label>
<input v-model="phone" type="text" placeholder="6289..."
aria-label="phone">
<input :value="phone_id" disabled aria-label="whatsapp_id">
</div>
<div class="field">
<label>Contact Name</label>
<input v-model="card_name" type="text" placeholder="Please enter contact name"
aria-label="contact name">
</div>
<div class="field">
<label>Contact Phone</label>
<input v-model="card_phone" type="text" placeholder="Please enter contact phone"
aria-label="contact phone">
</div>
</form>
</div>
<div class="actions">
<div class="ui approve positive right labeled icon button" :class="{'loading': this.loading}"
@click="handleSubmit">
Send
<i class="send icon"></i>
</div>
</div>
</div>
`
}
123 changes: 123 additions & 0 deletions src/views/components/SendFile.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
export default {
name: 'SendFile',
props: {
maxFileSize: {
type: String,
required: true,
}
},
data() {
return {
caption: '',
type: 'user',
phone: '',
loading: false,
}
},
computed: {
phone_id() {
return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
}
},
methods: {
openModal() {
$('#modalSendFile').modal({
onApprove: function () {
return false;
}
}).modal('show');
},
async handleSubmit() {
try {
let response = await this.sendApi()
showSuccessInfo(response)
$('#modalSendFile').modal('hide');
} catch (err) {
showErrorInfo(err)
}
},
async sendApi() {
this.loading = true;
try {
let payload = new FormData();
payload.append("caption", this.caption)
payload.append("phone", this.phone_id)
payload.append("file", $("#file")[0].files[0])
let response = await http.post(`/send/file`, payload)
this.handleReset();
return response.data.message;
} catch (error) {
if (error.response) {
throw new Error(error.response.data.message);
} else {
throw new Error(error.message);
}
} finally {
this.loading = false;
}
},
handleReset() {
this.caption = '';
this.phone = '';
this.type = 'user';
$("#file").val('');
},
},
template: `
<div class="blue card" @click="openModal()" style="cursor: pointer">
<div class="content">
<a class="ui blue right ribbon label">Send</a>
<div class="header">Send File</div>
<div class="description">
Send any file up to
<div class="ui blue horizontal label">{{ maxFileSize }}</div>
</div>
</div>
</div>
<!-- Modal SendFile -->
<div class="ui small modal" id="modalSendFile">
<i class="close icon"></i>
<div class="header">
Send File
</div>
<div class="content">
<form class="ui form">
<div class="field">
<label>Type</label>
<select name="type" v-model="type" aria-label="type">
<option value="group">Group Message</option>
<option value="user">Private Message</option>
</select>
</div>
<div class="field">
<label>Phone / Group ID</label>
<input v-model="phone" type="text" placeholder="6289..."
aria-label="phone">
<input :value="phone_id" disabled aria-label="whatsapp_id">
</div>
<div class="field">
<label>Caption</label>
<textarea v-model="caption" type="text" placeholder="Type some caption (optional)..."
aria-label="caption"></textarea>
</div>
<div class="field" style="padding-bottom: 30px">
<label>File</label>
<input type="file" class="inputfile" id="file" style="display: none"/>
<label for="file" class="ui positive medium green left floated button" style="color: white">
<i class="ui upload icon"></i>
Upload file
</label>
</div>
</form>
</div>
<div class="actions">
<div class="ui approve positive right labeled icon button" :class="{'loading': this.loading}"
@click="handleSubmit">
Send
<i class="send icon"></i>
</div>
</div>
</div>
`
}
146 changes: 146 additions & 0 deletions src/views/components/SendVideo.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
export default {
name: 'SendVideo',
// define props
props: {
maxVideoSize: {
type: String,
required: true,
}
},
data() {
return {
caption: '',
view_once: false,
compress: false,
type: 'user',
phone: '',
loading: false,
}
},
computed: {
phone_id() {
return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
}
},
methods: {
openModal() {
$('#modalSendVideo').modal({
onApprove: function () {
return false;
}
}).modal('show');
},
async handleSubmit() {
try {
let response = await this.sendApi()
showSuccessInfo(response)
$('#modalSendVideo').modal('hide');
} catch (err) {
showErrorInfo(err)
}
},
async sendApi() {
this.loading = true;
try {
let payload = new FormData();
payload.append("phone", this.phone_id)
payload.append("caption", this.caption)
payload.append("view_once", this.view_once)
payload.append("compress", this.compress)
payload.append("video", $("#file")[0].files[0])
let response = await window.http.post(`/send/video`, payload)
this.handleReset();
return response.data.message;
} catch (error) {
if (error.response) {
throw new Error(error.response.data.message);
} else {
throw new Error(error.message);
}
} finally {
this.loading = false;
}
},
handleReset() {
this.caption = '';
this.view_once = false;
this.compress = false;
this.phone = '';
this.type = 'user';
$("#file").val('');
},
},
template: `
<div class="blue card" @click="openModal()" style="cursor: pointer">
<div class="content">
<a class="ui blue right ribbon label">Send</a>
<div class="header">Send Video</div>
<div class="description">
Send video
<div class="ui blue horizontal label">mp4</div>
up to
<div class="ui blue horizontal label">{{ maxVideoSize }}</div>
</div>
</div>
</div>
<!-- Modal SendVideo -->
<div class="ui small modal" id="modalSendVideo">
<i class="close icon"></i>
<div class="header">
Send Video
</div>
<div class="content">
<form class="ui form">
<div class="field">
<label>Type</label>
<select name="type" v-model="type" aria-label="type">
<option value="group">Group Message</option>
<option value="user">Private Message</option>
</select>
</div>
<div class="field">
<label>Phone / Group ID</label>
<input v-model="phone" type="text" placeholder="6289..."
aria-label="phone">
<input :value="phone_id" disabled aria-label="whatsapp_id">
</div>
<div class="field">
<label>Caption</label>
<textarea v-model="caption" placeholder="Type some caption (optional)..."
aria-label="caption"></textarea>
</div>
<div class="field">
<label>View Once</label>
<div class="ui toggle checkbox">
<input type="checkbox" aria-label="view once" v-model="view_once">
<label>Check for enable one time view</label>
</div>
</div>
<div class="field">
<label>Compress</label>
<div class="ui toggle checkbox">
<input type="checkbox" aria-label="compress" v-model="compress">
<label>Check for compressing video to smaller size</label>
</div>
</div>
<div class="field" style="padding-bottom: 30px">
<label>Video</label>
<input type="file" id="file" style="display: none" accept="video/*"/>
<label for="file" class="ui positive medium green left floated button" style="color: white">
<i class="ui upload icon"></i>
Upload video
</label>
</div>
</form>
</div>
<div class="actions">
<div class="ui approve positive right labeled icon button" :class="{'loading': this.loading}"
@click="handleSubmit">
Send
<i class="send icon"></i>
</div>
</div>
</div>
`
}
Loading

0 comments on commit 6282a83

Please sign in to comment.