mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-22 22:30:52 +01:00
Fix Group Members view
This commit is contained in:
MyNameIsBatman
parent
5892902ee2
commit
556616ac61
@ -115,7 +115,7 @@ export const GroupMembersView: FC<GroupMembersViewProps> = props =>
|
||||
}
|
||||
|
||||
searchMembers(pageData.pageIndex);
|
||||
}, [ pageData ]);
|
||||
}, [ pageData, searchMembers ]);
|
||||
|
||||
const acceptMembership = useCallback((member) =>
|
||||
{
|
||||
@ -124,7 +124,7 @@ export const GroupMembersView: FC<GroupMembersViewProps> = props =>
|
||||
SendMessageHook(new GroupMembershipAcceptComposer(pageData.groupId, member.id));
|
||||
searchMembers(pageData.pageIndex);
|
||||
}
|
||||
}, [ pageData ]);
|
||||
}, [ pageData, searchMembers ]);
|
||||
|
||||
const removeMemberOrDeclineMembership = useCallback((member) =>
|
||||
{
|
||||
@ -138,66 +138,68 @@ export const GroupMembersView: FC<GroupMembersViewProps> = props =>
|
||||
setRemovingMemberName(member.name);
|
||||
SendMessageHook(new GroupConfirmRemoveMemberComposer(pageData.groupId, member.id));
|
||||
}
|
||||
}, [ pageData ]);
|
||||
}, [ pageData, searchMembers ]);
|
||||
|
||||
if(!pageData) return null;
|
||||
if(!groupId) return null;
|
||||
|
||||
return (
|
||||
<NitroCardView className="nitro-group-members" simple={ true }>
|
||||
<NitroCardHeaderView headerText={ LocalizeText('group.members.title', ['groupName'], [ pageData.groupTitle ]) } onCloseClick={ onClose } />
|
||||
<NitroCardContentView className="pb-2">
|
||||
<div className="d-flex gap-2 align-items-center mb-2">
|
||||
<div className="group-badge">
|
||||
<BadgeImageView badgeCode={ pageData.badge } isGroup={ true } />
|
||||
<NitroCardHeaderView headerText={ LocalizeText('group.members.title', ['groupName'], [ pageData ? pageData.groupTitle : '' ]) } onCloseClick={ onClose } />
|
||||
{ pageData && <>
|
||||
<NitroCardContentView className="pb-2">
|
||||
<div className="d-flex gap-2 align-items-center mb-2">
|
||||
<div className="group-badge">
|
||||
<BadgeImageView badgeCode={ pageData.badge } isGroup={ true } />
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<input type="text" className="form-control form-control-sm w-100 mb-1" placeholder={ LocalizeText('group.members.searchinfo') } value={ searchQuery } onChange={ (e) => setSearchQuery(e.target.value) } onBlur={ () => searchMembers(pageData.pageIndex) } onKeyDown={ onKeyDown } />
|
||||
<select className="form-select form-select-sm w-100" value={ searchLevelId } onChange={ (e) => selectSearchLevelId(Number(e.target.value)) }>
|
||||
<option value="0">{ LocalizeText('group.members.search.all') }</option>
|
||||
<option value="1">{ LocalizeText('group.members.search.admins') }</option>
|
||||
<option value="2">{ LocalizeText('group.members.search.pending') }</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<input type="text" className="form-control form-control-sm w-100 mb-1" placeholder={ LocalizeText('group.members.searchinfo') } value={ searchQuery } onChange={ (e) => setSearchQuery(e.target.value) } onBlur={ () => searchMembers(pageData.pageIndex) } onKeyDown={ onKeyDown } />
|
||||
<select className="form-select form-select-sm w-100" value={ searchLevelId } onChange={ (e) => selectSearchLevelId(Number(e.target.value)) }>
|
||||
<option value="0">{ LocalizeText('group.members.search.all') }</option>
|
||||
<option value="1">{ LocalizeText('group.members.search.admins') }</option>
|
||||
<option value="2">{ LocalizeText('group.members.search.pending') }</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row row-cols-2 align-content-start g-0 w-100 members-list overflow-auto">
|
||||
{ pageData.result.map((member, index) =>
|
||||
{
|
||||
return (
|
||||
<div key={ index } className={ 'col pb-1' + classNames({ ' pe-1': index % 2 === 0 }) }>
|
||||
<div className="list-member bg-white rounded d-flex text-black">
|
||||
<div className="avatar-head flex-shrink-0 cursor-pointer" onClick={ () => { GetUserProfile(member.id) } }>
|
||||
<AvatarImageView figure={ member.figure } headOnly={ true } direction={ 2 } />
|
||||
</div>
|
||||
<div className="p-1 w-100 d-flex flex-column justify-content-center">
|
||||
<div className="fw-bold small cursor-pointer" onClick={ () => { GetUserProfile(member.id) } }>{ member.name }</div>
|
||||
{ member.rank !== GroupRank.REQUESTED && <div className="text-muted fst-italic small">{ LocalizeText('group.members.since', ['date'], [member.joinedAt]) }</div> }
|
||||
</div>
|
||||
<div className="d-flex flex-column pe-2 align-items-center justify-content-center">
|
||||
<div className="d-flex align-items-center">
|
||||
<i className={ 'icon icon-group-small-' + classNames({ 'owner': member.rank === GroupRank.OWNER, 'admin': member.rank === GroupRank.ADMIN, 'not-admin': member.rank === GroupRank.MEMBER, 'cursor-pointer': pageData.admin }) } title={ LocalizeText(getRankDescription(member)) } onClick={ () => toggleAdmin(member) } />
|
||||
<div className="row row-cols-2 align-content-start g-0 w-100 members-list overflow-auto">
|
||||
{ pageData.result.map((member, index) =>
|
||||
{
|
||||
return (
|
||||
<div key={ index } className={ 'col pb-1' + classNames({ ' pe-1': index % 2 === 0 }) }>
|
||||
<div className="list-member bg-white rounded d-flex text-black">
|
||||
<div className="avatar-head flex-shrink-0 cursor-pointer" onClick={ () => { GetUserProfile(member.id) } }>
|
||||
<AvatarImageView figure={ member.figure } headOnly={ true } direction={ 2 } />
|
||||
</div>
|
||||
<div className="p-1 w-100 d-flex flex-column justify-content-center">
|
||||
<div className="fw-bold small cursor-pointer" onClick={ () => { GetUserProfile(member.id) } }>{ member.name }</div>
|
||||
{ member.rank !== GroupRank.REQUESTED && <div className="text-muted fst-italic small">{ LocalizeText('group.members.since', ['date'], [member.joinedAt]) }</div> }
|
||||
</div>
|
||||
<div className="d-flex flex-column pe-2 align-items-center justify-content-center">
|
||||
<div className="d-flex align-items-center">
|
||||
<i className={ 'icon icon-group-small-' + classNames({ 'owner': member.rank === GroupRank.OWNER, 'admin': member.rank === GroupRank.ADMIN, 'not-admin': member.rank === GroupRank.MEMBER, 'cursor-pointer': pageData.admin }) } title={ LocalizeText(getRankDescription(member)) } onClick={ () => toggleAdmin(member) } />
|
||||
</div>
|
||||
{ member.rank === GroupRank.REQUESTED && <div className="d-flex align-items-center">
|
||||
<i className="icon cursor-pointer icon-accept" title={ LocalizeText('group.members.accept') } onClick={ () => acceptMembership(member) } />
|
||||
</div> }
|
||||
{ member.rank !== GroupRank.OWNER && pageData.admin && member.id !== GetSessionDataManager().userId &&<div className="d-flex align-items-center mt-1">
|
||||
<i className="icon cursor-pointer icon-deny" title={ LocalizeText(member.rank === GroupRank.REQUESTED ? 'group.members.reject' : 'group.members.kick') } onClick={ () => removeMemberOrDeclineMembership(member) } />
|
||||
</div> }
|
||||
</div>
|
||||
{ member.rank === GroupRank.REQUESTED && <div className="d-flex align-items-center">
|
||||
<i className="icon cursor-pointer icon-accept" title={ LocalizeText('group.members.accept') } onClick={ () => acceptMembership(member) } />
|
||||
</div> }
|
||||
{ member.rank !== GroupRank.OWNER && pageData.admin && member.id !== GetSessionDataManager().userId &&<div className="d-flex align-items-center mt-1">
|
||||
<i className="icon cursor-pointer icon-deny" title={ LocalizeText(member.rank === GroupRank.REQUESTED ? 'group.members.reject' : 'group.members.kick') } onClick={ () => removeMemberOrDeclineMembership(member) } />
|
||||
</div> }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}) }
|
||||
</div>
|
||||
<div className="d-flex w-100 align-items-center">
|
||||
<div>
|
||||
<button disabled={ pageData.pageIndex === 0 } className="btn btn-primary" onClick={ previousPage }><i className="fas fa-chevron-left" /></button>
|
||||
);
|
||||
}) }
|
||||
</div>
|
||||
<div className="text-center text-black w-100">{ LocalizeText('group.members.pageinfo', ['amount', 'page', 'totalPages'], [pageData.totalMembersCount.toString(), (pageData.pageIndex + 1).toString(), totalPages.toString()]) }</div>
|
||||
<div>
|
||||
<button disabled={ pageData.pageIndex === totalPages - 1 } className="btn btn-primary" onClick={ nextPage }><i className="fas fa-chevron-right" /></button>
|
||||
<div className="d-flex w-100 align-items-center">
|
||||
<div>
|
||||
<button disabled={ pageData.pageIndex === 0 } className="btn btn-primary" onClick={ previousPage }><i className="fas fa-chevron-left" /></button>
|
||||
</div>
|
||||
<div className="text-center text-black w-100">{ LocalizeText('group.members.pageinfo', ['amount', 'page', 'totalPages'], [pageData.totalMembersCount.toString(), (pageData.pageIndex + 1).toString(), totalPages.toString()]) }</div>
|
||||
<div>
|
||||
<button disabled={ pageData.pageIndex === totalPages - 1 } className="btn btn-primary" onClick={ nextPage }><i className="fas fa-chevron-right" /></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NitroCardContentView>
|
||||
</NitroCardContentView>
|
||||
</> }
|
||||
</NitroCardView>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user