From 6ad7fac6342204bc489ef49cb3ba8f450bfa3824 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Mon, 29 Jun 2020 16:57:47 +0530 Subject: refactored group view into new file --- src/client/util/GroupManager.scss | 56 +++------------------------ src/client/util/GroupManager.tsx | 27 +++++++------ src/client/util/GroupMemberView.scss | 68 ++++++++++++++++++++++++++++++++ src/client/util/GroupMemberView.tsx | 75 ++++++++++++++++++++++++++++++++++++ src/client/util/SharingManager.scss | 39 ++++++++++++++++--- src/client/util/SharingManager.tsx | 47 ++++++++++++++-------- 6 files changed, 228 insertions(+), 84 deletions(-) create mode 100644 src/client/util/GroupMemberView.scss create mode 100644 src/client/util/GroupMemberView.tsx (limited to 'src') diff --git a/src/client/util/GroupManager.scss b/src/client/util/GroupManager.scss index dea22703b..544a79e98 100644 --- a/src/client/util/GroupManager.scss +++ b/src/client/util/GroupManager.scss @@ -6,6 +6,11 @@ width: 450px; height: 300px; + .dialogue-box { + width: 450; + height: 300; + } + button { background: $lighter-alt-accent; outline: none; @@ -26,55 +31,6 @@ display: flex; flex-direction: column; - .dialogue-box { - width: 90%; - height: 80%; - - .editing-interface { - background-color: whitesmoke !important; - color: grey; - width: 100%; - height: 100%; - - .editing-header { - margin-bottom: 5; - - .group-buttons { - display: flex; - margin-top: 5; - - .add-member-dropdown { - width: 100%; - margin: 0 5; - } - } - } - - .editing-contents { - overflow-y: auto; - // max-height: 67%; - height: 67%; - width: 100%; - - .editing-row { - display: flex; - align-items: center; - border: 1px solid; - border-radius: 10px; - - .user-email { - // position: relative; - min-width: 65%; - word-break: break-all; - padding: 0 5; - } - } - } - - - } - } - .overlay { transform: translate(-20px, -20px); border-radius: 10px; @@ -95,7 +51,7 @@ right: 1em; top: 1em; cursor: pointer; - z-index: 1000; + z-index: 999; } .group-heading { diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx index aaba84202..885f9da8e 100644 --- a/src/client/util/GroupManager.tsx +++ b/src/client/util/GroupManager.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { observable, action, runInAction, computed, Lambda, reaction } from "mobx"; +import { observable, action, runInAction, computed } from "mobx"; import { SelectionManager } from "./SelectionManager"; import MainViewModal from "../views/MainViewModal"; import { observer } from "mobx-react"; @@ -13,10 +13,11 @@ import * as RequestPromise from "request-promise"; import Select from 'react-select'; import "./GroupManager.scss"; import { StrCast } from "../../fields/Types"; +import GroupMemberView from "./GroupMemberView"; library.add(fa.faWindowClose); -interface UserOptions { +export interface UserOptions { label: string; value: string; } @@ -25,12 +26,12 @@ interface UserOptions { export default class GroupManager extends React.Component<{}> { static Instance: GroupManager; - @observable private isOpen: boolean = false; // whether the GroupManager is to be displayed or not. + @observable isOpen: boolean = false; // whether the GroupManager is to be displayed or not. @observable private dialogueBoxOpacity: number = 1; // opacity of the dialogue box div of the MainViewModal. @observable private overlayOpacity: number = 0.4; // opacity of the overlay div of the MainViewModal. @observable private users: string[] = []; // list of users populated from the database. @observable private selectedUsers: UserOptions[] | null = null; // list of users selected in the "Select users" dropdown. - @observable private currentGroup: Opt; // the currently selected group. + @observable currentGroup: Opt; // the currently selected group. private inputRef: React.RefObject = React.createRef(); // the ref for the input box. constructor(props: Readonly<{}>) { @@ -144,7 +145,7 @@ export default class GroupManager extends React.Component<{}> { * @param groupName * @param memberEmails */ - createGroupDoc(groupName: string, memberEmails: string[]) { + createGroupDoc(groupName: string, memberEmails: string[] = []) { const groupDoc = new Doc; groupDoc.groupName = groupName; groupDoc.owners = JSON.stringify([Doc.CurrentUserEmail]); @@ -235,15 +236,11 @@ export default class GroupManager extends React.Component<{}> { alert("Please enter a group name"); return; } - if (!this.selectedUsers) { - alert("Please select users"); - return; - } if (this.getAllGroups().find(group => group.groupName === this.inputRef.current!.value)) { // why do I need a null check here? alert("Please select a unique group name"); return; } - this.createGroupDoc(this.inputRef.current.value, this.selectedUsers.map(user => user.value)); + this.createGroupDoc(this.inputRef.current.value, this.selectedUsers?.map(user => user.value)); this.selectedUsers = null; this.inputRef.current.value = ""; } @@ -300,13 +297,19 @@ export default class GroupManager extends React.Component<{}> { private get groupInterface() { return (
- + /> */} + {this.currentGroup ? + this.currentGroup = undefined} + /> + : null}

Groups

diff --git a/src/client/util/GroupMemberView.scss b/src/client/util/GroupMemberView.scss new file mode 100644 index 000000000..7833c485f --- /dev/null +++ b/src/client/util/GroupMemberView.scss @@ -0,0 +1,68 @@ +@import "../views/globalCssVariables"; + +.editing-interface { + background-color: whitesmoke !important; + color: grey; + width: 100%; + height: 100%; + + button { + background: $darker-alt-accent; + outline: none; + border-radius: 5px; + border: 0px; + color: #fcfbf7; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 75%; + padding: 10px; + margin: 10px; + transition: transform 0.2s; + margin: 2px; + } + + .memberView-closeButton { + position: absolute; + right: 1em; + top: 1em; + cursor: pointer; + z-index: 1000; + } + + .editing-header { + margin-bottom: 5; + + .group-buttons { + display: flex; + margin-top: 5; + + .add-member-dropdown { + width: 100%; + margin: 0 5; + } + } + } + + .editing-contents { + overflow-y: auto; + // max-height: 67%; + height: 67%; + width: 100%; + + .editing-row { + display: flex; + align-items: center; + // border: 1px solid; + // border-radius: 10px; + + .user-email { + // position: relative; + min-width: 65%; + word-break: break-all; + padding: 0 5; + } + } + } + + +} \ No newline at end of file diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx new file mode 100644 index 000000000..b2d75158e --- /dev/null +++ b/src/client/util/GroupMemberView.tsx @@ -0,0 +1,75 @@ +import * as React from "react"; +import MainViewModal from "../views/MainViewModal"; +import { observer } from "mobx-react"; +import GroupManager, { UserOptions } from "./GroupManager"; +import { library } from "@fortawesome/fontawesome-svg-core"; +import { StrCast } from "../../fields/Types"; +import { action } from "mobx"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import * as fa from '@fortawesome/free-solid-svg-icons'; +import Select from "react-select"; +import { Doc, Opt } from "../../fields/Doc"; +import "./GroupMemberView.scss"; + +library.add(fa.faWindowClose); + +interface GroupMemberViewProps { + group: Doc; + onCloseButtonClick: () => void; +} + +@observer +export default class GroupMemberView extends React.Component { + + private get editingInterface() { + const members: string[] = this.props.group ? JSON.parse(StrCast(this.props.group.members)) : []; + const options: UserOptions[] = this.props.group ? GroupManager.Instance.options.filter(option => !(JSON.parse(StrCast(this.props.group.members)) as string[]).includes(option.value)) : []; + return (!this.props.group ? null : +
+
+ {this.props.group.groupName} +
+ +
+ + {GroupManager.Instance.hasEditAccess(this.props.group) ? +
+
+ this.setInternalSharing({ user, notificationDoc }, e.currentTarget.value, undefined)} - > - {this.sharingOptions} - {user.email} +
+ +
); }) @@ -343,15 +353,18 @@ export default class SharingManager extends React.Component<{}> { key={StrCast(group.groupName)} className={"container"} > - {group.groupName} +
+ + +
); }) -- cgit v1.2.3-70-g09d2