nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-27 08:00:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Group updates

Browse Source
This commit is contained in:
Bill 2022-02-17 00:32:18 -05:00
parent 01d5e5e1be
commit b52237212e
25 changed files with 756 additions and 806 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.scss
View File

@ -69,6 +69,8 @@ $camera-checkout-width: 350px;
$room-info-width: 325px;
$nitro-group-creator-width: 383px;
.nitro-app {
width: 100%;
height: 100%;

5
src/api/groups/TryJoinGroup.ts
View File

@ -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));

85
src/components/groups/GroupView.scss
View File

@ -1,54 +1,93 @@
.nitro-groups {
.tab-image {
width: 122px;
height: 68px;
display: flex;
align-items: center;
justify-content: center;
div {
background-image: url('../../assets/images/groups/creator_images.png');
background-repeat: no-repeat;
.nitro-group-manager {
width: 420px;
max-height: 400px;
}
.nitro-group-tab-image {
width: 122px;
height: 68px;
background: url('../../assets/images/groups/creator_images.png') no-repeat;
&.tab-1 {
div {
background-position: 0px 0px;
width: 99px;
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 {
&.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;
}
}
.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;
.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';

28
src/components/groups/views/creator/GroupCreatorView.scss
View File

@ -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;
}
}

121
src/components/groups/views/creator/GroupCreatorView.tsx
View File

@ -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 => (value === 4 ? value : value + 1));
}, [ currentTab, groupName, groupHomeroomId, buyGroup ]);
useEffect(() =>
{
if(!isVisible)
{
setCurrentTab(1);
dispatchGroupsState({
type: GroupsActions.RESET_GROUP_SETTINGS
});
return;
}
setCurrentTab(value =>
{
return (value === 4 ? value : value + 1)
});
}, [ currentTab, groupName, groupHomeroomId ]);
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>);
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>
);
}) }
</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>
</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>
);

3
src/components/groups/views/information-standalone/GroupInformationStandaloneView.scss
View File

@ -1,3 +0,0 @@
.nitro-group-information-standalone {
width: 500px;
}

9
src/components/groups/views/information-standalone/GroupInformationStandaloneView.tsx
View File

@ -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;
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>

18
src/components/groups/views/information/GroupInformationView.scss
View File

@ -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;
}
}

130
src/components/groups/views/information/GroupInformationView.tsx
View File

@ -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(() =>
{
if(!groupInformation) return;
const isRealOwner = () => (groupInformation && (groupInformation.ownerName === GetSessionDataManager().userName));
TryJoinGroup(groupInformation.id);
}, [ groupInformation ]);
const joinGroup = () => (groupInformation && TryJoinGroup(groupInformation.id));
const leaveGroup = useCallback(() =>
const leaveGroup = () =>
{
if(window.confirm(LocalizeText('group.leaveconfirm.desc')))
NotificationUtilities.confirm(LocalizeText('group.leaveconfirm.desc'), () =>
{
SendMessageHook(new GroupRemoveMemberComposer(groupInformation.id, GetSessionDataManager().userId));
if(onClose) onClose();
}, null);
}
}, [ 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">
</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() }
</div>
</div>
</div>
<div className="ms-2 w-100">
<div className="fw-bold d-flex align-items-center">
</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 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 }>
{ 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>
}
</div>
</div>
</Button> }
</Column>
</Column>
</Grid>
</>
);
};

6
src/components/groups/views/manager/GroupManagerView.scss
View File

@ -1,9 +1,3 @@
.nitro-group-manager {
width: 385px;
.manager-tab {
height: 260px;
min-height: 260px;
max-height: 260px;
}
}

53
src/components/groups/views/manager/GroupManagerView.tsx
View File

@ -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,7 +65,6 @@ 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 =>
{
@ -73,27 +73,28 @@ export const GroupManagerView: FC<{}> = props =>
</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>
<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>
);

55
src/components/groups/views/manager/tab-settings/GroupManagerTabSettingsView.tsx
View File

@ -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>
</>
);
};

27
src/components/groups/views/members/GroupMembersView.scss
View File

@ -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;
}
}
}
}
}

194
src/components/groups/views/members/GroupMembersView.tsx
View File

@ -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();
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()])))
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 = useCallback((event: KeyboardEvent<HTMLInputElement>) =>
{
if(event.key !== 'Enter') return;
const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => ((event.key === 'Enter') && searchMembers(pageData.pageIndex));
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) =>
{
if(member.rank === GroupRank.REQUESTED)
const acceptMembership = (member: GroupMemberParser) =>
{
if(member.rank !== GroupRank.REQUESTED) return;
SendMessageHook(new GroupMembershipAcceptComposer(pageData.groupId, member.id));
searchMembers(pageData.pageIndex);
}
}, [ pageData, searchMembers ]);
const removeMemberOrDeclineMembership = useCallback((member) =>
const removeMemberOrDeclineMembership = (member: GroupMemberParser) =>
{
if(member.rank === GroupRank.REQUESTED)
{
SendMessageHook(new GroupMembershipDeclineComposer(pageData.groupId, member.id));
searchMembers(pageData.pageIndex);
return;
}
else
{
setRemovingMemberName(member.name);
SendMessageHook(new GroupConfirmRemoveMemberComposer(pageData.groupId, member.id));
}
}, [ pageData, searchMembers ]);
if(!groupId) return null;
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 } />
<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>
</div>
</div>
<div className="row row-cols-2 align-content-start g-0 w-100 members-list overflow-auto">
</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) } }>
<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 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>
</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>
</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>
);
};

141
src/components/groups/views/shared-tabs/GroupSharedTabBadgeView.tsx
View File

@ -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>);
};

88
src/components/groups/views/shared-tabs/GroupSharedTabColorsView.tsx
View File

@ -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>
);
};

72
src/components/groups/views/shared-tabs/GroupSharedTabIdentityView.tsx
View File

@ -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>);
};

29
src/components/groups/views/shared-tabs/GroupSharedTabs.scss → src/components/groups/views/tabs/GroupSharedTabs.scss
View File

@ -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
View 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
View 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
View 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
View 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>
</>
);
};

19
src/layout/card/sub-header/NitroCardSubHeaderView.tsx
View File

@ -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 } />
);
}

5
src/views/shared/badge-image/BadgeImage.scss
View File

@ -5,6 +5,11 @@
background-repeat: no-repeat;
background-position: center;
&.group-badge {
width: 39px;
height: 39px;
}
.badge-information {
display: none;
}

4
src/views/shared/badge-image/BadgeImageView.tsx
View File

@ -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(() =>
{