From 9d9ca5adaa19ff80e6e7f4aab1adccf659c80f47 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Fri, 26 Jun 2020 16:29:52 +0530 Subject: added GroupManager privacy + setting up group sharing + permissions + group sharing ui --- src/client/util/SharingManager.scss | 62 ++++++++++++++++++++++++------------- 1 file changed, 40 insertions(+), 22 deletions(-) (limited to 'src/client/util/SharingManager.scss') diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss index dec9f751a..1aff345a0 100644 --- a/src/client/util/SharingManager.scss +++ b/src/client/util/SharingManager.scss @@ -1,13 +1,52 @@ .sharing-interface { display: flex; flex-direction: column; + width: 730px; + + .sharing-contents { + display: flex; + + .individual-container, + .group-container { + width: 50%; + + .share-groups, + .share-individual { + margin-top: 20px; + margin-bottom: 20px; + } + + .groups-list, + .users-list { + font-style: italic; + background: white; + border: 1px solid black; + padding-left: 10px; + padding-right: 10px; + // max-height: 200px; + overflow: scroll; + height: -webkit-fill-available; + text-align: left; + display: flex; + align-content: center; + align-items: center; + text-align: center; + justify-content: center; + color: red; + + // width: 50%; + max-height: 150px; + } + } + } .focus-span { text-decoration: underline; } p { - font-size: 20px; + // font-size: 20px; + font-size: 15px; text-align: left; font-style: italic; padding: 0; @@ -36,28 +75,7 @@ } } - .share-individual { - margin-top: 20px; - margin-bottom: 20px; - } - .users-list { - font-style: italic; - background: white; - border: 1px solid black; - padding-left: 10px; - padding-right: 10px; - max-height: 200px; - overflow: scroll; - height: -webkit-fill-available; - text-align: left; - display: flex; - align-content: center; - align-items: center; - text-align: center; - justify-content: center; - color: red; - } .container { display: block; -- cgit v1.2.3-70-g09d2 From db3ed8fc7acbc1722160992b66fd6b3664c64007 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Fri, 26 Jun 2020 19:40:03 +0530 Subject: convoluted permissions stuff + SharingManager ui changes --- src/client/util/GroupManager.tsx | 3 +- src/client/util/SharingManager.scss | 15 +++----- src/client/util/SharingManager.tsx | 74 +++++++++++++++++++++++-------------- 3 files changed, 54 insertions(+), 38 deletions(-) (limited to 'src/client/util/SharingManager.scss') diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx index fa8da86c1..aaba84202 100644 --- a/src/client/util/GroupManager.tsx +++ b/src/client/util/GroupManager.tsx @@ -7,7 +7,7 @@ import { Doc, DocListCast, Opt } from "../../fields/Doc"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import * as fa from '@fortawesome/free-solid-svg-icons'; import { library } from "@fortawesome/fontawesome-svg-core"; -import { User } from "./SharingManager"; +import SharingManager, { User } from "./SharingManager"; import { Utils } from "../../Utils"; import * as RequestPromise from "request-promise"; import Select from 'react-select'; @@ -172,6 +172,7 @@ export default class GroupManager extends React.Component<{}> { if (group) { if (this.GroupManagerDoc && this.hasEditAccess(group)) { Doc.RemoveDocFromList(this.GroupManagerDoc, "data", group); + SharingManager.Instance.setInternalGroupSharing(group, "Not Shared"); if (group === this.currentGroup) { runInAction(() => this.currentGroup = undefined); } diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss index 1aff345a0..7b7412ec7 100644 --- a/src/client/util/SharingManager.scss +++ b/src/client/util/SharingManager.scss @@ -23,9 +23,8 @@ border: 1px solid black; padding-left: 10px; padding-right: 10px; - // max-height: 200px; - overflow: scroll; - height: -webkit-fill-available; + overflow-y: scroll; + overflow-x: hidden; text-align: left; display: flex; align-content: center; @@ -33,9 +32,8 @@ text-align: center; justify-content: center; color: red; - - // width: 50%; - max-height: 150px; + height: 150px; + margin: 0 2; } } } @@ -45,7 +43,6 @@ } p { - // font-size: 20px; font-size: 15px; text-align: left; font-style: italic; @@ -92,12 +89,12 @@ max-width: 700px; text-align: left; font-style: normal; - font-size: 15; + font-size: 14; font-weight: normal; padding: 0; .padding { - padding: 0 0 0 20px; + padding: 0 0 0 10px; color: black; } diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx index 3d796539c..521e5366c 100644 --- a/src/client/util/SharingManager.tsx +++ b/src/client/util/SharingManager.tsx @@ -40,11 +40,17 @@ const ColorMapping = new Map([ [SharingPermissions.Edit, "green"] ]); -const HierarchyMapping = new Map([ - [SharingPermissions.None, 0], - [SharingPermissions.View, 1], - [SharingPermissions.Add, 2], - [SharingPermissions.Edit, 3] +const HierarchyMapping = new Map([ + [SharingPermissions.None, "0"], + [SharingPermissions.View, "1"], + [SharingPermissions.Add, "2"], + [SharingPermissions.Edit, "3"], + + ["0", SharingPermissions.None], + ["1", SharingPermissions.View], + ["2", SharingPermissions.Add], + ["3", SharingPermissions.Edit] + ]); const SharingKey = "sharingPermissions"; @@ -138,39 +144,51 @@ export default class SharingManager extends React.Component<{}> { const sharingDoc = this.sharingDoc!; if (permission === SharingPermissions.None) { - const metadata = sharingDoc[group[Id]]; - if (metadata) sharingDoc[group[Id]] = undefined; + const metadata = sharingDoc[StrCast(group.groupName)]; + if (metadata) sharingDoc[StrCast(group.groupName)] = undefined; } else { - sharingDoc[group[Id]] = permission; + sharingDoc[StrCast(group.groupName)] = permission; } users.forEach(user => { - this.setInternalSharing(user, permission); + this.setInternalSharing(user, permission, group); }); } - setInternalSharing = async (recipient: ValidatedUser, state: string) => { + setInternalSharing = async (recipient: ValidatedUser, state: string, group: Opt) => { const { user, notificationDoc } = recipient; const target = this.targetDoc!; const manager = this.sharingDoc!; const key = user.userDocumentId; - if (state === SharingPermissions.None) { - const metadata = (await DocCastAsync(manager[key])); - if (metadata) { - const sharedAlias = (await DocCastAsync(metadata.sharedAlias))!; - Doc.RemoveDocFromList(notificationDoc, storage, sharedAlias); - manager[key] = undefined; - } - } else { - const sharedAlias = Doc.MakeAlias(target); - Doc.AddDocToList(notificationDoc, storage, sharedAlias); - const metadata = new Doc; - metadata.permissions = state; - metadata.sharedAlias = sharedAlias; - manager[key] = metadata; + 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(state)!); + 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; + } + break; + + case 1: case 2: case 3: + if (!metadata) { + metadata = new Doc; + const sharedAlias = Doc.MakeAlias(target); + Doc.AddDocToList(notificationDoc, storage, sharedAlias); + metadata.sharedAlias = sharedAlias; + manager[key] = metadata; + } + metadata.permissions = JSON.stringify(permissions); + break; } + + if (metadata) metadata.maxPermission = HierarchyMapping.get(`${max}`); } private setExternalSharing = (state: string) => { @@ -245,7 +263,7 @@ export default class SharingManager extends React.Component<{}> { if (!metadata) { return SharingPermissions.None; } - return StrCast(metadata instanceof Doc ? metadata.permissions : metadata, SharingPermissions.None); + return StrCast(metadata instanceof Doc ? metadata.maxPermission : metadata, SharingPermissions.None); } @@ -302,7 +320,7 @@ export default class SharingManager extends React.Component<{}> { className={"permissions-dropdown"} value={permissions} style={{ color, borderColor: color }} - onChange={e => this.setInternalSharing({ user, notificationDoc }, e.currentTarget.value)} + onChange={e => this.setInternalSharing({ user, notificationDoc }, e.currentTarget.value, undefined)} > {this.sharingOptions} @@ -318,11 +336,11 @@ export default class SharingManager extends React.Component<{}> {
{/*200*/} {!existGroups ? "There are no groups in your database." : this.groups.map(group => { - const permissions = this.computePermissions(group[Id]); + const permissions = this.computePermissions(StrCast(group.groupName)); const color = ColorMapping.get(permissions); return (
GroupManager.Instance.addMemberToGroup(this.props.group, (selectedOption as UserOptions).value)} + placeholder={"Add members"} + value={null} + closeMenuOnSelect={true} + /> +
+ +
: + null} + +
+ {members.map(member => ( +
+
+ {member} +
+ {GroupManager.Instance.hasEditAccess(this.props.group) ? : null} +
+ ))} +
+ + ); + + } + + render() { + return ; + } + + +} \ No newline at end of file diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss index 7b7412ec7..aac9a33e8 100644 --- a/src/client/util/SharingManager.scss +++ b/src/client/util/SharingManager.scss @@ -1,11 +1,33 @@ +@import "../views/globalCssVariables"; + .sharing-interface { display: flex; flex-direction: column; width: 730px; + .dialogue-box { + width: 450; + height: 300; + } + .sharing-contents { display: flex; + button { + background: $darker-alt-accent; + outline: none; + border-radius: 5px; + border: 0px; + color: #fcfbf7; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 75%; + padding: 0 10; + margin: 0 5; + transition: transform 0.2s; + height: 25; + } + .individual-container, .group-container { width: 50%; @@ -72,12 +94,10 @@ } } - - .container { - display: block; + display: flex; position: relative; - margin-top: 10px; + margin-top: 5px; margin-bottom: 10px; font-size: 22px; -webkit-user-select: none; @@ -92,15 +112,24 @@ font-size: 14; font-weight: normal; padding: 0; + align-items: baseline; .padding { - padding: 0 0 0 10px; + padding: 0 10px 0 0; color: black; } .permissions-dropdown { outline: none; + height: 25; } + + .edit-actions { + display: flex; + position: absolute; + right: 51.5%; + } + } .no-users { diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx index 521e5366c..1f62c824d 100644 --- a/src/client/util/SharingManager.tsx +++ b/src/client/util/SharingManager.tsx @@ -18,6 +18,7 @@ import { DocumentManager } from "./DocumentManager"; import { CollectionView } from "../views/collections/CollectionView"; import { DictationOverlay } from "../views/DictationOverlay"; import GroupManager from "./GroupManager"; +import GroupMemberView from "./GroupMemberView"; library.add(fa.faCopy); @@ -75,6 +76,7 @@ export default class SharingManager extends React.Component<{}> { @observable private copied = false; @observable private dialogueBoxOpacity = 1; @observable private overlayOpacity = 0.4; + @observable private groupToView: Opt; private get linkVisible() { return this.sharingDoc ? this.sharingDoc[PublicKey] !== SharingPermissions.None : false; @@ -266,12 +268,18 @@ export default class SharingManager extends React.Component<{}> { return StrCast(metadata instanceof Doc ? metadata.maxPermission : metadata, SharingPermissions.None); } - private get sharingInterface() { const existOtherUsers = this.users.length > 0; const existGroups = this.groups.length > 0; return (
+ {this.groupToView ? + this.groupToView = undefined)} + /> : + null} +

Manage the public link to {this.focusOn("this document...")}

{!this.linkVisible ? (null) :
@@ -316,15 +324,17 @@ export default class SharingManager extends React.Component<{}> { key={userKey} className={"container"} > - {user.email} +
+ +
); }) @@ -343,15 +353,18 @@ export default class SharingManager extends React.Component<{}> { key={StrCast(group.groupName)} className={"container"} > - {group.groupName} +
+ + +
); }) -- cgit v1.2.3-70-g09d2 From ba44a0aff2a4c78d3fc033981c7b2daa740cb017 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Tue, 30 Jun 2020 00:13:41 +0530 Subject: pull request for Sally --- package-lock.json | 16 +++++++++++++++- src/client/util/GroupManager.tsx | 2 +- src/client/util/SharingManager.scss | 4 ++++ src/client/util/SharingManager.tsx | 29 +++++++++++++++++++++++++++-- 4 files changed, 47 insertions(+), 4 deletions(-) (limited to 'src/client/util/SharingManager.scss') diff --git a/package-lock.json b/package-lock.json index ae8818538..53b2fc009 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1050,6 +1050,15 @@ "@types/react": "*" } }, + "@types/react-transition-group": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz", + "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/reactcss": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.3.tgz", @@ -8354,6 +8363,11 @@ "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" }, + "memoize-one": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz", + "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==" + }, "memory-fs": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz", @@ -17832,4 +17846,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx index 885f9da8e..7c68fc2a0 100644 --- a/src/client/util/GroupManager.tsx +++ b/src/client/util/GroupManager.tsx @@ -119,7 +119,7 @@ export default class GroupManager extends React.Component<{}> { */ getAllGroupsCopy(): Doc[] { return this.getAllGroups().map(({ groupName, owners, members }) => - Doc.assign(new Doc, { groupName: (groupName as string), owners: (owners as string), members: (members as string) }) + Doc.assign(new Doc, { groupName: (StrCast(groupName)), owners: (StrCast(owners)), members: (StrCast(members)) }) ); } diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss index aac9a33e8..fcbc05f8a 100644 --- a/src/client/util/SharingManager.scss +++ b/src/client/util/SharingManager.scss @@ -10,6 +10,10 @@ height: 300; } + .overlay { + transform: translate(-20px, -20px); + } + .sharing-contents { display: flex; diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx index 1f62c824d..127ee33ce 100644 --- a/src/client/util/SharingManager.tsx +++ b/src/client/util/SharingManager.tsx @@ -169,6 +169,19 @@ export default class SharingManager extends React.Component<{}> { permissions[StrCast(group ? group.groupName : Doc.CurrentUserEmail)] = parseInt(HierarchyMapping.get(state)!); const max = Math.max(...Object.values(permissions)); + // let max = 0; + // const keys: string[] = []; + // for (const [key, value] of Object.entries(permissions)) { + // if (value === max && max !== 0) { + // keys.push(key); + // } + // else if (value > max) { + // keys.splice(0, keys.length); + // keys.push(key); + // max = value; + // } + // } + switch (max) { case 0: if (metadata) { @@ -187,6 +200,7 @@ export default class SharingManager extends React.Component<{}> { manager[key] = metadata; } metadata.permissions = JSON.stringify(permissions); + // metadata.usersShared = JSON.stringify(keys); break; } @@ -271,6 +285,9 @@ export default class SharingManager extends React.Component<{}> { private get sharingInterface() { const existOtherUsers = this.users.length > 0; const existGroups = this.groups.length > 0; + + // const manager = this.sharingDoc!; + return (
{this.groupToView ? @@ -279,7 +296,6 @@ export default class SharingManager extends React.Component<{}> { onCloseButtonClick={action(() => this.groupToView = undefined)} /> : null} -

Manage the public link to {this.focusOn("this document...")}

{!this.linkVisible ? (null) :
@@ -315,16 +331,24 @@ export default class SharingManager extends React.Component<{}> {

Privately share {this.focusOn("this document")} with an individual...

{/*200*/} {!existOtherUsers ? "There are no other users in your database." : - this.users.map(({ user, notificationDoc }) => { + this.users.map(({ user, notificationDoc }) => { // can't use async here const userKey = user.userDocumentId; const permissions = this.computePermissions(userKey); const color = ColorMapping.get(permissions); + + // console.log(manager); + // const metadata = manager[userKey] as Doc; + // const usersShared = StrCast(metadata?.usersShared, ""); + // console.log(usersShared) + + return (
{user.email} + {/*
{usersShared}
*/}