Adding permission mangement to admin panel

views/src/admin/admin.hbs

@@ -164,6 +164,7 @@
                   <div></div>
                </th>
                <th scope="col" style="width: 2.5rem"></th>
+               <th scope="col" style="width: 2.5rem"></th>
             </tr>
          </thead>
          <tbody>
@@ -183,8 +184,11 @@
                <td>
                   <a href="\{{ website }}">\{{ website }}</a>
                </td>
-
-               <!-- ToDo: Make helper to resolve number to human readaby text-->
+               <td style="padding: 0.25em">
+                  <button style="border: 0; background-color: rgba(0, 0, 0, 0); padding: 0; text-align: center;" onclick="permissionsClient('\{{_id}}')">
+                        perm
+                  </button>
+               </td>
                <td style="padding: 0.25em">
                   <button style="border: 0; background-color: rgba(0, 0, 0, 0); padding: 0; text-align: center;" onclick="editClient('\{{_id}}')">
                      <i class="material-icons" style="font-size: 2rem; display: inline">
@@ -238,6 +242,53 @@
          </span>
       </form>
    </script>
+   <script id="template-permission-list" type="text/x-handlebars-template">
+      <h2><button class="btn btn-raised btn-primary" onclick="gotoClients()">back</button> to \{{client_name}} </h2>
+      <button class="btn btn-raised btn-primary" onclick="createPermission('\{{ client_id }}')">Create</button>
+      <table class="table table-bordered" style="margin-bottom: 0">
+         <thead>
+            <tr>
+               <th scope="col">ID</th>
+               <th scope="col">Name</th>
+               <th scope="col">Description</th>
+               <th scope="col" style="width: 2.5rem"></th>
+            </tr>
+         </thead>
+         <tbody>
+            \{{#permissions}}
+            <tr>
+               <td>\{{ _id }}</td>
+               <td>\{{ name }}</td>
+               <td>\{{ description }}</td>
+               <td style="padding: 0.25em">
+                  <button style="border: 0; background-color: rgba(0, 0, 0, 0); padding: 0; text-align: center;" onclick="deletePermission('\{{_id}}')">
+                     <i class="material-icons" style="font-size: 2rem; display: inline">
+                        delete
+                     </i>
+                  </button>
+               </td>
+            </tr>
+            \{{/permissions}}
+         </tbody>
+      </table>
+   </script>
+   <script id="template-permission-form" type="text/x-handlebars-template">
+      <form class="form" action="JavaScript:void(null)" onsubmit="createPermissionSubmit(this)" style="margin-bottom: 0">
+         <input type=hidden value="\{{client_id}}" name=client />
+         <div class="form-group">
+            <label for="name_input" class="bmd-label-floating">Name</label>
+            <input type="text" class="form-control" id="name_input" name=name value="">
+         </div>
+         <div class="form-group">
+            <label for=name class="bmd-label-floating">Description</label>
+            <input type="text" class="form-control" id=name name=description value="">
+         </div>
+         <span class="form-group bmd-form-group">
+            <!-- needed to match padding for floating labels -->
+            <button type="submit" class="btn btn-raised btn-primary">Save</button>
+         </span>
+      </form>
+   </script>
 
 </body>
 

views/src/admin/admin.js

@@ -72,6 +72,49 @@ Handlebars.registerHelper("formatDate", function (datetime, format) {
       await loadList();
    }
 
+   async function renderPermissions(client_id, client_name) {
+      const listt = Handlebars.compile(document.getElementById("template-permission-list").innerText);
+      const formt = Handlebars.compile(document.getElementById("template-permission-form").innerText);
+      setCustomCard();
+      async function loadList() {
+         try {
+            let data = await request("/api/admin/permission", "GET");
+            tableb.innerHTML = listt({
+               client_id: client_id,
+               client_name: client_name,
+               permissions: data
+            })
+         } catch (err) {
+            catchError(err);
+         }
+      }
+
+      window.gotoClients = () => {
+         renderClient();
+      }
+
+      window.deletePermission = (id) => {
+         request("/api/admin/permission?id=" + id, "DELETE").then(() => loadList()).catch(catchError)
+      }
+
+      window.createPermission = () => {
+         try {
+            setCustomCard(formt({ client_id: client_id }));
+         } catch (err) {
+            console.log("Err", err);
+         }
+      }
+
+
+      window.createPermissionSubmit = (elm) => {
+         console.log(elm);
+         let data = getFormData(elm);
+         console.log(data);
+         request("/api/admin/permission", "POST", data).then(() => setCustomCard()).then(() => loadList()).catch(catchError)
+      }
+      await loadList()
+   }
+
    async function renderClient() {
       console.log("Rendering Client")
       setTitle("Client")
@@ -88,6 +131,10 @@ Handlebars.registerHelper("formatDate", function (datetime, format) {
          })
       }
 
+      window.permissionsClient = (id) => {
+         renderPermissions(id, clients.find(e => e._id === id).name);
+      }
+
       window.deleteClient = (id) => {
          request("/api/admin/client?id=" + id, "DELETE").then(() => loadList()).catch(catchError)
       }
@@ -96,8 +143,8 @@ Handlebars.registerHelper("formatDate", function (datetime, format) {
          console.log(elm);
          let data = getFormData(elm);
          console.log(data);
-         let id = data.id;
-         delete data.id;
+         let id = data._id;
+         delete data._id;
          if (id !== "") {
             request("/api/admin/client?id=" + id, "PUT", data).then(() => setCustomCard()).then(() => loadList()).catch(catchError)
          } else {

views/src/user/user.hbs

@@ -1,14 +0,0 @@
-<html>
-
-
-<head>
-   <title>{{title}}</title>
-   <meta charset="utf8" />
-   <meta name="viewport" content="width=device-width,initial-scale=1" />
-</head>
-
-<body>
-
-</body>
-
-</html>

views/src/user/user.js

@@ -1 +0,0 @@
-console.log("Hello World")