diff options
Diffstat (limited to 'src/client/util/GroupManager.tsx')
| -rw-r--r-- | src/client/util/GroupManager.tsx | 85 |
1 files changed, 65 insertions, 20 deletions
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx index c261c0f1e..8d84dbad8 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'; @@ -30,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. @@ -160,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; @@ -202,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()); } } @@ -216,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()); } } } @@ -275,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 ); }; @@ -292,7 +296,7 @@ export class GroupManager extends ObservableReactComponent<{}> { </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; @@ -302,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 @@ -310,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={{ @@ -335,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> ); @@ -344,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(() => { @@ -372,28 +386,59 @@ export class GroupManager extends ObservableReactComponent<{}> { return ( <div className="group-interface" style={{ background: SettingsManager.userBackgroundColor, color: SettingsManager.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> ))} @@ -404,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} />; } } |