@ -1,48 +1,66 @@
export default { export default {
name : 'AddParticipantsToGroup ' ,
name : 'ManageGroupParticipants ' ,
data ( ) { data ( ) {
return { return {
loading : false , loading : false ,
group : '' , group : '' ,
action : 'add' , // add, remove, promote, demote
participants : [ '' , '' ] , participants : [ '' , '' ] ,
}
} ;
} , } ,
computed : { computed : {
group_id ( ) { group_id ( ) {
return ` ${ this . group } @ ${ window . TYPEGROUP } `
}
return ` ${ this . group } @ ${ window . TYPEGROUP } ` ;
} ,
} , } ,
methods : { methods : {
openModal ( ) { openModal ( ) {
$ ( '#modalGroupAddParticipant' ) . modal ( { $ ( '#modalGroupAddParticipant' ) . modal ( {
onApprove : function ( ) {
onApprove : function ( ) {
return false ; return false ;
}
} ,
} ) . modal ( 'show' ) ; } ) . modal ( 'show' ) ;
} , } ,
handleAddParticipant ( ) { handleAddParticipant ( ) {
this . participants . push ( '' )
this . participants . push ( '' ) ;
} , } ,
handleDeleteParticipant ( index ) { handleDeleteParticipant ( index ) {
this . participants . splice ( index , 1 )
this . participants . splice ( index , 1 ) ;
} , } ,
async handleSubmit ( ) { async handleSubmit ( ) {
try { try {
let response = await this . submitApi ( )
showSuccessInfo ( response )
let response = await this . submitApi ( ) ;
showSuccessInfo ( response ) ;
$ ( '#modalGroupAddParticipant' ) . modal ( 'hide' ) ; $ ( '#modalGroupAddParticipant' ) . modal ( 'hide' ) ;
} catch ( err ) { } catch ( err ) {
showErrorInfo ( err )
showErrorInfo ( err ) ;
} }
} , } ,
async submitApi ( ) { async submitApi ( ) {
this . loading = true ; this . loading = true ;
try { try {
let response = await window . http . post ( ` /group/participants ` , {
const payload = {
group_id : this . group_id , group_id : this . group_id ,
// convert participant become list of string
// convert participant become list of string
participants : this . participants . filter ( participant => participant !== '' ) . map ( participant => ` ${ participant } ` )
} )
participants : this . participants . filter ( participant => participant !== '' ) . map ( participant => ` ${ participant } ` ) ,
} ;
let response ;
switch ( this . action ) {
case 'add' :
response = await window . http . post ( ` /group/participants ` , payload ) ;
break ;
case 'remove' :
response = await window . http . post ( ` /group/participants/remove ` , payload ) ;
break ;
case 'promote' :
response = await window . http . post ( ` /group/participants/promote ` , payload ) ;
break ;
case 'demote' :
response = await window . http . post ( ` /group/participants/demote ` , payload ) ;
break ;
}
this . handleReset ( ) ; this . handleReset ( ) ;
return response . data . message ; return response . data . message ;
} catch ( error ) { } catch ( error ) {
@ -56,6 +74,7 @@ export default {
} , } ,
handleReset ( ) { handleReset ( ) {
this . group = '' ; this . group = '' ;
this . action = 'add' ;
this . participants = [ '' , '' ] ; this . participants = [ '' , '' ] ;
} , } ,
} , } ,
@ -63,9 +82,9 @@ export default {
< div class = "green card" @ click = "openModal" style = "cursor: pointer" > < div class = "green card" @ click = "openModal" style = "cursor: pointer" >
< div class = "content" > < div class = "content" >
< a class = "ui green right ribbon label" > Group < / a > < a class = "ui green right ribbon label" > Group < / a >
< div class = "header" > Add Participants < / d i v >
< div class = "header" > Manage Participants < / d i v >
< div class = "description" > < div class = "description" >
Add multiple p articipants
Add / Remove / Promote / Demote P articipants
< / d i v > < / d i v >
< / d i v > < / d i v >
< / d i v > < / d i v >
@ -74,7 +93,7 @@ export default {
< div class = "ui small modal" id = "modalGroupAddParticipant" > < div class = "ui small modal" id = "modalGroupAddParticipant" >
< i class = "close icon" > < / i > < i class = "close icon" > < / i >
< div class = "header" > < div class = "header" >
Add Participants
Manage Participants
< / d i v > < / d i v >
< div class = "content" > < div class = "content" >
< form class = "ui form" > < form class = "ui form" >
@ -105,15 +124,25 @@ export default {
< / d i v > < / d i v >
< / d i v > < / d i v >
< / d i v > < / d i v >
< div class = "field" >
< label > Action < / l a b e l >
< select v - model = "action" class = "ui dropdown" aria - label = "Action" >
< option value = "add" > Add to group < / o p t i o n >
< option value = "remove" > Remove from group < / o p t i o n >
< option value = "promote" > Promote to admin < / o p t i o n >
< option value = "demote" > Demote from admin < / o p t i o n >
< / s e l e c t >
< / d i v >
< / f o r m > < / f o r m >
< / d i v > < / d i v >
< div class = "actions" > < div class = "actions" >
< div class = "ui approve positive right labeled icon button" : class = "{'loading': this.loading}" < div class = "ui approve positive right labeled icon button" : class = "{'loading': this.loading}"
@ click = "handleSubmit" type = "button" > @ click = "handleSubmit" type = "button" >
Create
Submit
< i class = "send icon" > < / i > < i class = "send icon" > < / i >
< / d i v > < / d i v >
< / d i v > < / d i v >
< / d i v > < / d i v >
`
}
` ,
} ;
Aldino Kemal
2 years ago
GitHub