aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/GroupManager.tsx91
-rw-r--r--src/client/util/GroupMemberView.tsx4
-rw-r--r--src/client/util/SharingManager.scss122
-rw-r--r--src/client/util/SharingManager.tsx256
4 files changed, 291 insertions, 182 deletions
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index 7c68fc2a0..e352d46a8 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -89,7 +89,8 @@ export default class GroupManager extends React.Component<{}> {
/**
* @returns a list of all group documents.
*/
- private getAllGroups(): Doc[] {
+ // private ?
+ getAllGroups(): Doc[] {
const groupDoc = this.GroupManagerDoc;
return groupDoc ? DocListCast(groupDoc.data) : [];
}
@@ -98,7 +99,8 @@ export default class GroupManager extends React.Component<{}> {
* @returns a group document based on the group name.
* @param groupName
*/
- private getGroup(groupName: string): Doc | undefined {
+ // private?
+ getGroup(groupName: string): Doc | undefined {
const groupDoc = this.getAllGroups().find(group => group.groupName === groupName);
return groupDoc;
}
@@ -172,8 +174,9 @@ export default class GroupManager extends React.Component<{}> {
deleteGroup(group: Doc): boolean {
if (group) {
if (this.GroupManagerDoc && this.hasEditAccess(group)) {
+ // TODO look at this later
+ // SharingManager.Instance.setInternalGroupSharing(group, "Not Shared");
Doc.RemoveDocFromList(this.GroupManagerDoc, "data", group);
- SharingManager.Instance.setInternalGroupSharing(group, "Not Shared");
if (group === this.currentGroup) {
runInAction(() => this.currentGroup = undefined);
}
@@ -248,48 +251,48 @@ export default class GroupManager extends React.Component<{}> {
/**
* A getter that @returns the interface rendered to view an individual group.
*/
- private get editingInterface() {
- const members: string[] = this.currentGroup ? JSON.parse(StrCast(this.currentGroup.members)) : [];
- const options: UserOptions[] = this.currentGroup ? this.options.filter(option => !(JSON.parse(StrCast(this.currentGroup!.members)) as string[]).includes(option.value)) : [];
- return (!this.currentGroup ? null :
- <div className="editing-interface">
- <div className="editing-header">
- <b>{this.currentGroup.groupName}</b>
- <div className={"close-button"} onClick={action(() => this.currentGroup = undefined)}>
- <FontAwesomeIcon icon={fa.faWindowClose} size={"lg"} />
- </div>
+ // private get editingInterface() {
+ // const members: string[] = this.currentGroup ? JSON.parse(StrCast(this.currentGroup.members)) : [];
+ // const options: UserOptions[] = this.currentGroup ? this.options.filter(option => !(JSON.parse(StrCast(this.currentGroup!.members)) as string[]).includes(option.value)) : [];
+ // return (!this.currentGroup ? null :
+ // <div className="editing-interface">
+ // <div className="editing-header">
+ // <b>{this.currentGroup.groupName}</b>
+ // <div className={"close-button"} onClick={action(() => this.currentGroup = undefined)}>
+ // <FontAwesomeIcon icon={fa.faWindowClose} size={"lg"} />
+ // </div>
- {this.hasEditAccess(this.currentGroup) ?
- <div className="group-buttons">
- <div className="add-member-dropdown">
- <Select
- // isMulti={true}
- isSearchable={true}
- options={options}
- onChange={selectedOption => this.addMemberToGroup(this.currentGroup!, (selectedOption as UserOptions).value)}
- placeholder={"Add members"}
- value={null}
- closeMenuOnSelect={true}
- />
- </div>
- <button onClick={() => this.deleteGroup(this.currentGroup!)}>Delete group</button>
- </div> :
- null}
- </div>
- <div className="editing-contents">
- {members.map(member => (
- <div className="editing-row">
- <div className="user-email">
- {member}
- </div>
- {this.hasEditAccess(this.currentGroup!) ? <button onClick={() => this.removeMemberFromGroup(this.currentGroup!, member)}> Remove </button> : null}
- </div>
- ))}
- </div>
- </div>
- );
+ // {this.hasEditAccess(this.currentGroup) ?
+ // <div className="group-buttons">
+ // <div className="add-member-dropdown">
+ // <Select
+ // // isMulti={true}
+ // isSearchable={true}
+ // options={options}
+ // onChange={selectedOption => this.addMemberToGroup(this.currentGroup!, (selectedOption as UserOptions).value)}
+ // placeholder={"Add members"}
+ // value={null}
+ // closeMenuOnSelect={true}
+ // />
+ // </div>
+ // <button onClick={() => this.deleteGroup(this.currentGroup!)}>Delete group</button>
+ // </div> :
+ // null}
+ // </div>
+ // <div className="editing-contents">
+ // {members.map(member => (
+ // <div className="editing-row">
+ // <div className="user-email">
+ // {member}
+ // </div>
+ // {this.hasEditAccess(this.currentGroup!) ? <button onClick={() => this.removeMemberFromGroup(this.currentGroup!, member)}> Remove </button> : null}
+ // </div>
+ // ))}
+ // </div>
+ // </div>
+ // );
- }
+ // }
/**
* A getter that @returns the main interface for the GroupManager.
@@ -307,7 +310,7 @@ export default class GroupManager extends React.Component<{}> {
{this.currentGroup ?
<GroupMemberView
group={this.currentGroup}
- onCloseButtonClick={() => this.currentGroup = undefined}
+ onCloseButtonClick={action(() => this.currentGroup = undefined)}
/>
: null}
<div className="group-heading">
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>
diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss
index fcbc05f8a..209c41651 100644
--- a/src/client/util/SharingManager.scss
+++ b/src/client/util/SharingManager.scss
@@ -1,9 +1,9 @@
@import "../views/globalCssVariables";
.sharing-interface {
- display: flex;
- flex-direction: column;
- width: 730px;
+ // display: flex;
+ // flex-direction: column;
+ width: 600px;
.dialogue-box {
width: 450;
@@ -16,6 +16,66 @@
.sharing-contents {
display: flex;
+ flex-direction: column;
+
+ .share-setup {
+ display: flex;
+ margin-bottom: 20px;
+ align-items: center;
+ height: 36;
+
+ .user-search {
+ width: 90%;
+ }
+
+ .permissions-select {
+ z-index: 1;
+ margin-left: -100;
+ border: none;
+ outline: none;
+ }
+
+ .share-button {
+ height: 100%;
+ margin-left: 3%;
+ }
+ }
+
+ .main-container {
+ display: flex;
+
+
+ .individual-container,
+ .group-container {
+ width: 50%;
+
+ .share-title {
+ 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;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ text-align: left;
+ display: flex;
+ align-content: center;
+ align-items: center;
+ text-align: center;
+ justify-content: center;
+ // color: red;
+ color: black;
+ height: 150px;
+ margin: 0 2;
+ }
+ }
+ }
button {
background: $darker-alt-accent;
@@ -31,37 +91,6 @@
transition: transform 0.2s;
height: 25;
}
-
- .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;
- overflow-y: scroll;
- overflow-x: hidden;
- text-align: left;
- display: flex;
- align-content: center;
- align-items: center;
- text-align: center;
- justify-content: center;
- color: red;
- height: 150px;
- margin: 0 2;
- }
- }
}
.focus-span {
@@ -69,11 +98,12 @@
}
p {
- font-size: 15px;
+ font-size: 20px;
text-align: left;
- font-style: italic;
- padding: 0;
+ // font-style: italic;
+ // padding: 0;
margin: 0 0 20px 0;
+ color: black;
}
.hr-substitute {
@@ -108,9 +138,9 @@
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
- width: 700px;
- min-width: 700px;
- max-width: 700px;
+ width: 100%;
+ // min-width: 700px;
+ // max-width: 700px;
text-align: left;
font-style: normal;
font-size: 14;
@@ -118,20 +148,28 @@
padding: 0;
align-items: baseline;
+ &:hover .padding {
+ white-space: unset;
+ }
+
.padding {
padding: 0 10px 0 0;
color: black;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ max-width: 48%;
}
.permissions-dropdown {
- outline: none;
+ border: none;
height: 25;
}
.edit-actions {
display: flex;
position: absolute;
- right: 51.5%;
+ right: -10;
}
}
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 127ee33ce..491abe1dc 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -9,7 +9,6 @@ import { Utils } from "../../Utils";
import "./SharingManager.scss";
import { Id } from "../../fields/FieldSymbols";
import { observer } from "mobx-react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { library } from '@fortawesome/fontawesome-svg-core';
import * as fa from '@fortawesome/free-solid-svg-icons';
import { DocumentView } from "../views/nodes/DocumentView";
@@ -17,8 +16,9 @@ import { SelectionManager } from "./SelectionManager";
import { DocumentManager } from "./DocumentManager";
import { CollectionView } from "../views/collections/CollectionView";
import { DictationOverlay } from "../views/DictationOverlay";
-import GroupManager from "./GroupManager";
+import GroupManager, { UserOptions } from "./GroupManager";
import GroupMemberView from "./GroupMemberView";
+import Select from "react-select";
library.add(fa.faCopy);
@@ -28,18 +28,18 @@ export interface User {
}
export enum SharingPermissions {
- None = "Not Shared",
- View = "Can View",
+ Edit = "Can Edit",
Add = "Can Add",
- Edit = "Can Edit"
+ View = "Can View",
+ None = "Not Shared"
}
-const ColorMapping = new Map<string, string>([
- [SharingPermissions.None, "red"],
- [SharingPermissions.View, "maroon"],
- [SharingPermissions.Add, "blue"],
- [SharingPermissions.Edit, "green"]
-]);
+// const ColorMapping = new Map<string, string>([
+// [SharingPermissions.None, "red"],
+// [SharingPermissions.View, "maroon"],
+// [SharingPermissions.Add, "blue"],
+// [SharingPermissions.Edit, "green"]
+// ]);
const HierarchyMapping = new Map<string, string>([
[SharingPermissions.None, "0"],
@@ -54,10 +54,18 @@ const HierarchyMapping = new Map<string, string>([
]);
+interface GroupOptions {
+ label: string;
+ options: UserOptions[];
+}
+
const SharingKey = "sharingPermissions";
const PublicKey = "publicLinkPermissions";
const DefaultColor = "black";
+const groupType = "!groupType/";
+const indType = "!indType/";
+
interface ValidatedUser {
user: User;
notificationDoc: Doc;
@@ -70,17 +78,18 @@ 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 groups: Doc[] = [];
@observable private targetDoc: Doc | undefined;
@observable private targetDocView: DocumentView | undefined;
@observable private copied = false;
@observable private dialogueBoxOpacity = 1;
@observable private overlayOpacity = 0.4;
- @observable private groupToView: Opt<Doc>;
+ @observable private selectedUsers: UserOptions[] | null = null;
+ @observable private permissions: SharingPermissions = SharingPermissions.None;
- private get linkVisible() {
- return this.sharingDoc ? this.sharingDoc[PublicKey] !== SharingPermissions.None : false;
- }
+ // private get linkVisible() {
+ // return this.sharingDoc ? this.sharingDoc[PublicKey] !== SharingPermissions.None : false;
+ // }
public open = (target: DocumentView) => {
SelectionManager.DeselectAll();
@@ -94,7 +103,7 @@ export default class SharingManager extends React.Component<{}> {
}
}));
- runInAction(() => this.groups = GroupManager.Instance.getAllGroupsCopy());
+ // runInAction(() => this.groups = GroupManager.Instance.getAllGroups());
}
public close = action(() => {
@@ -145,6 +154,7 @@ export default class SharingManager extends React.Component<{}> {
const users: ValidatedUser[] = this.users.filter(user => members.includes(user.user.email));
const sharingDoc = this.sharingDoc!;
+ console.log(sharingDoc)
if (permission === SharingPermissions.None) {
const metadata = sharingDoc[StrCast(group.groupName)];
if (metadata) sharingDoc[StrCast(group.groupName)] = undefined;
@@ -158,7 +168,7 @@ export default class SharingManager extends React.Component<{}> {
});
}
- setInternalSharing = async (recipient: ValidatedUser, state: string, group: Opt<Doc>) => {
+ setInternalSharing = async (recipient: ValidatedUser, state: string, group?: Doc) => {
const { user, notificationDoc } = recipient;
const target = this.targetDoc!;
const manager = this.sharingDoc!;
@@ -207,13 +217,13 @@ export default class SharingManager extends React.Component<{}> {
if (metadata) metadata.maxPermission = HierarchyMapping.get(`${max}`);
}
- private setExternalSharing = (state: string) => {
- const sharingDoc = this.sharingDoc;
- if (!sharingDoc) {
- return;
- }
- sharingDoc[PublicKey] = state;
- }
+ // private setExternalSharing = (state: string) => {
+ // const sharingDoc = this.sharingDoc;
+ // if (!sharingDoc) {
+ // return;
+ // }
+ // sharingDoc[PublicKey] = state;
+ // }
private get sharingUrl() {
if (!this.targetDoc) {
@@ -282,21 +292,60 @@ export default class SharingManager extends React.Component<{}> {
return StrCast(metadata instanceof Doc ? metadata.maxPermission : metadata, SharingPermissions.None);
}
+ @action
+ handleUsersChange = (selectedOptions: any) => {
+ this.selectedUsers = selectedOptions as UserOptions[];
+ }
+
+ @action
+ handlePermissionsChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+ this.permissions = event.currentTarget.value as SharingPermissions;
+ }
+
+ @action
+ 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 {
+ this.setInternalGroupSharing(GroupManager.Instance.getGroup(user.label)!, this.permissions);
+ }
+ });
+
+ this.selectedUsers = null;
+ }
+
private get sharingInterface() {
const existOtherUsers = this.users.length > 0;
- const existGroups = this.groups.length > 0;
+ const existGroups = GroupManager.Instance?.getAllGroups().length > 0;
// const manager = this.sharingDoc!;
+ const options: GroupOptions[] = GroupManager.Instance ?
+ [
+ {
+ label: 'Individuals',
+ options: GroupManager.Instance.options.map(({ label, value }) => ({ label, value: "!indType/" + value }))
+ },
+ {
+ label: 'Groups',
+ options: GroupManager.Instance.getAllGroups().map(({ groupName }) => ({ label: StrCast(groupName), value: "!groupType/" + StrCast(groupName) }))
+ }
+ ]
+ : [];
+
return (
<div className={"sharing-interface"}>
- {this.groupToView ?
+ {GroupManager.Instance?.currentGroup ?
<GroupMemberView
- group={this.groupToView}
- onCloseButtonClick={action(() => this.groupToView = undefined)}
+ group={GroupManager.Instance.currentGroup}
+ onCloseButtonClick={action(() => GroupManager.Instance.currentGroup = undefined)}
/> :
null}
- <p className={"share-link"}>Manage the public link to {this.focusOn("this document...")}</p>
+ {/* <p className={"share-link"}>Manage the public link to {this.focusOn("this document...")}</p>
{!this.linkVisible ? (null) :
<div className={"link-container"}>
<div className={"link-box"} onClick={this.copy}>{this.sharingUrl}</div>
@@ -325,78 +374,97 @@ export default class SharingManager extends React.Component<{}> {
{this.sharingOptions}
</select>
</div>
- <div className={"hr-substitute"} />
+ <div className={"hr-substitute"} /> */}
<div className="sharing-contents">
- <div className={"individual-container"}>
- <p className={"share-individual"}>Privately share {this.focusOn("this document")} with an individual...</p>
- <div className={"users-list"} style={{ display: existOtherUsers ? "block" : "flex", minHeight: existOtherUsers ? undefined : 150 }}>{/*200*/}
- {!existOtherUsers ? "There are no other users in your database." :
- 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 (
- <div
- key={userKey}
- 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, undefined)}
- >
- {this.sharingOptions}
- </select>
+ <p className={"share-title"}><b>Share </b>{this.focusOn(StrCast(this.targetDoc?.title, "this document"))}</p>
+ <div className="share-setup">
+ <Select
+ className={"user-search"}
+ placeholder={"Enter user or group name..."}
+ isMulti
+ closeMenuOnSelect={false}
+ options={options}
+ onChange={this.handleUsersChange}
+ value={this.selectedUsers}
+ />
+ <select className="permissions-select" onChange={this.handlePermissionsChange}>
+ {this.sharingOptions}
+ </select>
+ <button className="share-button" onClick={this.share}>
+ Share
+ </button>
+ </div>
+ <div className="main-container">
+ <div className={"individual-container"}>
+ <div className={"users-list"} style={{ display: existOtherUsers ? "block" : "flex", minHeight: existOtherUsers ? undefined : 150 }}>{/*200*/}
+ {!existOtherUsers ? "There are no other users in your database." :
+ 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 permissions === SharingPermissions.None ? null : (
+ <div
+ key={userKey}
+ 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}
+ </select>
+ </div>
</div>
- </div>
- );
- })
- }
+ );
+ })
+ }
+ </div>
</div>
- </div>
- <div className={"group-container"}>
- <p className={"share-groups"}>Privately share {this.focusOn("this document")} with a group...</p>
- <div className={"groups-list"} style={{ display: existGroups ? "block" : "flex", minHeight: existOtherUsers ? undefined : 150 }}>{/*200*/}
- {!existGroups ? "There are no groups in your database." :
- this.groups.map(group => {
- const permissions = this.computePermissions(StrCast(group.groupName));
- const color = ColorMapping.get(permissions);
- return (
- <div
- key={StrCast(group.groupName)}
- className={"container"}
- >
- <span className={"padding"}>{group.groupName}</span>
- <div className="edit-actions">
- <select
- className={"permissions-dropdown"}
- value={permissions}
- style={{ color, borderColor: color }}
- onChange={e => this.setInternalGroupSharing(group, e.currentTarget.value)}
- >
- {this.sharingOptions}
- </select>
- <button onClick={action(() => this.groupToView = group)}>Edit</button>
+ <div className={"group-container"}>
+ <div className={"groups-list"} style={{ display: existGroups ? "block" : "flex", minHeight: existOtherUsers ? undefined : 150 }}>{/*200*/}
+ {!existGroups ? "There are no groups in your database." :
+ GroupManager.Instance.getAllGroups().map(group => {
+ const permissions = this.computePermissions(StrCast(group.groupName));
+ // const color = ColorMapping.get(permissions);
+ return permissions === SharingPermissions.None ? null : (
+ <div
+ key={StrCast(group.groupName)}
+ className={"container"}
+ >
+ <span className={"padding"}>{group.groupName}</span>
+ <div className="edit-actions">
+ <select
+ className={"permissions-dropdown"}
+ value={permissions}
+ // style={{ color, borderColor: color }}
+ onChange={e => this.setInternalGroupSharing(group, e.currentTarget.value)}
+ >
+ {this.sharingOptions}
+ </select>
+ <button onClick={action(() => GroupManager.Instance.currentGroup = group)}>Edit</button>
+ </div>
</div>
- </div>
- );
- })
+ );
+ })
- }
+ }
+ </div>
</div>
</div>
+
</div>
<div className={"close-button"} onClick={this.close}>Done</div>
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-17 04:33:44 +0000