Group and Policies settings

ui/server/server.js

@@ -205,6 +205,10 @@ app.get('/:projectId/annotation/:id', (req, res) => {
   res = addHeaders(res);
 });
 
+app.get('/permission-settings', (req, res) => {
+  res.render("permission-settings", params);
+});
+
 app.get('/token', (req, res) => {
   res.render('token', params);
 });

ui/server/views/includes/permission-settings/single-view.html

@@ -0,0 +1,345 @@
+<template id="group-single-view">
+  <div class="d-flex flex-column pl-md-6 px-6">
+    <div
+      id="title-div"
+      class="d-flex flex-row flex-justify-between flex-items-center mb-3"
+    >
+      <a
+        class="btn btn-width btn-outline text-gray my-3 px-2"
+        href="#Group-All"
+      >
+        <svg
+          slot="icon"
+          class="mr-2"
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          viewBox="0 0 512 512"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path
+            d="M176.1 103C181.7 107.7 184 113.8 184 120S181.7 132.3 176.1 136.1L81.94 232H488C501.3 232 512 242.8 512 256s-10.75 24-24 24H81.94l95.03 95.03c9.375 9.375 9.375 24.56 0 33.94s-24.56 9.375-33.94 0l-136-136c-9.375-9.375-9.375-24.56 0-33.94l136-136C152.4 93.66 167.6 93.66 176.1 103z"
+          />
+        </svg>
+        <span> Back </span>
+      </a>
+      <h2 class="h2" id="title"></h2>
+      <span></span>
+    </div>
+
+    <div id="no-data" class="text-center" hidden></div>
+
+    <form id="group-form" hidden>
+      <enum-input
+        hidden
+        id="organization-id-input"
+        name="Organization ID"
+        type="int"
+      ></enum-input>
+      <text-input
+        id="group-name"
+        name="Group name"
+        type="string"
+        hidden
+      ></text-input>
+
+      <div class="mt-4 mb-2">Total <span id="item-count"></span></div>
+      <div id="card-list" class="mb-5 card-list">
+        <!-- MEMBER/GROUP CARDS -->
+      </div>
+      <div class="f3 text-center hidden" id="group-input-warning"></div>
+
+      <div class="d-flex flex-column" id="form-input-for-group">
+        <text-area id="username-list-input" name="Username list" type="string">
+        </text-area>
+
+        <div class="d-flex flex-row" style="align-self: end">
+          <div class="f3 mr-4 hidden" id="username-list-warning"></div>
+          <button id="username-list-add" class="btn btn-small btn-outline">
+            Add
+          </button>
+          <button id="username-list-delete" class="btn btn-small btn-outline">
+            Delete
+          </button>
+        </div>
+      </div>
+    </form>
+
+    <div
+      id="group-single-view--save-cancel-section"
+      class="d-flex flex-items-center flex-justify-center my-4"
+      style="display: none"
+    >
+      <input
+        id="group-single-view-save"
+        type="submit"
+        value="Save"
+        class="btn btn-clear f1 text-semibold"
+      />
+      <a
+        href="#Group-All"
+        id="group-single-view-cancel"
+        class="px-5 f1 text-gray hover-text-white"
+      >
+        Cancel
+      </a>
+    </div>
+  </div>
+</template>
+
+<template id="policy-calculator-view">
+  <div class="d-flex flex-column pl-md-6 px-6">
+    <div
+      id="title-div"
+      class="d-flex flex-row flex-justify-between flex-items-center mb-3"
+    >
+      <a
+        class="btn btn-width btn-outline text-gray my-3 px-2"
+        href="#Policy-All"
+      >
+        <svg
+          slot="icon"
+          class="mr-2"
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          viewBox="0 0 512 512"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path
+            d="M176.1 103C181.7 107.7 184 113.8 184 120S181.7 132.3 176.1 136.1L81.94 232H488C501.3 232 512 242.8 512 256s-10.75 24-24 24H81.94l95.03 95.03c9.375 9.375 9.375 24.56 0 33.94s-24.56 9.375-33.94 0l-136-136c-9.375-9.375-9.375-24.56 0-33.94l136-136C152.4 93.66 167.6 93.66 176.1 103z"
+          />
+        </svg>
+        <span> Back </span>
+      </a>
+      <h2 class="h2" id="title">Effective Permission Calculator</h2>
+      <span></span>
+    </div>
+
+    <form id="calculator-table-form">
+      <div
+        class="d-flex flex-row flex-justify-around"
+        id="inputs-div"
+        style="display: none"
+      >
+        <div class="d-flex flex-column">
+          <enum-input
+            id="entity-type-input"
+            name="Entity"
+            data-key="entityType"
+          ></enum-input>
+          <text-input
+            id="entity-id-input"
+            name="ID"
+            type="int"
+            data-key="entityId"
+          ></text-input>
+        </div>
+        <div class="d-flex flex-column">
+          <enum-input
+            id="target-type-input"
+            name="Target"
+            data-key="targetType"
+          ></enum-input>
+          <text-input
+            id="target-id-input"
+            name="ID"
+            type="int"
+            data-key="targetId"
+          ></text-input>
+        </div>
+      </div>
+
+      <text-input
+        name="Permission"
+        type="int"
+        id="permission-input"
+        hidden
+      ></text-input>
+      <div id="no-permission" class="text-center my-4 text-red" hidden></div>
+
+      <div id="no-data" class="text-center my-4" hidden></div>
+
+      <div class="my-4 px-3 calculator-table-div">
+        <table
+          id="calculator-table"
+          class="table permission-table calculator-table"
+        >
+          <colgroup id="calculator-table--colgroup"></colgroup>
+          <thead id="calculator-table--head"></thead>
+          <tbody id="calculator-table--body"></tbody>
+        </table>
+      </div>
+    </form>
+
+    <div
+      id="calculator-table--save-reset-section"
+      class="d-flex flex-items-center flex-justify-center my-4"
+      style="display: none"
+    >
+      <input
+        id="calculator-table-save"
+        type="submit"
+        value="Save"
+        class="btn btn-clear f1 text-semibold"
+        style="display: none"
+      />
+      <button
+        id="calculator-table-reset"
+        class="btn btn-width btn-outline text-gray my-3 px-4"
+      >
+        Reset
+      </button>
+    </div>
+  </div>
+</template>
+
+<template id="policy-single-view">
+  <div class="d-flex flex-column pl-md-6 px-6">
+    <div
+      id="title-div"
+      class="d-flex flex-row flex-justify-between flex-items-center mb-3"
+    >
+      <a
+        class="btn btn-width btn-outline text-gray my-3 px-2"
+        href="#Policy-All"
+      >
+        <svg
+          slot="icon"
+          class="mr-2"
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          viewBox="0 0 512 512"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path
+            d="M176.1 103C181.7 107.7 184 113.8 184 120S181.7 132.3 176.1 136.1L81.94 232H488C501.3 232 512 242.8 512 256s-10.75 24-24 24H81.94l95.03 95.03c9.375 9.375 9.375 24.56 0 33.94s-24.56 9.375-33.94 0l-136-136c-9.375-9.375-9.375-24.56 0-33.94l136-136C152.4 93.66 167.6 93.66 176.1 103z"
+          />
+        </svg>
+        <span> Back </span>
+      </a>
+      <h2 class="h2" id="title"></h2>
+      <span></span>
+    </div>
+
+    <form id="edit-table-form">
+      <div class="d-flex flex-row flex-justify-between" id="inputs-div">
+        <div class="d-flex flex-column">
+          <enum-input
+            id="entity-type-input"
+            name="Entity"
+            data-key="entityType"
+          ></enum-input>
+          <text-input
+            id="entity-id-input"
+            name="ID"
+            type="int"
+            data-key="entityId"
+          ></text-input>
+        </div>
+        <div class="d-flex flex-column">
+          <enum-input
+            id="target-type-input"
+            name="Target"
+            data-key="targetType"
+          ></enum-input>
+          <text-input
+            id="target-id-input"
+            name="ID"
+            type="int"
+            data-key="targetId"
+          ></text-input>
+        </div>
+      </div>
+
+      <div
+        class="d-flex flex-row flex-justify-between"
+        id="permission-input-div"
+      >
+        <enum-input
+          class="col-4"
+          id="quick-fill-input"
+          name="Quick Fill"
+          data-key="quickFill"
+        ></enum-input>
+        <text-input
+          class="col-5"
+          name="Permission"
+          type="int"
+          id="permission-input"
+        ></text-input>
+      </div>
+
+      <div id="no-permission" class="text-center my-4 text-red" hidden></div>
+      <div id="no-data" class="text-center my-4" hidden></div>
+
+      <div class="my-4 px-3 edit-table-div" id="edit-table-div" hidden>
+        <table id="edit-table" class="table permission-table calculator-table">
+          <colgroup id="edit-table--colgroup"></colgroup>
+          <thead id="edit-table--head"></thead>
+          <tbody id="edit-table--body"></tbody>
+        </table>
+      </div>
+    </form>
+
+    <div
+      id="edit-table--save-reset-section"
+      class="d-flex flex-items-center flex-justify-center my-4"
+      style="display: none; gap: 5px"
+    >
+      <input
+        id="edit-table-save"
+        type="submit"
+        value="Save"
+        class="btn btn-clear f1 text-semibold"
+      />
+      <button
+        id="edit-table-reset"
+        class="btn btn-width btn-outline text-gray my-3 px-4"
+        style="display: none"
+      >
+        Reset
+      </button>
+      <button
+        id="edit-table-delete"
+        class="btn btn-width btn-outline text-gray my-3 px-4"
+        style="display: none"
+      >
+        Delete
+      </button>
+    </div>
+  </div>
+</template>
+
+<template id="group-member-card">
+  <div class="group-member-card px-2 py-2" id="group-member-card-div">
+    <h3
+      class="h3 pb-2 group-member-card--username"
+      id="group-member-card--username"
+    ></h3>
+    <p id="group-member-card--email" class="f3 group-member-card--email"></p>
+  </div>
+</template>
+
+<template id="user-group-card">
+  <div class="user-group-card px-2 py-2" id="user-group-card-div">
+    <h3 class="h3 pb-2 d-flex flex-row flex-justify-between">
+      <span id="user-group-card--id"></span>
+      <x-mark-button id="remove-group-button"></x-mark-button>
+    </h3>
+    <p id="user-group-card--name" class="f3 user-group-card--name"></p>
+  </div>
+</template>