a lot of ui stuff

2 files changed, 220 insertions, 34 deletions

diff --git a/src/client/util/GroupManager.scss b/src/client/util/GroupManager.scss
index e69de29bb..973a988d7 100644
--- a/src/client/util/GroupManager.scss
+++ b/src/client/util/GroupManager.scss
@@ -0,0 +1,167 @@
+@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;
+
+    button {
+        width: 100%;
+        align-self: center;
+        background: $darker-alt-accent;
+        margin-top: 4px;
+    }
+
+    .delete-button {
+        background: rgb(227, 86, 86);
+    }
+
+    .close-button {
+        position: absolute;
+        right: 1em;
+        top: 1em;
+        cursor: pointer;
+    }
+
+    .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: 17.5;
+
+                .group-name {
+                    position: relative;
+                    max-width: 65%;
+                }
+
+                button {
+                    position: absolute;
+                    width: 30%;
+                    right: 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
index 881583d37..2617047f7 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -12,9 +12,15 @@ 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<{}> {
 
@@ -23,7 +29,8 @@ export default class GroupManager extends React.Component<{}> {
     @observable private dialogueBoxOpacity: number = 1;
     @observable private overlayOpacity: number = 0.4;
     @observable private users: string[] = [];
-    @observable private selectedUsers: string[] | null = null;
+    @observable private selectedUsers: UserOptions[] | null = null;
+    private inputRef: React.RefObject<HTMLInputElement> = React.createRef();
 
     constructor(props: Readonly<{}>) {
         super(props);
@@ -65,7 +72,7 @@ export default class GroupManager extends React.Component<{}> {
     }
 
     getGroup(groupName: string): Doc | undefined {
-        const groupDoc = GroupManager.Instance.getAllGroups().find(group => group.name === groupName);
+        const groupDoc = GroupManager.Instance.getAllGroups().find(group => group.groupName === groupName);
         return groupDoc;
     }
 
@@ -74,6 +81,7 @@ export default class GroupManager extends React.Component<{}> {
     }
 
     hasEditAccess(groupDoc: Doc): boolean {
+        if (!groupDoc) return false;
         const accessList: string[] = JSON.parse(groupDoc.owners as string);
         return accessList.includes(Doc.CurrentUserEmail) || GroupManager.Instance.adminGroupMembers.includes(Doc.CurrentUserEmail);
     }
@@ -87,25 +95,17 @@ export default class GroupManager extends React.Component<{}> {
     }
 
     addGroup(groupDoc: Doc): boolean {
-        // const groupList = GroupManager.Instance.getAllGroups();
-        // groupList.push(groupDoc);
         if (GroupManager.Instance.GroupManagerDoc) {
             Doc.AddDocToList(GroupManager.Instance.GroupManagerDoc, "data", groupDoc);
-            // GroupManager.Instance.GroupManagerDoc.data = new List<Doc>(groupList);
             return true;
         }
         return false;
     }
 
     deleteGroup(groupName: string): boolean {
-        // const groupList = GroupManager.Instance.getAllGroups();
-        // const index = groupList.indexOf(groupDoc);
-        // if (index !== -1) {
-        // groupList.splice(index, 1);
         const groupDoc = GroupManager.Instance.getGroup(groupName);
         if (groupDoc) {
             if (GroupManager.Instance.GroupManagerDoc && GroupManager.Instance.hasEditAccess(groupDoc)) {
-                // GroupManager.Instance.GroupManagerDoc.data = new List<Doc>(groupList);
                 Doc.RemoveDocFromList(GroupManager.Instance.GroupManagerDoc, "data", groupDoc);
                 return true;
             }
@@ -134,44 +134,63 @@ export default class GroupManager extends React.Component<{}> {
 
     @action
     handleChange = (selectedOptions: any) => {
-        const castOptions = selectedOptions as { label: string, value: string }[];
-        console.log(castOptions);
-        this.selectedUsers = castOptions.map(option => option.value);
+        console.log(selectedOptions);
+        this.selectedUsers = selectedOptions as UserOptions[];
     }
 
     @action
-    resetSelection = () => {
-        console.log(this.selectedUsers?.[0]);
-        this.selectedUsers = null;
-    }
-
     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  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 groupInterface() {
         return (
-            <div className="settings-interface">
-                <div className="settings-heading">
+            <div className="group-interface">
+                <div className="group-heading">
                     <h1>Groups</h1>
                     <div className={"close-button"} onClick={this.close}>
                         <FontAwesomeIcon icon={fa.faWindowClose} size={"lg"} />
                     </div>
-                    <button onClick={this.resetSelection} style={{ width: "50%" }}>Create group</button>
                 </div>
-                <span style={{ width: "50%" }}>
-                    <Select
-                        isMulti={true}
-                        isSearchable={true}
-                        options={this.options}
-                        onChange={this.handleChange}
-                        placeholder={"Select users"}
-                        value={this.selectedUsers}
-                    />
-                </span>
-                <span>
-                    <input type="text" id="groupNameInput" />
-                </span>
+                <div className="group-body">
+                    <div className="group-create">
+                        <button onClick={this.createGroup}>Create group</button>
+                        <input ref={this.inputRef} 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>
+                                    {this.hasEditAccess(this.getGroup(group.groupName as string) as Doc) ? "Edit" : "View"}
+                                </button>
+                            </div>
+                        )}
+                    </div>
+                </div>
             </div>
         );
     }