Aldino Kemal
2 years ago
15 changed files with 257 additions and 262 deletions
-
112src/views/components/AccountAvatar.js
-
115src/views/components/AccountGroup.js
-
4src/views/components/AccountUserInfo.js
-
4src/views/components/MessageReact.js
-
4src/views/components/MessageRevoke.js
-
4src/views/components/MessageUpdate.js
-
4src/views/components/SendAudio.js
-
4src/views/components/SendContact.js
-
4src/views/components/SendFile.js
-
4src/views/components/SendImage.js
-
4src/views/components/SendLocation.js
-
4src/views/components/SendMessage.js
-
4src/views/components/SendPoll.js
-
4src/views/components/SendVideo.js
-
244src/views/index.html
@ -0,0 +1,112 @@ |
|||||
|
export default { |
||||
|
name: 'AccountAvatar', |
||||
|
data() { |
||||
|
return { |
||||
|
type: 'user', |
||||
|
phone: '', |
||||
|
image: null, |
||||
|
loading: false, |
||||
|
is_preview: false, |
||||
|
is_community: false, |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
phone_id() { |
||||
|
return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}` |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
async openModal() { |
||||
|
this.handleReset(); |
||||
|
$('#modalUserAvatar').modal('show'); |
||||
|
}, |
||||
|
async handleSubmit() { |
||||
|
try { |
||||
|
await this.submitApi(); |
||||
|
showSuccessInfo("Avatar fetched") |
||||
|
} catch (err) { |
||||
|
showErrorInfo(err) |
||||
|
} |
||||
|
}, |
||||
|
async submitApi() { |
||||
|
this.loading = true; |
||||
|
try { |
||||
|
let response = await http.get(`/user/avatar?phone=${this.phone_id}&is_preview=${this.is_preview}&is_community=${this.is_community}`) |
||||
|
this.image = response.data.results.url; |
||||
|
} 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.image = null; |
||||
|
this.type = 'user'; |
||||
|
} |
||||
|
}, |
||||
|
template: `
|
||||
|
<div class="green card" @click="openModal" style="cursor: pointer;"> |
||||
|
<div class="content"> |
||||
|
<div class="header">Avatar</div> |
||||
|
<div class="description"> |
||||
|
You can search someone avatar by phone |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Modal UserAvatar --> |
||||
|
<div class="ui small modal" id="modalUserAvatar"> |
||||
|
<i class="close icon"></i> |
||||
|
<div class="header"> |
||||
|
Search User Avatar |
||||
|
</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</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>Preview</label> |
||||
|
<div class="ui toggle checkbox"> |
||||
|
<input type="checkbox" aria-label="compress" v-model="is_preview"> |
||||
|
<label>Check for small size image</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="field"> |
||||
|
<label>Community</label> |
||||
|
<div class="ui toggle checkbox"> |
||||
|
<input type="checkbox" aria-label="compress" v-model="is_community"> |
||||
|
<label>Check is it's community image</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<button type="button" class="ui primary button" :class="{'loading': loading}" |
||||
|
@click="handleSubmit"> |
||||
|
Search |
||||
|
</button> |
||||
|
</form> |
||||
|
|
||||
|
<div v-if="image != null" class="center"> |
||||
|
<img :src="image" alt="profile picture" style="padding-top: 10px; max-height: 200px"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
`
|
||||
|
} |
||||
@ -0,0 +1,115 @@ |
|||||
|
export default { |
||||
|
name: 'AccountGroup', |
||||
|
data() { |
||||
|
return { |
||||
|
groups: [] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
async openModal() { |
||||
|
try { |
||||
|
this.dtClear() |
||||
|
await this.submitApi(); |
||||
|
$('#modalUserGroup').modal('show'); |
||||
|
this.dtRebuild() |
||||
|
showSuccessInfo("Groups fetched") |
||||
|
} catch (err) { |
||||
|
showErrorInfo(err) |
||||
|
} |
||||
|
}, |
||||
|
dtClear() { |
||||
|
$('#account_groups_table').DataTable().destroy(); |
||||
|
}, |
||||
|
dtRebuild() { |
||||
|
$('#account_groups_table').DataTable({ |
||||
|
"pageLength": 100, |
||||
|
"reloadData": true, |
||||
|
}).draw(); |
||||
|
}, |
||||
|
async handleLeaveGroup(group_id) { |
||||
|
try { |
||||
|
const ok = confirm("Are you sure to leave this group?"); |
||||
|
if (!ok) return; |
||||
|
|
||||
|
await this.leaveGroupApi(group_id); |
||||
|
this.dtClear() |
||||
|
await this.submitApi(); |
||||
|
this.dtRebuild() |
||||
|
showSuccessInfo("Group left") |
||||
|
} catch (err) { |
||||
|
showErrorInfo(err) |
||||
|
} |
||||
|
}, |
||||
|
async leaveGroupApi(group_id) { |
||||
|
try { |
||||
|
let payload = new FormData(); |
||||
|
payload.append("group_id", group_id) |
||||
|
await http.post(`/group/leave`, payload) |
||||
|
} catch (error) { |
||||
|
if (error.response) { |
||||
|
throw new Error(error.response.data.message); |
||||
|
} |
||||
|
throw new Error(error.message); |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
async submitApi() { |
||||
|
try { |
||||
|
let response = await http.get(`/user/my/groups`) |
||||
|
this.groups = response.data.results.data; |
||||
|
} catch (error) { |
||||
|
if (error.response) { |
||||
|
throw new Error(error.response.data.message); |
||||
|
} |
||||
|
throw new Error(error.message); |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
formatDate: function (value) { |
||||
|
if (!value) return '' |
||||
|
return moment(value).format('LLL'); |
||||
|
} |
||||
|
}, |
||||
|
template: `
|
||||
|
<div class="green card" @click="openModal" style="cursor: pointer"> |
||||
|
<div class="content"> |
||||
|
<div class="header">My List Groups</div> |
||||
|
<div class="description"> |
||||
|
Display all groups you joined |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Modal AccountGroup --> |
||||
|
<div class="ui small modal" id="modalUserGroup"> |
||||
|
<i class="close icon"></i> |
||||
|
<div class="header"> |
||||
|
My Group List |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<table class="ui celled table" id="account_groups_table"> |
||||
|
<thead> |
||||
|
<tr> |
||||
|
<th>Group ID</th> |
||||
|
<th>Name</th> |
||||
|
<th>Participants</th> |
||||
|
<th>Created At</th> |
||||
|
<th>Action</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody v-if="groups != null"> |
||||
|
<tr v-for="g in groups"> |
||||
|
<td>{{ g.JID.split('@')[0] }}</td> |
||||
|
<td>{{ g.Name }}</td> |
||||
|
<td>{{ g.Participants.length }}</td> |
||||
|
<td>{{ formatDate(g.GroupCreated) }}</td> |
||||
|
<td> |
||||
|
<button class="ui red tiny button" @click="handleLeaveGroup(g.JID)">Leave</button> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
</div> |
||||
|
</div> |
||||
|
`
|
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue