aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/util/GroupManager.scss45
-rw-r--r--src/client/util/GroupManager.tsx120
2 files changed, 97 insertions, 68 deletions
diff --git a/src/client/util/GroupManager.scss b/src/client/util/GroupManager.scss
index 4df1b4758..dea22703b 100644
--- a/src/client/util/GroupManager.scss
+++ b/src/client/util/GroupManager.scss
@@ -50,7 +50,6 @@
}
}
-
.editing-contents {
overflow-y: auto;
// max-height: 67%;
@@ -169,57 +168,13 @@
margin: 2px 0;
}
- .error-text {
- color: #C40233;
- }
-
- .success-text {
- color: #009F6B;
- }
-
- p {
- padding: 0 0 .1em .2em;
- }
-
}
}
- .focus-span {
- text-decoration: underline;
- }
-
h1 {
color: $dark-color;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 120%;
}
-
- .container {
- display: block;
- position: relative;
- margin-top: 10px;
- margin-bottom: 10px;
- font-size: 22px;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- width: 700px;
- min-width: 700px;
- max-width: 700px;
- text-align: left;
- font-style: normal;
- font-size: 15;
- font-weight: normal;
- padding: 0;
-
- .padding {
- padding: 0 0 0 20px;
- color: black;
- }
-
-
-
- }
} \ No newline at end of file
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index 290f0e026..7f48ca014 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -1,18 +1,18 @@
import * as React from "react";
-import { observable, action, runInAction, computed } from "mobx";
+import { observable, action, runInAction, computed, Lambda, reaction } from "mobx";
import { SelectionManager } from "./SelectionManager";
import MainViewModal from "../views/MainViewModal";
import { observer } from "mobx-react";
import { Doc, DocListCast, Opt } from "../../fields/Doc";
-import { List } from "../../fields/List";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as fa from '@fortawesome/free-solid-svg-icons';
import { library } from "@fortawesome/fontawesome-svg-core";
-import SharingManager, { User } from "./SharingManager";
+import { User } from "./SharingManager";
import { Utils } from "../../Utils";
import * as RequestPromise from "request-promise";
import Select from 'react-select';
import "./GroupManager.scss";
+import { StrCast } from "../../fields/Types";
library.add(fa.faWindowClose);
@@ -25,19 +25,27 @@ interface UserOptions {
export default class GroupManager extends React.Component<{}> {
static Instance: GroupManager;
- @observable private isOpen: boolean = false; // whether the menu is open or not
- @observable private dialogueBoxOpacity: number = 1;
- @observable private overlayOpacity: number = 0.4;
- @observable private users: string[] = [];
- @observable private selectedUsers: UserOptions[] | null = null;
- @observable private currentGroup: Opt<Doc>;
- private inputRef: React.RefObject<HTMLInputElement> = React.createRef();
+ @observable private 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<Doc>; // the currently selected group.
+ private inputRef: React.RefObject<HTMLInputElement> = React.createRef(); // the ref for the input box.
constructor(props: Readonly<{}>) {
super(props);
GroupManager.Instance = this;
}
+ // sets up the list of users
+ componentDidMount() {
+ this.populateUsers().then(resolved => runInAction(() => this.users = resolved));
+ }
+
+ /**
+ * Fetches the list of users stored on the database and @returns a list of the emails.
+ */
populateUsers = async () => {
const userList: User[] = JSON.parse(await RequestPromise.get(Utils.prepend("/getUsers")));
const currentUserIndex = userList.findIndex(user => user.email === Doc.CurrentUserEmail);
@@ -45,45 +53,77 @@ export default class GroupManager extends React.Component<{}> {
return userList.map(user => user.email);
}
+ /**
+ * @returns the options to be rendered in the dropdown menu to add users and create a group.
+ */
@computed get options() {
return this.users.map(user => ({ label: user, value: user }));
}
- open = action(() => {
+ /**
+ * Makes the GroupManager visible.
+ */
+ @action
+ open = () => {
SelectionManager.DeselectAll();
this.isOpen = true;
- this.populateUsers().then(resolved => runInAction(() => this.users = resolved));
- });
+ }
- close = action(() => {
+ /**
+ * Hides the GroupManager.
+ */
+ @action
+ close = () => {
this.isOpen = false;
this.currentGroup = undefined;
- });
+ }
+ /**
+ * @returns the database of groups.
+ */
get GroupManagerDoc(): Doc | undefined {
return Doc.UserDoc().globalGroupDatabase as Doc;
}
+ /**
+ * @returns a list of all group documents.
+ */
getAllGroups(): Doc[] {
const groupDoc = this.GroupManagerDoc;
return groupDoc ? DocListCast(groupDoc.data) : [];
}
+ /**
+ * @returns a group document based on the group name.
+ * @param groupName
+ */
getGroup(groupName: string): Doc | undefined {
const groupDoc = this.getAllGroups().find(group => group.groupName === groupName);
return groupDoc;
}
+ /**
+ * @returns the members of the admin group.
+ */
get adminGroupMembers(): string[] {
- return this.getGroup("admin") ? JSON.parse(this.getGroup("admin")!.members as string) : "";
+ return this.getGroup("admin") ? JSON.parse(StrCast(this.getGroup("admin")!.members)) : "";
}
+ /**
+ * @returns a boolean indicating whether the current user has access to edit group documents.
+ * @param groupDoc
+ */
hasEditAccess(groupDoc: Doc): boolean {
if (!groupDoc) return false;
- const accessList: string[] = JSON.parse(groupDoc.owners as string);
+ const accessList: string[] = JSON.parse(StrCast(groupDoc.owners));
return accessList.includes(Doc.CurrentUserEmail) || this.adminGroupMembers?.includes(Doc.CurrentUserEmail);
}
+ /**
+ * Helper method that sets up the group document.
+ * @param groupName
+ * @param memberEmails
+ */
createGroupDoc(groupName: string, memberEmails: string[]) {
const groupDoc = new Doc;
groupDoc.groupName = groupName;
@@ -92,6 +132,10 @@ export default class GroupManager extends React.Component<{}> {
this.addGroup(groupDoc);
}
+ /**
+ * Helper method that adds a group document to the database of group documents and @returns whether it was successfully added or not.
+ * @param groupDoc
+ */
addGroup(groupDoc: Doc): boolean {
if (this.GroupManagerDoc) {
Doc.AddDocToList(this.GroupManagerDoc, "data", groupDoc);
@@ -100,6 +144,10 @@ export default class GroupManager extends React.Component<{}> {
return false;
}
+ /**
+ * Deletes a group from the database of group documents and @returns whether the group was deleted or not.
+ * @param group
+ */
deleteGroup(group: Doc): boolean {
if (group) {
if (this.GroupManagerDoc && this.hasEditAccess(group)) {
@@ -113,33 +161,54 @@ export default class GroupManager extends React.Component<{}> {
return false;
}
+ /**
+ * Adds a member to a group.
+ * @param groupDoc
+ * @param email
+ */
addMemberToGroup(groupDoc: Doc, email: string) {
if (this.hasEditAccess(groupDoc)) {
- const memberList: string[] = JSON.parse(groupDoc.members as string);
+ const memberList: string[] = JSON.parse(StrCast(groupDoc.members));
!memberList.includes(email) && memberList.push(email);
groupDoc.members = JSON.stringify(memberList);
}
}
+ /**
+ * Removes a member from the group.
+ * @param groupDoc
+ * @param email
+ */
removeMemberFromGroup(groupDoc: Doc, email: string) {
if (this.hasEditAccess(groupDoc)) {
- const memberList: string[] = JSON.parse(groupDoc.members as string);
+ const memberList: string[] = JSON.parse(StrCast(groupDoc.members));
const index = memberList.indexOf(email);
index !== -1 && memberList.splice(index, 1);
groupDoc.members = JSON.stringify(memberList);
}
}
+ /**
+ * Handles changes in the users selected in the "Select users" dropdown.
+ * @param selectedOptions
+ */
@action
handleChange = (selectedOptions: any) => {
console.log(selectedOptions);
this.selectedUsers = selectedOptions as UserOptions[];
}
+ /**
+ * Creates the group when the enter key has been pressed (when in the input).
+ * @param e
+ */
handleKeyDown = (e: React.KeyboardEvent) => {
e.key === "Enter" && this.createGroup();
}
+ /**
+ * Handles the input of required fields in the setup of a group and resets the relevant variables.
+ */
@action
createGroup = () => {
if (!this.inputRef.current?.value) {
@@ -159,9 +228,12 @@ export default class GroupManager extends React.Component<{}> {
this.inputRef.current.value = "";
}
+ /**
+ * A getter that @returns the interface rendered to view an individual group.
+ */
private get editingInterface() {
- const members: string[] = this.currentGroup ? JSON.parse(this.currentGroup.members as string) : [];
- const options: UserOptions[] = this.currentGroup ? this.options.filter(option => !(JSON.parse(this.currentGroup!.members as string) as string[]).includes(option.value)) : [];
+ const members: string[] = this.currentGroup ? JSON.parse(StrCast(this.currentGroup.members)) : [];
+ const options: UserOptions[] = this.currentGroup ? this.options.filter(option => !(JSON.parse(StrCast(this.currentGroup!.members)) as string[]).includes(option.value)) : [];
return (!this.currentGroup ? null :
<div className="editing-interface">
<div className="editing-header">
@@ -202,7 +274,9 @@ export default class GroupManager extends React.Component<{}> {
}
-
+ /**
+ * A getter that @returns the main interface for the GroupManager.
+ */
private get groupInterface() {
return (
<div className="group-interface">
@@ -238,7 +312,7 @@ export default class GroupManager extends React.Component<{}> {
<div className="group-row">
<div className="group-name">{group.groupName}</div>
<button onClick={action(() => this.currentGroup = group)}>
- {this.hasEditAccess(this.getGroup(group.groupName as string) as Doc) ? "Edit" : "View"}
+ {this.hasEditAccess(this.getGroup(StrCast(group.groupName)) as Doc) ? "Edit" : "View"}
</button>
</div>
)}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 18:28:18 +0000