Browse Source
feat: create and join group (#123)
feat: create and join group (#123)
* feat: add create group api * feat: add create group UI * chore: update docs * feat: add join group invitation ui * chore update docspull/126/head
Aldino Kemal
2 years ago
committed by
GitHub
GitHub
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 334 additions and 40 deletions
-
8readme.md
-
4src/config/settings.go
-
6src/domains/group/group.go
-
20src/internal/rest/group.go
-
1src/pkg/error/whatsapp_error.go
-
8src/pkg/whatsapp/whatsapp.go
-
37src/services/group.go
-
14src/validations/group_validation.go
-
114src/views/components/GroupCreate.js
-
83src/views/components/GroupJoinWithLink.js
-
11src/views/components/GroupList.js
-
20src/views/index.html
@ -0,0 +1,114 @@ |
|||||
|
export default { |
||||
|
name: 'CreateGroup', |
||||
|
data() { |
||||
|
return { |
||||
|
loading: false, |
||||
|
title: '', |
||||
|
participants: ['', ''], |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
openModal() { |
||||
|
$('#modalGroupCreate').modal({ |
||||
|
onApprove: function () { |
||||
|
return false; |
||||
|
} |
||||
|
}).modal('show'); |
||||
|
}, |
||||
|
handleAddParticipant() { |
||||
|
this.participants.push('') |
||||
|
}, |
||||
|
handleDeleteParticipant(index) { |
||||
|
this.participants.splice(index, 1) |
||||
|
}, |
||||
|
async handleSubmit() { |
||||
|
try { |
||||
|
let response = await this.submitApi() |
||||
|
showSuccessInfo(response) |
||||
|
$('#modalGroupCreate').modal('hide'); |
||||
|
} catch (err) { |
||||
|
showErrorInfo(err) |
||||
|
} |
||||
|
}, |
||||
|
async submitApi() { |
||||
|
this.loading = true; |
||||
|
try { |
||||
|
let response = await window.http.post(`/group`, { |
||||
|
title: this.title, |
||||
|
// convert participant become list of string
|
||||
|
participants: this.participants.filter(participant => participant !== '').map(participant => `${participant}`) |
||||
|
}) |
||||
|
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.title = ''; |
||||
|
this.participants = ['', '']; |
||||
|
}, |
||||
|
}, |
||||
|
template: `
|
||||
|
<div class="green card" @click="openModal" style="cursor: pointer"> |
||||
|
<div class="content"> |
||||
|
<a class="ui green right ribbon label">Group</a> |
||||
|
<div class="header">Create Groups</div> |
||||
|
<div class="description"> |
||||
|
Add more friends to your group |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Modal AccountGroup --> |
||||
|
<div class="ui small modal" id="modalGroupCreate"> |
||||
|
<i class="close icon"></i> |
||||
|
<div class="header"> |
||||
|
Create Group |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<form class="ui form"> |
||||
|
<div class="field"> |
||||
|
<label>Group Name</label> |
||||
|
<input v-model="title" type="text" |
||||
|
placeholder="Group Name..." |
||||
|
aria-label="Group Name"> |
||||
|
</div> |
||||
|
|
||||
|
<div class="field"> |
||||
|
<label>Participants</label> |
||||
|
<div style="display: flex; flex-direction: column; gap: 5px"> |
||||
|
<div class="ui action input" :key="index" v-for="(participant, index) in participants"> |
||||
|
<input type="number" placeholder="Phone Int Number (6289...)" v-model="participants[index]" |
||||
|
aria-label="list participant"> |
||||
|
<button class="ui button" @click="handleDeleteParticipant(index)" type="button"> |
||||
|
<i class="minus circle icon"></i> |
||||
|
</button> |
||||
|
</div> |
||||
|
<div class="field" style="display: flex; flex-direction: column; gap: 3px"> |
||||
|
<small>You do not need to include yourself as participant. it will be automatically included.</small> |
||||
|
<div> |
||||
|
<button class="mini ui primary button" @click="handleAddParticipant" type="button"> |
||||
|
<i class="plus icon"></i> Option |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</form> |
||||
|
</div> |
||||
|
<div class="actions"> |
||||
|
<div class="ui approve positive right labeled icon button" :class="{'loading': this.loading}" |
||||
|
@click="handleSubmit" type="button"> |
||||
|
Create |
||||
|
<i class="send icon"></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
`
|
||||
|
} |
||||
@ -0,0 +1,83 @@ |
|||||
|
export default { |
||||
|
name: 'JoinGroupWithLink', |
||||
|
data() { |
||||
|
return { |
||||
|
loading: false, |
||||
|
link: '', |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
openModal() { |
||||
|
$('#modalGroupJoinWithLink').modal({ |
||||
|
onApprove: function () { |
||||
|
return false; |
||||
|
} |
||||
|
}).modal('show'); |
||||
|
}, |
||||
|
async handleSubmit() { |
||||
|
try { |
||||
|
let response = await this.submitApi() |
||||
|
showSuccessInfo(response) |
||||
|
$('#modalGroupJoinWithLink').modal('hide'); |
||||
|
} catch (err) { |
||||
|
showErrorInfo(err) |
||||
|
} |
||||
|
}, |
||||
|
async submitApi() { |
||||
|
this.loading = true; |
||||
|
try { |
||||
|
let response = await window.http.post(`/group/join-with-link`, { |
||||
|
link: this.link, |
||||
|
}) |
||||
|
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.link = ''; |
||||
|
}, |
||||
|
}, |
||||
|
template: `
|
||||
|
<div class="green card" @click="openModal" style="cursor: pointer"> |
||||
|
<div class="content"> |
||||
|
<a class="ui green right ribbon label">Group</a> |
||||
|
<div class="header">Join Groups</div> |
||||
|
<div class="description"> |
||||
|
Join group with invitation link |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Modal AccountGroup --> |
||||
|
<div class="ui small modal" id="modalGroupJoinWithLink"> |
||||
|
<i class="close icon"></i> |
||||
|
<div class="header"> |
||||
|
Join Group With Link |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<form class="ui form"> |
||||
|
<div class="field"> |
||||
|
<label>Invitation Link</label> |
||||
|
<input v-model="link" type="text" |
||||
|
placeholder="Invitation link..." |
||||
|
aria-label="Invitation Link"> |
||||
|
</div> |
||||
|
</form> |
||||
|
</div> |
||||
|
<div class="actions"> |
||||
|
<div class="ui approve positive right labeled icon button" :class="{'loading': this.loading}" |
||||
|
@click="handleSubmit" type="button"> |
||||
|
Join |
||||
|
<i class="send icon"></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
`
|
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue