@ -1,8 +1,20 @@
export default { export default {
name : 'ListGroup' , name : 'ListGroup' ,
props : [ 'connected' ] ,
data ( ) { data ( ) {
return { return {
groups : [ ]
groups : [ ] ,
selectedGroupId : null ,
requestedMembers : [ ] ,
loadingRequestedMembers : false ,
processingMember : null
}
} ,
computed : {
currentUserId ( ) {
if ( ! this . connected || this . connected . length === 0 ) return null ;
const device = this . connected [ 0 ] . device ;
return device . split ( '@' ) [ 0 ] . split ( ':' ) [ 0 ] ;
} }
} , } ,
methods : { methods : {
@ -67,6 +79,93 @@ export default {
formatDate : function ( value ) { formatDate : function ( value ) {
if ( ! value ) return '' if ( ! value ) return ''
return moment ( value ) . format ( 'LLL' ) ; return moment ( value ) . format ( 'LLL' ) ;
} ,
isAdmin ( ownerJID ) {
const owner = ownerJID . split ( '@' ) [ 0 ] ;
return owner === this . currentUserId ;
} ,
async handleSeeRequestedMember ( group_id ) {
this . selectedGroupId = group_id ;
this . loadingRequestedMembers = true ;
this . requestedMembers = [ ] ;
try {
const response = await window . http . get ( ` /group/participants/requested?group_id= ${ group_id } ` ) ;
this . requestedMembers = response . data . results || [ ] ;
this . loadingRequestedMembers = false ;
$ ( '#modalRequestedMembers' ) . modal ( 'show' ) ;
} catch ( error ) {
this . loadingRequestedMembers = false ;
let errorMessage = "Failed to fetch requested members" ;
if ( error . response ) {
errorMessage = error . response . data . message || errorMessage ;
}
showErrorInfo ( errorMessage ) ;
}
} ,
formatJID ( jid ) {
return jid ? jid . split ( '@' ) [ 0 ] : '' ;
} ,
closeRequestedMembersModal ( ) {
$ ( '#modalRequestedMembers' ) . modal ( 'hide' ) ;
// open modal again
this . openModal ( ) ;
} ,
async handleApproveRequest ( member ) {
if ( ! this . selectedGroupId || ! member ) return ;
try {
this . processingMember = member . jid ;
const payload = {
group_id : this . selectedGroupId ,
participants : [ this . formatJID ( member . jid ) ]
} ;
await window . http . post ( '/group/participants/requested/approve' , payload ) ;
// Remove the approved member from the list
this . requestedMembers = this . requestedMembers . filter ( m => m . jid !== member . jid ) ;
showSuccessInfo ( "Member request approved" ) ;
this . processingMember = null ;
} catch ( error ) {
this . processingMember = null ;
let errorMessage = "Failed to approve member request" ;
if ( error . response ) {
errorMessage = error . response . data . message || errorMessage ;
}
showErrorInfo ( errorMessage ) ;
}
} ,
async handleRejectRequest ( member ) {
if ( ! this . selectedGroupId || ! member ) return ;
try {
this . processingMember = member . jid ;
const payload = {
group_id : this . selectedGroupId ,
participants : [ this . formatJID ( member . jid ) ]
} ;
await window . http . post ( '/group/participants/requested/reject' , payload ) ;
// Remove the rejected member from the list
this . requestedMembers = this . requestedMembers . filter ( m => m . jid !== member . jid ) ;
showSuccessInfo ( "Member request rejected" ) ;
this . processingMember = null ;
} catch ( error ) {
this . processingMember = null ;
let errorMessage = "Failed to reject member request" ;
if ( error . response ) {
errorMessage = error . response . data . message || errorMessage ;
}
showErrorInfo ( errorMessage ) ;
}
} }
} , } ,
template : `
template : `
@ -81,7 +180,7 @@ export default {
< / d i v > < / d i v >
<!-- Modal AccountGroup -- > <!-- Modal AccountGroup -- >
< div class = "ui smal l modal" id = "modalGroupList" >
< div class = "ui large modal" id = "modalGroupList" >
< i class = "close icon" > < / i > < i class = "close icon" > < / i >
< div class = "header" > < div class = "header" >
My Group List My Group List
@ -104,12 +203,67 @@ export default {
< td > { { g . Participants . length } } < / t d > < td > { { g . Participants . length } } < / t d >
< td > { { formatDate ( g . GroupCreated ) } } < / t d > < td > { { formatDate ( g . GroupCreated ) } } < / t d >
< td > < td >
< div style = "display: flex; gap: 8px; align-items: center;" >
< button v - if = "isAdmin(g.OwnerJID)" class = "ui green tiny button" @ click = "handleSeeRequestedMember(g.JID)" > Requested Members < / b u t t o n >
< button class = "ui red tiny button" @ click = "handleLeaveGroup(g.JID)" > Leave < / b u t t o n > < button class = "ui red tiny button" @ click = "handleLeaveGroup(g.JID)" > Leave < / b u t t o n >
< / d i v >
< / t d > < / t d >
< / t r > < / t r >
< / t b o d y > < / t b o d y >
< / t a b l e > < / t a b l e >
< / d i v > < / d i v >
< / d i v > < / d i v >
<!-- Requested Members Modal -- >
< div class = "ui modal" id = "modalRequestedMembers" >
< i class = "close icon" > < / i >
< div class = "header" >
Requested Group Members
< / d i v >
< div class = "content" >
< div v - if = "loadingRequestedMembers" class = "ui active centered inline loader" > < / d i v >
< div v - else - if = "requestedMembers.length === 0" class = "ui info message" >
< div class = "header" > No Requested Members < / d i v >
< p > There are no pending member requests for this group . < / p >
< / d i v >
< table v - else class = "ui celled table" >
< thead >
< tr >
< th > User ID < / t h >
< th > Request Time < / t h >
< th > Action < / t h >
< / t r >
< / t h e a d >
< tbody >
< tr v - for = "member in requestedMembers" : key = "member.jid" >
< td > { { formatJID ( member . jid ) } } < / t d >
< td > { { formatDate ( member . requested_at ) } } < / t d >
< td >
< div class = "ui mini buttons" >
< button class = "ui green button"
@ click = "handleApproveRequest(member)"
: disabled = "processingMember === member.jid" >
< i v - if = "processingMember === member.jid" class = "spinner loading icon" > < / i >
Approve
< / b u t t o n >
< div class = "or" > < / d i v >
< button class = "ui red button"
@ click = "handleRejectRequest(member)"
: disabled = "processingMember === member.jid" >
< i v - if = "processingMember === member.jid" class = "spinner loading icon" > < / i >
Reject
< / b u t t o n >
< / d i v >
< / t d >
< / t r >
< / t b o d y >
< / t a b l e >
< / d i v >
< div class = "actions" >
< div class = "ui button" @ click = "closeRequestedMembersModal" > Close < / d i v >
< / d i v >
< / d i v >
`
`
} }
Aldino Kemal
11 months ago