diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/client/documents/DocumentTypes.ts | 2 | ||||
-rw-r--r-- | src/client/documents/Documents.ts | 15 | ||||
-rw-r--r-- | src/client/util/CurrentUserUtils.ts | 1 | ||||
-rw-r--r-- | src/client/util/GroupManager.scss | 167 | ||||
-rw-r--r-- | src/client/util/GroupManager.tsx | 210 | ||||
-rw-r--r-- | src/client/util/LinkManager.ts | 15 | ||||
-rw-r--r-- | src/client/util/SettingsManager.scss | 1 | ||||
-rw-r--r-- | src/client/util/SharingManager.tsx | 4 | ||||
-rw-r--r-- | src/client/views/MainView.scss | 50 | ||||
-rw-r--r-- | src/client/views/MainView.tsx | 13 | ||||
-rw-r--r-- | src/client/views/collections/CollectionStackingViewFieldColumn.tsx | 2 | ||||
-rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 5 | ||||
-rw-r--r-- | src/fields/Doc.ts | 3 |
13 files changed, 453 insertions, 35 deletions
diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts index 7ba21b2f6..7578b7df0 100644 --- a/src/client/documents/DocumentTypes.ts +++ b/src/client/documents/DocumentTypes.ts @@ -32,8 +32,10 @@ export enum DocumentType { YOUTUBE = "youtube", // youtube directory (view of you tube search results) DOCHOLDER = "docholder", // nested document (view of a document) COMPARISON = "comparison", // before/after view with slider (view of 2 images) + GROUP = "group", // group of users LINKDB = "linkdb", // database of links ??? why do we have this SCRIPTDB = "scriptdb", // database of scripts RECOMMENDATION = "recommendation", // view of a recommendation + GROUPDB = "groupdb" // database of groups }
\ No newline at end of file diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 6c2c6faea..f10abfff2 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -310,6 +310,14 @@ export namespace Docs { [DocumentType.COMPARISON, { layout: { view: ComparisonBox, dataField: defaultDataKey }, }], + [DocumentType.GROUPDB, { + data: new List<Doc>(), + layout: { view: EmptyBox, dataField: defaultDataKey }, + options: { childDropAction: "alias", title: "Global Group Database" } + }], + [DocumentType.GROUP, { + layout: { view: EmptyBox, dataField: defaultDataKey } + }] ]); // All document prototypes are initialized with at least these values @@ -373,6 +381,13 @@ export namespace Docs { } /** + * A collection of all groups in the database + */ + export function MainGroupDocument() { + return Prototypes.get(DocumentType.GROUPDB); + } + + /** * This is a convenience method that is used to initialize * prototype documents for the first time. * diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 76c1fc9f7..4a188384c 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -776,6 +776,7 @@ export class CurrentUserUtils { await this.setupSidebarButtons(doc); // the pop-out left sidebar of tools/panels doc.globalLinkDatabase = Docs.Prototypes.MainLinkDocument(); doc.globalScriptDatabase = Docs.Prototypes.MainScriptDocument(); + doc.globalGroupDatabase = Docs.Prototypes.MainGroupDocument(); // setup reactions to change the highlights on the undo/redo buttons -- would be better to encode this in the undo/redo buttons, but the undo/redo stacks are not wired up that way yet doc["dockedBtn-undo"] && reaction(() => UndoManager.undoStack.slice(), () => Doc.GetProto(doc["dockedBtn-undo"] as Doc).opacity = UndoManager.CanUndo() ? 1 : 0.4, { fireImmediately: true }); diff --git a/src/client/util/GroupManager.scss b/src/client/util/GroupManager.scss new file mode 100644 index 000000000..973a988d7 --- /dev/null +++ b/src/client/util/GroupManager.scss @@ -0,0 +1,167 @@ +@import "../views/globalCssVariables"; + +.group-interface { + background-color: whitesmoke !important; + color: grey; + width: 450px; + height: 300px; + + button { + background: $lighter-alt-accent; + outline: none; + border-radius: 5px; + border: 0px; + color: #fcfbf7; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 75%; + padding: 10px; + margin: 10px; + transition: transform 0.2s; + margin: 2px; + } +} + +.group-interface { + display: flex; + flex-direction: column; + + button { + width: 100%; + align-self: center; + background: $darker-alt-accent; + margin-top: 4px; + } + + .delete-button { + background: rgb(227, 86, 86); + } + + .close-button { + position: absolute; + right: 1em; + top: 1em; + cursor: pointer; + } + + .group-heading { + letter-spacing: .5em; + } + + + .group-body { + display: flex; + justify-content: space-between; + max-height: 80%; + + .group-create { + display: flex; + flex-direction: column; + flex-basis: 30%; + margin-left: 5px; + + input { + border-radius: 5px; + border: none; + padding: 4px; + min-width: 100%; + margin: 4px 0 4px 0; + } + + } + + .group-content { + padding-left: 1em; + padding-right: 1em; + justify-content: space-around; + text-align: left; + + overflow-y: auto; + width: 100%; + + .group-row { + display: flex; + position: relative; + + margin-bottom: 17.5; + + .group-name { + position: relative; + max-width: 65%; + } + + button { + position: absolute; + width: 30%; + right: 0; + } + } + + + + ::placeholder { + color: $intermediate-color; + } + + input { + border-radius: 5px; + border: none; + padding: 4px; + min-width: 100%; + margin: 2px 0; + } + + .error-text { + color: #C40233; + } + + .success-text { + color: #009F6B; + } + + p { + padding: 0 0 .1em .2em; + } + + } + } + + .focus-span { + text-decoration: underline; + } + + h1 { + color: $dark-color; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 120%; + } + + .container { + display: block; + position: relative; + margin-top: 10px; + margin-bottom: 10px; + font-size: 22px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: 700px; + min-width: 700px; + max-width: 700px; + text-align: left; + font-style: normal; + font-size: 15; + font-weight: normal; + padding: 0; + + .padding { + padding: 0 0 0 20px; + color: black; + } + + + + } +}
\ No newline at end of file diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx new file mode 100644 index 000000000..2617047f7 --- /dev/null +++ b/src/client/util/GroupManager.tsx @@ -0,0 +1,210 @@ +import * as React from "react"; +import { observable, action, runInAction, computed } from "mobx"; +import { SelectionManager } from "./SelectionManager"; +import MainViewModal from "../views/MainViewModal"; +import { observer } from "mobx-react"; +import { Doc, DocListCast } from "../../fields/Doc"; +import { List } from "../../fields/List"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import * as fa from '@fortawesome/free-solid-svg-icons'; +import { library } from "@fortawesome/fontawesome-svg-core"; +import SharingManager, { User } from "./SharingManager"; +import { Utils } from "../../Utils"; +import * as RequestPromise from "request-promise"; +import Select from 'react-select'; +import "./GroupManager.scss"; + +library.add(fa.faWindowClose); + +interface UserOptions { + label: string; + value: string; +} + +@observer +export default class GroupManager extends React.Component<{}> { + + static Instance: GroupManager; + @observable private isOpen: boolean = false; // whether the menu is open or not + @observable private dialogueBoxOpacity: number = 1; + @observable private overlayOpacity: number = 0.4; + @observable private users: string[] = []; + @observable private selectedUsers: UserOptions[] | null = null; + private inputRef: React.RefObject<HTMLInputElement> = React.createRef(); + + constructor(props: Readonly<{}>) { + super(props); + GroupManager.Instance = this; + } + + componentDidMount() { + console.log("mounted"); + } + + populateUsers = async () => { + const userList: User[] = JSON.parse(await RequestPromise.get(Utils.prepend("/getUsers"))); + const currentUserIndex = userList.findIndex(user => user.email === Doc.CurrentUserEmail); + currentUserIndex !== -1 && userList.splice(currentUserIndex, 1); + return userList.map(user => user.email); + } + + @computed get options() { + return this.users.map(user => ({ label: user, value: user })); + } + + open = action(() => { + SelectionManager.DeselectAll(); + this.isOpen = true; + this.populateUsers().then(resolved => runInAction(() => this.users = resolved)); + }); + + close = action(() => { + this.isOpen = false; + }); + + get GroupManagerDoc(): Doc | undefined { + return Doc.UserDoc().globalGroupDatabase as Doc; + } + + getAllGroups(): Doc[] { + const groupDoc = GroupManager.Instance.GroupManagerDoc; + return groupDoc ? DocListCast(groupDoc.data) : []; + } + + getGroup(groupName: string): Doc | undefined { + const groupDoc = GroupManager.Instance.getAllGroups().find(group => group.groupName === groupName); + return groupDoc; + } + + get adminGroupMembers(): string[] { + return JSON.parse(GroupManager.Instance.getGroup("admin")!.members as string); + } + + hasEditAccess(groupDoc: Doc): boolean { + if (!groupDoc) return false; + const accessList: string[] = JSON.parse(groupDoc.owners as string); + return accessList.includes(Doc.CurrentUserEmail) || GroupManager.Instance.adminGroupMembers.includes(Doc.CurrentUserEmail); + } + + createGroupDoc(groupName: string, memberEmails: string[]) { + const groupDoc = new Doc; + groupDoc.groupName = groupName; + groupDoc.owners = JSON.stringify([Doc.CurrentUserEmail]); + groupDoc.members = JSON.stringify(memberEmails); + this.addGroup(groupDoc); + } + + addGroup(groupDoc: Doc): boolean { + if (GroupManager.Instance.GroupManagerDoc) { + Doc.AddDocToList(GroupManager.Instance.GroupManagerDoc, "data", groupDoc); + return true; + } + return false; + } + + deleteGroup(groupName: string): boolean { + const groupDoc = GroupManager.Instance.getGroup(groupName); + if (groupDoc) { + if (GroupManager.Instance.GroupManagerDoc && GroupManager.Instance.hasEditAccess(groupDoc)) { + Doc.RemoveDocFromList(GroupManager.Instance.GroupManagerDoc, "data", groupDoc); + return true; + } + } + + + return false; + } + + addMemberToGroup(groupDoc: Doc, email: string) { + if (GroupManager.Instance.hasEditAccess(groupDoc)) { + const memberList: string[] = JSON.parse(groupDoc.members as string); + !memberList.includes(email) && memberList.push(email); + groupDoc.members = JSON.stringify(memberList); + } + } + + removeMemberFromGroup(groupDoc: Doc, email: string) { + if (GroupManager.Instance.hasEditAccess(groupDoc)) { + const memberList: string[] = JSON.parse(groupDoc.members as string); + const index = memberList.indexOf(email); + index !== -1 && memberList.splice(index, 1); + groupDoc.members = JSON.stringify(memberList); + } + } + + @action + handleChange = (selectedOptions: any) => { + console.log(selectedOptions); + this.selectedUsers = selectedOptions as UserOptions[]; + } + + @action + createGroup = () => { + if (!this.inputRef.current?.value) { + alert("Please enter a group name"); + return; + } + if (!this.selectedUsers) { + alert("Please select users"); + return; + } + if (this.getAllGroups().find(group => group.groupName === this.inputRef.current!.value)) { // why do I need null check here? + alert("Please select a unique group name"); + return; + } + this.createGroupDoc(this.inputRef.current.value, this.selectedUsers.map(user => user.value)); + this.selectedUsers = null; + this.inputRef.current.value = ""; + } + + private get groupInterface() { + return ( + <div className="group-interface"> + <div className="group-heading"> + <h1>Groups</h1> + <div className={"close-button"} onClick={this.close}> + <FontAwesomeIcon icon={fa.faWindowClose} size={"lg"} /> + </div> + </div> + <div className="group-body"> + <div className="group-create"> + <button onClick={this.createGroup}>Create group</button> + <input ref={this.inputRef} type="text" placeholder="Group name" /> + <Select + isMulti={true} + isSearchable={true} + options={this.options} + onChange={this.handleChange} + placeholder={"Select users"} + value={this.selectedUsers} + closeMenuOnSelect={false} + /> + </div> + <div className="group-content"> + {this.getAllGroups().map(group => + <div className="group-row"> + <div className="group-name">{group.groupName}</div> + <button> + {this.hasEditAccess(this.getGroup(group.groupName as string) as Doc) ? "Edit" : "View"} + </button> + </div> + )} + </div> + </div> + </div> + ); + } + + render() { + return ( + <MainViewModal + contents={this.groupInterface} + isDisplayed={this.isOpen} + interactive={true} + dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} + overlayDisplayedOpacity={this.overlayOpacity} + /> + ); + } + +}
\ No newline at end of file diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts index 47b2541bd..94a0da985 100644 --- a/src/client/util/LinkManager.ts +++ b/src/client/util/LinkManager.ts @@ -41,24 +41,17 @@ export class LinkManager { } public addLink(linkDoc: Doc): boolean { - const linkList = LinkManager.Instance.getAllLinks(); - linkList.push(linkDoc); if (LinkManager.Instance.LinkManagerDoc) { - LinkManager.Instance.LinkManagerDoc.data = new List<Doc>(linkList); + Doc.AddDocToList(LinkManager.Instance.LinkManagerDoc, "data", linkDoc); return true; } return false; } public deleteLink(linkDoc: Doc): boolean { - const linkList = LinkManager.Instance.getAllLinks(); - const index = LinkManager.Instance.getAllLinks().indexOf(linkDoc); - if (index > -1) { - linkList.splice(index, 1); - if (LinkManager.Instance.LinkManagerDoc) { - LinkManager.Instance.LinkManagerDoc.data = new List<Doc>(linkList); - return true; - } + if (LinkManager.Instance.LinkManagerDoc) { + Doc.RemoveDocFromList(LinkManager.Instance.LinkManagerDoc, "data", linkDoc); + return true; } return false; } diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 6513cb223..fa2609ca2 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -41,6 +41,7 @@ position: absolute; right: 1em; top: 1em; + cursor: pointer; } .settings-heading { diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx index dc67145fc..2e660e819 100644 --- a/src/client/util/SharingManager.tsx +++ b/src/client/util/SharingManager.tsx @@ -28,14 +28,14 @@ export interface User { export enum SharingPermissions { None = "Not Shared", View = "Can View", - Comment = "Can Comment", + Add = "Can Add and Comment", Edit = "Can Edit" } const ColorMapping = new Map<string, string>([ [SharingPermissions.None, "red"], [SharingPermissions.View, "maroon"], - [SharingPermissions.Comment, "blue"], + [SharingPermissions.Add, "blue"], [SharingPermissions.Edit, "green"] ]); diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index e84969565..5b142ffda 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -28,10 +28,11 @@ left: 0; width: 100%; height: 100%; - pointer-events:none; + pointer-events: none; } -.mainView-container, .mainView-container-dark { +.mainView-container, +.mainView-container-dark { width: 100%; height: 100%; position: absolute; @@ -40,40 +41,50 @@ left: 0; z-index: 1; touch-action: none; + .searchBox-container { background: lightgray; } } .mainView-container { - color:dimgray; + color: dimgray; + .lm_title { background: #cacaca; - color:black; + color: black; } } .mainView-container-dark { color: lightgray; + .lm_goldenlayout { background: dimgray; } + .lm_title { background: black; - color:unset; + color: unset; } + .marquee { border-color: white; } + #search-input { background: lightgray; } - .searchBox-container { - background: rgb(45,45,45); + + .searchBox-container { + background: rgb(45, 45, 45); } - .contextMenu-cont, .contextMenu-item { + + .contextMenu-cont, + .contextMenu-item { background: dimGray; } + .contextMenu-item:hover { background: gray; } @@ -108,20 +119,27 @@ overflow: hidden; } +.buttonContainer { -.mainView-settings { position: absolute; - left: 0; bottom: 0; - border-radius: 25%; - margin-left: -5px; - background: darkblue; -} -.mainView-settings:hover { - transform: none !important; + .mainView-settings { + // position: absolute; + // left: 0; + // bottom: 0; + border-radius: 25%; + margin-left: -5px; + background: darkblue; + } + + .mainView-settings:hover { + transform: none !important; + } } + + .mainView-logout { position: absolute; right: 0; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 97953452d..885e50aba 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -30,6 +30,7 @@ import { HistoryUtil } from '../util/History'; import RichTextMenu from './nodes/formattedText/RichTextMenu'; import { Scripting } from '../util/Scripting'; import SettingsManager from '../util/SettingsManager'; +import GroupManager from '../util/GroupManager'; import SharingManager from '../util/SharingManager'; import { Transform } from '../util/Transform'; import { CollectionDockingView } from './collections/CollectionDockingView'; @@ -447,9 +448,14 @@ export class MainView extends React.Component { docFilters={returnEmptyFilter} ContainingCollectionView={undefined} ContainingCollectionDoc={undefined} /> - <button className="mainView-settings" key="settings" onClick={() => SettingsManager.Instance.open()}> - <FontAwesomeIcon icon="cog" size="lg" /> - </button> + <div className="buttonContainer" > + <button className="mainView-settings" key="settings" onClick={() => SettingsManager.Instance.open()}> + <FontAwesomeIcon icon="cog" size="lg" /> + </button> + <button className="mainView-settings" key="groups" onClick={() => GroupManager.Instance.open()}> + <FontAwesomeIcon icon="columns" size="lg" /> + </button> + </div> </div> {this.docButtons} </div>; @@ -571,6 +577,7 @@ export class MainView extends React.Component { <DictationOverlay /> <SharingManager /> <SettingsManager /> + <GroupManager /> <GoogleAuthenticationManager /> <DocumentDecorations /> <GestureOverlay> diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index b60ed853b..eb48d87c8 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -362,7 +362,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC {this.props.parent.Document.hideHeadings ? (null) : headingView} { this.collapsed ? (null) : - <div> + <div style={{ marginTop: 5 }}> <div key={`${heading}-stack`} className={`collectionStackingView-masonry${singleColumn ? "Single" : "Grid"}`} style={{ padding: singleColumn ? `${columnYMargin}px ${0}px ${style.yMargin}px ${0}px` : `${columnYMargin}px ${0}px`, diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 7e20b40a3..4e6038f86 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -678,7 +678,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu @undoBatch @action - setAcl = (acl: "readOnly" | "addOnly" | "ownerOnly") => { + setAcl = (acl: "readOnly" | "addOnly" | "ownerOnly" | "write") => { 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; @@ -688,7 +688,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu } @undoBatch @action - testAcl = (acl: "readOnly" | "addOnly" | "ownerOnly") => { + testAcl = (acl: "readOnly" | "addOnly" | "ownerOnly" | "write") => { 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 => { @@ -802,6 +802,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu 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" }); diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index 8c8720179..8ca85cae9 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -96,6 +96,7 @@ export const AclSym = Symbol("Acl"); export const AclPrivate = Symbol("AclOwnerOnly"); export const AclReadonly = Symbol("AclReadOnly"); export const AclAddonly = Symbol("AclAddonly"); +export const AclReadWrite = Symbol("AclReadWrite"); export const UpdatingFromServer = Symbol("UpdatingFromServer"); const CachedUpdates = Symbol("Cached updates"); @@ -113,6 +114,8 @@ export function fetchProto(doc: Doc) { case "addOnly": doc[AclSym] = AclAddonly; break; + case "write": + doc[AclSym] = AclReadWrite; } } |