aboutsummaryrefslogtreecommitdiff
path: root/src/client/util
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/util')
-rw-r--r--src/client/util/CurrentUserUtils.ts1
-rw-r--r--src/client/util/GroupManager.scss225
-rw-r--r--src/client/util/GroupManager.tsx263
-rw-r--r--src/client/util/LinkManager.ts15
-rw-r--r--src/client/util/SettingsManager.scss1
-rw-r--r--src/client/util/SharingManager.tsx4
6 files changed, 496 insertions, 13 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 76c1fc9f7..4a188384c 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -776,6 +776,7 @@ export class CurrentUserUtils {
await this.setupSidebarButtons(doc); // the pop-out left sidebar of tools/panels
doc.globalLinkDatabase = Docs.Prototypes.MainLinkDocument();
doc.globalScriptDatabase = Docs.Prototypes.MainScriptDocument();
+ doc.globalGroupDatabase = Docs.Prototypes.MainGroupDocument();
// setup reactions to change the highlights on the undo/redo buttons -- would be better to encode this in the undo/redo buttons, but the undo/redo stacks are not wired up that way yet
doc["dockedBtn-undo"] && reaction(() => UndoManager.undoStack.slice(), () => Doc.GetProto(doc["dockedBtn-undo"] as Doc).opacity = UndoManager.CanUndo() ? 1 : 0.4, { fireImmediately: true });
diff --git a/src/client/util/GroupManager.scss b/src/client/util/GroupManager.scss
new file mode 100644
index 000000000..4df1b4758
--- /dev/null
+++ b/src/client/util/GroupManager.scss
@@ -0,0 +1,225 @@
+@import "../views/globalCssVariables";
+
+.group-interface {
+ background-color: whitesmoke !important;
+ color: grey;
+ width: 450px;
+ height: 300px;
+
+ button {
+ background: $lighter-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;
+ }
+}
+
+.group-interface {
+ 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;
+ }
+
+ button {
+ width: 100%;
+ align-self: center;
+ background: $darker-alt-accent;
+ }
+
+ .delete-button {
+ background: rgb(227, 86, 86);
+ }
+
+ .close-button {
+ position: absolute;
+ right: 1em;
+ top: 1em;
+ cursor: pointer;
+ z-index: 1000;
+ }
+
+ .group-heading {
+ letter-spacing: .5em;
+ }
+
+
+ .group-body {
+ display: flex;
+ justify-content: space-between;
+ max-height: 80%;
+
+ .group-create {
+ display: flex;
+ flex-direction: column;
+ flex-basis: 30%;
+ margin-left: 5px;
+
+ input {
+ border-radius: 5px;
+ border: none;
+ padding: 4px;
+ min-width: 100%;
+ margin: 4px 0 4px 0;
+ }
+
+ }
+
+ .group-content {
+ padding-left: 1em;
+ padding-right: 1em;
+ justify-content: space-around;
+ text-align: left;
+
+ overflow-y: auto;
+ width: 100%;
+
+ .group-row {
+ display: flex;
+ position: relative;
+ margin-bottom: 5px;
+ min-height: 40px;
+ border: 1px solid;
+ border-radius: 10px;
+ align-items: center;
+
+ .group-name {
+ position: relative;
+ max-width: 65%;
+ left: 10;
+ }
+
+ button {
+ position: absolute;
+ width: 30%;
+ right: 2;
+ margin-top: 0;
+ }
+ }
+
+ ::placeholder {
+ color: $intermediate-color;
+ }
+
+ input {
+ border-radius: 5px;
+ border: none;
+ padding: 4px;
+ min-width: 100%;
+ 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
new file mode 100644
index 000000000..290f0e026
--- /dev/null
+++ b/src/client/util/GroupManager.tsx
@@ -0,0 +1,263 @@
+import * as React from "react";
+import { observable, action, runInAction, computed } 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 { Utils } from "../../Utils";
+import * as RequestPromise from "request-promise";
+import Select from 'react-select';
+import "./GroupManager.scss";
+
+library.add(fa.faWindowClose);
+
+interface UserOptions {
+ label: string;
+ value: string;
+}
+
+@observer
+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();
+
+ constructor(props: Readonly<{}>) {
+ super(props);
+ GroupManager.Instance = this;
+ }
+
+ populateUsers = async () => {
+ const userList: User[] = JSON.parse(await RequestPromise.get(Utils.prepend("/getUsers")));
+ const currentUserIndex = userList.findIndex(user => user.email === Doc.CurrentUserEmail);
+ currentUserIndex !== -1 && userList.splice(currentUserIndex, 1);
+ return userList.map(user => user.email);
+ }
+
+ @computed get options() {
+ return this.users.map(user => ({ label: user, value: user }));
+ }
+
+ open = action(() => {
+ SelectionManager.DeselectAll();
+ this.isOpen = true;
+ this.populateUsers().then(resolved => runInAction(() => this.users = resolved));
+ });
+
+ close = action(() => {
+ this.isOpen = false;
+ this.currentGroup = undefined;
+ });
+
+ get GroupManagerDoc(): Doc | undefined {
+ return Doc.UserDoc().globalGroupDatabase as Doc;
+ }
+
+ getAllGroups(): Doc[] {
+ const groupDoc = this.GroupManagerDoc;
+ return groupDoc ? DocListCast(groupDoc.data) : [];
+ }
+
+ getGroup(groupName: string): Doc | undefined {
+ const groupDoc = this.getAllGroups().find(group => group.groupName === groupName);
+ return groupDoc;
+ }
+
+ get adminGroupMembers(): string[] {
+ return this.getGroup("admin") ? JSON.parse(this.getGroup("admin")!.members as string) : "";
+ }
+
+ hasEditAccess(groupDoc: Doc): boolean {
+ if (!groupDoc) return false;
+ const accessList: string[] = JSON.parse(groupDoc.owners as string);
+ return accessList.includes(Doc.CurrentUserEmail) || this.adminGroupMembers?.includes(Doc.CurrentUserEmail);
+ }
+
+ createGroupDoc(groupName: string, memberEmails: string[]) {
+ const groupDoc = new Doc;
+ groupDoc.groupName = groupName;
+ groupDoc.owners = JSON.stringify([Doc.CurrentUserEmail]);
+ groupDoc.members = JSON.stringify(memberEmails);
+ this.addGroup(groupDoc);
+ }
+
+ addGroup(groupDoc: Doc): boolean {
+ if (this.GroupManagerDoc) {
+ Doc.AddDocToList(this.GroupManagerDoc, "data", groupDoc);
+ return true;
+ }
+ return false;
+ }
+
+ deleteGroup(group: Doc): boolean {
+ if (group) {
+ if (this.GroupManagerDoc && this.hasEditAccess(group)) {
+ Doc.RemoveDocFromList(this.GroupManagerDoc, "data", group);
+ if (group === this.currentGroup) {
+ runInAction(() => this.currentGroup = undefined);
+ }
+ return true;
+ }
+ }
+ return false;
+ }
+
+ addMemberToGroup(groupDoc: Doc, email: string) {
+ if (this.hasEditAccess(groupDoc)) {
+ const memberList: string[] = JSON.parse(groupDoc.members as string);
+ !memberList.includes(email) && memberList.push(email);
+ groupDoc.members = JSON.stringify(memberList);
+ }
+ }
+
+ removeMemberFromGroup(groupDoc: Doc, email: string) {
+ if (this.hasEditAccess(groupDoc)) {
+ const memberList: string[] = JSON.parse(groupDoc.members as string);
+ const index = memberList.indexOf(email);
+ index !== -1 && memberList.splice(index, 1);
+ groupDoc.members = JSON.stringify(memberList);
+ }
+ }
+
+ @action
+ handleChange = (selectedOptions: any) => {
+ console.log(selectedOptions);
+ this.selectedUsers = selectedOptions as UserOptions[];
+ }
+
+ handleKeyDown = (e: React.KeyboardEvent) => {
+ e.key === "Enter" && this.createGroup();
+ }
+
+ @action
+ createGroup = () => {
+ if (!this.inputRef.current?.value) {
+ 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.selectedUsers = null;
+ this.inputRef.current.value = "";
+ }
+
+ 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)) : [];
+ return (!this.currentGroup ? null :
+ <div className="editing-interface">
+ <div className="editing-header">
+ <b>{this.currentGroup.groupName}</b>
+ <div className={"close-button"} onClick={action(() => this.currentGroup = undefined)}>
+ <FontAwesomeIcon icon={fa.faWindowClose} size={"lg"} />
+ </div>
+
+ {this.hasEditAccess(this.currentGroup) ?
+ <div className="group-buttons">
+ <div className="add-member-dropdown">
+ <Select
+ // isMulti={true}
+ isSearchable={true}
+ options={options}
+ onChange={selectedOption => this.addMemberToGroup(this.currentGroup!, (selectedOption as UserOptions).value)}
+ placeholder={"Add members"}
+ value={null}
+ closeMenuOnSelect={true}
+ />
+ </div>
+ <button onClick={() => this.deleteGroup(this.currentGroup!)}>Delete group</button>
+ </div> :
+ null}
+ </div>
+ <div className="editing-contents">
+ {members.map(member => (
+ <div className="editing-row">
+ <div className="user-email">
+ {member}
+ </div>
+ {this.hasEditAccess(this.currentGroup!) ? <button onClick={() => this.removeMemberFromGroup(this.currentGroup!, member)}> Remove </button> : null}
+ </div>
+ ))}
+ </div>
+ </div>
+ );
+
+ }
+
+
+ private get groupInterface() {
+ return (
+ <div className="group-interface">
+ <MainViewModal
+ contents={this.editingInterface}
+ isDisplayed={this.currentGroup ? true : false}
+ interactive={true}
+ dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
+ overlayDisplayedOpacity={this.overlayOpacity}
+ />
+ <div className="group-heading">
+ <h1>Groups</h1>
+ <div className={"close-button"} onClick={this.close}>
+ <FontAwesomeIcon icon={fa.faWindowClose} size={"lg"} />
+ </div>
+ </div>
+ <div className="group-body">
+ <div className="group-create">
+ <button onClick={this.createGroup}>Create group</button>
+ <input ref={this.inputRef} onKeyDown={this.handleKeyDown} type="text" placeholder="Group name" />
+ <Select
+ isMulti={true}
+ isSearchable={true}
+ options={this.options}
+ onChange={this.handleChange}
+ placeholder={"Select users"}
+ value={this.selectedUsers}
+ closeMenuOnSelect={false}
+ />
+ </div>
+ <div className="group-content">
+ {this.getAllGroups().map(group =>
+ <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"}
+ </button>
+ </div>
+ )}
+ </div>
+ </div>
+ </div>
+ );
+ }
+
+ render() {
+ return (
+ <MainViewModal
+ contents={this.groupInterface}
+ isDisplayed={this.isOpen}
+ interactive={true}
+ dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
+ overlayDisplayedOpacity={this.overlayOpacity}
+ />
+ );
+ }
+
+} \ No newline at end of file
diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index 47b2541bd..94a0da985 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -41,24 +41,17 @@ export class LinkManager {
}
public addLink(linkDoc: Doc): boolean {
- const linkList = LinkManager.Instance.getAllLinks();
- linkList.push(linkDoc);
if (LinkManager.Instance.LinkManagerDoc) {
- LinkManager.Instance.LinkManagerDoc.data = new List<Doc>(linkList);
+ Doc.AddDocToList(LinkManager.Instance.LinkManagerDoc, "data", linkDoc);
return true;
}
return false;
}
public deleteLink(linkDoc: Doc): boolean {
- const linkList = LinkManager.Instance.getAllLinks();
- const index = LinkManager.Instance.getAllLinks().indexOf(linkDoc);
- if (index > -1) {
- linkList.splice(index, 1);
- if (LinkManager.Instance.LinkManagerDoc) {
- LinkManager.Instance.LinkManagerDoc.data = new List<Doc>(linkList);
- return true;
- }
+ if (LinkManager.Instance.LinkManagerDoc) {
+ Doc.RemoveDocFromList(LinkManager.Instance.LinkManagerDoc, "data", linkDoc);
+ return true;
}
return false;
}
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 6513cb223..fa2609ca2 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -41,6 +41,7 @@
position: absolute;
right: 1em;
top: 1em;
+ cursor: pointer;
}
.settings-heading {
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index dc67145fc..2e660e819 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -28,14 +28,14 @@ export interface User {
export enum SharingPermissions {
None = "Not Shared",
View = "Can View",
- Comment = "Can Comment",
+ Add = "Can Add and Comment",
Edit = "Can Edit"
}
const ColorMapping = new Map<string, string>([
[SharingPermissions.None, "red"],
[SharingPermissions.View, "maroon"],
- [SharingPermissions.Comment, "blue"],
+ [SharingPermissions.Add, "blue"],
[SharingPermissions.Edit, "green"]
]);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-25 13:10:34 +0000