From 467afe6346bf3188461721fa78eed0f9ac214da7 Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Wed, 1 Jul 2020 16:55:51 +0530
Subject: ui changes + related functionality changes

---
 src/client/util/GroupMemberView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/client/util/GroupMemberView.tsx')

diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx
index b2d75158e..c844892b1 100644
--- a/src/client/util/GroupMemberView.tsx
+++ b/src/client/util/GroupMemberView.tsx
@@ -8,7 +8,7 @@ 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 { Doc } from "../../fields/Doc";
 import "./GroupMemberView.scss";
 
 library.add(fa.faWindowClose);
@@ -44,7 +44,7 @@ export default class GroupMemberView extends React.Component<GroupMemberViewProp
                                     closeMenuOnSelect={true}
                                 />
                             </div>
-                            <button onClick={() => GroupManager.Instance.deleteGroup(this.props.group)}>Delete group</button>
+                            <button onClick={() => console.log(GroupManager.Instance.deleteGroup(this.props.group))}>Delete group</button>
                         </div> :
                         null}
                 </div>
-- 
cgit v1.2.3-70-g09d2


From 1410392575b411f49601ce039787b6052542b711 Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Fri, 3 Jul 2020 21:50:56 +0530
Subject: can now exit modal by clicking outside it

---
 src/client/apis/GoogleAuthenticationManager.tsx |  1 +
 src/client/util/GroupManager.tsx                |  1 +
 src/client/util/GroupMemberView.tsx             |  1 +
 src/client/util/SettingsManager.tsx             |  1 +
 src/client/util/SharingManager.tsx              |  1 +
 src/client/views/DictationOverlay.tsx           |  1 +
 src/client/views/MainViewModal.tsx              | 35 +++++++++++++++++++++++++
 src/mobile/AudioUpload.tsx                      |  1 +
 src/mobile/ImageUpload.tsx                      |  1 +
 9 files changed, 43 insertions(+)

(limited to 'src/client/util/GroupMemberView.tsx')

diff --git a/src/client/apis/GoogleAuthenticationManager.tsx b/src/client/apis/GoogleAuthenticationManager.tsx
index bf4469aeb..5a2bdb13b 100644
--- a/src/client/apis/GoogleAuthenticationManager.tsx
+++ b/src/client/apis/GoogleAuthenticationManager.tsx
@@ -157,6 +157,7 @@ export default class GoogleAuthenticationManager extends React.Component<{}> {
                 contents={this.renderPrompt}
                 overlayDisplayedOpacity={0.9}
                 dialogueBoxStyle={this.dialogueBoxStyle}
+                closeOnExternalClick={() => this.isOpen = false}
             />
         );
     }
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index 220916ba7..0e710457e 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -387,6 +387,7 @@ export default class GroupManager extends React.Component<{}> {
                 interactive={true}
                 dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
                 overlayDisplayedOpacity={this.overlayOpacity}
+                closeOnExternalClick={this.close}
             />
         );
     }
diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx
index c844892b1..4377a1428 100644
--- a/src/client/util/GroupMemberView.tsx
+++ b/src/client/util/GroupMemberView.tsx
@@ -68,6 +68,7 @@ export default class GroupMemberView extends React.Component<GroupMemberViewProp
             isDisplayed={true}
             interactive={true}
             contents={this.editingInterface}
+            closeOnExternalClick={this.props.onCloseButtonClick}
         />;
     }
 
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 9888cce48..fa2b20095 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -134,6 +134,7 @@ export default class SettingsManager extends React.Component<{}> {
                 interactive={true}
                 dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
                 overlayDisplayedOpacity={this.overlayOpacity}
+                closeOnExternalClick={this.close}
             />
         );
     }
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 372b6172d..e74824581 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -559,6 +559,7 @@ export default class SharingManager extends React.Component<{}> {
                 interactive={true}
                 dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
                 overlayDisplayedOpacity={this.overlayOpacity}
+                closeOnExternalClick={this.close}
             />
         );
     }
diff --git a/src/client/views/DictationOverlay.tsx b/src/client/views/DictationOverlay.tsx
index 65770c0bb..9ed14509f 100644
--- a/src/client/views/DictationOverlay.tsx
+++ b/src/client/views/DictationOverlay.tsx
@@ -66,6 +66,7 @@ export class DictationOverlay extends React.Component {
             interactive={false}
             dialogueBoxStyle={dialogueBoxStyle}
             overlayStyle={overlayStyle}
+            closeOnExternalClick={this.initiateDictationFade}
         />);
     }
 }
\ No newline at end of file
diff --git a/src/client/views/MainViewModal.tsx b/src/client/views/MainViewModal.tsx
index c6b3532e8..6041593b8 100644
--- a/src/client/views/MainViewModal.tsx
+++ b/src/client/views/MainViewModal.tsx
@@ -1,5 +1,8 @@
 import * as React from 'react';
 import "./MainViewModal.scss";
+import { Opt } from '../../fields/Doc';
+import { Lambda, reaction } from 'mobx';
+import { observer } from 'mobx-react';
 
 export interface MainViewOverlayProps {
     isDisplayed: boolean;
@@ -9,10 +12,41 @@ export interface MainViewOverlayProps {
     overlayStyle?: React.CSSProperties;
     dialogueBoxDisplayedOpacity?: number;
     overlayDisplayedOpacity?: number;
+    closeOnExternalClick?: () => void;
 }
 
+@observer
 export default class MainViewModal extends React.Component<MainViewOverlayProps> {
 
+    private ref: React.RefObject<HTMLDivElement> = React.createRef();
+    private displayedListenerDisposer: Opt<Lambda>;
+
+    componentDidMount() {
+
+        document.removeEventListener("click", this.close);
+
+        this.displayedListenerDisposer = reaction(() => this.props.isDisplayed, (isDisplayed) => {
+            if (isDisplayed) document.addEventListener("click", this.close);
+            else document.removeEventListener("click", this.close);
+        });
+    }
+
+    componentWillUnmount() {
+        this.displayedListenerDisposer?.();
+        document.removeEventListener("click", this.close);
+    }
+
+    close = (e: MouseEvent) => {
+
+        const { left, right, top, bottom } = this.ref.current!.getBoundingClientRect();
+
+        if (e.clientX === 0 && e.clientY === 0) return; // why does this happen?
+        if (e.clientX < left || e.clientX > right || e.clientY > bottom || e.clientY < top) {
+            this.props.closeOnExternalClick?.();
+        }
+
+    }
+
     render() {
         const p = this.props;
         const dialogueOpacity = p.dialogueBoxDisplayedOpacity || 1;
@@ -26,6 +60,7 @@ export default class MainViewModal extends React.Component<MainViewOverlayProps>
                         ...(p.dialogueBoxStyle || {}),
                         opacity: p.isDisplayed ? dialogueOpacity : 0
                     }}
+                    ref={this.ref}
                 >{p.contents}</div>
                 <div
                     className={"overlay"}
diff --git a/src/mobile/AudioUpload.tsx b/src/mobile/AudioUpload.tsx
index 590bf8f9d..b75102e43 100644
--- a/src/mobile/AudioUpload.tsx
+++ b/src/mobile/AudioUpload.tsx
@@ -143,6 +143,7 @@ export class AudioUpload extends React.Component {
                 interactive={true}
                 dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
                 overlayDisplayedOpacity={this.overlayOpacity}
+                closeOnExternalClick={this.closeUpload}
             />
         );
     }
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 5ea626d52..6a5834f52 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -172,6 +172,7 @@ export class Uploader extends React.Component<ImageUploadProps> {
                 interactive={true}
                 dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
                 overlayDisplayedOpacity={this.overlayOpacity}
+                closeOnExternalClick={this.closeUpload}
             />
         );
     }
-- 
cgit v1.2.3-70-g09d2


From 9cc98267457b0d69d4699b27d881430c169c2c2a Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Sun, 5 Jul 2020 23:35:00 +0530
Subject: simplified exit on outside click + rotating arrow in dropdown menu

---
 src/client/util/GroupManager.tsx    |  7 +++++++
 src/client/util/GroupMemberView.tsx |  7 +++++++
 src/client/views/MainViewModal.tsx  | 33 +--------------------------------
 3 files changed, 15 insertions(+), 32 deletions(-)

(limited to 'src/client/util/GroupMemberView.tsx')

diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index 0e710457e..b14dcf55b 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -362,6 +362,13 @@ export default class GroupManager extends React.Component<{}> {
                             placeholder={"Select users"}
                             value={this.selectedUsers}
                             closeMenuOnSelect={false}
+                            styles={{
+                                dropdownIndicator: (base, state) => ({
+                                    ...base,
+                                    transition: '0.5s all ease',
+                                    transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : undefined
+                                })
+                            }}
                         />
                     </div>
                     <div className="group-content">
diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx
index 4377a1428..cc279b6b2 100644
--- a/src/client/util/GroupMemberView.tsx
+++ b/src/client/util/GroupMemberView.tsx
@@ -42,6 +42,13 @@ export default class GroupMemberView extends React.Component<GroupMemberViewProp
                                     placeholder={"Add members"}
                                     value={null}
                                     closeMenuOnSelect={true}
+                                    styles={{
+                                        dropdownIndicator: (base, state) => ({
+                                            ...base,
+                                            transition: '0.5s all ease',
+                                            transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : undefined
+                                        })
+                                    }}
                                 />
                             </div>
                             <button onClick={() => console.log(GroupManager.Instance.deleteGroup(this.props.group))}>Delete group</button>
diff --git a/src/client/views/MainViewModal.tsx b/src/client/views/MainViewModal.tsx
index 2bdd159c9..0b73a6ad7 100644
--- a/src/client/views/MainViewModal.tsx
+++ b/src/client/views/MainViewModal.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react';
 import "./MainViewModal.scss";
-import { Opt } from '../../fields/Doc';
-import { Lambda, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 
 export interface MainViewOverlayProps {
@@ -18,35 +16,6 @@ export interface MainViewOverlayProps {
 @observer
 export default class MainViewModal extends React.Component<MainViewOverlayProps> {
 
-    private ref: React.RefObject<HTMLDivElement> = React.createRef();
-    private displayedListenerDisposer: Opt<Lambda>;
-
-    componentDidMount() {
-
-        document.removeEventListener("pointerdown", this.close);
-
-        this.displayedListenerDisposer = reaction(() => this.props.isDisplayed, (isDisplayed) => {
-            if (isDisplayed) document.addEventListener("pointerdown", this.close);
-            else document.removeEventListener("pointerdown", this.close);
-        });
-    }
-
-    componentWillUnmount() {
-        this.displayedListenerDisposer?.();
-        document.removeEventListener("pointerdown", this.close);
-    }
-
-    close = (e: PointerEvent) => {
-
-        const { left, right, top, bottom } = this.ref.current!.getBoundingClientRect();
-
-        if (e.clientX === 0 && e.clientY === 0) return; // why does this happen?
-        if (e.clientX < left || e.clientX > right || e.clientY > bottom || e.clientY < top) {
-            this.props.closeOnExternalClick?.();
-        }
-
-    }
-
     render() {
         const p = this.props;
         const dialogueOpacity = p.dialogueBoxDisplayedOpacity || 1;
@@ -60,10 +29,10 @@ export default class MainViewModal extends React.Component<MainViewOverlayProps>
                         ...(p.dialogueBoxStyle || {}),
                         opacity: p.isDisplayed ? dialogueOpacity : 0
                     }}
-                    ref={this.ref}
                 >{p.contents}</div>
                 <div
                     className={"overlay"}
+                    onClick={this.props?.closeOnExternalClick}
                     style={{
                         backgroundColor: "gainsboro",
                         ...(p.overlayStyle || {}),
-- 
cgit v1.2.3-70-g09d2


From 12285b8c0aff514a2345874508c35b6de1026ef4 Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Thu, 9 Jul 2020 12:25:46 +0530
Subject: acls now work I think + some cleanup

---
 src/client/DocServer.ts                            |  1 -
 src/client/util/GroupManager.tsx                   | 13 +++-
 src/client/util/GroupMemberView.tsx                |  2 +-
 src/client/util/SharingManager.tsx                 |  2 -
 src/client/views/DocComponent.tsx                  |  1 -
 src/client/views/GlobalKeyHandler.ts               |  2 +
 src/client/views/collections/CollectionView.tsx    | 21 +++---
 src/client/views/nodes/DocumentContentsView.tsx    |  1 -
 src/client/views/nodes/DocumentView.tsx            | 22 +++---
 .../views/nodes/formattedText/FormattedTextBox.tsx |  1 -
 src/fields/Doc.ts                                  | 24 +------
 src/fields/util.ts                                 | 84 +++++++++++-----------
 12 files changed, 84 insertions(+), 90 deletions(-)

(limited to 'src/client/util/GroupMemberView.tsx')

diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts
index 860a8fd92..bac324c77 100644
--- a/src/client/DocServer.ts
+++ b/src/client/DocServer.ts
@@ -40,7 +40,6 @@ export namespace DocServer {
 
     export var PlaygroundFields: string[];
     export function setPlaygroundFields(livePlaygroundFields: string[]) {
-        console.log("here");
         DocServer.PlaygroundFields = livePlaygroundFields;
         livePlaygroundFields.forEach(f => DocServer.setFieldWriteMode(f, DocServer.WriteMode.LivePlayground));
     }
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index 83b206f94..23bdd248b 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -14,6 +14,7 @@ import Select from 'react-select';
 import "./GroupManager.scss";
 import { StrCast } from "../../fields/Types";
 import GroupMemberView from "./GroupMemberView";
+import { setGroups } from "../../fields/util";
 
 library.add(fa.faWindowClose);
 
@@ -54,7 +55,7 @@ export default class GroupManager extends React.Component<{}> {
                 if (members.includes(Doc.CurrentUserEmail)) this.currentUserGroups.push(StrCast(group.groupName));
             });
         })
-            .finally(() => console.log(this.currentUserGroups));
+            .finally(() => setGroups(this.currentUserGroups));
 
         // (this.GroupManagerDoc?.data as List<Doc>).forEach(group => {
         //     Promise.resolve(group).then(resolvedGroup => {
@@ -178,6 +179,10 @@ export default class GroupManager extends React.Component<{}> {
         groupDoc.groupName = groupName;
         groupDoc.owners = JSON.stringify([Doc.CurrentUserEmail]);
         groupDoc.members = JSON.stringify(memberEmails);
+        if (memberEmails.includes(Doc.CurrentUserEmail)) {
+            this.currentUserGroups.push(groupName);
+            setGroups(this.currentUserGroups);
+        }
         this.addGroup(groupDoc);
     }
 
@@ -204,6 +209,12 @@ export default class GroupManager extends React.Component<{}> {
                 // SharingManager.Instance.setInternalGroupSharing(group, "Not Shared");
                 Doc.RemoveDocFromList(this.GroupManagerDoc, "data", group);
                 SharingManager.Instance.removeGroup(group);
+                const members: string[] = JSON.parse(StrCast(group.members));
+                if (members.includes(Doc.CurrentUserEmail)) {
+                    const index = this.currentUserGroups.findIndex(groupName => groupName === group.groupName);
+                    index !== -1 && this.currentUserGroups.splice(index, 1);
+                    setGroups(this.currentUserGroups);
+                }
                 if (group === this.currentGroup) {
                     runInAction(() => this.currentGroup = undefined);
                 }
diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx
index cc279b6b2..742caa676 100644
--- a/src/client/util/GroupMemberView.tsx
+++ b/src/client/util/GroupMemberView.tsx
@@ -51,7 +51,7 @@ export default class GroupMemberView extends React.Component<GroupMemberViewProp
                                     }}
                                 />
                             </div>
-                            <button onClick={() => console.log(GroupManager.Instance.deleteGroup(this.props.group))}>Delete group</button>
+                            <button onClick={() => GroupManager.Instance.deleteGroup(this.props.group)}>Delete group</button>
                         </div> :
                         null}
                 </div>
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index bec6b973b..d64302456 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -359,8 +359,6 @@ export default class SharingManager extends React.Component<{}> {
     share = () => {
         this.selectedUsers?.forEach(user => {
             if (user.value.includes(indType)) {
-                console.log(user);
-                console.log(this.users.find(u => u.user.email === user.label));
                 this.setInternalSharing(this.users.find(u => u.user.email === user.label)!, this.permissions);
             }
             else {
diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx
index e8c34d931..781673e59 100644
--- a/src/client/views/DocComponent.tsx
+++ b/src/client/views/DocComponent.tsx
@@ -138,7 +138,6 @@ export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps, T
             const targetDataDoc = this.props.Document[DataSym];
             const docList = DocListCast(targetDataDoc[this.annotationKey]);
             const added = docs.filter(d => !docList.includes(d));
-            console.log("here");
             const effectiveAcl = getEffectiveAcl(this.dataDoc);
             if (added.length) {
                 if (effectiveAcl === AclReadonly) {
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index a3a023164..45d53a5f5 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -22,6 +22,7 @@ import { DocumentView } from "./nodes/DocumentView";
 import { DocumentLinksButton } from "./nodes/DocumentLinksButton";
 import PDFMenu from "./pdf/PDFMenu";
 import { ContextMenu } from "./ContextMenu";
+import GroupManager from "../util/GroupManager";
 
 const modifiers = ["control", "meta", "shift", "alt"];
 type KeyHandler = (keycode: string, e: KeyboardEvent) => KeyControlInfo | Promise<KeyControlInfo>;
@@ -107,6 +108,7 @@ export default class KeyManager {
                 GoogleAuthenticationManager.Instance.cancel();
                 HypothesisAuthenticationManager.Instance.cancel();
                 SharingManager.Instance.close();
+                GroupManager.Instance.close();
                 break;
             case "delete":
             case "backspace":
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 31f0c1df3..6a6a475c8 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -8,7 +8,7 @@ import * as React from 'react';
 import Lightbox from 'react-image-lightbox-with-rotate';
 import 'react-image-lightbox-with-rotate/style.css'; // This only needs to be imported once in your app
 import { DateField } from '../../../fields/DateField';
-import { AclAddonly, AclReadonly, AclSym, DataSym, Doc, DocListCast, Field, Opt } from '../../../fields/Doc';
+import { AclAddonly, AclReadonly, AclSym, DataSym, Doc, DocListCast, Field, Opt, AclEdit } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
 import { List } from '../../../fields/List';
 import { ObjectField } from '../../../fields/ObjectField';
@@ -132,8 +132,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
         const targetDataDoc = this.props.Document[DataSym];
         const docList = DocListCast(targetDataDoc[this.props.fieldKey]);
         const added = docs.filter(d => !docList.includes(d));
-        console.log("here");
-        const effectiveAcl = getEffectiveAcl(this.dataDoc);
+        const effectiveAcl = getEffectiveAcl(this.props.Document);
         if (added.length) {
             if (effectiveAcl === AclReadonly) {
                 return false;
@@ -167,13 +166,15 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
 
     @action.bound
     removeDocument = (doc: any): boolean => {
-        const docs = doc instanceof Doc ? [doc] : doc as Doc[];
-        const targetDataDoc = this.props.Document[DataSym];
-        const value = DocListCast(targetDataDoc[this.props.fieldKey]);
-        const result = value.filter(v => !docs.includes(v));
-        if (result.length !== value.length) {
-            targetDataDoc[this.props.fieldKey] = new List<Doc>(result);
-            return true;
+        if (getEffectiveAcl(this.props.Document) === AclEdit) {
+            const docs = doc instanceof Doc ? [doc] : doc as Doc[];
+            const targetDataDoc = this.props.Document[DataSym];
+            const value = DocListCast(targetDataDoc[this.props.fieldKey]);
+            const result = value.filter(v => !docs.includes(v));
+            if (result.length !== value.length) {
+                targetDataDoc[this.props.fieldKey] = new List<Doc>(result);
+                return true;
+            }
         }
         return false;
     }
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index d480c76d0..e34ceb994 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -184,7 +184,6 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
 
         const bindings = this.CreateBindings(onClick, onInput);
         //  layoutFrame = splits.length > 1 ? splits[0] + splits[1].replace(/{([^{}]|(?R))*}/, replacer4) : ""; // might have been more elegant if javascript supported recursive patterns
-        console.log("here");
         return (this.props.renderDepth > 12 || !layoutFrame || !this.layoutDoc || getEffectiveAcl(this.layoutDoc) === AclPrivate) ? (null) :
             <ObserverJsxParser
                 key={42}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 1d76633be..b9ae8b444 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -26,7 +26,7 @@ import { InteractionUtils } from '../../util/InteractionUtils';
 import { Scripting } from '../../util/Scripting';
 import { SearchUtil } from '../../util/SearchUtil';
 import { SelectionManager } from "../../util/SelectionManager";
-import SharingManager from '../../util/SharingManager';
+import SharingManager, { SharingPermissions } from '../../util/SharingManager';
 import { Transform } from "../../util/Transform";
 import { undoBatch, UndoManager } from "../../util/UndoManager";
 import { CollectionView, CollectionViewType } from '../collections/CollectionView';
@@ -725,7 +725,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
 
     @undoBatch
     @action
-    setAcl = (acl: "readOnly" | "addOnly" | "ownerOnly" | "write") => {
+    setAcl = (acl: SharingPermissions) => {
         this.dataDoc.ACL = this.props.Document.ACL = acl;
         DocListCast(this.dataDoc[Doc.LayoutFieldKey(this.dataDoc)]).map(d => {
             if (d.author === Doc.CurrentUserEmail) d.ACL = acl;
@@ -735,7 +735,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     }
     @undoBatch
     @action
-    testAcl = (acl: "readOnly" | "addOnly" | "ownerOnly" | "write") => {
+    testAcl = (acl: SharingPermissions) => {
         this.dataDoc.author = this.props.Document.author = "ADMIN";
         this.dataDoc.ACL = this.props.Document.ACL = acl;
         DocListCast(this.dataDoc[Doc.LayoutFieldKey(this.dataDoc)]).map(d => {
@@ -845,12 +845,12 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
 
         const existingAcls = cm.findByDescription("Privacy...");
         const aclItems: ContextMenuProps[] = existingAcls && "subitems" in existingAcls ? existingAcls.subitems : [];
-        aclItems.push({ description: "Make Add Only", event: () => this.setAcl("addOnly"), icon: "concierge-bell" });
-        aclItems.push({ description: "Make Read Only", event: () => this.setAcl("readOnly"), icon: "concierge-bell" });
-        aclItems.push({ description: "Make Private", event: () => this.setAcl("ownerOnly"), icon: "concierge-bell" });
-        aclItems.push({ description: "Make Editable", event: () => this.setAcl("write"), icon: "concierge-bell" });
-        aclItems.push({ description: "Test Private", event: () => this.testAcl("ownerOnly"), icon: "concierge-bell" });
-        aclItems.push({ description: "Test Readonly", event: () => this.testAcl("readOnly"), icon: "concierge-bell" });
+        aclItems.push({ description: "Make Add Only", event: () => this.setAcl(SharingPermissions.Add), icon: "concierge-bell" });
+        aclItems.push({ description: "Make Read Only", event: () => this.setAcl(SharingPermissions.View), icon: "concierge-bell" });
+        aclItems.push({ description: "Make Private", event: () => this.setAcl(SharingPermissions.None), icon: "concierge-bell" });
+        aclItems.push({ description: "Make Editable", event: () => this.setAcl(SharingPermissions.Edit), icon: "concierge-bell" });
+        aclItems.push({ description: "Test Private", event: () => this.testAcl(SharingPermissions.None), icon: "concierge-bell" });
+        aclItems.push({ description: "Test Readonly", event: () => this.testAcl(SharingPermissions.View), icon: "concierge-bell" });
         !existingAcls && cm.addItem({ description: "Privacy...", subitems: aclItems, icon: "question" });
 
         // const recommender_subitems: ContextMenuProps[] = [];
@@ -1206,9 +1206,9 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     }
 
     render() {
-        console.log("here");
-        if (getEffectiveAcl(this.props.Document) === AclPrivate) return (null);
         if (!(this.props.Document instanceof Doc)) return (null);
+        if (getEffectiveAcl(this.props.Document) === AclPrivate) return (null);
+        if (this.props.Document.hidden) return (null);
         const backgroundColor = Doc.UserDoc().renderStyle === "comic" ? undefined : this.props.forcedBackgroundColor?.(this.Document) || StrCast(this.layoutDoc._backgroundColor) || StrCast(this.layoutDoc.backgroundColor) || StrCast(this.Document.backgroundColor) || this.props.backgroundColor?.(this.Document);
         const opacity = Cast(this.layoutDoc._opacity, "number", Cast(this.layoutDoc.opacity, "number", Cast(this.Document.opacity, "number", null)));
         const finalOpacity = this.props.opacity ? this.props.opacity() : opacity;
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index a0dbcd980..ccf83cbf9 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -227,7 +227,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
             const curLayout = this.rootDoc !== this.layoutDoc ? Cast(this.layoutDoc[this.fieldKey], RichTextField, null) : undefined; // the default text stored in a layout template
             const json = JSON.stringify(state.toJSON());
             // if (!this.dataDoc[AclSym]) { // what?
-            console.log("here");
             if (getEffectiveAcl(this.dataDoc) === AclEdit) {
                 if (!this._applyingChange && json.replace(/"selection":.*/, "") !== curProto?.Data.replace(/"selection":.*/, "")) {
                     this._applyingChange = true;
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index c965dc282..27eabf451 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -109,7 +109,6 @@ const AclMap = new Map<string, symbol>([
 ]);
 
 export function fetchProto(doc: Doc) {
-    console.log("in fetchproto");
     if (doc.author !== Doc.CurrentUserEmail) { // storing acls for groups needs to be extended here - AclSym should store a datastructure that stores information about permissions
 
         const permissions: { [key: string]: symbol } = {};
@@ -118,22 +117,8 @@ export function fetchProto(doc: Doc) {
             if (key.startsWith("ACL")) permissions[key] = AclMap.get(StrCast(doc[key]))!;
         });
 
-        doc[AclSym] = permissions;
 
-        // const acl = Doc.Get(doc, "ACL", true);
-        // switch (acl) {
-        //     case "ownerOnly":
-        //         doc[AclSym] = AclPrivate;
-        //         return undefined;
-        //     case "readOnly":
-        //         doc[AclSym] = AclReadonly;
-        //         break;
-        //     case "addOnly":
-        //         doc[AclSym] = AclAddonly;
-        //         break;
-        //     // case "edit":
-        //     //     doc[AclSym] = AclEdit;
-        // }
+        if (Object.keys(permissions).length) doc[AclSym] = permissions;
     }
 
     if (doc.proto instanceof Promise) {
@@ -208,7 +193,7 @@ export class Doc extends RefField {
 
     private [Self] = this;
     private [SelfProxy]: any;
-    public [AclSym]: any;
+    public [AclSym]: { [key: string]: symbol };
     public [WidthSym] = () => NumCast(this[SelfProxy]._width);
     public [HeightSym] = () => NumCast(this[SelfProxy]._height);
     public [ToScriptString]() { return `DOC-"${this[Self][Id]}"-`; }
@@ -232,8 +217,8 @@ export class Doc extends RefField {
             return Cast(this[SelfProxy][renderFieldKey + "-layout[" + templateLayoutDoc[Id] + "]"], Doc, null) || templateLayoutDoc;
         }
         return undefined;
-    }
 
+    }
 
     private [CachedUpdates]: { [key: string]: () => void | Promise<any> } = {};
     public static CurrentUserEmail: string = "";
@@ -840,7 +825,6 @@ export namespace Doc {
     }
     // don't bother memoizing (caching) the result if called from a non-reactive context. (plus this avoids a warning message)
     export function IsBrushedDegreeUnmemoized(doc: Doc) {
-        console.log("here");
         if (!doc || getEffectiveAcl(doc) === AclPrivate || getEffectiveAcl(Doc.GetProto(doc)) === AclPrivate) return 0;
         return brushManager.BrushedDoc.has(doc) ? 2 : brushManager.BrushedDoc.has(Doc.GetProto(doc)) ? 1 : 0;
     }
@@ -850,7 +834,6 @@ export namespace Doc {
         })(doc);
     }
     export function BrushDoc(doc: Doc) {
-        console.log("here");
         if (!doc || getEffectiveAcl(doc) === AclPrivate || getEffectiveAcl(Doc.GetProto(doc)) === AclPrivate) return doc;
         brushManager.BrushedDoc.set(doc, true);
         brushManager.BrushedDoc.set(Doc.GetProto(doc), true);
@@ -888,7 +871,6 @@ export namespace Doc {
     }
     const highlightManager = new HighlightBrush();
     export function IsHighlighted(doc: Doc) {
-        console.log("here");
         if (!doc || getEffectiveAcl(doc) === AclPrivate || getEffectiveAcl(Doc.GetProto(doc)) === AclPrivate) return false;
         return highlightManager.HighlightedDoc.get(doc) || highlightManager.HighlightedDoc.get(Doc.GetProto(doc));
     }
diff --git a/src/fields/util.ts b/src/fields/util.ts
index a3e7a36f8..a1af1d3c5 100644
--- a/src/fields/util.ts
+++ b/src/fields/util.ts
@@ -1,5 +1,5 @@
 import { UndoManager } from "../client/util/UndoManager";
-import { Doc, Field, FieldResult, UpdatingFromServer, LayoutSym, AclSym, AclPrivate, AclEdit, AclReadonly, AclAddonly } from "./Doc";
+import { Doc, FieldResult, UpdatingFromServer, LayoutSym, AclPrivate, AclEdit, AclReadonly, AclAddonly, AclSym, fetchProto } from "./Doc";
 import { SerializationHelper } from "../client/util/SerializationHelper";
 import { ProxyField, PrefetchProxy } from "./Proxy";
 import { RefField } from "./RefField";
@@ -9,7 +9,6 @@ import { Parent, OnUpdate, Update, Id, SelfProxy, Self } from "./FieldSymbols";
 import { DocServer } from "../client/DocServer";
 import { ComputedField } from "./ScriptField";
 import { ScriptCast } from "./Types";
-import GroupManager from "../client/util/GroupManager";
 
 
 function _readOnlySetter(): never {
@@ -108,57 +107,65 @@ export function OVERRIDE_ACL(val: boolean) {
     _overrideAcl = val;
 }
 
-const HierarchyMapping = new Map<symbol, number>([
-    [AclPrivate, 0],
-    [AclReadonly, 1],
-    [AclAddonly, 2],
-    [AclEdit, 3]
-]);
+let currentUserGroups: string[] = [];
+let currentUserEmail: string;// = Doc.CurrentUserEmail;
 
-export function getEffectiveAcl(target: any): symbol {
+export function setGroups(groups: string[]) {
+    currentUserGroups = groups;
+    currentUserEmail = Doc.CurrentUserEmail;
+}
 
-    console.log("in getEffectiveAcl");
 
-    if (target[AclSym].ACL) return target[AclSym].ACL;
+export function getEffectiveAcl(target: any, in_prop?: string | symbol | number): symbol {
 
-    let effectiveAcl = AclEdit;
+    const HierarchyMapping = new Map<symbol, number>([
+        [AclPrivate, 0],
+        [AclReadonly, 1],
+        [AclAddonly, 2],
+        [AclEdit, 3]
+    ]);
 
-    for (const [key, value] of Object.entries(target[AclSym])) {
-        if (key.startsWith("ACL-")) {
-            if (GroupManager.Instance.currentUserGroups.includes(key.substring(4)) || Doc.CurrentUserEmail === key.substring(4).replace("_", ".")) {
-                if (HierarchyMapping.get(value as symbol)! > HierarchyMapping.get(effectiveAcl)!) {
-                    effectiveAcl = value as symbol;
-                    if (effectiveAcl === AclEdit) break;
-                }
-            }
-        }
+    if (!target[AclSym] && target instanceof Doc) {
+        fetchProto(target);
     }
 
-    return effectiveAcl;
-}
+    if (target[AclSym] && Object.keys(target[AclSym]).length) {
+
+        if (target.author === currentUserEmail) return AclEdit;
+
+        if (_overrideAcl || (in_prop && DocServer.PlaygroundFields?.includes(in_prop.toString()))) return AclEdit;
 
-function testPermission(target: any, in_prop: string | symbol | number): boolean {
+        if (target[AclSym].ACL) return target[AclSym].ACL;
 
-    console.log("here");
-    // if (target[AclSym].ACL !== AclEdit && !_overrideAcl && !DocServer.PlaygroundFields.includes(in_prop.toString())) return false;
-    if (target[AclSym].ACL === AclEdit) return true;
-    for (const [key, value] of Object.entries(target[AclSym])) {
-        if (key.startsWith("ACL-")) {
-            if (GroupManager.Instance.currentUserGroups.includes(key.substring(4))) {
-                if (value === AclEdit) return true;
+        let effectiveAcl = AclPrivate;
+        let aclPresent = false;
+
+        for (const [key, value] of Object.entries(target[AclSym])) {
+            if (key.startsWith("ACL-")) {
+                if (currentUserGroups.includes(key.substring(4)) || currentUserEmail === key.substring(4).replace("_", ".")) {
+                    if (HierarchyMapping.get(value as symbol)! >= HierarchyMapping.get(effectiveAcl)!) {
+                        aclPresent = true;
+                        effectiveAcl = value as symbol;
+                        if (effectiveAcl === AclEdit) break;
+                    }
+                }
             }
         }
+        return aclPresent ? effectiveAcl : AclEdit;
+    }
+    else {
+        return AclEdit;
     }
-    return _overrideAcl || DocServer.PlaygroundFields.includes(in_prop.toString());
 }
 
+
 const layoutProps = ["panX", "panY", "width", "height", "nativeWidth", "nativeHeight", "fitWidth", "fitToBox",
     "chromeStatus", "viewType", "gridGap", "xMargin", "yMargin", "autoHeight"];
 export function setter(target: any, in_prop: string | symbol | number, value: any, receiver: any): boolean {
-    console.log("in setter")
     let prop = in_prop;
-    // if (target[AclSym] && !_overrideAcl && !DocServer.PlaygroundFields.includes(in_prop.toString())) return true; // generalise to a testpermission function
-    if (!testPermission(target, in_prop)) return true;
+    if (getEffectiveAcl(target, in_prop) !== AclEdit) {
+        return true;
+    }
     if (typeof prop === "string" && prop !== "__id" && prop !== "__fields" && (prop.startsWith("_") || layoutProps.includes(prop))) {
         if (!prop.startsWith("_")) {
             console.log(prop + " is deprecated - switch to _" + prop);
@@ -176,11 +183,9 @@ export function setter(target: any, in_prop: string | symbol | number, value: an
 }
 
 export function getter(target: any, in_prop: string | symbol | number, receiver: any): any {
-    console.log("in getter")
     let prop = in_prop;
-    const effectiveAcl = getEffectiveAcl(target);
-    if (in_prop === AclSym) return _overrideAcl ? undefined : effectiveAcl;
-    if (effectiveAcl === AclPrivate && !_overrideAcl) return undefined;
+    if (in_prop === AclSym) return _overrideAcl ? undefined : target[AclSym];
+    if (getEffectiveAcl(target) === AclPrivate && !_overrideAcl) return undefined;
     if (prop === LayoutSym) {
         return target.__LAYOUT__;
     }
@@ -217,7 +222,6 @@ function getFieldImpl(target: any, prop: string | number, receiver: any, ignoreP
     }
     if (field === undefined && !ignoreProto && prop !== "proto") {
         const proto = getFieldImpl(target, "proto", receiver, true);//TODO tfs: instead of receiver we could use target[SelfProxy]... I don't which semantics we want or if it really matters
-        console.log("here");
         if (proto instanceof Doc && getEffectiveAcl(proto) !== AclPrivate) {
             return getFieldImpl(proto[Self], prop, receiver, ignoreProto);
         }
-- 
cgit v1.2.3-70-g09d2


From d180732e4e9cc9291fa71715370763d38d4c4340 Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Tue, 14 Jul 2020 22:12:01 +0530
Subject: added group creation modal to GroupManager + much ui

---
 src/client/util/GroupManager.scss    | 174 ++++++++++++++++++---------------
 src/client/util/GroupManager.tsx     | 183 +++++++++++++++++++++--------------
 src/client/util/GroupMemberView.scss |  37 +++++--
 src/client/util/GroupMemberView.tsx  |  21 +++-
 src/client/util/SharingManager.scss  |  17 ++--
 src/client/util/SharingManager.tsx   |  63 ++++++------
 src/client/views/MainViewModal.tsx   |   2 +-
 src/fields/util.ts                   |   4 +-
 8 files changed, 300 insertions(+), 201 deletions(-)

(limited to 'src/client/util/GroupMemberView.tsx')

diff --git a/src/client/util/GroupManager.scss b/src/client/util/GroupManager.scss
index 544a79e98..2da1f0d95 100644
--- a/src/client/util/GroupManager.scss
+++ b/src/client/util/GroupManager.scss
@@ -1,23 +1,60 @@
-@import "../views/globalCssVariables";
+// @import "../views/globalCssVariables";
 
 .group-interface {
-    background-color: whitesmoke !important;
-    color: grey;
-    width: 450px;
+    // background-color: whitesmoke !important;
+    // color: grey;
+    width: 550px;
     height: 300px;
 
     .dialogue-box {
-        width: 450;
-        height: 300;
+        .group-create {
+            display: flex;
+            flex-direction: column;
+            height: 90%;
+            justify-content: space-between;
+            // flex-basis: 30%;
+            margin-left: 5px;
+
+            input {
+                border-radius: 5px;
+                // border: none;
+                padding: 8px;
+                min-width: 100%;
+                margin: 4px 0 4px 0;
+                border: 1px solid hsl(0, 0%, 80%);
+                outline: none;
+
+                &:focus {
+                    // border: unset;
+                    border: 2.5px solid #2684FF;
+                }
+            }
+
+            p {
+                font-size: 20px;
+                text-align: left;
+                color: black;
+            }
+
+            button {
+                align-self: flex-end;
+            }
+        }
     }
 
+    //     .dialogue-box {
+    //     width: 450;
+    //     height: 300;
+    // }
+
     button {
-        background: $lighter-alt-accent;
+        // background: $lighter-alt-accent;
+        align-self: center;
         outline: none;
         border-radius: 5px;
         border: 0px;
-        color: #fcfbf7;
-        text-transform: uppercase;
+        // color: #fcfbf7;
+        text-transform: none;
         letter-spacing: 2px;
         font-size: 75%;
         padding: 10px;
@@ -36,12 +73,6 @@
         border-radius: 10px;
     }
 
-    button {
-        width: 100%;
-        align-self: center;
-        background: $darker-alt-accent;
-    }
-
     .delete-button {
         background: rgb(227, 86, 86);
     }
@@ -55,82 +86,73 @@
     }
 
     .group-heading {
-        letter-spacing: .5em;
+        display: flex;
+        align-items: center;
+        margin-bottom: 25px;
+
+        p {
+            font-size: 20px;
+            text-align: left;
+            // margin: 0 0 20px 0;
+            margin-right: 15px;
+            color: black;
+            // width: 60%;
+        }
     }
 
 
     .group-body {
-        display: flex;
+        // 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;
-            }
+        // max-height: 80%;
+        height: 100%;
+        background-color: #e8e8e8;
+        // flex-direction: column;
 
-        }
-
-        .group-content {
-            padding-left: 1em;
-            padding-right: 1em;
-            justify-content: space-around;
-            text-align: left;
+        // 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;
-                }
+        overflow-y: auto;
+        width: 100%;
 
-                button {
-                    position: absolute;
-                    width: 30%;
-                    right: 2;
-                    margin-top: 0;
-                }
+        .group-row {
+            display: flex;
+            // position: relative;
+            margin-bottom: 5px;
+            min-height: 30px;
+            // border: 1px solid;
+            // border-radius: 10px;
+            align-items: center;
+
+            .group-name {
+                // position: relative;
+                max-width: 65%;
+                // left: 10;
+                margin: 0 10;
+                color: black;
             }
 
-            ::placeholder {
-                color: $intermediate-color;
+            .group-info {
+                cursor: pointer;
             }
 
-            input {
-                border-radius: 5px;
-                border: none;
-                padding: 4px;
-                min-width: 100%;
-                margin: 2px 0;
+            button {
+                position: absolute;
+                width: 30%;
+                right: 2;
+                margin-top: 0;
             }
+        }
 
+        input {
+            border-radius: 5px;
+            border: none;
+            padding: 4px;
+            min-width: 100%;
+            margin: 2px 0;
         }
-    }
 
-    h1 {
-        color: $dark-color;
-        text-transform: uppercase;
-        letter-spacing: 2px;
-        font-size: 120%;
     }
 }
\ No newline at end of file
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index 23bdd248b..f2b502ae0 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -12,11 +12,12 @@ import { Utils } from "../../Utils";
 import * as RequestPromise from "request-promise";
 import Select from 'react-select';
 import "./GroupManager.scss";
-import { StrCast } from "../../fields/Types";
+import { StrCast, Cast } from "../../fields/Types";
 import GroupMemberView from "./GroupMemberView";
 import { setGroups } from "../../fields/util";
+import { DocServer } from "../DocServer";
 
-library.add(fa.faWindowClose);
+library.add(fa.faPlus, fa.faTimes, fa.faInfoCircle);
 
 export interface UserOptions {
     label: string;
@@ -33,47 +34,37 @@ export default class GroupManager extends React.Component<{}> {
     @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 currentGroup: Opt<Doc>; // the currently selected group.
+    @observable private createGroupModalOpen: boolean = false;
     private inputRef: React.RefObject<HTMLInputElement> = React.createRef(); // the ref for the input box.
-    currentUserGroups: string[] = [];
+    private currentUserGroups: string[] = [];
+    @observable private buttonColour: "#979797" | "black" = "#979797";
 
     constructor(props: Readonly<{}>) {
         super(props);
         GroupManager.Instance = this;
     }
 
-    // sets up the list of users
-    componentDidMount() {
-        this.populateUsers().then(resolved => runInAction(() => this.users = resolved));
-
-        // this.getAllGroups().forEach(group => {
-        //     const members: string[] = JSON.parse(StrCast(group.members));
-        //     if (members.includes(Doc.CurrentUserEmail)) this.currentUserGroups.push(group);
-        // });
-        DocListCastAsync(this.GroupManagerDoc?.data).then(groups => {
-            groups?.forEach(group => {
-                const members: string[] = JSON.parse(StrCast(group.members));
-                if (members.includes(Doc.CurrentUserEmail)) this.currentUserGroups.push(StrCast(group.groupName));
-            });
-        })
-            .finally(() => setGroups(this.currentUserGroups));
-
-        // (this.GroupManagerDoc?.data as List<Doc>).forEach(group => {
-        //     Promise.resolve(group).then(resolvedGroup => {
-        //         const members: string[] = JSON.parse(StrCast(resolvedGroup.members));
-        //         if (members.includes(Doc.CurrentUserEmail)) this.currentUserGroups.push(resolvedGroup);
-        //     });
-        // });
-
-    }
-
     /**
-     * Fetches the list of users stored on the database and @returns a list of the emails.
+     * Fetches the list of users stored on the database.
      */
     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);
+        const userList = await RequestPromise.get(Utils.prepend("/getUsers"));
+        const raw = JSON.parse(userList) as User[];
+        const evaluating = raw.map(async user => {
+            const isCandidate = user.email !== Doc.CurrentUserEmail;
+            if (isCandidate) {
+                const userDocument = await DocServer.GetRefField(user.userDocumentId);
+                if (userDocument instanceof Doc) {
+                    const notificationDoc = await Cast(userDocument.rightSidebarCollection, Doc);
+                    runInAction(() => {
+                        if (notificationDoc instanceof Doc) {
+                            this.users.push(user.email);
+                        }
+                    });
+                }
+            }
+        });
+        return Promise.all(evaluating);
     }
 
     /**
@@ -90,6 +81,15 @@ export default class GroupManager extends React.Component<{}> {
     open = () => {
         SelectionManager.DeselectAll();
         this.isOpen = true;
+        this.populateUsers();
+        DocListCastAsync(this.GroupManagerDoc?.data).then(groups => {
+            groups?.forEach(group => {
+                const members: string[] = JSON.parse(StrCast(group.members));
+                if (members.includes(Doc.CurrentUserEmail)) this.currentUserGroups.push(StrCast(group.groupName));
+            });
+
+            setGroups(this.currentUserGroups);
+        });
     }
 
     /**
@@ -99,6 +99,8 @@ export default class GroupManager extends React.Component<{}> {
     close = () => {
         this.isOpen = false;
         this.currentGroup = undefined;
+        this.users = [];
+        this.createGroupModalOpen = false;
     }
 
     /**
@@ -277,6 +279,7 @@ export default class GroupManager extends React.Component<{}> {
      */
     @action
     createGroup = () => {
+        // this.createGroupModalOpen = true;
         if (!this.inputRef.current?.value) {
             alert("Please enter a group name");
             return;
@@ -288,6 +291,66 @@ export default class GroupManager extends React.Component<{}> {
         this.createGroupDoc(this.inputRef.current.value, this.selectedUsers?.map(user => user.value));
         this.selectedUsers = null;
         this.inputRef.current.value = "";
+        this.buttonColour = "#979797";
+    }
+
+    private get groupCreationModal() {
+        const contents = (
+            <div className="group-create">
+                <div className="group-heading" style={{ marginBottom: 0 }}>
+                    <p><b>New Group</b></p>
+                    <div className={"close-button"} onClick={action(() => this.createGroupModalOpen = false)}>
+                        <FontAwesomeIcon icon={fa.faTimes} color={"black"} size={"lg"} />
+                    </div>
+                </div>
+                <input
+                    ref={this.inputRef}
+                    onKeyDown={this.handleKeyDown}
+                    type="text"
+                    placeholder="Group name"
+                    onChange={action(() => this.buttonColour = this.inputRef.current?.value ? "black" : "#979797")} />
+                <Select
+                    isMulti={true}
+                    isSearchable={true}
+                    options={this.options}
+                    onChange={this.handleChange}
+                    placeholder={"Select users"}
+                    value={this.selectedUsers}
+                    closeMenuOnSelect={false}
+                    styles={{
+                        dropdownIndicator: (base, state) => ({
+                            ...base,
+                            transition: '0.5s all ease',
+                            transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : undefined
+                        }),
+                        multiValue: (base) => ({
+                            ...base,
+                            maxWidth: "50%",
+
+                            '&:hover': {
+                                maxWidth: "unset"
+                            }
+                        })
+                    }}
+                />
+                <button onClick={this.createGroup}
+                    style={{ background: this.buttonColour }}
+                    disabled={this.buttonColour === "#979797"}
+                >
+                    Create
+                </button>
+            </div>
+        );
+
+        return (
+            <MainViewModal
+                isDisplayed={this.createGroupModalOpen}
+                interactive={true}
+                contents={contents}
+                dialogueBoxStyle={{ width: "70%", height: "70%" }}
+                closeOnExternalClick={action(() => this.createGroupModalOpen = false)}
+            />
+        );
     }
 
     /**
@@ -296,13 +359,7 @@ export default class GroupManager extends React.Component<{}> {
     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}
-                /> */}
+                {this.groupCreationModal}
                 {this.currentGroup ?
                     <GroupMemberView
                         group={this.currentGroup}
@@ -310,42 +367,26 @@ export default class GroupManager extends React.Component<{}> {
                     />
                     : null}
                 <div className="group-heading">
-                    <h1>Groups</h1>
+                    <p><b>Manage Groups</b></p>
+                    <button onClick={action(() => this.createGroupModalOpen = true)}>
+                        <FontAwesomeIcon icon={fa.faPlus} size={"sm"} /> Create Group
+                    </button>
                     <div className={"close-button"} onClick={this.close}>
-                        <FontAwesomeIcon icon={fa.faWindowClose} size={"lg"} />
+                        <FontAwesomeIcon icon={fa.faTimes} color={"black"} 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}
-                            styles={{
-                                dropdownIndicator: (base, state) => ({
-                                    ...base,
-                                    transition: '0.5s all ease',
-                                    transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : undefined
-                                })
-                            }}
-                        />
-                    </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(group) ? "Edit" : "View"}
-                                </button>
+                    {this.getAllGroups().map(group =>
+                        <div className="group-row">
+                            <div className="group-name" >{group.groupName}</div>
+                            <div className="group-info" onClick={action(() => this.currentGroup = group)}>
+                                <FontAwesomeIcon icon={fa.faInfoCircle} color={"#e8e8e8"} size={"sm"} style={{ backgroundColor: "#1e89d7", borderRadius: "100%", border: "1px solid #1e89d7" }} />
                             </div>
-                        )}
-                    </div>
+                            {/* <button onClick={action(() => this.currentGroup = group)}>
+                                {this.hasEditAccess(group) ? "Edit" : "View"}
+                            </button> */}
+                        </div>
+                    )}
                 </div>
             </div>
         );
diff --git a/src/client/util/GroupMemberView.scss b/src/client/util/GroupMemberView.scss
index 7833c485f..9bdf832e0 100644
--- a/src/client/util/GroupMemberView.scss
+++ b/src/client/util/GroupMemberView.scss
@@ -1,18 +1,23 @@
-@import "../views/globalCssVariables";
+// @import "../views/globalCssVariables";
 
 .editing-interface {
-    background-color: whitesmoke !important;
-    color: grey;
+    // background-color: whitesmoke !important;
+    // color: grey;
     width: 100%;
     height: 100%;
+    // color: black;
+
+    hr {
+        margin-top: 10;
+    }
 
     button {
-        background: $darker-alt-accent;
+        // background: $darker-alt-accent;
         outline: none;
         border-radius: 5px;
         border: 0px;
         color: #fcfbf7;
-        text-transform: uppercase;
+        // text-transform: uppercase;
         letter-spacing: 2px;
         font-size: 75%;
         padding: 10px;
@@ -32,12 +37,22 @@
     .editing-header {
         margin-bottom: 5;
 
+        .group-title {
+            font-weight: bold;
+            font-size: 15;
+            text-align: center;
+            border: none;
+            outline: none;
+            color: black;
+            margin-top: -5;
+        }
+
         .group-buttons {
             display: flex;
             margin-top: 5;
 
             .add-member-dropdown {
-                width: 100%;
+                width: 65%;
                 margin: 0 5;
             }
         }
@@ -48,10 +63,13 @@
         // max-height: 67%;
         height: 67%;
         width: 100%;
+        color: black;
+        margin-top: -15px;
 
         .editing-row {
             display: flex;
             align-items: center;
+            margin-bottom: 10px;
             // border: 1px solid;
             // border-radius: 10px;
 
@@ -60,6 +78,13 @@
                 min-width: 65%;
                 word-break: break-all;
                 padding: 0 5;
+                text-align: left;
+            }
+
+            .remove-button {
+                position: absolute;
+                right: 30;
+                cursor: pointer;
             }
         }
     }
diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx
index 742caa676..2462ee4d5 100644
--- a/src/client/util/GroupMemberView.tsx
+++ b/src/client/util/GroupMemberView.tsx
@@ -11,7 +11,7 @@ import Select from "react-select";
 import { Doc } from "../../fields/Doc";
 import "./GroupMemberView.scss";
 
-library.add(fa.faWindowClose);
+library.add(fa.faTimes, fa.faTrashAlt);
 
 interface GroupMemberViewProps {
     group: Doc;
@@ -21,17 +21,22 @@ interface GroupMemberViewProps {
 @observer
 export default class GroupMemberView extends React.Component<GroupMemberViewProps> {
 
+
     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 :
             <div className="editing-interface">
                 <div className="editing-header">
-                    <b>{this.props.group.groupName}</b>
+                    <input
+                        className="group-title"
+                        value={StrCast(this.props.group.groupName)}
+                        onChange={e => this.props.group.groupName = e.currentTarget.value}
+                    >
+                    </input>
                     <div className={"memberView-closeButton"} onClick={action(this.props.onCloseButtonClick)}>
-                        <FontAwesomeIcon icon={fa.faWindowClose} size={"lg"} />
+                        <FontAwesomeIcon icon={fa.faTimes} color={"black"} size={"lg"} />
                     </div>
-
                     {GroupManager.Instance.hasEditAccess(this.props.group) ?
                         <div className="group-buttons">
                             <div className="add-member-dropdown">
@@ -55,13 +60,18 @@ export default class GroupMemberView extends React.Component<GroupMemberViewProp
                         </div> :
                         null}
                 </div>
+                <hr />
                 <div className="editing-contents">
                     {members.map(member => (
                         <div className="editing-row">
                             <div className="user-email">
                                 {member}
                             </div>
-                            {GroupManager.Instance.hasEditAccess(this.props.group) ? <button onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)}> Remove </button> : null}
+                            {GroupManager.Instance.hasEditAccess(this.props.group) ?
+                                <div className={"remove-button"} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)}>
+                                    <FontAwesomeIcon icon={fa.faTrashAlt} size={"sm"} />
+                                </div>
+                                : null}
                         </div>
                     ))}
                 </div>
@@ -75,6 +85,7 @@ export default class GroupMemberView extends React.Component<GroupMemberViewProp
             isDisplayed={true}
             interactive={true}
             contents={this.editingInterface}
+            dialogueBoxStyle={{ width: 400, height: 250 }}
             closeOnExternalClick={this.props.onCloseButtonClick}
         />;
     }
diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss
index 2708876a3..ce23ce413 100644
--- a/src/client/util/SharingManager.scss
+++ b/src/client/util/SharingManager.scss
@@ -6,10 +6,10 @@
     width: 600px;
     height: 360px;
 
-    .dialogue-box {
-        width: 450;
-        height: 300;
-    }
+    // .dialogue-box {
+    //     width: 450;
+    //     height: 300;
+    // }
 
     .overlay {
         transform: translate(-20px, -20px);
@@ -60,11 +60,13 @@
 
         .main-container {
             display: flex;
-
+            margin-top: -10px;
 
             .individual-container,
             .group-container {
                 width: 50%;
+                display: flex;
+                flex-direction: column;
 
                 .share-title {
                     margin-top: 20px;
@@ -74,7 +76,7 @@
                 .groups-list,
                 .users-list {
                     font-style: italic;
-                    background: gainsboro;
+                    background: #e8e8e8;
                     // border: 1px solid black;
                     padding-left: 10px;
                     padding-right: 10px;
@@ -88,7 +90,7 @@
                     justify-content: center;
                     // color: red;
                     color: black;
-                    height: 255px;
+                    height: 250px;
                     margin: 0 2;
 
 
@@ -187,7 +189,6 @@
         .permissions-dropdown {
             border: none;
             height: 25;
-            background: gainsboro;
         }
 
         .edit-actions {
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index af68edab6..6c7c634eb 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -22,7 +22,7 @@ import Select from "react-select";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { List } from "../../fields/List";
 
-library.add(fa.faCopy);
+library.add(fa.faCopy, fa.faTimes);
 
 export interface User {
     email: string;
@@ -140,7 +140,7 @@ export default class SharingManager extends React.Component<{}> {
 
     setInternalGroupSharing = (group: Doc, permission: string) => {
         const members: string[] = JSON.parse(StrCast(group.members));
-        const users: ValidatedUser[] = this.users.filter(user => members.includes(user.user.email));
+        const users: ValidatedUser[] = this.users.filter(({ user: { email } }) => members.includes(email));
 
         const target = this.targetDoc!;
         const ACL = `ACL-${StrCast(group.groupName)}`;
@@ -160,8 +160,8 @@ export default class SharingManager extends React.Component<{}> {
         });
     }
 
-    shareWithAddedMember = (group: Doc, email: string) => {
-        const user: ValidatedUser = this.users.find(user => user.user.email === email)!;
+    shareWithAddedMember = (group: Doc, emailId: string) => {
+        const user: ValidatedUser = this.users.find(({ user: { email } }) => email === emailId)!;
 
         if (group.docsShared) {
             DocListCastAsync(group.docsShared).then(docsShared => {
@@ -173,8 +173,8 @@ export default class SharingManager extends React.Component<{}> {
         }
     }
 
-    removeMember = (group: Doc, email: string) => {
-        const user: ValidatedUser = this.users.find(user => user.user.email === email)!;
+    removeMember = (group: Doc, emailId: string) => {
+        const user: ValidatedUser = this.users.find(({ user: { email } }) => email === emailId)!;
 
         if (group.docsShared) {
             DocListCastAsync(group.docsShared).then(docsShared => {
@@ -194,9 +194,9 @@ export default class SharingManager extends React.Component<{}> {
                     doc[ACL] = "Not Shared";
 
                     const members: string[] = JSON.parse(StrCast(group.members));
-                    const users: ValidatedUser[] = this.users.filter(user => members.includes(user.user.email));
+                    const users: ValidatedUser[] = this.users.filter(({ user: { email } }) => members.includes(email));
 
-                    users.forEach(user => Doc.RemoveDocFromList(user.notificationDoc, storage, doc));
+                    users.forEach(({ notificationDoc }) => Doc.RemoveDocFromList(notificationDoc, storage, doc));
                 });
 
             });
@@ -330,24 +330,6 @@ export default class SharingManager extends React.Component<{}> {
         );
     }
 
-    private computePermissions = (userKey: string) => {
-        // const sharingDoc = this.sharingDoc;
-        // if (!sharingDoc) {
-        //     return SharingPermissions.None;
-        // }
-        // const metadata = sharingDoc[userKey] as Doc | string;
-
-        if (!this.targetDoc) return SharingPermissions.None;
-
-        const ACL = `ACL-${userKey}`;
-        const permission = StrCast(this.targetDoc[ACL]);
-
-        // if (!metadata) {
-        //     return SharingPermissions.None;
-        // }
-        return StrCast(this.targetDoc[ACL], SharingPermissions.None);
-    }
-
     @action
     handleUsersChange = (selectedOptions: any) => {
         this.selectedUsers = selectedOptions as UserOptions[];
@@ -381,7 +363,7 @@ export default class SharingManager extends React.Component<{}> {
             [
                 {
                     label: 'Individuals',
-                    options: GroupManager.Instance.options.map(({ label, value }) => ({ label, value: "!indType/" + value }))
+                    options: this.users.map(({ user: { email } }) => ({ label: email, value: "!indType/" + email }))
                 },
                 {
                     label: 'Groups',
@@ -390,10 +372,12 @@ export default class SharingManager extends React.Component<{}> {
             ]
             : [];
 
+        console.log(this.users);
+
         const userListContents: (JSX.Element | null)[] = this.users.map(({ user, notificationDoc }) => { // can't use async here
             const userKey = user.email.replace('.', '_');
             // const userKey = user.userDocumentId;
-            const permissions = this.computePermissions(userKey);
+            const permissions = StrCast(this.targetDoc?.[`ACL-${userKey}`], SharingPermissions.None);
             // const color = ColorMapping.get(permissions);
 
             // console.log(manager);
@@ -401,7 +385,7 @@ export default class SharingManager extends React.Component<{}> {
             // const usersShared = StrCast(metadata?.usersShared, "");
             // console.log(usersShared)
 
-            return permissions === SharingPermissions.None ? null : (
+            return permissions === SharingPermissions.None || user.email === this.targetDoc?.author ? null : (
                 <div
                     key={userKey}
                     className={"container"}
@@ -422,9 +406,24 @@ export default class SharingManager extends React.Component<{}> {
             );
         });
 
+        userListContents.unshift(
+            (
+                <div
+                    key={"owner"}
+                    className={"container"}
+                >
+                    <span className={"padding"}>{this.targetDoc?.author}</span>
+                    <div className="edit-actions">
+                        <div className={"permissions-dropdown"}>
+                            Owner
+                        </div>
+                    </div>
+                </div>
+            )
+        );
 
         const groupListContents = GroupManager.Instance?.getAllGroups().map(group => {
-            const permissions = this.computePermissions(StrCast(group.groupName));
+            const permissions = StrCast(this.targetDoc?.[`ACL-${StrCast(group.groupName)}`], SharingPermissions.None);
             // const color = ColorMapping.get(permissions);
 
             return permissions === SharingPermissions.None ? null : (
@@ -492,7 +491,7 @@ export default class SharingManager extends React.Component<{}> {
                 <div className="sharing-contents">
                     <p className={"share-title"}><b>Share </b>{this.focusOn(StrCast(this.targetDoc?.title, "this document"))}</p>
                     <div className={"close-button"} onClick={this.close}>
-                        <FontAwesomeIcon icon={fa.faWindowClose} size={"lg"} />
+                        <FontAwesomeIcon icon={fa.faTimes} color={"black"} size={"lg"} />
                     </div>
                     {this.targetDoc?.author !== Doc.CurrentUserEmail ? null
                         :
@@ -516,6 +515,7 @@ export default class SharingManager extends React.Component<{}> {
                     }
                     <div className="main-container">
                         <div className={"individual-container"}>
+                            <div>Individuals</div>
                             <div className={"users-list"} style={{ display: displayUserList ? "flex" : "block" }}>{/*200*/}
                                 {
                                     displayUserList ?
@@ -530,6 +530,7 @@ export default class SharingManager extends React.Component<{}> {
                             </div>
                         </div>
                         <div className={"group-container"}>
+                            <div>Groups</div>
                             <div className={"groups-list"} style={{ display: displayGroupList ? "flex" : "block" }}>{/*200*/}
                                 {
                                     displayGroupList ?
diff --git a/src/client/views/MainViewModal.tsx b/src/client/views/MainViewModal.tsx
index 0b73a6ad7..249715511 100644
--- a/src/client/views/MainViewModal.tsx
+++ b/src/client/views/MainViewModal.tsx
@@ -21,7 +21,7 @@ export default class MainViewModal extends React.Component<MainViewOverlayProps>
         const dialogueOpacity = p.dialogueBoxDisplayedOpacity || 1;
         const overlayOpacity = p.overlayDisplayedOpacity || 0.4;
         return !p.isDisplayed ? (null) : (
-            <div style={{ pointerEvents: p.isDisplayed ? p.interactive ? "all" : "none" : "none" }}>
+            <div style={{ pointerEvents: p.isDisplayed && p.interactive ? "all" : "none" }}>
                 <div
                     className={"dialogue-box"}
                     style={{
diff --git a/src/fields/util.ts b/src/fields/util.ts
index ebfc3933a..006129730 100644
--- a/src/fields/util.ts
+++ b/src/fields/util.ts
@@ -160,9 +160,7 @@ export function GetEffectiveAcl(target: any, in_prop?: string | symbol | number)
         }
         return aclPresent ? effectiveAcl : AclEdit;
     }
-    else {
-        return AclEdit;
-    }
+    return AclEdit;
 }
 
 
-- 
cgit v1.2.3-70-g09d2


From 9c2410571d08674477eced80419585ebd15faaf0 Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Wed, 15 Jul 2020 16:49:56 +0530
Subject: ui + sorting

---
 src/client/util/GroupManager.scss    | 99 ++++++++++++++++++++----------------
 src/client/util/GroupManager.tsx     | 74 +++++++++++++++++++--------
 src/client/util/GroupMemberView.scss | 27 ++++++++--
 src/client/util/GroupMemberView.tsx  | 21 ++++++--
 src/client/util/SharingManager.scss  | 23 +++++++--
 src/client/util/SharingManager.tsx   | 68 +++++++++++++++++--------
 6 files changed, 215 insertions(+), 97 deletions(-)

(limited to 'src/client/util/GroupMemberView.tsx')

diff --git a/src/client/util/GroupManager.scss b/src/client/util/GroupManager.scss
index 2da1f0d95..8a2c616b1 100644
--- a/src/client/util/GroupManager.scss
+++ b/src/client/util/GroupManager.scss
@@ -20,9 +20,10 @@
                 // border: none;
                 padding: 8px;
                 min-width: 100%;
-                margin: 4px 0 4px 0;
+                // margin: 4px 0 4px 0;
                 border: 1px solid hsl(0, 0%, 80%);
                 outline: none;
+                height: 30;
 
                 &:focus {
                     // border: unset;
@@ -100,59 +101,69 @@
         }
     }
 
+    .main-container {
+        display: flex;
+        flex-direction: column;
 
-    .group-body {
-        // display: flex;
-        justify-content: space-between;
-        // max-height: 80%;
-        height: 100%;
-        background-color: #e8e8e8;
-        // flex-direction: column;
+        .sort-groups {
+            text-align: left;
+            margin-left: 5;
+            cursor: pointer;
+        }
 
-        // padding-left: 1em;
-        padding-right: 1em;
-        justify-content: space-around;
-        text-align: left;
+        .group-body {
+            // display: flex;
+            justify-content: space-between;
+            // max-height: 80%;
+            height: 220;
+            background-color: #e8e8e8;
+            // flex-direction: column;
+
+            // padding-left: 1em;
+            padding-right: 1em;
+            justify-content: space-around;
+            text-align: left;
 
-        overflow-y: auto;
-        width: 100%;
+            overflow-y: auto;
+            width: 100%;
 
-        .group-row {
-            display: flex;
-            // position: relative;
-            margin-bottom: 5px;
-            min-height: 30px;
-            // border: 1px solid;
-            // border-radius: 10px;
-            align-items: center;
-
-            .group-name {
+            .group-row {
+                display: flex;
                 // position: relative;
-                max-width: 65%;
-                // left: 10;
-                margin: 0 10;
-                color: black;
-            }
+                margin-bottom: 5px;
+                min-height: 30px;
+                // border: 1px solid;
+                // border-radius: 10px;
+                align-items: center;
+
+                .group-name {
+                    // position: relative;
+                    max-width: 65%;
+                    // left: 10;
+                    margin: 0 10;
+                    color: black;
+                }
 
-            .group-info {
-                cursor: pointer;
+                .group-info {
+                    cursor: pointer;
+                }
+
+                button {
+                    position: absolute;
+                    width: 30%;
+                    right: 2;
+                    margin-top: 0;
+                }
             }
 
-            button {
-                position: absolute;
-                width: 30%;
-                right: 2;
-                margin-top: 0;
+            input {
+                border-radius: 5px;
+                border: none;
+                padding: 4px;
+                min-width: 100%;
+                margin: 2px 0;
             }
-        }
 
-        input {
-            border-radius: 5px;
-            border: none;
-            padding: 4px;
-            min-width: 100%;
-            margin: 2px 0;
         }
-
     }
 }
\ No newline at end of file
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index f2b502ae0..2d8930660 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -38,31 +38,38 @@ export default class GroupManager extends React.Component<{}> {
     private inputRef: React.RefObject<HTMLInputElement> = React.createRef(); // the ref for the input box.
     private currentUserGroups: string[] = [];
     @observable private buttonColour: "#979797" | "black" = "#979797";
+    @observable private groupSort: "ascending" | "descending" | "none" = "none";
+
 
     constructor(props: Readonly<{}>) {
         super(props);
         GroupManager.Instance = this;
     }
 
+    componentDidMount() {
+        this.populateUsers();
+    }
+
     /**
      * Fetches the list of users stored on the database.
      */
     populateUsers = async () => {
+        runInAction(() => this.users = []);
         const userList = await RequestPromise.get(Utils.prepend("/getUsers"));
         const raw = JSON.parse(userList) as User[];
         const evaluating = raw.map(async user => {
-            const isCandidate = user.email !== Doc.CurrentUserEmail;
-            if (isCandidate) {
-                const userDocument = await DocServer.GetRefField(user.userDocumentId);
-                if (userDocument instanceof Doc) {
-                    const notificationDoc = await Cast(userDocument.rightSidebarCollection, Doc);
-                    runInAction(() => {
-                        if (notificationDoc instanceof Doc) {
-                            this.users.push(user.email);
-                        }
-                    });
-                }
+            // const isCandidate = user.email !== Doc.CurrentUserEmail;
+            // if (isCandidate) {
+            const userDocument = await DocServer.GetRefField(user.userDocumentId);
+            if (userDocument instanceof Doc) {
+                const notificationDoc = await Cast(userDocument.rightSidebarCollection, Doc);
+                runInAction(() => {
+                    if (notificationDoc instanceof Doc) {
+                        this.users.push(user.email);
+                    }
+                });
             }
+            // }
         });
         return Promise.all(evaluating);
     }
@@ -99,7 +106,7 @@ export default class GroupManager extends React.Component<{}> {
     close = () => {
         this.isOpen = false;
         this.currentGroup = undefined;
-        this.users = [];
+        // this.users = [];
         this.createGroupModalOpen = false;
     }
 
@@ -304,6 +311,7 @@ export default class GroupManager extends React.Component<{}> {
                     </div>
                 </div>
                 <input
+                    className="group-input"
                     ref={this.inputRef}
                     onKeyDown={this.handleKeyDown}
                     type="text"
@@ -357,6 +365,17 @@ export default class GroupManager extends React.Component<{}> {
      * A getter that @returns the main interface for the GroupManager.
      */
     private get groupInterface() {
+
+        const sortGroups = (d1: Doc, d2: Doc) => {
+            const g1 = StrCast(d1.groupName);
+            const g2 = StrCast(d2.groupName);
+
+            return g1 < g2 ? -1 : g1 === g2 ? 0 : 1;
+        };
+
+        let groups = this.getAllGroups();
+        groups = this.groupSort === "ascending" ? groups.sort(sortGroups) : this.groupSort === "descending" ? groups.sort(sortGroups).reverse() : groups;
+
         return (
             <div className="group-interface">
                 {this.groupCreationModal}
@@ -375,19 +394,30 @@ export default class GroupManager extends React.Component<{}> {
                         <FontAwesomeIcon icon={fa.faTimes} color={"black"} size={"lg"} />
                     </div>
                 </div>
-                <div className="group-body">
-                    {this.getAllGroups().map(group =>
-                        <div className="group-row">
-                            <div className="group-name" >{group.groupName}</div>
-                            <div className="group-info" onClick={action(() => this.currentGroup = group)}>
-                                <FontAwesomeIcon icon={fa.faInfoCircle} color={"#e8e8e8"} size={"sm"} style={{ backgroundColor: "#1e89d7", borderRadius: "100%", border: "1px solid #1e89d7" }} />
-                            </div>
-                            {/* <button onClick={action(() => this.currentGroup = group)}>
+                <div className="main-container">
+                    <div
+                        className="sort-groups"
+                        onClick={action(() => this.groupSort = this.groupSort === "ascending" ? "descending" : this.groupSort === "descending" ? "none" : "ascending")}>
+                        Name {this.groupSort === "ascending" ? "↑" : this.groupSort === "descending" ? "↓" : ""} {/* → */}
+                    </div>
+                    <div className="group-body">
+                        {groups.map(group =>
+                            <div
+                                className="group-row"
+                                key={StrCast(group.groupName)}
+                            >
+                                <div className="group-name" >{group.groupName}</div>
+                                <div className="group-info" onClick={action(() => this.currentGroup = group)}>
+                                    <FontAwesomeIcon icon={fa.faInfoCircle} color={"#e8e8e8"} size={"sm"} style={{ backgroundColor: "#1e89d7", borderRadius: "100%", border: "1px solid #1e89d7" }} />
+                                </div>
+                                {/* <button onClick={action(() => this.currentGroup = group)}>
                                 {this.hasEditAccess(group) ? "Edit" : "View"}
                             </button> */}
-                        </div>
-                    )}
+                            </div>
+                        )}
+                    </div>
                 </div>
+
             </div>
         );
     }
diff --git a/src/client/util/GroupMemberView.scss b/src/client/util/GroupMemberView.scss
index 9bdf832e0..a34e5b989 100644
--- a/src/client/util/GroupMemberView.scss
+++ b/src/client/util/GroupMemberView.scss
@@ -8,7 +8,7 @@
     // color: black;
 
     hr {
-        margin-top: 10;
+        margin-top: 20;
     }
 
     button {
@@ -17,7 +17,7 @@
         border-radius: 5px;
         border: 0px;
         color: #fcfbf7;
-        // text-transform: uppercase;
+        text-transform: none;
         letter-spacing: 2px;
         font-size: 75%;
         padding: 10px;
@@ -45,15 +45,33 @@
             outline: none;
             color: black;
             margin-top: -5;
+            height: 20;
+            text-overflow: ellipsis;
+
+            &:hover {
+                text-overflow: visible;
+                overflow-x: auto;
+            }
+        }
+
+        .sort-emails {
+            float: left;
+            margin: -18 0 0 5;
+            cursor: pointer;
         }
 
         .group-buttons {
             display: flex;
             margin-top: 5;
+            margin-bottom: 25;
 
             .add-member-dropdown {
                 width: 65%;
                 margin: 0 5;
+
+                input {
+                    height: 30;
+                }
             }
         }
     }
@@ -61,7 +79,7 @@
     .editing-contents {
         overflow-y: auto;
         // max-height: 67%;
-        height: 67%;
+        height: 65%;
         width: 100%;
         color: black;
         margin-top: -15px;
@@ -70,6 +88,7 @@
             display: flex;
             align-items: center;
             margin-bottom: 10px;
+            position: relative;
             // border: 1px solid;
             // border-radius: 10px;
 
@@ -83,7 +102,7 @@
 
             .remove-button {
                 position: absolute;
-                right: 30;
+                right: 10;
                 cursor: pointer;
             }
         }
diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx
index 2462ee4d5..ebe9830ba 100644
--- a/src/client/util/GroupMemberView.tsx
+++ b/src/client/util/GroupMemberView.tsx
@@ -4,7 +4,7 @@ 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 { action, observable } from "mobx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as fa from '@fortawesome/free-solid-svg-icons';
 import Select from "react-select";
@@ -21,10 +21,17 @@ interface GroupMemberViewProps {
 @observer
 export default class GroupMemberView extends React.Component<GroupMemberViewProps> {
 
+    @observable private memberSort: "ascending" | "descending" | "none" = "none";
 
     private get editingInterface() {
-        const members: string[] = this.props.group ? JSON.parse(StrCast(this.props.group.members)) : [];
+        let members: string[] = this.props.group ? JSON.parse(StrCast(this.props.group.members)) : [];
+        members = this.memberSort === "ascending" ? members.sort() : this.memberSort === "descending" ? members.sort().reverse() : members;
+
         const options: UserOptions[] = this.props.group ? GroupManager.Instance.options.filter(option => !(JSON.parse(StrCast(this.props.group.members)) as string[]).includes(option.value)) : [];
+        console.log(this.props.group, options);
+        console.log(GroupManager.Instance.options);
+
+
         return (!this.props.group ? null :
             <div className="editing-interface">
                 <div className="editing-header">
@@ -59,11 +66,19 @@ export default class GroupMemberView extends React.Component<GroupMemberViewProp
                             <button onClick={() => GroupManager.Instance.deleteGroup(this.props.group)}>Delete group</button>
                         </div> :
                         null}
+                    <div
+                        className="sort-emails"
+                        onClick={action(() => this.memberSort = this.memberSort === "ascending" ? "descending" : this.memberSort === "descending" ? "none" : "ascending")}>
+                        Emails {this.memberSort === "ascending" ? "↑" : this.memberSort === "descending" ? "↓" : ""} {/* → */}
+                    </div>
                 </div>
                 <hr />
                 <div className="editing-contents">
                     {members.map(member => (
-                        <div className="editing-row">
+                        <div
+                            className="editing-row"
+                            key={member}
+                        >
                             <div className="user-email">
                                 {member}
                             </div>
diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss
index ce23ce413..572b94ffb 100644
--- a/src/client/util/SharingManager.scss
+++ b/src/client/util/SharingManager.scss
@@ -1,4 +1,4 @@
-@import "../views/globalCssVariables";
+// @import "../views/globalCssVariables";
 
 .sharing-interface {
     // display: flex;
@@ -40,6 +40,10 @@
 
             .user-search {
                 width: 90%;
+
+                input {
+                    height: 30;
+                }
             }
 
             .permissions-select {
@@ -68,6 +72,12 @@
                 display: flex;
                 flex-direction: column;
 
+                .user-sort {
+                    text-align: left;
+                    margin-left: 10;
+                    cursor: pointer;
+                }
+
                 .share-title {
                     margin-top: 20px;
                     margin-bottom: 20px;
@@ -103,12 +113,12 @@
         }
 
         button {
-            background: $darker-alt-accent;
+            // background: $darker-alt-accent;
             outline: none;
             border-radius: 5px;
             border: 0px;
             color: #fcfbf7;
-            text-transform: uppercase;
+            text-transform: none;
             letter-spacing: 2px;
             font-size: 75%;
             padding: 0 10;
@@ -173,6 +183,10 @@
         padding: 0;
         align-items: center;
 
+        .group-info {
+            cursor: pointer;
+        }
+
         &:hover .padding {
             white-space: unset;
         }
@@ -183,12 +197,13 @@
             text-overflow: ellipsis;
             overflow: hidden;
             white-space: nowrap;
-            max-width: 48%;
+            max-width: 40%;
         }
 
         .permissions-dropdown {
             border: none;
             height: 25;
+            background-color: #e8e8e8;
         }
 
         .edit-actions {
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 6c7c634eb..817b7c6b8 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -75,6 +75,9 @@ export default class SharingManager extends React.Component<{}> {
     @observable private overlayOpacity = 0.4;
     @observable private selectedUsers: UserOptions[] | null = null;
     @observable private permissions: SharingPermissions = SharingPermissions.Edit;
+    @observable private individualSort: "ascending" | "descending" | "none" = "none";
+    @observable private groupSort: "ascending" | "descending" | "none" = "none";
+
 
     // private get linkVisible() {
     //     return this.sharingDoc ? this.sharingDoc[PublicKey] !== SharingPermissions.None : false;
@@ -151,8 +154,6 @@ export default class SharingManager extends React.Component<{}> {
         // group.docsShared ? Doc.IndexOf(target, DocListCast(group.docsShared)) === -1 && (group.docsShared as List<Doc>).push(target) : group.docsShared = new List<Doc>([target]);
 
         users.forEach(({ notificationDoc }) => {
-
-            DocListCastAsync(notificationDoc[storage]).then(res => console.log(res));
             DocListCastAsync(notificationDoc[storage]).then(resolved => {
                 if (permission !== SharingPermissions.None) Doc.IndexOf(target, resolved!) === -1 && Doc.AddDocToList(notificationDoc, storage, target);
                 else Doc.IndexOf(target, resolved!) !== -1 && Doc.RemoveDocFromList(notificationDoc, storage, target);
@@ -353,28 +354,44 @@ export default class SharingManager extends React.Component<{}> {
         this.selectedUsers = null;
     }
 
+    sortUsers = (u1: ValidatedUser, u2: ValidatedUser) => {
+        const { email: e1 } = u1.user;
+        const { email: e2 } = u2.user;
+        return e1 < e2 ? -1 : e1 === e2 ? 0 : 1;
+    }
+
+    sortGroups = (group1: Doc, group2: Doc) => {
+        const g1 = StrCast(group1.groupName);
+        const g2 = StrCast(group2.groupName);
+        return g1 < g2 ? -1 : g1 === g2 ? 0 : 1;
+    }
+
     private get sharingInterface() {
-        const existOtherUsers = this.users.length > 0;
-        const existGroups = GroupManager.Instance?.getAllGroups().length > 0;
 
-        // const manager = this.sharingDoc!;
+        const groupList = GroupManager.Instance?.getAllGroups() || [];
+
+        const sortedUsers = this.users.sort(this.sortUsers)
+            .map(({ user: { email } }) => ({ label: email, value: "!indType/" + email }));
+        const sortedGroups = groupList.sort(this.sortGroups)
+            .map(({ groupName }) => ({ label: StrCast(groupName), value: "!groupType/" + StrCast(groupName) }));
 
         const options: GroupOptions[] = GroupManager.Instance ?
             [
                 {
                     label: 'Individuals',
-                    options: this.users.map(({ user: { email } }) => ({ label: email, value: "!indType/" + email }))
+                    options: sortedUsers
                 },
                 {
                     label: 'Groups',
-                    options: GroupManager.Instance.getAllGroups().map(({ groupName }) => ({ label: StrCast(groupName), value: "!groupType/" + StrCast(groupName) }))
+                    options: sortedGroups
                 }
             ]
             : [];
 
-        console.log(this.users);
+        const users = this.individualSort === "ascending" ? this.users.sort(this.sortUsers) : this.individualSort === "descending" ? this.users.sort(this.sortUsers).reverse() : this.users;
+        const groups = this.groupSort === "ascending" ? groupList.sort(this.sortGroups) : this.groupSort === "descending" ? groupList.sort(this.sortGroups).reverse() : groupList;
 
-        const userListContents: (JSX.Element | null)[] = this.users.map(({ user, notificationDoc }) => { // can't use async here
+        const userListContents: (JSX.Element | null)[] = users.map(({ user, notificationDoc }) => { // can't use async here
             const userKey = user.email.replace('.', '_');
             // const userKey = user.userDocumentId;
             const permissions = StrCast(this.targetDoc?.[`ACL-${userKey}`], SharingPermissions.None);
@@ -422,7 +439,7 @@ export default class SharingManager extends React.Component<{}> {
             )
         );
 
-        const groupListContents = GroupManager.Instance?.getAllGroups().map(group => {
+        const groupListContents = groups.map(group => {
             const permissions = StrCast(this.targetDoc?.[`ACL-${StrCast(group.groupName)}`], SharingPermissions.None);
             // const color = ColorMapping.get(permissions);
 
@@ -431,7 +448,10 @@ export default class SharingManager extends React.Component<{}> {
                     key={StrCast(group.groupName)}
                     className={"container"}
                 >
-                    <span className={"padding"}>{group.groupName}</span>
+                    <div className={"padding"}>{group.groupName}</div>
+                    <div className="group-info" onClick={action(() => GroupManager.Instance.currentGroup = group)}>
+                        <FontAwesomeIcon icon={fa.faInfoCircle} color={"#e8e8e8"} size={"sm"} style={{ backgroundColor: "#1e89d7", borderRadius: "100%", border: "1px solid #1e89d7" }} />
+                    </div>
                     <div className="edit-actions">
                         <select
                             className={"permissions-dropdown"}
@@ -441,14 +461,13 @@ export default class SharingManager extends React.Component<{}> {
                         >
                             {this.sharingOptions}
                         </select>
-                        <button onClick={action(() => GroupManager.Instance.currentGroup = group)}>Edit</button>
                     </div>
                 </div>
             );
         });
 
-        const displayUserList = userListContents?.every(user => user === null);
-        const displayGroupList = groupListContents?.every(group => group === null);
+        const displayUserList = !userListContents?.every(user => user === null);
+        const displayGroupList = !groupListContents?.every(group => group === null);
 
         return (
             <div className={"sharing-interface"}>
@@ -515,10 +534,14 @@ export default class SharingManager extends React.Component<{}> {
                     }
                     <div className="main-container">
                         <div className={"individual-container"}>
-                            <div>Individuals</div>
-                            <div className={"users-list"} style={{ display: displayUserList ? "flex" : "block" }}>{/*200*/}
+                            <div
+                                className="user-sort"
+                                onClick={action(() => this.individualSort = this.individualSort === "ascending" ? "descending" : this.individualSort === "descending" ? "none" : "ascending")}>
+                                Individuals {this.individualSort === "ascending" ? "↑" : this.individualSort === "descending" ? "↓" : ""} {/* → */}
+                            </div>
+                            <div className={"users-list"} style={{ display: !displayUserList ? "flex" : "block" }}>{/*200*/}
                                 {
-                                    displayUserList ?
+                                    !displayUserList ?
                                         <div
                                             className={"none"}
                                         >
@@ -530,10 +553,15 @@ export default class SharingManager extends React.Component<{}> {
                             </div>
                         </div>
                         <div className={"group-container"}>
-                            <div>Groups</div>
-                            <div className={"groups-list"} style={{ display: displayGroupList ? "flex" : "block" }}>{/*200*/}
+                            <div
+                                className="user-sort"
+                                onClick={action(() => this.groupSort = this.groupSort === "ascending" ? "descending" : this.groupSort === "descending" ? "none" : "ascending")}>
+                                Groups {this.groupSort === "ascending" ? "↑" : this.groupSort === "descending" ? "↓" : ""} {/* → */}
+
+                            </div>
+                            <div className={"groups-list"} style={{ display: !displayGroupList ? "flex" : "block" }}>{/*200*/}
                                 {
-                                    displayGroupList ?
+                                    !displayGroupList ?
                                         <div
                                             className={"none"}
                                         >
-- 
cgit v1.2.3-70-g09d2


From 3ad593cc8865d3fa1dc22bf403ad7cfaf1a751e6 Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Wed, 15 Jul 2020 21:52:23 +0530
Subject: bugfix + cleanup

---
 src/client/util/GroupManager.scss       |  25 --------
 src/client/util/GroupManager.tsx        |   4 --
 src/client/util/GroupMemberView.scss    |  10 ---
 src/client/util/GroupMemberView.tsx     |   3 -
 src/client/util/SharingManager.scss     |  30 ---------
 src/client/util/SharingManager.tsx      | 106 +++++---------------------------
 src/client/views/nodes/DocumentView.tsx |  22 +++----
 src/fields/Doc.ts                       |   2 +-
 8 files changed, 28 insertions(+), 174 deletions(-)

(limited to 'src/client/util/GroupMemberView.tsx')

diff --git a/src/client/util/GroupManager.scss b/src/client/util/GroupManager.scss
index 8a2c616b1..34d4f40f8 100644
--- a/src/client/util/GroupManager.scss
+++ b/src/client/util/GroupManager.scss
@@ -1,8 +1,4 @@
-// @import "../views/globalCssVariables";
-
 .group-interface {
-    // background-color: whitesmoke !important;
-    // color: grey;
     width: 550px;
     height: 300px;
 
@@ -12,21 +8,17 @@
             flex-direction: column;
             height: 90%;
             justify-content: space-between;
-            // flex-basis: 30%;
             margin-left: 5px;
 
             input {
                 border-radius: 5px;
-                // border: none;
                 padding: 8px;
                 min-width: 100%;
-                // margin: 4px 0 4px 0;
                 border: 1px solid hsl(0, 0%, 80%);
                 outline: none;
                 height: 30;
 
                 &:focus {
-                    // border: unset;
                     border: 2.5px solid #2684FF;
                 }
             }
@@ -43,18 +35,12 @@
         }
     }
 
-    //     .dialogue-box {
-    //     width: 450;
-    //     height: 300;
-    // }
 
     button {
-        // background: $lighter-alt-accent;
         align-self: center;
         outline: none;
         border-radius: 5px;
         border: 0px;
-        // color: #fcfbf7;
         text-transform: none;
         letter-spacing: 2px;
         font-size: 75%;
@@ -94,10 +80,8 @@
         p {
             font-size: 20px;
             text-align: left;
-            // margin: 0 0 20px 0;
             margin-right: 15px;
             color: black;
-            // width: 60%;
         }
     }
 
@@ -112,14 +96,10 @@
         }
 
         .group-body {
-            // display: flex;
             justify-content: space-between;
-            // max-height: 80%;
             height: 220;
             background-color: #e8e8e8;
-            // flex-direction: column;
 
-            // padding-left: 1em;
             padding-right: 1em;
             justify-content: space-around;
             text-align: left;
@@ -129,17 +109,12 @@
 
             .group-row {
                 display: flex;
-                // position: relative;
                 margin-bottom: 5px;
                 min-height: 30px;
-                // border: 1px solid;
-                // border-radius: 10px;
                 align-items: center;
 
                 .group-name {
-                    // position: relative;
                     max-width: 65%;
-                    // left: 10;
                     margin: 0 10;
                     color: black;
                 }
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index 2d8930660..12951f2ab 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -286,7 +286,6 @@ export default class GroupManager extends React.Component<{}> {
      */
     @action
     createGroup = () => {
-        // this.createGroupModalOpen = true;
         if (!this.inputRef.current?.value) {
             alert("Please enter a group name");
             return;
@@ -410,9 +409,6 @@ export default class GroupManager extends React.Component<{}> {
                                 <div className="group-info" onClick={action(() => this.currentGroup = group)}>
                                     <FontAwesomeIcon icon={fa.faInfoCircle} color={"#e8e8e8"} size={"sm"} style={{ backgroundColor: "#1e89d7", borderRadius: "100%", border: "1px solid #1e89d7" }} />
                                 </div>
-                                {/* <button onClick={action(() => this.currentGroup = group)}>
-                                {this.hasEditAccess(group) ? "Edit" : "View"}
-                            </button> */}
                             </div>
                         )}
                     </div>
diff --git a/src/client/util/GroupMemberView.scss b/src/client/util/GroupMemberView.scss
index a34e5b989..c609c5c7b 100644
--- a/src/client/util/GroupMemberView.scss
+++ b/src/client/util/GroupMemberView.scss
@@ -1,18 +1,12 @@
-// @import "../views/globalCssVariables";
-
 .editing-interface {
-    // background-color: whitesmoke !important;
-    // color: grey;
     width: 100%;
     height: 100%;
-    // color: black;
 
     hr {
         margin-top: 20;
     }
 
     button {
-        // background: $darker-alt-accent;
         outline: none;
         border-radius: 5px;
         border: 0px;
@@ -78,7 +72,6 @@
 
     .editing-contents {
         overflow-y: auto;
-        // max-height: 67%;
         height: 65%;
         width: 100%;
         color: black;
@@ -89,11 +82,8 @@
             align-items: center;
             margin-bottom: 10px;
             position: relative;
-            // border: 1px solid;
-            // border-radius: 10px;
 
             .user-email {
-                // position: relative;
                 min-width: 65%;
                 word-break: break-all;
                 padding: 0 5;
diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx
index ebe9830ba..f20670c4e 100644
--- a/src/client/util/GroupMemberView.tsx
+++ b/src/client/util/GroupMemberView.tsx
@@ -28,9 +28,6 @@ export default class GroupMemberView extends React.Component<GroupMemberViewProp
         members = this.memberSort === "ascending" ? members.sort() : this.memberSort === "descending" ? members.sort().reverse() : members;
 
         const options: UserOptions[] = this.props.group ? GroupManager.Instance.options.filter(option => !(JSON.parse(StrCast(this.props.group.members)) as string[]).includes(option.value)) : [];
-        console.log(this.props.group, options);
-        console.log(GroupManager.Instance.options);
-
 
         return (!this.props.group ? null :
             <div className="editing-interface">
diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss
index 572b94ffb..130785672 100644
--- a/src/client/util/SharingManager.scss
+++ b/src/client/util/SharingManager.scss
@@ -1,16 +1,7 @@
-// @import "../views/globalCssVariables";
-
 .sharing-interface {
-    // display: flex;
-    // flex-direction: column;
     width: 600px;
     height: 360px;
 
-    // .dialogue-box {
-    //     width: 450;
-    //     height: 300;
-    // }
-
     .overlay {
         transform: translate(-20px, -20px);
     }
@@ -87,7 +78,6 @@
                 .users-list {
                     font-style: italic;
                     background: #e8e8e8;
-                    // border: 1px solid black;
                     padding-left: 10px;
                     padding-right: 10px;
                     overflow-y: scroll;
@@ -98,7 +88,6 @@
                     align-items: center;
                     text-align: center;
                     justify-content: center;
-                    // color: red;
                     color: black;
                     height: 250px;
                     margin: 0 2;
@@ -113,7 +102,6 @@
         }
 
         button {
-            // background: $darker-alt-accent;
             outline: none;
             border-radius: 5px;
             border: 0px;
@@ -135,8 +123,6 @@
     p {
         font-size: 20px;
         text-align: left;
-        // font-style: italic;
-        // padding: 0;
         margin: 0 0 20px 0;
         color: black;
     }
@@ -174,8 +160,6 @@
         -ms-user-select: none;
         user-select: none;
         width: 100%;
-        // min-width: 700px;
-        // max-width: 700px;
         text-align: left;
         font-style: normal;
         font-size: 14;
@@ -249,18 +233,4 @@
             padding-top: 12px;
         }
     }
-
-    // .close-button {
-    //     border-radius: 5px;
-    //     margin-top: 20px;
-    //     padding: 10px 0;
-    //     background: aliceblue;
-    //     transition: 0.5s ease all;
-    //     border: 1px solid;
-    //     border-color: aliceblue;
-    // }
-
-    // .close-button:hover {
-    //     border-color: black;
-    // }
 }
\ No newline at end of file
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index be86b183f..8d4e508ac 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -36,13 +36,6 @@ export enum SharingPermissions {
     None = "Not Shared"
 }
 
-// const ColorMapping = new Map<string, string>([
-//     [SharingPermissions.None, "red"],
-//     [SharingPermissions.View, "maroon"],
-//     [SharingPermissions.Add, "blue"],
-//     [SharingPermissions.Edit, "green"]
-// ]);
-
 interface GroupOptions {
     label: string;
     options: UserOptions[];
@@ -67,10 +60,9 @@ export default class SharingManager extends React.Component<{}> {
     public static Instance: SharingManager;
     @observable private isOpen = false;
     @observable private users: ValidatedUser[] = [];
-    // @observable private groups: Doc[] = [];
     @observable private targetDoc: Doc | undefined;
     @observable private targetDocView: DocumentView | undefined;
-    @observable private copied = false;
+    // @observable private copied = false;
     @observable private dialogueBoxOpacity = 1;
     @observable private overlayOpacity = 0.4;
     @observable private selectedUsers: UserOptions[] | null = null;
@@ -90,32 +82,20 @@ export default class SharingManager extends React.Component<{}> {
             this.targetDoc = target.props.Document;
             DictationOverlay.Instance.hasActiveModal = true;
             this.isOpen = true;
-            // if (!this.sharingDoc) {
-            //     this.sharingDoc = new Doc;
-            // }
         }));
 
-        // runInAction(() => this.groups = GroupManager.Instance.getAllGroups());
     }
 
     public close = action(() => {
         this.isOpen = false;
         this.users = [];
         setTimeout(action(() => {
-            this.copied = false;
+            // this.copied = false;
             DictationOverlay.Instance.hasActiveModal = false;
             this.targetDoc = undefined;
         }), 500);
     });
 
-    // private get sharingDoc() {
-    //     return this.targetDoc ? Cast(this.targetDoc[SharingKey], Doc) as Doc : undefined;
-    // }
-
-    // private set sharingDoc(value: Doc | undefined) {
-    //     this.targetDoc && (this.targetDoc[SharingKey] = value);
-    // }
-
     constructor(props: {}) {
         super(props);
         SharingManager.Instance = this;
@@ -152,7 +132,6 @@ export default class SharingManager extends React.Component<{}> {
         Doc.GetProto(target)[ACL] = permission;
 
         group.docsShared ? DocListCastAsync(group.docsShared).then(resolved => Doc.IndexOf(target, resolved!) === -1 && (group.docsShared as List<Doc>).push(target)) : group.docsShared = new List<Doc>([target]);
-        // group.docsShared ? Doc.IndexOf(target, DocListCast(group.docsShared)) === -1 && (group.docsShared as List<Doc>).push(target) : group.docsShared = new List<Doc>([target]);
 
         users.forEach(({ notificationDoc }) => {
             DocListCastAsync(notificationDoc[storage]).then(resolved => {
@@ -171,7 +150,6 @@ export default class SharingManager extends React.Component<{}> {
                     DocListCastAsync(user.notificationDoc[storage]).then(resolved => Doc.IndexOf(doc, resolved!) === -1 && Doc.AddDocToList(user.notificationDoc, storage, doc));
                 });
             });
-            // DocListCast(group.docsShared).forEach(doc => Doc.IndexOf(doc, DocListCast(user.notificationDoc[storage])) === -1 && Doc.AddDocToList(user.notificationDoc, storage, doc));
         }
     }
 
@@ -184,7 +162,6 @@ export default class SharingManager extends React.Component<{}> {
                     DocListCastAsync(user.notificationDoc[storage]).then(resolved => Doc.IndexOf(doc, resolved!) !== -1 && Doc.RemoveDocFromList(user.notificationDoc, storage, doc));
                 });
             });
-            // DocListCast(group.docsShared).forEach(doc => Doc.IndexOf(doc, DocListCast(user.notificationDoc[storage])) === -1 && Doc.AddDocToList(user.notificationDoc, storage, doc));
         }
     }
 
@@ -208,14 +185,10 @@ export default class SharingManager extends React.Component<{}> {
     setInternalSharing = (recipient: ValidatedUser, permission: string) => {
         const { user, notificationDoc } = recipient;
         const target = this.targetDoc!;
-        // const manager = this.sharingDoc!;
         const key = user.email.replace('.', '_');
-        // const key = user.userDocumentId;
 
         const ACL = `ACL-${key}`;
 
-        // const permissions: { [key: string]: number } = target[ACL] ? JSON.parse(StrCast(target[ACL])) : {};
-
         target[ACL] = permission;
         Doc.GetProto(target)[ACL] = permission;
 
@@ -228,47 +201,12 @@ export default class SharingManager extends React.Component<{}> {
         }
         else {
             DocListCastAsync(notificationDoc[storage]).then(resolved => {
-                Doc.IndexOf(target, resolved!) === -1 && Doc.RemoveDocFromList(notificationDoc, storage, target);
+                Doc.IndexOf(target, resolved!) !== -1 && Doc.RemoveDocFromList(notificationDoc, storage, target);
             });
         }
 
     }
 
-
-    // let metadata = await DocCastAsync(manager[key]);
-    // const permissions: { [key: string]: number } = metadata?.permissions ? JSON.parse(StrCast(metadata.permissions)) : {};
-    // permissions[StrCast(group ? group.groupName : Doc.CurrentUserEmail)] = parseInt(HierarchyMapping.get(permission)!);
-    // const max = Math.max(...Object.values(permissions));
-
-    // switch (max) {
-    //     case 0:
-    //         // if (metadata) {
-    //         //     const sharedAlias = (await DocCastAsync(metadata.sharedAlias))!;
-    //         //     Doc.RemoveDocFromList(notificationDoc, storage, sharedAlias);
-    //         //     manager[key] = undefined;
-    //         // }
-    //         Doc.RemoveDocFromList(notificationDoc, storage, target);
-    //         break;
-
-    //     case 1: case 2: case 3:
-
-    //         Doc.AddDocToList(notificationDoc, storage, target);
-
-    //         if (!metadata) {
-    //             metadata = new Doc;
-    //             const sharedAlias = Doc.MakeAlias(target);
-    //             Doc.AddDocToList(notificationDoc, storage, target);
-    //             metadata.sharedAlias = sharedAlias;
-    //             manager[key] = metadata;
-    //         }
-    //         metadata.permissions = JSON.stringify(permissions);
-    //         // metadata.usersShared = JSON.stringify(keys);
-    //         break;
-    // }
-
-    // if (metadata) metadata.maxPermission = HierarchyMapping.get(`${max}`);
-
-
     // private setExternalSharing = (permission: string) => {
     //     const sharingDoc = this.sharingDoc;
     //     if (!sharingDoc) {
@@ -277,20 +215,20 @@ export default class SharingManager extends React.Component<{}> {
     //     sharingDoc[PublicKey] = permission;
     // }
 
-    private get sharingUrl() {
-        if (!this.targetDoc) {
-            return undefined;
-        }
-        const baseUrl = Utils.prepend("/doc/" + this.targetDoc[Id]);
-        return `${baseUrl}?sharing=true`;
-    }
+    // private get sharingUrl() {
+    //     if (!this.targetDoc) {
+    //         return undefined;
+    //     }
+    //     const baseUrl = Utils.prepend("/doc/" + this.targetDoc[Id]);
+    //     return `${baseUrl}?sharing=true`;
+    // }
 
-    copy = action(() => {
-        if (this.sharingUrl) {
-            Utils.CopyText(this.sharingUrl);
-            this.copied = true;
-        }
-    });
+    // copy = action(() => {
+    //     if (this.sharingUrl) {
+    //         Utils.CopyText(this.sharingUrl);
+    //         this.copied = true;
+    //     }
+    // });
 
     private get sharingOptions() {
         return Object.values(SharingPermissions).map(permission => {
@@ -394,14 +332,7 @@ export default class SharingManager extends React.Component<{}> {
 
         const userListContents: (JSX.Element | null)[] = users.map(({ user, notificationDoc }) => { // can't use async here
             const userKey = user.email.replace('.', '_');
-            // const userKey = user.userDocumentId;
             const permissions = StrCast(this.targetDoc?.[`ACL-${userKey}`], SharingPermissions.None);
-            // const color = ColorMapping.get(permissions);
-
-            // console.log(manager);
-            // const metadata = manager[userKey] as Doc;
-            // const usersShared = StrCast(metadata?.usersShared, "");
-            // console.log(usersShared)
 
             return permissions === SharingPermissions.None || user.email === this.targetDoc?.author ? null : (
                 <div
@@ -409,12 +340,10 @@ export default class SharingManager extends React.Component<{}> {
                     className={"container"}
                 >
                     <span className={"padding"}>{user.email}</span>
-                    {/* <div className={"shared-by"}>{usersShared}</div> */}
                     <div className="edit-actions">
                         <select
                             className={"permissions-dropdown"}
                             value={permissions}
-                            // style={{ color, borderColor: color }}
                             onChange={e => this.setInternalSharing({ user, notificationDoc }, e.currentTarget.value)}
                         >
                             {this.sharingOptions}
@@ -442,7 +371,6 @@ export default class SharingManager extends React.Component<{}> {
 
         const groupListContents = groups.map(group => {
             const permissions = StrCast(this.targetDoc?.[`ACL-${StrCast(group.groupName)}`], SharingPermissions.None);
-            // const color = ColorMapping.get(permissions);
 
             return permissions === SharingPermissions.None ? null : (
                 <div
@@ -457,7 +385,6 @@ export default class SharingManager extends React.Component<{}> {
                         <select
                             className={"permissions-dropdown"}
                             value={permissions}
-                            // style={{ color, borderColor: color }}
                             onChange={e => this.setInternalGroupSharing(group, e.currentTarget.value)}
                         >
                             {this.sharingOptions}
@@ -582,7 +509,6 @@ export default class SharingManager extends React.Component<{}> {
     }
 
     render() {
-        // console.log(this.sharingDoc);
         return (
             <MainViewModal
                 contents={this.sharingInterface}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 0015e4bc7..8ef367a7c 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -831,17 +831,17 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         !Doc.UserDoc().novice && helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "layer-group" });
         cm.addItem({ description: "Help...", noexpand: true, subitems: helpItems, icon: "question" });
 
-        const existingAcls = cm.findByDescription("Privacy...");
-        const aclItems: ContextMenuProps[] = existingAcls && "subitems" in existingAcls ? existingAcls.subitems : [];
-        aclItems.push({ description: "Make Add Only", event: () => this.setAcl("addOnly"), icon: "concierge-bell" });
-        aclItems.push({ description: "Make Read Only", event: () => this.setAcl("readOnly"), icon: "concierge-bell" });
-        aclItems.push({ description: "Make Private", event: () => this.setAcl("ownerOnly"), icon: "concierge-bell" });
-        aclItems.push({ description: "Make Editable", event: () => this.setAcl("write"), icon: "concierge-bell" });
-        aclItems.push({ description: "Test Private", event: () => this.testAcl("ownerOnly"), icon: "concierge-bell" });
-        aclItems.push({ description: "Test Readonly", event: () => this.testAcl("readOnly"), icon: "concierge-bell" });
-        !existingAcls && cm.addItem({ description: "Privacy...", subitems: aclItems, icon: "question" });
-
-        cm.addItem({ description: `${getPlaygroundMode() ? "Disable" : "Enable"} playground mode`, event: togglePlaygroundMode, icon: "concierge-bell" });
+        // const existingAcls = cm.findByDescription("Privacy...");
+        // const aclItems: ContextMenuProps[] = existingAcls && "subitems" in existingAcls ? existingAcls.subitems : [];
+        // aclItems.push({ description: "Make Add Only", event: () => this.setAcl(SharingPermissions.Add), icon: "concierge-bell" });
+        // aclItems.push({ description: "Make Read Only", event: () => this.setAcl(SharingPermissions.View), icon: "concierge-bell" });
+        // aclItems.push({ description: "Make Private", event: () => this.setAcl(SharingPermissions.None), icon: "concierge-bell" });
+        // aclItems.push({ description: "Make Editable", event: () => this.setAcl(SharingPermissions.Edit), icon: "concierge-bell" });
+        // aclItems.push({ description: "Test Private", event: () => this.testAcl(SharingPermissions.None), icon: "concierge-bell" });
+        // aclItems.push({ description: "Test Readonly", event: () => this.testAcl(SharingPermissions.View), icon: "concierge-bell" });
+        // !existingAcls && cm.addItem({ description: "Privacy...", subitems: aclItems, icon: "question" });
+
+        // cm.addItem({ description: `${getPlaygroundMode() ? "Disable" : "Enable"} playground mode`, event: togglePlaygroundMode, icon: "concierge-bell" });
 
         // const recommender_subitems: ContextMenuProps[] = [];
 
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 8ab4735a7..5dfc14a4a 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -109,7 +109,7 @@ const AclMap = new Map<string, symbol>([
 ]);
 
 export function fetchProto(doc: Doc) {
-    if (doc.author !== Doc.CurrentUserEmail) { // storing acls for groups needs to be extended here - AclSym should store a datastructure that stores information about permissions
+    if (doc.author !== Doc.CurrentUserEmail) {
         untracked(() => {
             const permissions: { [key: string]: symbol } = {};
 
-- 
cgit v1.2.3-70-g09d2

