implemented sharing UI in permissions

3 files changed, 157 insertions, 2 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index beee9289e..f43eca468 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -8,7 +8,7 @@ import {
     faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTimesCircle,
     faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight,
     faHeading, faRulerCombined, faFillDrip, faLink, faUnlink, faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper,
-    faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faMap, faDesktop, faTrashRestore, faUsers, faWrench, faCog
+    faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faMap, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faBellSlash
 } from '@fortawesome/free-solid-svg-icons';
 import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -174,7 +174,7 @@ export class MainView extends React.Component {
             faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTrashAlt, faAngleRight, faBell,
             faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight,
             faHeading, faRulerCombined, faFillDrip, faLink, faUnlink, faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper,
-            faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faMap);
+            faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faMap, faBellSlash);
         this.initEventListeners();
         this.initAuthenticationRouters();
     }
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index f64ef2211..e025c7e87 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -41,6 +41,85 @@
 
     }
 
+    .propertiesView-sharing {
+        border-bottom: 1px solid black;
+        padding: 8.5px;
+
+        .propertiesView-sharing-title {
+            font-size: 12.5px;
+            font-weight: bold;
+            padding-bottom: 7px;
+        }
+
+        .propertiesView-sharing-content {
+            font-size: 10px;
+            margin-left: 5px;
+        }
+    }
+
+    .notify-button {
+        padding: 2px;
+        width: 12px;
+        height: 12px;
+        background-color: black;
+        border-radius: 10px;
+        padding-left: 2px;
+        padding-right: 2px;
+        margin-top: 2px;
+        margin-right: 3px;
+
+        .notify-button-icon {
+            width: 6px;
+            height: 6.5px;
+            margin-left: .5px;
+        }
+
+        &:hover {
+            background-color: rgb(158, 158, 158);
+        }
+    }
+
+    .propertiesView-sharingTable {
+
+        border: 1px solid black;
+        padding: 5px;
+        border-radius: 6px;
+        width: 170px;
+        background-color: #ececec;
+
+        .propertiesView-sharingTable-item {
+
+            display: flex;
+            padding: 3px;
+
+            border-bottom: 0.5px solid grey;
+
+            .propertiesView-sharingTable-item-name {
+                font-weight: bold;
+                width: 80px;
+                overflow-x: hidden;
+                display: inline-block;
+            }
+
+            .propertiesView-sharingTable-item-permission {
+
+                .permissions-select {
+                    z-index: 1;
+                    //border: 0.5px solid grey;
+                    //border-radius: 4px;
+                    //outline: none;
+                    border: none;
+                    background-color: inherit;
+                    width: 75px;
+                }
+            }
+
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+    }
+
     .propertiesView-fields {
         border-bottom: 1px solid black;
         padding: 8.5px;
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 1954a11bf..9af4bd276 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -15,6 +15,8 @@ import { Id } from "../../../../fields/FieldSymbols";
 import { Transform } from "../../../util/Transform";
 import { PropertiesButtons } from "../../PropertiesButtons";
 import { SelectionManager } from "../../../util/SelectionManager";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Tooltip } from "@material-ui/core";
 
 
 interface PropertiesViewProps {
@@ -154,6 +156,74 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         }
     }
 
+    @computed get permissionsSelect() {
+        return <select className="permissions-select" onChange={emptyFunction}>
+            <option key={"Can Edit"} value={"Can Edit"}>
+                Can Edit
+                        </option>
+            <option key={"Can Add"} value={"Can Add"}>
+                Can Add
+                        </option>
+            <option key={"Can View"} value={"Can View"}>
+                Can View
+                        </option>
+            <option key={"Not Shared"} value={"Not Shared"}>
+                Not Shared
+                        </option>
+        </select>;
+    }
+
+    @computed get notifyIcon() {
+        return <Tooltip title={<><div className="dash-tooltip">{"Notify user or group of permissions change"}</div></>}>
+            <div className="notify-button">
+                <FontAwesomeIcon className="notify-button-icon" icon="bell" color="white" size="sm" />
+            </div>
+        </Tooltip>;
+    }
+
+    sharingItem(name: string, notify: boolean, editable: boolean, permission?: string) {
+        return <div className="propertiesView-sharingTable-item">
+            <div className="propertiesView-sharingTable-item-name" style={{ width: notify ? "70px" : "80px" }}> {name} </div>
+            {notify ? this.notifyIcon : null}
+            <div className="propertiesView-sharingTable-item-permission">
+                {editable ? this.permissionsSelect : permission}
+            </div>
+        </div>;
+    }
+
+    @computed get sharingTable() {
+        return <div className="propertiesView-sharingTable">
+            {this.sharingItem("Me", false, false, "Owner")}
+            {this.sharingItem("Public", false, true)}
+            {this.sharingItem("Group 1", true, true)}
+            {this.sharingItem("Group 2", true, true)}
+            {/* <div className="propertiesView-sharingTable-item">
+                <div className="propertiesView-sharingTable-item-name"> Me: </div>
+                <div className="propertiesView-sharingTable-item-permission"> Owner </div>
+            </div>
+            <div className="propertiesView-sharingTable-item">
+                <div className="propertiesView-sharingTable-item-name"> Public: </div>
+                <div className="propertiesView-sharingTable-item-permission">
+                    {this.permissionsSelect}
+                </div>
+            </div>
+            <div className="propertiesView-sharingTable-item">
+                <div className="propertiesView-sharingTable-item-name"> Group 1: </div>
+                <div> </div>
+                <div className="propertiesView-sharingTable-item-permission">
+                    {this.permissionsSelect}
+                </div>
+            </div>
+            <div className="propertiesView-sharingTable-item">
+                <div className="propertiesView-sharingTable-item-name"> Another group: </div>
+                <div> </div>
+                <div className="propertiesView-sharingTable-item-permission">
+                    {this.permissionsSelect}
+                </div>
+            </div> */}
+        </div>;
+    }
+
     render() {
 
         if (!this.selectedDoc) {
@@ -176,6 +246,12 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     <PropertiesButtons />
                 </div>
             </div>
+            <div className="propertiesView-sharing">
+                <div className="propertiesView-sharing-title"> Sharing {"&"} Permissions</div>
+                <div className="propertiesView-sharing-content">
+                    {this.sharingTable}
+                </div>
+            </div>
             <div className="propertiesView-fields">
                 <div className="propertiesView-fields-title"> Fields</div>
                 <div className="propertiesView-fields-content"> {this.expandedField} </div>