mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-23 11:23:05 +02:00
Group updates
This commit is contained in:
Bill
parent
01d5e5e1be
commit
b52237212e
@ -69,6 +69,8 @@ $camera-checkout-width: 350px;
|
||||
|
||||
$room-info-width: 325px;
|
||||
|
||||
$nitro-group-creator-width: 383px;
|
||||
|
||||
.nitro-app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -1,7 +1,4 @@
|
||||
import { GroupJoinComposer } from '@nitrots/nitro-renderer';
|
||||
import { SendMessageHook } from '../../hooks';
|
||||
|
||||
export function TryJoinGroup(groupId: number): void
|
||||
{
|
||||
SendMessageHook(new GroupJoinComposer(groupId));
|
||||
}
|
||||
export const TryJoinGroup = (groupId: number) => SendMessageHook(new GroupJoinComposer(groupId));
|
||||
|
||||
@ -1,54 +1,93 @@
|
||||
.nitro-groups {
|
||||
.tab-image {
|
||||
width: 122px;
|
||||
height: 68px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.nitro-group-manager {
|
||||
width: 420px;
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
div {
|
||||
background-image: url('../../assets/images/groups/creator_images.png');
|
||||
background-repeat: no-repeat;
|
||||
.nitro-group-tab-image {
|
||||
width: 122px;
|
||||
height: 68px;
|
||||
background: url('../../assets/images/groups/creator_images.png') no-repeat;
|
||||
|
||||
&.tab-1 {
|
||||
background-position: 0px 0px;
|
||||
width: 99px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
&.tab-2 {
|
||||
background-position: -99px 0px;
|
||||
width: 98px;
|
||||
height: 62px;
|
||||
}
|
||||
|
||||
&.tab-3 {
|
||||
background-position: 0px -50px;
|
||||
width: 96px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
&.tab-4,
|
||||
&.tab-5 {
|
||||
background-position: 0px -95px;
|
||||
width: 114px;
|
||||
height: 61px;
|
||||
}
|
||||
}
|
||||
|
||||
.group-information {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.group-badge {
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
|
||||
.badge-image {
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
&.tab-1 {
|
||||
div {
|
||||
background-position: 0px 0px;
|
||||
width: 99px;
|
||||
.group-description {
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
.nitro-group-information-standalone {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.nitro-group-members {
|
||||
width: 400px;
|
||||
|
||||
.nitro-group-members-list-grid {
|
||||
|
||||
.member-list-item {
|
||||
height: 50px;
|
||||
max-height: 50px;
|
||||
|
||||
.avatar-head {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 40px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tab-2 {
|
||||
div {
|
||||
background-position: -99px 0px;
|
||||
width: 98px;
|
||||
height: 62px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tab-3 {
|
||||
div {
|
||||
background-position: 0px -50px;
|
||||
width: 96px;
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tab-4, &.tab-5 {
|
||||
div {
|
||||
background-position: 0px -95px;
|
||||
width: 114px;
|
||||
height: 61px;
|
||||
|
||||
.avatar-image {
|
||||
position: absolute;
|
||||
left: -25px;
|
||||
top: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.group-color-swatch {
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
@import './views/creator/GroupCreatorView';
|
||||
@import './views/information/GroupInformationView';
|
||||
@import './views/information-standalone/GroupInformationStandaloneView';
|
||||
@import './views/manager/GroupManagerView';
|
||||
@import './views/members/GroupMembersView';
|
||||
@import './views/room-information/GroupRoomInformationView';
|
||||
@import './views/shared-tabs/GroupSharedTabs';
|
||||
@import './views/tabs/GroupSharedTabs';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.nitro-group-creator {
|
||||
width: 433px;
|
||||
width: $nitro-group-creator-width;
|
||||
|
||||
.creator-tabs {
|
||||
display: flex;
|
||||
@ -11,14 +11,8 @@
|
||||
background-image: url('../../../../assets/images/groups/creator_tabs.png');
|
||||
background-repeat: no-repeat;
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.tab-blue-flat {
|
||||
@ -26,10 +20,6 @@
|
||||
height: 24px;
|
||||
background-position: 0px 0px;
|
||||
|
||||
div {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
height: 28px;
|
||||
background-position: 0px -24px;
|
||||
@ -41,10 +31,6 @@
|
||||
height: 24px;
|
||||
background-position: 0px -52px;
|
||||
|
||||
div {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
height: 28px;
|
||||
background-position: 0px -76px;
|
||||
@ -56,10 +42,6 @@
|
||||
height: 28px;
|
||||
background-position: 0px -104px;
|
||||
|
||||
div {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
height: 33px;
|
||||
background-position: 0px -132px;
|
||||
@ -67,10 +49,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.creator-tab {
|
||||
height: 260px;
|
||||
min-height: 260px;
|
||||
max-height: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
import { GroupBuyComposer, GroupBuyDataComposer } from '@nitrots/nitro-renderer';
|
||||
import classNames from 'classnames';
|
||||
import { FC, useCallback, useEffect, useState } from 'react';
|
||||
import { Button } from 'react-bootstrap';
|
||||
import { HasHabboClub, LocalizeText } from '../../../../api';
|
||||
import { Base, Button, Column, Flex, Text } from '../../../../common';
|
||||
import { SendMessageHook } from '../../../../hooks';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
|
||||
import { NotificationUtilities } from '../../../../views/notification-center/common/NotificationUtilities';
|
||||
import { useGroupsContext } from '../../GroupsContext';
|
||||
import { GroupsActions } from '../../reducers/GroupsReducer';
|
||||
import { GroupSharedTabBadgeView } from '../shared-tabs/GroupSharedTabBadgeView';
|
||||
import { GroupSharedTabColorsView } from '../shared-tabs/GroupSharedTabColorsView';
|
||||
import { GroupSharedTabIdentityView } from '../shared-tabs/GroupSharedTabIdentityView';
|
||||
import { GroupTabBadgeView } from '../tabs/GroupTabBadgeView';
|
||||
import { GroupTabColorsView } from '../tabs/GroupTabColorsView';
|
||||
import { GroupTabIdentityView } from '../tabs/GroupTabIdentityView';
|
||||
import { GroupCreatorTabConfirmationView } from './GroupCreatorTabConfirmationView';
|
||||
|
||||
const TABS: number[] = [1, 2, 3, 4];
|
||||
@ -22,34 +22,17 @@ interface GroupCreatorViewProps
|
||||
|
||||
export const GroupCreatorView: FC<GroupCreatorViewProps> = props =>
|
||||
{
|
||||
const { isVisible = false, onClose = null } = props;
|
||||
const [ currentTab, setCurrentTab ] = useState<number>(1);
|
||||
const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();
|
||||
const { groupName = null, groupDescription = null, groupHomeroomId = null, groupColors = null, groupBadgeParts = null } = groupsState;
|
||||
|
||||
const { isVisible = false, onClose = null } = props;
|
||||
|
||||
const [ currentTab, setCurrentTab ] = useState<number>(1);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!isVisible)
|
||||
{
|
||||
setCurrentTab(1);
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.RESET_GROUP_SETTINGS
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
SendMessageHook(new GroupBuyDataComposer());
|
||||
}
|
||||
}, [ isVisible ]);
|
||||
|
||||
const buyGroup = useCallback(() =>
|
||||
{
|
||||
const badge = [];
|
||||
|
||||
if(!groupBadgeParts) return;
|
||||
|
||||
const badge = [];
|
||||
|
||||
groupBadgeParts.forEach((part) =>
|
||||
{
|
||||
if(part.code)
|
||||
@ -77,56 +60,78 @@ export const GroupCreatorView: FC<GroupCreatorViewProps> = props =>
|
||||
case 1: {
|
||||
if(!groupName || groupName.length === 0 || !groupHomeroomId)
|
||||
{
|
||||
alert(LocalizeText('group.edit.error.no.name.or.room.selected'));
|
||||
NotificationUtilities.simpleAlert(LocalizeText('group.edit.error.no.name.or.room.selected'));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
case 4: {
|
||||
case 4:
|
||||
buyGroup();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
setCurrentTab(value =>
|
||||
{
|
||||
return (value === 4 ? value : value + 1)
|
||||
setCurrentTab(value => (value === 4 ? value : value + 1));
|
||||
}, [ currentTab, groupName, groupHomeroomId, buyGroup ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!isVisible)
|
||||
{
|
||||
setCurrentTab(1);
|
||||
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.RESET_GROUP_SETTINGS
|
||||
});
|
||||
}, [ currentTab, groupName, groupHomeroomId ]);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
SendMessageHook(new GroupBuyDataComposer());
|
||||
}, [ isVisible, dispatchGroupsState ]);
|
||||
|
||||
if(!isVisible) return null;
|
||||
|
||||
return (
|
||||
<NitroCardView className="nitro-group-creator" simple={ true }>
|
||||
<NitroCardHeaderView headerText={ LocalizeText('group.create.title') } onCloseClick={ onClose } />
|
||||
<NitroCardContentView className="pb-2">
|
||||
<div className="creator-tabs mb-2">
|
||||
<NitroCardContentView>
|
||||
<Flex className="creator-tabs">
|
||||
{ TABS.map((tab, index) =>
|
||||
{
|
||||
return (<div key={ index } className={ 'tab tab-' + (tab === 1 ? 'blue-flat' : tab === 4 ? 'yellow' : 'blue-arrow') + classNames({ ' active': currentTab === tab }) }>
|
||||
<div>{ LocalizeText('group.create.steplabel.' + tab) }</div>
|
||||
</div>);
|
||||
}) }
|
||||
</div>
|
||||
<div className="d-flex align-items-center mb-2">
|
||||
<div className={ 'flex-shrink-0 tab-image tab-' + currentTab }>
|
||||
<div></div>
|
||||
</div>
|
||||
<div className="w-100 text-black ms-2">
|
||||
<div className="fw-bold h4 m-0">{ LocalizeText('group.create.stepcaption.' + currentTab) }</div>
|
||||
<div>{ LocalizeText('group.create.stepdesc.' + currentTab) }</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-black creator-tab">
|
||||
{ currentTab === 1 && <GroupSharedTabIdentityView isCreator={ true } /> }
|
||||
{ currentTab === 2 && <GroupSharedTabBadgeView /> }
|
||||
{ currentTab === 3 && <GroupSharedTabColorsView /> }
|
||||
{ currentTab === 4 && <GroupCreatorTabConfirmationView /> }
|
||||
</div>
|
||||
<div className="d-flex justify-content-between mt-2">
|
||||
<Button variant="link" className="text-black" onClick={ previousStep }>{ LocalizeText(currentTab === 1 ? 'generic.cancel' : 'group.create.previousstep') }</Button>
|
||||
<button disabled={ currentTab === 4 && !HasHabboClub() } className={ 'btn ' + (currentTab === 4 ? HasHabboClub() ? 'btn-success' : 'btn-danger' : 'btn-primary') } onClick={ nextStep }>{ LocalizeText(currentTab === 4 ? HasHabboClub() ? 'group.create.confirm.buy' : 'group.create.confirm.viprequired' : 'group.create.nextstep') }</button>
|
||||
</div>
|
||||
{
|
||||
return (
|
||||
<Flex center key={ index } className={ `tab tab-${ ((tab === 1) ? 'blue-flat' : (tab === 4) ? 'yellow' : 'blue-arrow') } ${ (currentTab === tab) ? 'active' : '' }` }>
|
||||
<Text variant="white">{ LocalizeText(`group.create.steplabel.${ tab }`) }</Text>
|
||||
</Flex>
|
||||
);
|
||||
}) }
|
||||
</Flex>
|
||||
<Flex alignItems="center" gap={ 2 }>
|
||||
<Base className={ `nitro-group-tab-image tab-${ currentTab }`} />
|
||||
<Column grow gap={ 0 }>
|
||||
<Text bold fontSize={ 4 }>{ LocalizeText(`group.create.stepcaption.${ currentTab }`) }</Text>
|
||||
<Text>{ LocalizeText(`group.create.stepdesc.${ currentTab }`) }</Text>
|
||||
</Column>
|
||||
</Flex>
|
||||
<Column>
|
||||
{ (currentTab === 1) &&
|
||||
<GroupTabIdentityView isCreator={ true } /> }
|
||||
{ (currentTab === 2) &&
|
||||
<GroupTabBadgeView /> }
|
||||
{ (currentTab === 3) &&
|
||||
<GroupTabColorsView /> }
|
||||
{ (currentTab === 4) &&
|
||||
<GroupCreatorTabConfirmationView /> }
|
||||
</Column>
|
||||
<Flex justifyContent="between">
|
||||
<Button variant="link" className="text-black" onClick={ previousStep }>
|
||||
{ LocalizeText(currentTab === 1 ? 'generic.cancel' : 'group.create.previousstep') }
|
||||
</Button>
|
||||
<Button disabled={ ((currentTab === 4) && !HasHabboClub()) } variant={ ((currentTab === 4) ? HasHabboClub() ? 'success' : 'danger' : 'primary') } onClick={ nextStep }>
|
||||
{ LocalizeText((currentTab === 4) ? HasHabboClub() ? 'group.create.confirm.buy' : 'group.create.confirm.viprequired' : 'group.create.nextstep') }
|
||||
</Button>
|
||||
</Flex>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
.nitro-group-information-standalone {
|
||||
width: 500px;
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
import { GroupInformationEvent, GroupInformationParser } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback, useState } from 'react';
|
||||
import { LocalizeText } from '../../../../api';
|
||||
import { CreateMessageHook } from '../../../../hooks';
|
||||
import { BatchUpdates, CreateMessageHook } from '../../../../hooks';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
|
||||
import { GroupInformationView } from '../information/GroupInformationView';
|
||||
|
||||
@ -15,8 +15,11 @@ export const GroupInformationStandaloneView: FC<{}> = props =>
|
||||
|
||||
if(!parser.flag) return;
|
||||
|
||||
setGroupInformation(null);
|
||||
setGroupInformation(parser);
|
||||
BatchUpdates(() =>
|
||||
{
|
||||
setGroupInformation(null);
|
||||
setGroupInformation(parser);
|
||||
});
|
||||
}, []);
|
||||
|
||||
CreateMessageHook(GroupInformationEvent, onGroupInformationEvent);
|
||||
@ -24,9 +27,9 @@ export const GroupInformationStandaloneView: FC<{}> = props =>
|
||||
if(!groupInformation) return null;
|
||||
|
||||
return (
|
||||
<NitroCardView className="nitro-group-information-standalone" simple={ true }>
|
||||
<NitroCardView className="nitro-group-information-standalone" simple>
|
||||
<NitroCardHeaderView headerText={ LocalizeText('group.window.title') } onCloseClick={ () => setGroupInformation(null) } />
|
||||
<NitroCardContentView className="pb-2">
|
||||
<NitroCardContentView>
|
||||
<GroupInformationView groupInformation={ groupInformation } onClose={ () => setGroupInformation(null) } />
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
.group-information {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.group-badge {
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
|
||||
.badge-image {
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.group-description {
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
@ -4,7 +4,9 @@ import { CreateLinkEvent, GetSessionDataManager, LocalizeText, TryVisitRoom } fr
|
||||
import { GetGroupManager } from '../../../../api/groups/GetGroupManager';
|
||||
import { GetGroupMembers } from '../../../../api/groups/GetGroupMembers';
|
||||
import { TryJoinGroup } from '../../../../api/groups/TryJoinGroup';
|
||||
import { Button, Column, Flex, Grid, Text } from '../../../../common';
|
||||
import { SendMessageHook } from '../../../../hooks';
|
||||
import { NotificationUtilities } from '../../../../views/notification-center/common/NotificationUtilities';
|
||||
import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
|
||||
import { CatalogPageName } from '../../../catalog/common/CatalogPageName';
|
||||
import { GroupMembershipType } from '../../common/GroupMembershipType';
|
||||
@ -21,30 +23,21 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
|
||||
{
|
||||
const { groupInformation = null, onClose = null } = props;
|
||||
|
||||
const joinGroup = useCallback(() =>
|
||||
const isRealOwner = () => (groupInformation && (groupInformation.ownerName === GetSessionDataManager().userName));
|
||||
|
||||
const joinGroup = () => (groupInformation && TryJoinGroup(groupInformation.id));
|
||||
|
||||
const leaveGroup = () =>
|
||||
{
|
||||
if(!groupInformation) return;
|
||||
NotificationUtilities.confirm(LocalizeText('group.leaveconfirm.desc'), () =>
|
||||
{
|
||||
SendMessageHook(new GroupRemoveMemberComposer(groupInformation.id, GetSessionDataManager().userId));
|
||||
|
||||
TryJoinGroup(groupInformation.id);
|
||||
}, [ groupInformation ]);
|
||||
if(onClose) onClose();
|
||||
}, null);
|
||||
}
|
||||
|
||||
const leaveGroup = useCallback(() =>
|
||||
{
|
||||
if(window.confirm(LocalizeText('group.leaveconfirm.desc')))
|
||||
{
|
||||
SendMessageHook(new GroupRemoveMemberComposer(groupInformation.id, GetSessionDataManager().userId));
|
||||
if(onClose) onClose();
|
||||
}
|
||||
}, [ groupInformation, onClose ]);
|
||||
|
||||
const isRealOwner = useCallback(() =>
|
||||
{
|
||||
if(!groupInformation) return false;
|
||||
|
||||
return (groupInformation.ownerName === GetSessionDataManager().userName);
|
||||
}, [ groupInformation ]);
|
||||
|
||||
const getRoleIcon = useCallback(() =>
|
||||
const getRoleIcon = () =>
|
||||
{
|
||||
if(groupInformation.membershipType === GroupMembershipType.NOT_MEMBER || groupInformation.membershipType === GroupMembershipType.REQUEST_PENDING) return null;
|
||||
|
||||
@ -53,9 +46,9 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
|
||||
if(groupInformation.isAdmin) return <i className="icon icon-group-admin" title={ LocalizeText('group.youareadmin') } />;
|
||||
|
||||
return <i className="icon icon-group-member" title={ LocalizeText('group.youaremember') } />;
|
||||
}, [ groupInformation, isRealOwner ]);
|
||||
}
|
||||
|
||||
const getButtonText = useCallback(() =>
|
||||
const getButtonText = () =>
|
||||
{
|
||||
if(groupInformation.type === GroupType.PRIVATE) return '';
|
||||
|
||||
@ -71,16 +64,21 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
|
||||
|
||||
if(groupInformation.membershipType === GroupMembershipType.REQUEST_PENDING) return 'group.membershippending';
|
||||
}
|
||||
}, [ groupInformation, isRealOwner ]);
|
||||
}
|
||||
|
||||
const handleButtonClick = useCallback(() =>
|
||||
const handleButtonClick = () =>
|
||||
{
|
||||
if(groupInformation.type === GroupType.PRIVATE && groupInformation.membershipType === GroupMembershipType.NOT_MEMBER) return;
|
||||
if((groupInformation.type === GroupType.PRIVATE) && (groupInformation.membershipType === GroupMembershipType.NOT_MEMBER)) return;
|
||||
|
||||
if(groupInformation.membershipType === GroupMembershipType.MEMBER) return leaveGroup();
|
||||
if(groupInformation.membershipType === GroupMembershipType.MEMBER)
|
||||
{
|
||||
leaveGroup();
|
||||
|
||||
return joinGroup();
|
||||
}, [ groupInformation, leaveGroup, joinGroup ]);
|
||||
return;
|
||||
}
|
||||
|
||||
joinGroup();
|
||||
}
|
||||
|
||||
const handleAction = useCallback((action: string) =>
|
||||
{
|
||||
@ -102,56 +100,54 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
|
||||
CreateLinkEvent('catalog/open/' + CatalogPageName.GUILD_CUSTOM_FURNI);
|
||||
break;
|
||||
}
|
||||
}, [ groupInformation, onClose ]);
|
||||
}, [ groupInformation ]);
|
||||
|
||||
if(!groupInformation) return null;
|
||||
|
||||
return (
|
||||
<div className="group-information text-black p-2">
|
||||
<div>
|
||||
<div className="text-center d-flex flex-column h-100 small text-black text-decoration-underline">
|
||||
<div className="group-badge d-flex align-items-center">
|
||||
<>
|
||||
<Grid overflow="hidden">
|
||||
<Column center size={ 3 } overflow="hidden">
|
||||
<Flex alignItems="center" className="group-badge">
|
||||
<BadgeImageView badgeCode={ groupInformation.badge } isGroup={ true } className="mx-auto d-block"/>
|
||||
</div>
|
||||
<div className="mt-3 cursor-pointer" onClick={ () => handleAction('members') }>
|
||||
{ LocalizeText('group.membercount', ['totalMembers'], [groupInformation.membersCount.toString()]) }
|
||||
</div>
|
||||
{ groupInformation.pendingRequestsCount > 0 && <div className="cursor-pointer" onClick={ () => handleAction('members_pending') }>
|
||||
{ LocalizeText('group.pendingmembercount', ['amount'], [groupInformation.pendingRequestsCount.toString()]) }
|
||||
</div> }
|
||||
{ groupInformation.isOwner && <div className="cursor-pointer" onClick={ () => handleAction('manage') }>
|
||||
{ LocalizeText('group.manage') }
|
||||
</div> }
|
||||
<div className="mt-auto mb-1">
|
||||
{ getRoleIcon() }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ms-2 w-100">
|
||||
<div className="fw-bold d-flex align-items-center">
|
||||
<i className={ 'icon icon-group-type-' + groupInformation.type } />
|
||||
{ groupInformation.canMembersDecorate && <i className="icon icon-group-decorate ms-1" /> }
|
||||
<div className="ms-1">{ groupInformation.title }</div>
|
||||
</div>
|
||||
<div>{ LocalizeText('group.created', ['date', 'owner'], [groupInformation.createdAt, groupInformation.ownerName]) }</div>
|
||||
<div className="group-description small overflow-auto">{ groupInformation.description }</div>
|
||||
<div className="small text-black text-decoration-underline">
|
||||
<div className="cursor-pointer" onClick={ () => handleAction('homeroom') }>
|
||||
{ LocalizeText('group.linktobase') }
|
||||
</div>
|
||||
<div className="cursor-pointer" onClick={ () => handleAction('furniture') }>
|
||||
{ LocalizeText('group.buyfurni') }
|
||||
</div>
|
||||
<div className="cursor-pointer">
|
||||
{ LocalizeText('group.showgroups') }
|
||||
</div>
|
||||
</div>
|
||||
{ groupInformation.type !== GroupType.PRIVATE &&
|
||||
<button className="btn btn-primary w-100 mt-2" disabled={ groupInformation.membershipType === GroupMembershipType.REQUEST_PENDING || isRealOwner() } onClick={ handleButtonClick }>
|
||||
{ LocalizeText(getButtonText()) }
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</Flex>
|
||||
<Column alignItems="center" gap={ 1 }>
|
||||
<Text small underline pointer onClick={ () => handleAction('members') }>{ LocalizeText('group.membercount', [ 'totalMembers' ], [ groupInformation.membersCount.toString() ]) }</Text>
|
||||
{ (groupInformation.pendingRequestsCount > 0) &&
|
||||
<Text small underline pointer onClick={ () => handleAction('members_pending') }>{ LocalizeText('group.pendingmembercount', [ 'amount' ], [ groupInformation.pendingRequestsCount.toString() ]) }</Text> }
|
||||
{ groupInformation.isOwner &&
|
||||
<Text small underline pointer onClick={ () => handleAction('manage') }>{ LocalizeText('group.manage') }</Text> }
|
||||
</Column>
|
||||
{ getRoleIcon() }
|
||||
</Column>
|
||||
<Column size={ 9 } justifyContent="between" overflow="auto">
|
||||
<Column overflow="hidden">
|
||||
<Column gap={ 1 }>
|
||||
<Flex alignItems="center" gap={ 2 }>
|
||||
<Text bold>{ groupInformation.title }</Text>
|
||||
<Flex gap={ 1 }>
|
||||
<i className={ 'icon icon-group-type-' + groupInformation.type } />
|
||||
{ groupInformation.canMembersDecorate &&
|
||||
<i className="icon icon-group-decorate" /> }
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Text small>{ LocalizeText('group.created', ['date', 'owner'], [groupInformation.createdAt, groupInformation.ownerName]) }</Text>
|
||||
</Column>
|
||||
<Text small overflow="auto" className="group-description">{ groupInformation.description }</Text>
|
||||
</Column>
|
||||
<Column>
|
||||
<Column gap={ 1 }>
|
||||
<Text small underline pointer onClick={ () => handleAction('homeroom') }>{ LocalizeText('group.linktobase') }</Text>
|
||||
<Text small underline pointer onClick={ () => handleAction('furniture') }>{ LocalizeText('group.buyfurni') }</Text>
|
||||
<Text small underline pointer>{ LocalizeText('group.showgroups') }</Text>
|
||||
</Column>
|
||||
{ (groupInformation.type !== GroupType.PRIVATE) &&
|
||||
<Button disabled={ (groupInformation.membershipType === GroupMembershipType.REQUEST_PENDING) || isRealOwner() } onClick={ handleButtonClick }>
|
||||
{ LocalizeText(getButtonText()) }
|
||||
</Button> }
|
||||
</Column>
|
||||
</Column>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,9 +1,3 @@
|
||||
.nitro-group-manager {
|
||||
width: 385px;
|
||||
|
||||
.manager-tab {
|
||||
height: 260px;
|
||||
min-height: 260px;
|
||||
max-height: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
import { GroupDeleteComposer, GroupSaveBadgeComposer, GroupSaveColorsComposer, GroupSaveInformationComposer, GroupSavePreferencesComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback, useState } from 'react';
|
||||
import { LocalizeText } from '../../../../api';
|
||||
import { Base, Button, Column, Flex, Text } from '../../../../common';
|
||||
import { SendMessageHook } from '../../../../hooks';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
|
||||
import { useGroupsContext } from '../../GroupsContext';
|
||||
import { GroupsActions } from '../../reducers/GroupsReducer';
|
||||
import { GroupSharedTabBadgeView } from '../shared-tabs/GroupSharedTabBadgeView';
|
||||
import { GroupSharedTabColorsView } from '../shared-tabs/GroupSharedTabColorsView';
|
||||
import { GroupSharedTabIdentityView } from '../shared-tabs/GroupSharedTabIdentityView';
|
||||
import { GroupManagerTabSettingsView } from './tab-settings/GroupManagerTabSettingsView';
|
||||
import { GroupTabBadgeView } from '../tabs/GroupTabBadgeView';
|
||||
import { GroupTabColorsView } from '../tabs/GroupTabColorsView';
|
||||
import { GroupTabIdentityView } from '../tabs/GroupTabIdentityView';
|
||||
import { GroupTabSettingsView } from '../tabs/GroupTabSettingsView';
|
||||
|
||||
const TABS: number[] = [1, 2, 3, 5];
|
||||
|
||||
@ -64,36 +65,36 @@ export const GroupManagerView: FC<{}> = props =>
|
||||
return (
|
||||
<NitroCardView className="nitro-group-manager" simple={ false }>
|
||||
<NitroCardHeaderView headerText={ LocalizeText('group.window.title') } onCloseClick={ onClose } />
|
||||
<NitroCardContentView className="p-0">
|
||||
<NitroCardTabsView>
|
||||
{ TABS.map(tab =>
|
||||
{
|
||||
return (<NitroCardTabsItemView key={ tab } isActive={ currentTab === tab } onClick={ () => setCurrentTab(tab) }>
|
||||
{ LocalizeText(`group.edit.tab.${tab}`) }
|
||||
</NitroCardTabsItemView>);
|
||||
}) }
|
||||
</NitroCardTabsView>
|
||||
<div className="p-2">
|
||||
<div className="d-flex align-items-center mb-2">
|
||||
<div className={ 'flex-shrink-0 tab-image tab-' + currentTab }>
|
||||
<div></div>
|
||||
</div>
|
||||
<div className="w-100 text-black ms-2">
|
||||
<div className="fw-bold h4 m-0">{ LocalizeText('group.edit.tabcaption.' + currentTab) }</div>
|
||||
<div>{ LocalizeText('group.edit.tabdesc.' + currentTab) }</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-black manager-tab">
|
||||
{ currentTab === 1 && <GroupSharedTabIdentityView /> }
|
||||
{ currentTab === 2 && <GroupSharedTabBadgeView skipDefault={ true } /> }
|
||||
{ currentTab === 3 && <GroupSharedTabColorsView /> }
|
||||
{ currentTab === 5 && <GroupManagerTabSettingsView /> }
|
||||
</div>
|
||||
<div className="d-flex justify-content-between mt-2">
|
||||
<button className="btn btn-danger" onClick={ deleteGroup }>{ LocalizeText('group.delete') }</button>
|
||||
<button className="btn btn-success" onClick={ saveGroup }>{ LocalizeText('save') }</button>
|
||||
</div>
|
||||
</div>
|
||||
<NitroCardTabsView>
|
||||
{ TABS.map(tab =>
|
||||
{
|
||||
return (<NitroCardTabsItemView key={ tab } isActive={ currentTab === tab } onClick={ () => setCurrentTab(tab) }>
|
||||
{ LocalizeText(`group.edit.tab.${tab}`) }
|
||||
</NitroCardTabsItemView>);
|
||||
}) }
|
||||
</NitroCardTabsView>
|
||||
<NitroCardContentView>
|
||||
<Flex alignItems="center" gap={ 2 }>
|
||||
<Base className={ `nitro-group-tab-image tab-${ currentTab }`} />
|
||||
<Column grow gap={ 0 }>
|
||||
<Text bold fontSize={ 4 }>{ LocalizeText(`group.edit.tabcaption.${ currentTab }`) }</Text>
|
||||
<Text>{ LocalizeText(`group.edit.tabdesc.${ currentTab }`) }</Text>
|
||||
</Column>
|
||||
</Flex>
|
||||
<Column grow overflow="hidden">
|
||||
{ currentTab === 1 &&
|
||||
<GroupTabIdentityView /> }
|
||||
{ currentTab === 2 &&
|
||||
<GroupTabBadgeView skipDefault={ true } /> }
|
||||
{ currentTab === 3 &&
|
||||
<GroupTabColorsView /> }
|
||||
{ currentTab === 5 &&
|
||||
<GroupTabSettingsView /> }
|
||||
</Column>
|
||||
<Flex justifyContent="between">
|
||||
<Button variant="danger" onClick={ deleteGroup }>{ LocalizeText('group.delete') }</Button>
|
||||
<Button variant="success" onClick={ saveGroup }>{ LocalizeText('save') }</Button>
|
||||
</Flex>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
|
||||
@ -1,55 +0,0 @@
|
||||
import { FC, useCallback } from 'react';
|
||||
import { LocalizeText } from '../../../../../api/utils/LocalizeText';
|
||||
import { useGroupsContext } from '../../../GroupsContext';
|
||||
import { GroupsActions } from '../../../reducers/GroupsReducer';
|
||||
|
||||
const STATES: string[] = ['regular', 'exclusive', 'private'];
|
||||
|
||||
export const GroupManagerTabSettingsView: FC<{}> = props =>
|
||||
{
|
||||
const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();
|
||||
const { groupState = null, groupCanMembersDecorate = false } = groupsState;
|
||||
|
||||
const setState = useCallback((state: number) =>
|
||||
{
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_STATE,
|
||||
payload: {
|
||||
numberValues: [ state ]
|
||||
}
|
||||
})
|
||||
}, [ dispatchGroupsState ]);
|
||||
|
||||
const toggleCanMembersDecorate = useCallback(() =>
|
||||
{
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_CAN_MEMBERS_DECORATE,
|
||||
payload: {
|
||||
boolValues: [ !groupCanMembersDecorate ]
|
||||
}
|
||||
})
|
||||
}, [ dispatchGroupsState, groupCanMembersDecorate ]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{ STATES.map((state, index) =>
|
||||
{
|
||||
return <div key={ index } className="form-check mb-1">
|
||||
<input className="form-check-input" type="radio" name="groupState" id={ `groupState${ index }` } checked={ (groupState === index) } onChange={ () => setState(index) } />
|
||||
<label className="form-check-label d-flex align-items-center gap-1 fw-bold" htmlFor={'groupState' + index}>
|
||||
<i className={ `icon icon-group-type-${index}` } /> { LocalizeText(`group.edit.settings.type.${state}.label`) }
|
||||
</label>
|
||||
<div>{ LocalizeText(`group.edit.settings.type.${state}.help`) }</div>
|
||||
</div>
|
||||
}) }
|
||||
<hr className="bg-dark" />
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" type="checkbox" id="groupCanMembersDecorate" checked={ groupCanMembersDecorate } onChange={() => toggleCanMembersDecorate() } />
|
||||
<label className="form-check-label fw-bold" htmlFor="groupCanMembersDecorate">
|
||||
{ LocalizeText('group.edit.settings.rights.caption') }
|
||||
</label>
|
||||
<div>{ LocalizeText('group.edit.settings.rights.members.help') }</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,27 +0,0 @@
|
||||
.nitro-group-members {
|
||||
width: 400px;
|
||||
|
||||
.group-badge {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.members-list {
|
||||
.list-member {
|
||||
border: 1px solid #ced4da;
|
||||
|
||||
.avatar-head {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 40px;
|
||||
height: 50px;
|
||||
|
||||
.avatar-image {
|
||||
position: absolute;
|
||||
left: -25px;
|
||||
top: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,9 +1,12 @@
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { GroupAdminGiveComposer, GroupAdminTakeComposer, GroupConfirmMemberRemoveEvent, GroupConfirmRemoveMemberComposer, GroupMemberParser, GroupMembersComposer, GroupMembersEvent, GroupMembershipAcceptComposer, GroupMembershipDeclineComposer, GroupMembersParser, GroupRank, GroupRemoveMemberComposer } from '@nitrots/nitro-renderer';
|
||||
import classNames from 'classnames';
|
||||
import { FC, KeyboardEvent, useCallback, useEffect, useState } from 'react';
|
||||
import { GetSessionDataManager, GetUserProfile, LocalizeText } from '../../../../api';
|
||||
import { CreateMessageHook, SendMessageHook } from '../../../../hooks';
|
||||
import { Base, Button, Column, Flex, Grid, Text } from '../../../../common';
|
||||
import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../../../hooks';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
|
||||
import { NotificationUtilities } from '../../../../views/notification-center/common/NotificationUtilities';
|
||||
import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
|
||||
import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
|
||||
|
||||
@ -14,11 +17,9 @@ interface GroupMembersViewProps
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
|
||||
export const GroupMembersView: FC<GroupMembersViewProps> = props =>
|
||||
{
|
||||
const { groupId = null, levelId = null, onClose = null } = props;
|
||||
|
||||
const [ pageData, setPageData ] = useState<GroupMembersParser>(null);
|
||||
const [ searchQuery, setSearchQuery ] = useState<string>('');
|
||||
const [ searchLevelId, setSearchLevelId ] = useState<number>(3);
|
||||
@ -29,72 +30,52 @@ export const GroupMembersView: FC<GroupMembersViewProps> = props =>
|
||||
{
|
||||
if(!groupId) return;
|
||||
|
||||
SendMessageHook(new GroupMembersComposer(groupId, pageId, searchQuery, newLevelId !== undefined ? newLevelId : searchLevelId));
|
||||
}, [ groupId, searchQuery, searchLevelId ]);
|
||||
SendMessageHook(new GroupMembersComposer(groupId, pageId, searchQuery, ((newLevelId !== undefined) ? newLevelId : searchLevelId)));
|
||||
}, [ groupId, searchLevelId, searchQuery ]);
|
||||
|
||||
const onGroupMembersEvent = useCallback((event: GroupMembersEvent) =>
|
||||
{
|
||||
const parser = event.getParser();
|
||||
|
||||
setPageData(null);
|
||||
setPageData(parser);
|
||||
setSearchLevelId(parser.level);
|
||||
setTotalPages(Math.ceil(parser.totalMembersCount / parser.pageSize));
|
||||
|
||||
BatchUpdates(() =>
|
||||
{
|
||||
setPageData(null);
|
||||
setPageData(parser);
|
||||
setSearchLevelId(parser.level);
|
||||
setTotalPages(Math.ceil(parser.totalMembersCount / parser.pageSize));
|
||||
});
|
||||
}, []);
|
||||
|
||||
CreateMessageHook(GroupMembersEvent, onGroupMembersEvent);
|
||||
|
||||
const onGroupConfirmMemberRemoveEvent = useCallback((event: GroupConfirmMemberRemoveEvent) =>
|
||||
{
|
||||
const parser = event.getParser();
|
||||
|
||||
if(window.confirm(LocalizeText(parser.furnitureCount > 0 ? 'group.kickconfirm.desc' : 'group.kickconfirm_nofurni.desc', ['user', 'amount'], [removingMemberName, parser.furnitureCount.toString()])))
|
||||
{
|
||||
SendMessageHook(new GroupRemoveMemberComposer(pageData.groupId, parser.userId));
|
||||
searchMembers(pageData.pageIndex);
|
||||
}
|
||||
|
||||
NotificationUtilities.confirm(LocalizeText(((parser.furnitureCount > 0) ? 'group.kickconfirm.desc' : 'group.kickconfirm_nofurni.desc'), [ 'user', 'amount' ], [ removingMemberName, parser.furnitureCount.toString() ]), () =>
|
||||
{
|
||||
SendMessageHook(new GroupRemoveMemberComposer(pageData.groupId, parser.userId));
|
||||
searchMembers(pageData.pageIndex);
|
||||
}, null);
|
||||
|
||||
setRemovingMemberName(null);
|
||||
}, [ pageData, removingMemberName, searchMembers ]);
|
||||
|
||||
CreateMessageHook(GroupMembersEvent, onGroupMembersEvent);
|
||||
CreateMessageHook(GroupConfirmMemberRemoveEvent, onGroupConfirmMemberRemoveEvent);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
setPageData(null);
|
||||
setSearchQuery('');
|
||||
setSearchLevelId(0);
|
||||
|
||||
if(!groupId) return;
|
||||
|
||||
if(levelId !== null) setSearchLevelId(levelId);
|
||||
|
||||
searchMembers(0, levelId);
|
||||
}, [ groupId, levelId ]);
|
||||
|
||||
const selectSearchLevelId = useCallback((level: number) =>
|
||||
const selectSearchLevelId = (level: number) =>
|
||||
{
|
||||
setSearchLevelId(level);
|
||||
searchMembers(0, level);
|
||||
}, [ searchMembers ]);
|
||||
}
|
||||
|
||||
const previousPage = useCallback(() =>
|
||||
{
|
||||
searchMembers(pageData.pageIndex - 1);
|
||||
}, [ searchMembers, pageData ]);
|
||||
const previousPage = () => searchMembers((pageData.pageIndex - 1));
|
||||
|
||||
const nextPage = useCallback(() =>
|
||||
{
|
||||
searchMembers(pageData.pageIndex + 1);
|
||||
}, [ searchMembers, pageData ]);
|
||||
const nextPage = () => searchMembers((pageData.pageIndex + 1));
|
||||
|
||||
const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => ((event.key === 'Enter') && searchMembers(pageData.pageIndex));
|
||||
|
||||
const onKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) =>
|
||||
{
|
||||
if(event.key !== 'Enter') return;
|
||||
|
||||
searchMembers(pageData.pageIndex);
|
||||
}, [ searchMembers, pageData ]);
|
||||
|
||||
const getRankDescription = useCallback((member: GroupMemberParser) =>
|
||||
const getRankDescription = (member: GroupMemberParser) =>
|
||||
{
|
||||
if(member.rank === GroupRank.OWNER) return 'group.members.owner';
|
||||
|
||||
@ -106,107 +87,118 @@ export const GroupMembersView: FC<GroupMembersViewProps> = props =>
|
||||
}
|
||||
|
||||
return '';
|
||||
}, [ pageData ]);
|
||||
}
|
||||
|
||||
const toggleAdmin = useCallback((member: GroupMemberParser) =>
|
||||
const toggleAdmin = (member: GroupMemberParser) =>
|
||||
{
|
||||
if(member.rank === GroupRank.OWNER) return;
|
||||
|
||||
if(member.rank !== GroupRank.ADMIN)
|
||||
{
|
||||
SendMessageHook(new GroupAdminGiveComposer(pageData.groupId, member.id));
|
||||
}
|
||||
else
|
||||
{
|
||||
SendMessageHook(new GroupAdminTakeComposer(pageData.groupId, member.id));
|
||||
}
|
||||
if(member.rank !== GroupRank.ADMIN) SendMessageHook(new GroupAdminGiveComposer(pageData.groupId, member.id));
|
||||
else SendMessageHook(new GroupAdminTakeComposer(pageData.groupId, member.id));
|
||||
|
||||
searchMembers(pageData.pageIndex);
|
||||
}, [ pageData, searchMembers ]);
|
||||
}
|
||||
|
||||
const acceptMembership = useCallback((member) =>
|
||||
const acceptMembership = (member: GroupMemberParser) =>
|
||||
{
|
||||
if(member.rank === GroupRank.REQUESTED)
|
||||
{
|
||||
SendMessageHook(new GroupMembershipAcceptComposer(pageData.groupId, member.id));
|
||||
searchMembers(pageData.pageIndex);
|
||||
}
|
||||
}, [ pageData, searchMembers ]);
|
||||
if(member.rank !== GroupRank.REQUESTED) return;
|
||||
|
||||
SendMessageHook(new GroupMembershipAcceptComposer(pageData.groupId, member.id));
|
||||
searchMembers(pageData.pageIndex);
|
||||
}
|
||||
|
||||
const removeMemberOrDeclineMembership = useCallback((member) =>
|
||||
const removeMemberOrDeclineMembership = (member: GroupMemberParser) =>
|
||||
{
|
||||
if(member.rank === GroupRank.REQUESTED)
|
||||
{
|
||||
SendMessageHook(new GroupMembershipDeclineComposer(pageData.groupId, member.id));
|
||||
searchMembers(pageData.pageIndex);
|
||||
}
|
||||
else
|
||||
{
|
||||
setRemovingMemberName(member.name);
|
||||
SendMessageHook(new GroupConfirmRemoveMemberComposer(pageData.groupId, member.id));
|
||||
}
|
||||
}, [ pageData, searchMembers ]);
|
||||
|
||||
if(!groupId) return null;
|
||||
return;
|
||||
}
|
||||
|
||||
setRemovingMemberName(member.name);
|
||||
SendMessageHook(new GroupConfirmRemoveMemberComposer(pageData.groupId, member.id));
|
||||
}
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
BatchUpdates(() =>
|
||||
{
|
||||
setPageData(null);
|
||||
setSearchQuery('');
|
||||
setSearchLevelId(0);
|
||||
});
|
||||
|
||||
if(!groupId) return;
|
||||
|
||||
if(levelId !== null) setSearchLevelId(levelId);
|
||||
|
||||
searchMembers(0, levelId);
|
||||
}, [ groupId, levelId, searchMembers ]);
|
||||
|
||||
if(!groupId || !pageData) return null;
|
||||
|
||||
return (
|
||||
<NitroCardView className="nitro-group-members" simple={ true }>
|
||||
<NitroCardView className="nitro-group-members" simple>
|
||||
<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="row row-cols-2 align-content-start g-0 w-100 members-list overflow-auto">
|
||||
{ pageData.result.map((member, index) =>
|
||||
<NitroCardContentView overflow="hidden">
|
||||
<Flex gap={ 2 }>
|
||||
<Flex center className="group-badge">
|
||||
<BadgeImageView badgeCode={ pageData.badge } isGroup={ true } className="mx-auto d-block"/>
|
||||
</Flex>
|
||||
<Column fullWidth gap={ 1 }>
|
||||
<input type="text" className="form-control form-control-sm w-100" 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>
|
||||
</Column>
|
||||
</Flex>
|
||||
<Grid columnCount={ 2 } overflow="auto" className="nitro-group-members-list-grid">
|
||||
{ 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>
|
||||
<Flex key={ index } gap={ 2 } alignItems="center" overflow="hidden" className="member-list-item bg-white rounded p-2">
|
||||
<div className="avatar-head cursor-pointer" onClick={ () => GetUserProfile(member.id) }>
|
||||
<AvatarImageView figure={ member.figure } headOnly={ true } direction={ 2 } />
|
||||
</div>
|
||||
</div>
|
||||
<Column grow gap={ 1 }>
|
||||
<Text bold small pointer onClick={ () => GetUserProfile(member.id) }>{ member.name }</Text>
|
||||
{ (member.rank !== GroupRank.REQUESTED) &&
|
||||
<Text small italics variant="muted">{ LocalizeText('group.members.since', ['date'], [member.joinedAt]) }</Text> }
|
||||
</Column>
|
||||
<Column gap={ 1 }>
|
||||
{ (member.rank !== GroupRank.REQUESTED) &&
|
||||
<Flex 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) } />
|
||||
</Flex> }
|
||||
{ (member.rank === GroupRank.REQUESTED) &&
|
||||
<Flex alignItems="center">
|
||||
<Base pointer className="nitro-friends-spritesheet icon-accept" title={ LocalizeText('group.members.accept') } onClick={ () => acceptMembership(member) }></Base>
|
||||
</Flex> }
|
||||
{ (member.rank !== GroupRank.OWNER) && pageData.admin && (member.id !== GetSessionDataManager().userId) &&
|
||||
<Flex alignItems="center">
|
||||
<Base pointer className="nitro-friends-spritesheet icon-deny" title={ LocalizeText(member.rank === GroupRank.REQUESTED ? 'group.members.reject' : 'group.members.kick') } onClick={ () => removeMemberOrDeclineMembership(member) }></Base>
|
||||
</Flex> }
|
||||
</Column>
|
||||
</Flex>
|
||||
);
|
||||
}) }
|
||||
</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>
|
||||
</div>
|
||||
</NitroCardContentView>
|
||||
</> }
|
||||
</Grid>
|
||||
<Flex gap={ 1 } justifyContent="between" alignItems="center">
|
||||
<Button disabled={ (pageData.pageIndex === 0) } onClick={ previousPage }>
|
||||
<FontAwesomeIcon icon="chevron-left" />
|
||||
</Button>
|
||||
<Text small>
|
||||
{ LocalizeText('group.members.pageinfo', ['amount', 'page', 'totalPages'], [pageData.totalMembersCount.toString(), (pageData.pageIndex + 1).toString(), totalPages.toString()]) }
|
||||
</Text>
|
||||
<Button disabled={ (pageData.pageIndex === (totalPages - 1)) } onClick={ nextPage }>
|
||||
<FontAwesomeIcon icon="chevron-right" />
|
||||
</Button>
|
||||
</Flex>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,141 +0,0 @@
|
||||
import classNames from 'classnames';
|
||||
import { FC, useCallback, useEffect, useState } from 'react';
|
||||
import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
|
||||
import { GroupBadgePart } from '../../common/GroupBadgePart';
|
||||
import { useGroupsContext } from '../../GroupsContext';
|
||||
import { GroupsActions } from '../../reducers/GroupsReducer';
|
||||
|
||||
const POSITIONS: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8];
|
||||
|
||||
interface GroupSharedTabBadgeViewProps
|
||||
{
|
||||
skipDefault?: boolean;
|
||||
}
|
||||
|
||||
export const GroupSharedTabBadgeView: FC<GroupSharedTabBadgeViewProps> = props =>
|
||||
{
|
||||
const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();
|
||||
const { badgeBases = null, badgeSymbols = null, badgePartColors = null, groupBadgeParts = null } = groupsState;
|
||||
|
||||
const { skipDefault = null } = props;
|
||||
|
||||
const [ editingIndex, setEditingIndex ] = useState<number>(0);
|
||||
const [ isSelectingModel, setIsSelectingModel ] = useState<boolean>(false);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(skipDefault || !badgeBases || !badgePartColors || groupBadgeParts) return;
|
||||
|
||||
const badgeParts: GroupBadgePart[] = [
|
||||
new GroupBadgePart(GroupBadgePart.BASE, badgeBases[0].id, badgePartColors[0].id),
|
||||
new GroupBadgePart(GroupBadgePart.SYMBOL, 0, badgePartColors[0].id),
|
||||
new GroupBadgePart(GroupBadgePart.SYMBOL, 0, badgePartColors[0].id),
|
||||
new GroupBadgePart(GroupBadgePart.SYMBOL, 0, badgePartColors[0].id),
|
||||
new GroupBadgePart(GroupBadgePart.SYMBOL, 0, badgePartColors[0].id)
|
||||
];
|
||||
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_BADGE_PARTS,
|
||||
payload: { badgeParts }
|
||||
});
|
||||
|
||||
}, [ badgeBases, badgePartColors, groupBadgeParts ]);
|
||||
|
||||
const switchIndex = useCallback((index: number) =>
|
||||
{
|
||||
setIsSelectingModel(false);
|
||||
setEditingIndex(index);
|
||||
}, []);
|
||||
|
||||
const selectPartProperty = useCallback((property: string, key: number) =>
|
||||
{
|
||||
const clonedBadgeParts = Array.from(groupBadgeParts);
|
||||
|
||||
clonedBadgeParts[editingIndex][property] = key;
|
||||
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_BADGE_PARTS,
|
||||
payload: {
|
||||
badgeParts: clonedBadgeParts
|
||||
}
|
||||
});
|
||||
|
||||
if(property === 'key') setIsSelectingModel(false);
|
||||
}, [ editingIndex, groupBadgeParts, dispatchGroupsState ]);
|
||||
|
||||
const getCompleteBadgeCode = useCallback(() =>
|
||||
{
|
||||
let code = '';
|
||||
|
||||
if(!groupBadgeParts) return code;
|
||||
|
||||
groupBadgeParts.forEach((badgePart) =>
|
||||
{
|
||||
if(badgePart.code) code = code + badgePart.code;
|
||||
});
|
||||
|
||||
return code;
|
||||
}, [ groupBadgeParts ]);
|
||||
|
||||
const getCurrentPart = useCallback((property: string) =>
|
||||
{
|
||||
return groupBadgeParts[editingIndex][property];
|
||||
}, [ groupBadgeParts, editingIndex ]);
|
||||
|
||||
return (
|
||||
<div className="shared-tab-badge">
|
||||
<div className="d-flex gap-2">
|
||||
<div className="badge-preview flex-shrink-0 me-3">
|
||||
<BadgeImageView badgeCode={ getCompleteBadgeCode() } isGroup={ true } />
|
||||
</div>
|
||||
<div>
|
||||
<div className="d-flex gap-2 align-items-center">
|
||||
{ groupBadgeParts && groupBadgeParts.map((badgePart, partIndex) =>
|
||||
{
|
||||
return (
|
||||
<div key={ partIndex } className={ 'badge-preview flex-shrink-0 d-flex align-items-center justify-content-center cursor-pointer' + classNames({ ' active': editingIndex === partIndex }) } onClick={ () => switchIndex(partIndex) }>
|
||||
{ badgePart.code && <BadgeImageView badgeCode={ badgePart.code } isGroup={ true } /> }
|
||||
{ !badgePart.code && <i className="fas fa-plus text-primary h4 m-0" /> }
|
||||
</div>
|
||||
)
|
||||
}) }
|
||||
</div>
|
||||
{ !isSelectingModel && groupBadgeParts && <div className="d-flex gap-2 mt-3">
|
||||
<div className="badge-preview d-flex align-items-center justify-content-center flex-shrink-0 cursor-pointer" onClick={ () => setIsSelectingModel(true) }>
|
||||
{ getCurrentPart('code') && <BadgeImageView badgeCode={ getCurrentPart('code') } isGroup={ true } /> }
|
||||
{ !getCurrentPart('code') && <i className="fas fa-plus text-primary h4 m-0" /> }
|
||||
</div>
|
||||
<div>
|
||||
<div className="row row-cols-3 g-0 gap-1 w-100 h-100 overflow-auto">
|
||||
{ POSITIONS.map((position) =>
|
||||
{
|
||||
return <div key={ position } className={ 'position-swatch cursor-pointer' + classNames({ ' active': getCurrentPart('position') === position }) } onClick={ () => selectPartProperty('position', position) }></div>
|
||||
}) }
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="row row-cols-8 g-0 gap-1 w-100 h-100 overflow-auto">
|
||||
{ badgePartColors && badgePartColors.map((item, index) =>
|
||||
{
|
||||
return <div key={ index } className={ 'color-swatch cursor-pointer' + classNames({ ' active': item.id === getCurrentPart('color') }) } style={{ backgroundColor: '#' + item.color }} onClick={ () => selectPartProperty('color', item.id) }></div>
|
||||
}) }
|
||||
</div>
|
||||
</div>
|
||||
</div> }
|
||||
{ isSelectingModel && <div className="selection-list row row-cols-8 g-0 align-content-start gap-1 h-100 overflow-auto mt-3">
|
||||
{ groupBadgeParts[editingIndex].type !== GroupBadgePart.BASE && <>
|
||||
<div className="cursor-pointer badge-preview d-flex align-items-center justify-content-center" onClick={ () => selectPartProperty('key', 0) }>
|
||||
<i className="fas fa-times text-primary h4 m-0" />
|
||||
</div>
|
||||
</> }
|
||||
{ (groupBadgeParts[editingIndex].type === GroupBadgePart.BASE ? badgeBases : badgeSymbols).map((item, index) =>
|
||||
{
|
||||
return <div key={ index } className={ 'cursor-pointer badge-preview' + classNames({ ' bg-primary': groupBadgeParts[editingIndex].key === item.id }) } onClick={ () => selectPartProperty('key', item.id) }>
|
||||
<BadgeImageView badgeCode={ GroupBadgePart.getCode(groupBadgeParts[editingIndex].type, item.id, groupBadgeParts[editingIndex].color, 4) } isGroup={ true } />
|
||||
</div>
|
||||
}) }
|
||||
</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>);
|
||||
};
|
||||
@ -1,88 +0,0 @@
|
||||
import classNames from 'classnames';
|
||||
import { FC, useCallback, useEffect, useState } from 'react';
|
||||
import { LocalizeText } from '../../../../api';
|
||||
import { useGroupsContext } from '../../GroupsContext';
|
||||
import { GroupsActions } from '../../reducers/GroupsReducer';
|
||||
|
||||
export const GroupSharedTabColorsView: FC<{}> = props =>
|
||||
{
|
||||
const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();
|
||||
const { groupColors = null, groupColorsA = null, groupColorsB = null } = groupsState;
|
||||
|
||||
const [ selectingColorIndex, setSelectingColorIndex ] = useState<number>(0);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!groupColorsA || !groupColorsB || groupColors) return;
|
||||
|
||||
const colors: number[] = [
|
||||
groupColorsA[0].id,
|
||||
groupColorsB[0].id
|
||||
];
|
||||
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_COLORS,
|
||||
payload: {
|
||||
objectValues: colors
|
||||
}
|
||||
});
|
||||
|
||||
}, [dispatchGroupsState, groupColors, groupColorsA, groupColorsB]);
|
||||
|
||||
const getGroupColor = useCallback((colorIndex: number) =>
|
||||
{
|
||||
if(colorIndex === 0) return groupColorsA.find(c => c.id === groupColors[colorIndex]).color;
|
||||
|
||||
return groupColorsB.find(c => c.id === groupColors[colorIndex]).color;
|
||||
}, [ groupColors, groupColorsA, groupColorsB ]);
|
||||
|
||||
const selectColor = useCallback((colorId: number) =>
|
||||
{
|
||||
const clonedGroupColors = Array.from(groupColors);
|
||||
|
||||
clonedGroupColors[selectingColorIndex] = colorId;
|
||||
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_COLORS,
|
||||
payload: {
|
||||
objectValues: clonedGroupColors
|
||||
}
|
||||
});
|
||||
}, [ selectingColorIndex, groupColors, dispatchGroupsState ]);
|
||||
|
||||
return (
|
||||
<div className="shared-tab-colors d-flex flex-column gap-2">
|
||||
<div className="d-flex flex-column align-items-center">
|
||||
<div className="fw-bold">{ LocalizeText('group.edit.color.guild.color') }</div>
|
||||
{ groupColors && <div className="d-flex rounded border overflow-hidden">
|
||||
<div className="group-color-swatch" style={{ backgroundColor: '#' + getGroupColor(0) }}></div>
|
||||
<div className="group-color-swatch" style={{ backgroundColor: '#' + getGroupColor(1) }}></div>
|
||||
</div> }
|
||||
</div>
|
||||
{ selectingColorIndex === 0 && <div>
|
||||
<div className="fw-bold">{ LocalizeText('group.edit.color.primary.color') }</div>
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<div className="row row-cols-18 g-0 gap-1 w-100 h-100 overflow-auto">
|
||||
{ groupColors && groupColorsA && groupColorsA.map((item, index) =>
|
||||
{
|
||||
return <div key={ index } className={ 'color-swatch cursor-pointer' + classNames({ ' active': groupColors[selectingColorIndex] === item.id }) } style={{ backgroundColor: '#' + item.color }} onClick={ () => selectColor(item.id) }></div>
|
||||
}) }
|
||||
</div>
|
||||
<div><i className="fas fa-chevron-right h2 m-0 text-primary cursor-pointer" onClick={ () => setSelectingColorIndex(1) } /></div>
|
||||
</div>
|
||||
</div> }
|
||||
{ selectingColorIndex === 1 && <div>
|
||||
<div className="fw-bold text-end">{ LocalizeText('group.edit.color.secondary.color') }</div>
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<div><i className="fas fa-chevron-left h2 m-0 text-primary cursor-pointer" onClick={ () => setSelectingColorIndex(0) } /></div>
|
||||
<div className="row row-cols-18 g-0 gap-1 w-100 h-100 overflow-auto">
|
||||
{ groupColorsB && groupColorsB.map((item, index) =>
|
||||
{
|
||||
return <div key={ index } className={ 'color-swatch cursor-pointer' + classNames({ ' active': groupColors[selectingColorIndex] === item.id }) } style={{ backgroundColor: '#' + item.color }} onClick={ () => selectColor(item.id) }></div>
|
||||
}) }
|
||||
</div>
|
||||
</div>
|
||||
</div> }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,72 +0,0 @@
|
||||
import { FC, useCallback } from 'react';
|
||||
import { CreateLinkEvent, LocalizeText } from '../../../../api';
|
||||
import { useGroupsContext } from '../../GroupsContext';
|
||||
import { GroupsActions } from '../../reducers/GroupsReducer';
|
||||
|
||||
interface GroupSharedTabIdentityViewProps
|
||||
{
|
||||
isCreator?: boolean;
|
||||
}
|
||||
|
||||
export const GroupSharedTabIdentityView: FC<GroupSharedTabIdentityViewProps> = props =>
|
||||
{
|
||||
const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();
|
||||
const { groupName = '', groupDescription = '', groupHomeroomId = 0, availableRooms = null } = groupsState;
|
||||
|
||||
const { isCreator = false } = props;
|
||||
|
||||
const setName = useCallback((name: string) =>
|
||||
{
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_NAME,
|
||||
payload: {
|
||||
stringValues: [ name ]
|
||||
}
|
||||
})
|
||||
}, [ dispatchGroupsState ]);
|
||||
|
||||
const setDescription = useCallback((description: string) =>
|
||||
{
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_DESCRIPTION,
|
||||
payload: {
|
||||
stringValues: [ description ]
|
||||
}
|
||||
})
|
||||
}, [ dispatchGroupsState ]);
|
||||
|
||||
const setHomeroomId = useCallback((id: number) =>
|
||||
{
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_HOMEROOM_ID,
|
||||
payload: {
|
||||
numberValues: [ id ]
|
||||
}
|
||||
})
|
||||
}, [ dispatchGroupsState ]);
|
||||
|
||||
return (<div className="d-flex flex-column justify-content-center h-100">
|
||||
<div className="form-group mb-2">
|
||||
<label className="fw-bold">{ LocalizeText('group.edit.name') }</label>
|
||||
<input type="text" className="form-control form-control-sm" value={ groupName } maxLength={ 29 } onChange={ (e) => setName(e.target.value) } />
|
||||
</div>
|
||||
<div className="form-group mb-2">
|
||||
<label className="fw-bold">{ LocalizeText('group.edit.desc') }</label>
|
||||
<input type="text" className="form-control form-control-sm" value={ groupDescription } maxLength={ 254 } onChange={ (e) => setDescription(e.target.value) } />
|
||||
</div>
|
||||
{ isCreator && <>
|
||||
<div className="form-group mb-1">
|
||||
<label className="fw-bold">{ LocalizeText('group.edit.base') }</label>
|
||||
<select className="form-select form-select-sm" value={ groupHomeroomId } onChange={ (e) => setHomeroomId(Number(e.target.value)) }>
|
||||
<option value={ 0 } disabled>{ LocalizeText('group.edit.base.select.room') }</option>
|
||||
{ availableRooms && availableRooms.map((room, index) =>
|
||||
{
|
||||
return <option key={ index } value={ room.id }>{ room.name }</option>;
|
||||
}) }
|
||||
</select>
|
||||
</div>
|
||||
<div className="small mb-2">{ LocalizeText('group.edit.base.warning') }</div>
|
||||
<div className="cursor-pointer text-decoration-underline text-center" onClick={ () => CreateLinkEvent('navigator/create') }>{ LocalizeText('group.createroom') }</div>
|
||||
</> }
|
||||
</div>);
|
||||
};
|
||||
@ -26,6 +26,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
.nitro-groups-color-grid {
|
||||
|
||||
.color-swatch {
|
||||
position: relative;
|
||||
border-radius: $border-radius;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid $white;
|
||||
box-shadow: inset 3px 3px rgba(0, 0, 0, .1);
|
||||
|
||||
&.active {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shared-tab-badge {
|
||||
.position-swatch {
|
||||
position: relative;
|
||||
@ -42,19 +58,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
position: relative;
|
||||
border-radius: $border-radius;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid $white;
|
||||
box-shadow: inset 3px 3px rgba(0, 0, 0, .1);
|
||||
|
||||
&.active {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-list {
|
||||
height: 160px;
|
||||
min-height: 160px;
|
||||
123
src/components/groups/views/tabs/GroupTabBadgeView.tsx
Normal file
123
src/components/groups/views/tabs/GroupTabBadgeView.tsx
Normal file
@ -0,0 +1,123 @@
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import classNames from 'classnames';
|
||||
import { FC, useCallback, useEffect, useState } from 'react';
|
||||
import { Column, Flex, Grid } from '../../../../common';
|
||||
import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
|
||||
import { GroupBadgePart } from '../../common/GroupBadgePart';
|
||||
import { useGroupsContext } from '../../GroupsContext';
|
||||
import { GroupsActions } from '../../reducers/GroupsReducer';
|
||||
|
||||
const POSITIONS: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8];
|
||||
|
||||
interface GroupTabBadgeViewProps
|
||||
{
|
||||
skipDefault?: boolean;
|
||||
}
|
||||
|
||||
export const GroupTabBadgeView: FC<GroupTabBadgeViewProps> = props =>
|
||||
{
|
||||
const { skipDefault = null } = props;
|
||||
const [ editingIndex, setEditingIndex ] = useState<number>(0);
|
||||
const [ isSelectingModel, setIsSelectingModel ] = useState<boolean>(false);
|
||||
const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();
|
||||
const { badgeBases = null, badgeSymbols = null, badgePartColors = null, groupBadgeParts = null } = groupsState;
|
||||
|
||||
const switchIndex = useCallback((index: number) =>
|
||||
{
|
||||
setIsSelectingModel(false);
|
||||
setEditingIndex(index);
|
||||
}, []);
|
||||
|
||||
const selectPartProperty = useCallback((property: string, key: number) =>
|
||||
{
|
||||
const clonedBadgeParts = Array.from(groupBadgeParts);
|
||||
|
||||
clonedBadgeParts[editingIndex][property] = key;
|
||||
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_BADGE_PARTS,
|
||||
payload: {
|
||||
badgeParts: clonedBadgeParts
|
||||
}
|
||||
});
|
||||
|
||||
if(property === 'key') setIsSelectingModel(false);
|
||||
}, [ editingIndex, groupBadgeParts, dispatchGroupsState ]);
|
||||
|
||||
const getCompleteBadgeCode = useCallback(() =>
|
||||
{
|
||||
let code = '';
|
||||
|
||||
if(!groupBadgeParts) return code;
|
||||
|
||||
groupBadgeParts.forEach((badgePart) =>
|
||||
{
|
||||
if(badgePart.code) code = code + badgePart.code;
|
||||
});
|
||||
|
||||
return code;
|
||||
}, [ groupBadgeParts ]);
|
||||
|
||||
const getCurrentPart = useCallback((property: string) =>
|
||||
{
|
||||
return groupBadgeParts[editingIndex][property];
|
||||
}, [ groupBadgeParts, editingIndex ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(skipDefault || !badgeBases || !badgePartColors || groupBadgeParts) return;
|
||||
|
||||
const badgeParts: GroupBadgePart[] = [
|
||||
new GroupBadgePart(GroupBadgePart.BASE, badgeBases[0].id, badgePartColors[0].id),
|
||||
new GroupBadgePart(GroupBadgePart.SYMBOL, 0, badgePartColors[0].id),
|
||||
new GroupBadgePart(GroupBadgePart.SYMBOL, 0, badgePartColors[0].id),
|
||||
new GroupBadgePart(GroupBadgePart.SYMBOL, 0, badgePartColors[0].id),
|
||||
new GroupBadgePart(GroupBadgePart.SYMBOL, 0, badgePartColors[0].id)
|
||||
];
|
||||
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_BADGE_PARTS,
|
||||
payload: { badgeParts }
|
||||
});
|
||||
|
||||
}, [ skipDefault, badgeBases, badgePartColors, groupBadgeParts, dispatchGroupsState ]);
|
||||
|
||||
return (
|
||||
<div className="shared-tab-badge">
|
||||
<Flex gap={ 2 }>
|
||||
<Flex className="group-badge">
|
||||
<BadgeImageView badgeCode={ getCompleteBadgeCode() } isGroup={ true } className="mx-auto d-block"/>
|
||||
</Flex>
|
||||
<Column>
|
||||
{ (groupBadgeParts.length > 0) && groupBadgeParts.map((part, index) =>
|
||||
{
|
||||
if(part.type === GroupBadgePart.BASE) return null;
|
||||
|
||||
return (
|
||||
<Flex gap={ 2 }>
|
||||
<Flex center shrink pointer className="badge-preview" onClick={ event => setIsSelectingModel(true) }>
|
||||
{ (groupBadgeParts[index]['code'] && (groupBadgeParts[index]['code'].length > 0)) &&
|
||||
<BadgeImageView badgeCode={ groupBadgeParts[index]['code'] } isGroup={ true } /> }
|
||||
{ (!groupBadgeParts[index]['code'] || !groupBadgeParts[index]['code'].length) &&
|
||||
<FontAwesomeIcon icon="plus" /> }
|
||||
</Flex>
|
||||
<Grid gap={ 1 } columnCount={ 3 }>
|
||||
{ POSITIONS.map((position) =>
|
||||
{
|
||||
return <div key={ position } className={ 'position-swatch cursor-pointer' + classNames({ ' active': groupBadgeParts[index]['position'] === position }) } onClick={ () => selectPartProperty('position', position) }></div>
|
||||
}) }
|
||||
</Grid>
|
||||
<Grid gap={ 1 } columnCount={ 8 }>
|
||||
{ (badgePartColors.length > 0) && badgePartColors.map((item, colorIndex) =>
|
||||
{
|
||||
return <div key={ colorIndex } className={ 'color-swatch cursor-pointer' + classNames({ ' active': item.id === groupBadgeParts[index]['color'] }) } style={{ backgroundColor: '#' + item.color }} onClick={ () => selectPartProperty('color', item.id) }></div>
|
||||
}) }
|
||||
</Grid>
|
||||
</Flex>
|
||||
);
|
||||
}) }
|
||||
</Column>
|
||||
</Flex>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
81
src/components/groups/views/tabs/GroupTabColorsView.tsx
Normal file
81
src/components/groups/views/tabs/GroupTabColorsView.tsx
Normal file
@ -0,0 +1,81 @@
|
||||
import classNames from 'classnames';
|
||||
import { FC, useEffect } from 'react';
|
||||
import { LocalizeText } from '../../../../api';
|
||||
import { AutoGrid, Base, Column, Flex, Grid, Text } from '../../../../common';
|
||||
import { useGroupsContext } from '../../GroupsContext';
|
||||
import { GroupsActions } from '../../reducers/GroupsReducer';
|
||||
|
||||
export const GroupTabColorsView: FC<{}> = props =>
|
||||
{
|
||||
const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();
|
||||
const { groupColors = null, groupColorsA = null, groupColorsB = null } = groupsState;
|
||||
|
||||
const getGroupColor = (colorIndex: number) =>
|
||||
{
|
||||
if(colorIndex === 0) return groupColorsA.find(color => (color.id === groupColors[colorIndex])).color;
|
||||
|
||||
return groupColorsB.find(color => (color.id === groupColors[colorIndex])).color;
|
||||
}
|
||||
|
||||
const selectColor = (colorIndex: number, colorId: number) =>
|
||||
{
|
||||
const clonedGroupColors = Array.from(groupColors);
|
||||
|
||||
clonedGroupColors[colorIndex] = colorId;
|
||||
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_COLORS,
|
||||
payload: {
|
||||
objectValues: clonedGroupColors
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!groupColorsA || !groupColorsB || groupColors) return;
|
||||
|
||||
const colors: number[] = [
|
||||
groupColorsA[0].id,
|
||||
groupColorsB[0].id
|
||||
];
|
||||
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_COLORS,
|
||||
payload: {
|
||||
objectValues: colors
|
||||
}
|
||||
});
|
||||
}, [ dispatchGroupsState, groupColors, groupColorsA, groupColorsB ]);
|
||||
|
||||
return (
|
||||
<Grid overflow="hidden">
|
||||
<Column size={ 2 } gap={ 1 }>
|
||||
<Text bold>{ LocalizeText('group.edit.color.guild.color') }</Text>
|
||||
{ groupColors && (groupColors.length > 0) &&
|
||||
<Flex overflow="hidden" className="rounded border">
|
||||
<Base className="group-color-swatch" style={{ backgroundColor: '#' + getGroupColor(0) }} />
|
||||
<Base className="group-color-swatch" style={{ backgroundColor: '#' + getGroupColor(1) }} />
|
||||
</Flex> }
|
||||
</Column>
|
||||
<Column size={ 5 } gap={ 1 } overflow="hidden">
|
||||
<Text bold>{ LocalizeText('group.edit.color.primary.color') }</Text>
|
||||
<AutoGrid gap={ 1 } columnCount={ 7 } columnMinWidth={ 16 } columnMinHeight={ 16 } className="nitro-groups-color-grid">
|
||||
{ groupColors && groupColorsA && groupColorsA.map((item, index) =>
|
||||
{
|
||||
return <div key={ index } className={ 'color-swatch cursor-pointer' + classNames({ ' active': (groupColors[0] === item.id) }) } style={{ backgroundColor: '#' + item.color }} onClick={ () => selectColor(0, item.id) }></div>
|
||||
}) }
|
||||
</AutoGrid>
|
||||
</Column>
|
||||
<Column size={ 5 } gap={ 1 } overflow="hidden">
|
||||
<Text bold>{ LocalizeText('group.edit.color.secondary.color') }</Text>
|
||||
<AutoGrid gap={ 1 } columnCount={ 7 } columnMinWidth={ 16 } columnMinHeight={ 16 } className="nitro-groups-color-grid">
|
||||
{ groupColorsB && groupColorsB.map((item, index) =>
|
||||
{
|
||||
return <div key={ index } className={ 'color-swatch cursor-pointer' + classNames({ ' active': (groupColors[1] === item.id) }) } style={{ backgroundColor: '#' + item.color }} onClick={ () => selectColor(1, item.id) }></div>
|
||||
}) }
|
||||
</AutoGrid>
|
||||
</Column>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
75
src/components/groups/views/tabs/GroupTabIdentityView.tsx
Normal file
75
src/components/groups/views/tabs/GroupTabIdentityView.tsx
Normal file
@ -0,0 +1,75 @@
|
||||
import { FC } from 'react';
|
||||
import { CreateLinkEvent, LocalizeText } from '../../../../api';
|
||||
import { Column, Flex, Text } from '../../../../common';
|
||||
import { useGroupsContext } from '../../GroupsContext';
|
||||
import { GroupsActions } from '../../reducers/GroupsReducer';
|
||||
|
||||
interface GroupTabIdentityViewProps
|
||||
{
|
||||
isCreator?: boolean;
|
||||
}
|
||||
|
||||
export const GroupTabIdentityView: FC<GroupTabIdentityViewProps> = props =>
|
||||
{
|
||||
const { isCreator = false } = props;
|
||||
const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();
|
||||
const { groupName = '', groupDescription = '', groupHomeroomId = 0, availableRooms = null } = groupsState;
|
||||
|
||||
const setName = (name: string) =>
|
||||
{
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_NAME,
|
||||
payload: {
|
||||
stringValues: [ name ]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const setDescription = (description: string) =>
|
||||
{
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_DESCRIPTION,
|
||||
payload: {
|
||||
stringValues: [ description ]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const setHomeroomId = (id: number) =>
|
||||
{
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_HOMEROOM_ID,
|
||||
payload: {
|
||||
numberValues: [ id ]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Column gap={ 1 }>
|
||||
<Flex alignItems="center" gap={ 1 }>
|
||||
<Text className="col-3">{ LocalizeText('group.edit.name') }</Text>
|
||||
<input type="text" className="form-control form-control-sm" value={ groupName } maxLength={ 29 } onChange={ event => setName(event.target.value) } />
|
||||
</Flex>
|
||||
<Flex alignItems="center" gap={ 1 }>
|
||||
<Text className="col-3">{ LocalizeText('group.edit.desc') }</Text>
|
||||
<textarea className="form-control form-control-sm" value={ groupDescription } maxLength={ 254 } onChange={ event => setDescription(event.target.value) } />
|
||||
</Flex>
|
||||
{ isCreator &&
|
||||
<Flex gap={ 1 }>
|
||||
<Text className="col-3">{ LocalizeText('group.edit.base') }</Text>
|
||||
<Column gap={ 1 }>
|
||||
<select className="form-select form-select-sm" value={ groupHomeroomId } onChange={ event => setHomeroomId(Number(event.target.value)) }>
|
||||
<option value={ 0 } disabled>{ LocalizeText('group.edit.base.select.room') }</option>
|
||||
{ availableRooms && availableRooms.map((room, index) => <option key={ index } value={ room.id }>{ room.name }</option>) }
|
||||
</select>
|
||||
<Text small>{ LocalizeText('group.edit.base.warning') }</Text>
|
||||
</Column>
|
||||
</Flex> }
|
||||
</Column>
|
||||
{ isCreator &&
|
||||
<Text underline center fullWidth pointer onClick={ event => CreateLinkEvent('navigator/create') }>{ LocalizeText('group.createroom') }</Text> }
|
||||
</>
|
||||
);
|
||||
};
|
||||
61
src/components/groups/views/tabs/GroupTabSettingsView.tsx
Normal file
61
src/components/groups/views/tabs/GroupTabSettingsView.tsx
Normal file
@ -0,0 +1,61 @@
|
||||
import { FC } from 'react';
|
||||
import { LocalizeText } from '../../../../api/utils/LocalizeText';
|
||||
import { Column, Flex, Text } from '../../../../common';
|
||||
import { useGroupsContext } from '../../GroupsContext';
|
||||
import { GroupsActions } from '../../reducers/GroupsReducer';
|
||||
|
||||
const STATES: string[] = ['regular', 'exclusive', 'private'];
|
||||
|
||||
export const GroupTabSettingsView: FC<{}> = props =>
|
||||
{
|
||||
const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();
|
||||
const { groupState = null, groupCanMembersDecorate = false } = groupsState;
|
||||
|
||||
const setState = (state: number) =>
|
||||
{
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_STATE,
|
||||
payload: {
|
||||
numberValues: [ state ]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const toggleCanMembersDecorate = () =>
|
||||
{
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_CAN_MEMBERS_DECORATE,
|
||||
payload: {
|
||||
boolValues: [ !groupCanMembersDecorate ]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{ STATES.map((state, index) =>
|
||||
{
|
||||
return (
|
||||
<Flex alignItems="center" gap={ 1 }>
|
||||
<input className="form-check-input" type="radio" name="groupState" checked={ (groupState === index) } onChange={ event => setState(index) } />
|
||||
<Column gap={ 0 }>
|
||||
<Flex gap={ 1 }>
|
||||
<i className={ `icon icon-group-type-${index}` } />
|
||||
<Text bold>{ LocalizeText(`group.edit.settings.type.${state}.label`) }</Text>
|
||||
</Flex>
|
||||
<Text>{ LocalizeText(`group.edit.settings.type.${state}.help`) }</Text>
|
||||
</Column>
|
||||
</Flex>
|
||||
);
|
||||
}) }
|
||||
<hr className="m-0 bg-dark" />
|
||||
<Flex alignItems="center" gap={ 1 }>
|
||||
<input className="form-check-input" type="checkbox" checked={ groupCanMembersDecorate } onChange={() => toggleCanMembersDecorate() } />
|
||||
<Column gap={ 1 }>
|
||||
<Text bold>{ LocalizeText('group.edit.settings.rights.caption') }</Text>
|
||||
<Text>{ LocalizeText('group.edit.settings.rights.members.help') }</Text>
|
||||
</Column>
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,21 +1,20 @@
|
||||
import { FC, useMemo } from 'react';
|
||||
import { NitroLayoutFlex } from '../..';
|
||||
import { NitroCardSubHeaderViewProps } from './NitroCardSubHeaderView.types';
|
||||
import { Flex, FlexProps } from '../../../common';
|
||||
|
||||
export const NitroCardSubHeaderView: FC<NitroCardSubHeaderViewProps> = props =>
|
||||
export const NitroCardSubHeaderView: FC<FlexProps> = props =>
|
||||
{
|
||||
const { className = '', ...rest } = props;
|
||||
const { justifyContent = 'center', classNames = [], ...rest } = props;
|
||||
|
||||
const getClassName = useMemo(() =>
|
||||
const getClassNames = useMemo(() =>
|
||||
{
|
||||
let newClassName = 'container-fluid bg-muted justify-content-center py-1';
|
||||
const newClassNames: string[] = [ 'container-fluid', 'bg-muted', 'p-1' ];
|
||||
|
||||
if(className && className.length) newClassName += ` ${ className }`;
|
||||
if(classNames.length) newClassNames.push(...classNames);
|
||||
|
||||
return newClassName;
|
||||
}, [ className ]);
|
||||
return newClassNames;
|
||||
}, [ classNames ]);
|
||||
|
||||
return (
|
||||
<NitroLayoutFlex className={ getClassName } { ...rest } />
|
||||
<Flex justifyContent={ justifyContent } classNames={ getClassNames } { ...rest } />
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,6 +4,11 @@
|
||||
height: 40px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
&.group-badge {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
}
|
||||
|
||||
.badge-information {
|
||||
display: none;
|
||||
|
||||
@ -39,6 +39,8 @@ export const BadgeImageView: FC<BadgeImageViewProps> = props =>
|
||||
{
|
||||
const newClassNames: string[] = [ 'badge-image' ];
|
||||
|
||||
if(isGroup) newClassNames.push('group-badge');
|
||||
|
||||
if(isGrayscale) newClassNames.push('grayscale');
|
||||
|
||||
if((scale !== 1) && getScaleClass.length) newClassNames.push(getScaleClass);
|
||||
@ -46,7 +48,7 @@ export const BadgeImageView: FC<BadgeImageViewProps> = props =>
|
||||
if(classNames.length) newClassNames.push(...classNames);
|
||||
|
||||
return newClassNames;
|
||||
}, [ classNames, isGrayscale, scale, getScaleClass ]);
|
||||
}, [ classNames, isGroup, isGrayscale, scale, getScaleClass ]);
|
||||
|
||||
const getStyle = useMemo(() =>
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user