diff options
Diffstat (limited to 'src/client/util/GroupManager.tsx')
| -rw-r--r-- | src/client/util/GroupManager.tsx | 113 |
1 files changed, 81 insertions, 32 deletions
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx index f4f879208..5701a22c0 100644 --- a/src/client/util/GroupManager.tsx +++ b/src/client/util/GroupManager.tsx @@ -1,3 +1,5 @@ +/* eslint-disable jsx-a11y/no-static-element-interactions */ +/* eslint-disable jsx-a11y/click-events-have-key-events */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Button, IconButton, Size, Type } from 'browndash-components'; import { action, computed, makeObservable, observable } from 'mobx'; @@ -5,19 +7,20 @@ import { observer } from 'mobx-react'; import * as React from 'react'; import Select from 'react-select'; import * as RequestPromise from 'request-promise'; +import { ClientUtils } from '../../ClientUtils'; +import { Utils } from '../../Utils'; import { DateField } from '../../fields/DateField'; import { Doc, DocListCast, Opt } from '../../fields/Doc'; import { Id } from '../../fields/FieldSymbols'; import { listSpec } from '../../fields/Schema'; import { Cast, StrCast } from '../../fields/Types'; -import { Utils } from '../../Utils'; import { MainViewModal } from '../views/MainViewModal'; +import { ObservableReactComponent } from '../views/ObservableReactComponent'; import { TaskCompletionBox } from '../views/nodes/TaskCompletedBox'; import './GroupManager.scss'; import { GroupMemberView } from './GroupMemberView'; -import { SettingsManager } from './SettingsManager'; import { SharingManager, User } from './SharingManager'; -import { ObservableReactComponent } from '../views/ObservableReactComponent'; +import { SnappingManager } from './SnappingManager'; /** * Interface for options for the react-select component @@ -29,6 +32,7 @@ export interface UserOptions { @observer export class GroupManager extends ObservableReactComponent<{}> { + // eslint-disable-next-line no-use-before-define static Instance: GroupManager; @observable isOpen: boolean = false; // whether the GroupManager is to be displayed or not. @observable private users: string[] = []; // list of users populated from the database. @@ -55,7 +59,7 @@ export class GroupManager extends ObservableReactComponent<{}> { */ populateUsers = async () => { if (Doc.UserDoc()[Id] !== Utils.GuestID()) { - const userList = await RequestPromise.get(Utils.prepend('/getUsers')); + const userList = await RequestPromise.get(ClientUtils.prepend('/getUsers')); const raw = JSON.parse(userList) as User[]; raw.map(action(user => !this.users.some(umail => umail === user.email) && this.users.push(user.email))); } @@ -73,7 +77,7 @@ export class GroupManager extends ObservableReactComponent<{}> { */ @action open = () => { - // SelectionManager.DeselectAll(); + // DocumentView.DeselectAll(); this.isOpen = true; this.populateUsers(); }; @@ -135,7 +139,7 @@ export class GroupManager extends ObservableReactComponent<{}> { hasEditAccess(groupDoc: Doc): boolean { if (!groupDoc) return false; const accessList: string[] = JSON.parse(StrCast(groupDoc.owners)); - return accessList.includes(Doc.CurrentUserEmail) || this.adminGroupMembers?.includes(Doc.CurrentUserEmail); + return accessList.includes(ClientUtils.CurrentUserEmail()) || this.adminGroupMembers?.includes(ClientUtils.CurrentUserEmail()); } /** @@ -147,7 +151,7 @@ export class GroupManager extends ObservableReactComponent<{}> { const name = groupName.toLowerCase() === 'admin' ? 'Admin' : groupName; const groupDoc = new Doc('GROUP:' + name, true); groupDoc.title = name; - groupDoc.owners = JSON.stringify([Doc.CurrentUserEmail]); + groupDoc.owners = JSON.stringify([ClientUtils.CurrentUserEmail()]); groupDoc.members = JSON.stringify(memberEmails); this.addGroup(groupDoc); } @@ -159,7 +163,7 @@ export class GroupManager extends ObservableReactComponent<{}> { addGroup(groupDoc: Doc): boolean { if (this.GroupManagerDoc) { Doc.AddDocToList(this.GroupManagerDoc, 'data', groupDoc); - this.GroupManagerDoc['data_modificationDate'] = new DateField(); + this.GroupManagerDoc.data_modificationDate = new DateField(); return true; } return false; @@ -176,11 +180,11 @@ export class GroupManager extends ObservableReactComponent<{}> { Doc.RemoveDocFromList(this.GroupManagerDoc, 'data', group); SharingManager.Instance.removeGroup(group); const members = JSON.parse(StrCast(group.members)); - if (members.includes(Doc.CurrentUserEmail)) { + if (members.includes(ClientUtils.CurrentUserEmail())) { const index = DocListCast(this.GroupManagerDoc.data).findIndex(grp => grp === group); index !== -1 && Cast(this.GroupManagerDoc.data, listSpec(Doc), [])?.splice(index, 1); } - this.GroupManagerDoc['data_modificationDate'] = new DateField(); + this.GroupManagerDoc.data_modificationDate = new DateField(); if (group === this.currentGroup) { this.currentGroup = undefined; } @@ -201,7 +205,7 @@ export class GroupManager extends ObservableReactComponent<{}> { !memberList.includes(email) && memberList.push(email); groupDoc.members = JSON.stringify(memberList); SharingManager.Instance.shareWithAddedMember(groupDoc, email); - this.GroupManagerDoc && (this.GroupManagerDoc['data_modificationDate'] = new DateField()); + this.GroupManagerDoc && (this.GroupManagerDoc.data_modificationDate = new DateField()); } } @@ -215,10 +219,9 @@ export class GroupManager extends ObservableReactComponent<{}> { const memberList = JSON.parse(StrCast(groupDoc.members)); const index = memberList.indexOf(email); if (index !== -1) { - const user = memberList.splice(index, 1)[0]; groupDoc.members = JSON.stringify(memberList); SharingManager.Instance.removeMember(groupDoc, email); - this.GroupManagerDoc && (this.GroupManagerDoc['data_modificationDate'] = new DateField()); + this.GroupManagerDoc && (this.GroupManagerDoc.data_modificationDate = new DateField()); } } } @@ -260,7 +263,10 @@ export class GroupManager extends ObservableReactComponent<{}> { alert('Please select a unique group name'); return; } - this.createGroupDoc(value, this.selectedUsers?.map(user => user.value)); + this.createGroupDoc( + value, + this.selectedUsers?.map(user => user.value) + ); this.selectedUsers = null; this.inputRef.current!.value = ''; this.buttonColour = '#979797'; @@ -271,7 +277,9 @@ export class GroupManager extends ObservableReactComponent<{}> { TaskCompletionBox.textDisplayed = 'Group created!'; TaskCompletionBox.taskCompleted = true; setTimeout( - action(() => (TaskCompletionBox.taskCompleted = false)), + action(() => { + TaskCompletionBox.taskCompleted = false; + }), 2000 ); }; @@ -281,14 +289,14 @@ export class GroupManager extends ObservableReactComponent<{}> { */ private get groupCreationModal() { const contents = ( - <div className="group-create" style={{ background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}> + <div className="group-create" style={{ background: SnappingManager.userBackgroundColor, color: SnappingManager.userColor }}> <div className="group-heading" style={{ marginBottom: 0 }}> <p> <b>New Group</b> </p> <div className="close-button"> <Button - icon={<FontAwesomeIcon icon={'times'} size={'lg'} />} + icon={<FontAwesomeIcon icon="times" size="lg" />} onClick={action(() => { this.createGroupModalOpen = false; TaskCompletionBox.taskCompleted = false; @@ -298,7 +306,17 @@ export class GroupManager extends ObservableReactComponent<{}> { </div> </div> <div className="group-input" style={{ border: StrCast(Doc.UserDoc().userColor) }}> - <input ref={this.inputRef} onKeyDown={this.handleKeyDown} autoFocus type="text" placeholder="Group name" onChange={action(() => (this.buttonColour = this.inputRef.current?.value ? 'black' : '#979797'))} /> + <input + ref={this.inputRef} + onKeyDown={this.handleKeyDown} + // eslint-disable-next-line jsx-a11y/no-autofocus + autoFocus + type="text" + placeholder="Group name" + onChange={action(() => { + this.buttonColour = this.inputRef.current?.value ? 'black' : '#979797'; + })} + /> </div> <div style={{ border: StrCast(Doc.UserDoc().userColor) }}> <Select @@ -306,7 +324,7 @@ export class GroupManager extends ObservableReactComponent<{}> { isMulti options={this.options} onChange={this.handleChange} - placeholder={'Select users'} + placeholder="Select users" value={this.selectedUsers} closeMenuOnSelect={false} styles={{ @@ -331,8 +349,8 @@ export class GroupManager extends ObservableReactComponent<{}> { }} /> </div> - <div className={'create-button'}> - <Button text={'Create'} type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={this.createGroup} /> + <div className="create-button"> + <Button text="Create" type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={this.createGroup} /> </div> </div> ); @@ -340,7 +358,7 @@ export class GroupManager extends ObservableReactComponent<{}> { return ( <MainViewModal isDisplayed={this.createGroupModalOpen} - interactive={true} + interactive contents={contents} dialogueBoxStyle={{ width: '90%', height: '70%' }} closeOnExternalClick={action(() => { @@ -366,30 +384,61 @@ export class GroupManager extends ObservableReactComponent<{}> { const groups = this.groupSort === 'ascending' ? this.allGroups.sort(sortGroups) : this.groupSort === 'descending' ? this.allGroups.sort(sortGroups).reverse() : this.allGroups; return ( - <div className="group-interface" style={{ background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}> + <div className="group-interface" style={{ background: SnappingManager.userBackgroundColor, color: SnappingManager.userColor }}> {this.groupCreationModal} - {this.currentGroup ? <GroupMemberView group={this.currentGroup} onCloseButtonClick={action(() => (this.currentGroup = undefined))} /> : null} + {this.currentGroup ? ( + <GroupMemberView + group={this.currentGroup} + onCloseButtonClick={action(() => { + this.currentGroup = undefined; + })} + /> + ) : null} <div className="group-heading"> <p> <b>Manage Groups</b> </p> - <Button icon={<FontAwesomeIcon icon={'plus'} />} iconPlacement={'left'} text={'Create Group'} type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => (this.createGroupModalOpen = true))} /> - <div className={'close-button'}> - <Button icon={<FontAwesomeIcon icon={'times'} size={'lg'} />} onClick={this.close} color={StrCast(Doc.UserDoc().userColor)} /> + <Button + icon={<FontAwesomeIcon icon="plus" />} + iconPlacement="left" + text="Create Group" + type={Type.TERT} + color={StrCast(Doc.UserDoc().userColor)} + onClick={action(() => { + this.createGroupModalOpen = true; + })} + /> + <div className="close-button"> + <Button icon={<FontAwesomeIcon icon="times" size="lg" />} onClick={this.close} color={StrCast(Doc.UserDoc().userColor)} /> </div> </div> <div className="main-container"> - <div className="sort-groups" onClick={action(() => (this.groupSort = this.groupSort === 'ascending' ? 'descending' : this.groupSort === 'descending' ? 'none' : 'ascending'))}> + <div + className="sort-groups" + onClick={action(() => { + this.groupSort = this.groupSort === 'ascending' ? 'descending' : this.groupSort === 'descending' ? 'none' : 'ascending'; + })}> Name <IconButton icon={<FontAwesomeIcon icon={this.groupSort === 'ascending' ? 'caret-up' : this.groupSort === 'descending' ? 'caret-down' : 'caret-right'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} /> </div> - <div className={'style-divider'} style={{ background: StrCast(Doc.UserDoc().userColor) }} /> + <div className="style-divider" style={{ background: StrCast(Doc.UserDoc().userColor) }} /> <div className="group-body" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }}> {groups.map(group => ( <div className="group-row" key={StrCast(group.title || group.groupName)}> <div className="group-name">{StrCast(group.title || group.groupName)}</div> - <div className="group-info" onClick={action(() => (this.currentGroup = group))}> - <IconButton icon={<FontAwesomeIcon icon={'info-circle'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => (this.currentGroup = group))} /> + <div + className="group-info" + onClick={action(() => { + this.currentGroup = group; + })}> + <IconButton + icon={<FontAwesomeIcon icon="info-circle" />} + size={Size.XSMALL} + color={StrCast(Doc.UserDoc().userColor)} + onClick={action(() => { + this.currentGroup = group; + })} + /> </div> </div> ))} @@ -400,6 +449,6 @@ export class GroupManager extends ObservableReactComponent<{}> { } render() { - return <MainViewModal contents={this.groupInterface} isDisplayed={this.isOpen} interactive={true} dialogueBoxStyle={{ zIndex: 1002 }} overlayStyle={{ zIndex: 1001 }} closeOnExternalClick={this.close} />; + return <MainViewModal contents={this.groupInterface} isDisplayed={this.isOpen} interactive dialogueBoxStyle={{ zIndex: 1002 }} overlayStyle={{ zIndex: 1001 }} closeOnExternalClick={this.close} />; } } |