From 9e937b61438213dad817f988b0dc22d94a9e0465 Mon Sep 17 00:00:00 2001
From: Dan Gowans <d.gowans@cityssm.on.ca>
Date: Fri, 26 Aug 2022 13:37:43 -0400
Subject: [PATCH] admin side menu

---
 views/_menu-admin.ejs  |  19 +++
 views/admin-fees.ejs   |  73 ++++++-----
 views/admin-tables.ejs | 273 +++++++++++++++++++++--------------------
 3 files changed, 199 insertions(+), 166 deletions(-)
 create mode 100644 views/_menu-admin.ejs

diff --git a/views/_menu-admin.ejs b/views/_menu-admin.ejs
new file mode 100644
index 00000000..ad128961
--- /dev/null
+++ b/views/_menu-admin.ejs
@@ -0,0 +1,19 @@
+<aside class="menu">
+    <h2 class="menu-label">
+        Administrator Tools
+    </h2>
+    <ul class="menu-list">
+        <li>
+            <a class="<%= (headTitle === "Fee Management" ? "is-active" : "") %>" href="<%= urlPrefix %>/admin/fees">
+                <span class="icon is-small"><i class="fas fa-fw fa-dollar-sign" aria-hidden="true"></i></span>
+                <span>Fee Management</span>
+            </a>
+        </li>
+        <li>
+            <a class="<%= (headTitle === "Config Table Management" ? "is-active" : "") %>" href="<%= urlPrefix %>/admin/tables">
+                <span class="icon is-small"><i class="fas fa-fw fa-table" aria-hidden="true"></i></span>
+                <span>Config Table Management</span>
+            </a>
+        </li>
+    </ul>
+</aside>
\ No newline at end of file
diff --git a/views/admin-fees.ejs b/views/admin-fees.ejs
index 6e70d3bb..4ad13a25 100644
--- a/views/admin-fees.ejs
+++ b/views/admin-fees.ejs
@@ -1,43 +1,50 @@
 <%- include('_header'); -%>
 
-<nav class="breadcrumb">
-  <ul>
-    <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
-    <li>
-        <a href="#">
-
-            <span class="icon is-small"><i class="fas fa-cog" aria-hidden="true"></i></span>
-            <span>Administrator Tools</span>
-        </a>
-    </li>
-    <li class="is-active">
-        <a href="#" aria-current="page">
-            Fee Management
-        </a>
-    </li>
-  </ul>
-</nav>
-
-<div class="level is-mobile">
-    <div class="level-left">
-        <div class="level-item">
-            <h1 class="title is-1">
-                Fee Management
-            </h1>
-        </div>
+<div class="columns">
+    <div class="column is-3 is-hidden-mobile">
+        <%- include('_menu-admin'); -%>
     </div>
-    <div class="level-right">
-        <div class="level-item">
-            <button class="button is-success" id="button--addFeeCategory" type="button">
-                <span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>
-                <span>Add Fee Category</span>
-            </button>
+    <div class="column">
+        <nav class="breadcrumb">
+          <ul>
+            <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
+            <li>
+                <a href="#">
+        
+                    <span class="icon is-small"><i class="fas fa-cog" aria-hidden="true"></i></span>
+                    <span>Administrator Tools</span>
+                </a>
+            </li>
+            <li class="is-active">
+                <a href="#" aria-current="page">
+                    Fee Management
+                </a>
+            </li>
+          </ul>
+        </nav>
+        
+        <div class="level is-mobile">
+            <div class="level-left">
+                <div class="level-item">
+                    <h1 class="title is-1">
+                        Fee Management
+                    </h1>
+                </div>
+            </div>
+            <div class="level-right">
+                <div class="level-item">
+                    <button class="button is-success" id="button--addFeeCategory" type="button">
+                        <span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>
+                        <span>Add Fee Category</span>
+                    </button>
+                </div>
+            </div>
         </div>
+        
+        <div id="container--feeCategories"></div>
     </div>
 </div>
 
-<div id="container--feeCategories"></div>
-
 <%- include('_footerA'); -%>
 
 <script>
diff --git a/views/admin-tables.ejs b/views/admin-tables.ejs
index fce3b72c..7a6eb03f 100644
--- a/views/admin-tables.ejs
+++ b/views/admin-tables.ejs
@@ -1,139 +1,146 @@
 <%- include('_header'); -%>
 
-<nav class="breadcrumb">
-  <ul>
-    <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
-    <li>
-        <a href="#">
-
-            <span class="icon is-small"><i class="fas fa-cog" aria-hidden="true"></i></span>
-            <span>Administrator Tools</span>
-        </a>
-    </li>
-    <li class="is-active">
-        <a href="#" aria-current="page">
+<div class="columns">
+    <div class="column is-3 is-hidden-mobile">
+        <%- include('_menu-admin'); -%>
+    </div>
+    <div class="column">
+        <nav class="breadcrumb">
+          <ul>
+            <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
+            <li>
+                <a href="#">
+        
+                    <span class="icon is-small"><i class="fas fa-cog" aria-hidden="true"></i></span>
+                    <span>Administrator Tools</span>
+                </a>
+            </li>
+            <li class="is-active">
+                <a href="#" aria-current="page">
+                    Config Table Management
+                </a>
+            </li>
+          </ul>
+        </nav>
+        
+        <h1 class="title is-1">
             Config Table Management
-        </a>
-    </li>
-  </ul>
-</nav>
-
-<h1 class="title is-1">
-    Config Table Management
-</h1>
-
-<div class="tabs is-boxed">
-    <ul>
-        <li class="is-active">
-            <a href="#tab--workOrderTypes">
-                <span class="icon is-small"><i class="fas fa-table" aria-hidden="true"></i></span>
-                <span>Work Order Types</span>
-            </a>
-        </li>
-        <li>
-            <a href="#tab--lotStatuses">
-                <span class="icon is-small"><i class="fas fa-table" aria-hidden="true"></i></span>
-                <span><%= configFunctions.getProperty("aliases.lot") %> Statuses</span>
-            </a>
-        </li>
-        <li>
-            <a href="#tab--lotOccupantTypes">
-                <span class="icon is-small"><i class="fas fa-table" aria-hidden="true"></i></span>
-                <span><%= configFunctions.getProperty("aliases.lot") %> <%= configFunctions.getProperty("aliases.occupant") %> Types</span>
-            </a>
-        </li>
-    </ul>
-</div>
-<div class="tabs-container">
-    <div id="tab--workOrderTypes">
-        <h2 class="title is-4">Work Order Types</h2>
-        <table class="table is-striped is-hoverable">
-            <thead>
-                <tr>
-                    <th>Work Order Type</th>
-                    <th class="has-text-centered has-width-1">Options</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td colspan="2">
-                        <form id="form--addWorkOrderType">
-                            <div class="field has-addons">
-                                <div class="control is-expanded">
-                                    <input class="input" name="workOrderType" type="text" maxlength="100" placeholder="New Work Order Type" required />
-                                </div>
-                                <div class="control">
-                                    <button class="button is-success" data-tooltip="Add Work Order Type" type="submit" aria-label="Add Work Order Type">
-                                        <i class="fas fa-plus" aria-hidden="true"></i>
-                                    </button>
-                                </div>
-                            </div>
-                        </form>
-                    </td>
-                </tr>
-            </tbody>
-            <tbody id="container--workOrderTypes"></tbody>
-        </table>
-    </div>
-    <div class="is-hidden" id="tab--lotStatuses">
-        <h2 class="title is-4"><%= configFunctions.getProperty("aliases.lot") %> Statuses</h2>
-        <table class="table is-striped is-hoverable">
-            <thead>
-                <tr>
-                    <th><%= configFunctions.getProperty("aliases.lot") %> Status</th>
-                    <th class="has-text-centered has-width-1">Options</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td colspan="2">
-                        <form id="form--addLotStatus">
-                            <div class="field has-addons">
-                                <div class="control is-expanded">
-                                    <input class="input" name="lotStatus" type="text" maxlength="100" placeholder="New <%= configFunctions.getProperty("aliases.lot") %> Status" required />
-                                </div>
-                                <div class="control">
-                                    <button class="button is-success" data-tooltip="Add Status" type="submit" aria-label="Add Status">
-                                        <i class="fas fa-plus" aria-hidden="true"></i>
-                                    </button>
-                                </div>
-                            </div>
-                        </form>
-                    </td>
-                </tr>
-            </tbody>
-            <tbody id="container--lotStatuses"></tbody>
-        </table>
-    </div>
-    <div class="is-hidden" id="tab--lotOccupantTypes">
-        <h2 class="title is-4"><%= configFunctions.getProperty("aliases.lot") %> <%= configFunctions.getProperty("aliases.occupant") %> Types</h2>
-        <table class="table is-striped is-hoverable">
-            <thead>
-                <tr>
-                    <th><%= configFunctions.getProperty("aliases.lot") %> <%= configFunctions.getProperty("aliases.occupant") %> Type</th>
-                    <th class="has-text-centered has-width-1">Options</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td colspan="2">
-                        <form id="form--addLotOccupantType">
-                            <div class="field has-addons">
-                                <div class="control is-expanded">
-                                    <input class="input" name="lotOccupantType" type="text" maxlength="100" placeholder="New <%= configFunctions.getProperty("aliases.lot") %> <%= configFunctions.getProperty("aliases.occupant") %> Type" required />
-                                </div>
-                                <div class="control">
-                                    <button class="button is-success" data-tooltip="Add Type" type="submit" aria-label="Add Type">
-                                        <i class="fas fa-plus" aria-hidden="true"></i>
-                                    </button>
-                                </div>
-                            </div>
-                        </form>
-                    </td>
-                </tr>
-            </tbody>
-            <tbody id="container--lotOccupantTypes"></tbody>
-        </table>
+        </h1>
+        
+        <div class="tabs is-boxed">
+            <ul>
+                <li class="is-active">
+                    <a href="#tab--workOrderTypes">
+                        <span class="icon is-small"><i class="fas fa-table" aria-hidden="true"></i></span>
+                        <span>Work Order Types</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#tab--lotStatuses">
+                        <span class="icon is-small"><i class="fas fa-table" aria-hidden="true"></i></span>
+                        <span><%= configFunctions.getProperty("aliases.lot") %> Statuses</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#tab--lotOccupantTypes">
+                        <span class="icon is-small"><i class="fas fa-table" aria-hidden="true"></i></span>
+                        <span><%= configFunctions.getProperty("aliases.lot") %> <%= configFunctions.getProperty("aliases.occupant") %> Types</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <div class="tabs-container">
+            <div id="tab--workOrderTypes">
+                <h2 class="title is-4">Work Order Types</h2>
+                <table class="table is-striped is-hoverable">
+                    <thead>
+                        <tr>
+                            <th>Work Order Type</th>
+                            <th class="has-text-centered has-width-1">Options</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td colspan="2">
+                                <form id="form--addWorkOrderType">
+                                    <div class="field has-addons">
+                                        <div class="control is-expanded">
+                                            <input class="input" name="workOrderType" type="text" maxlength="100" placeholder="New Work Order Type" required />
+                                        </div>
+                                        <div class="control">
+                                            <button class="button is-success" data-tooltip="Add Work Order Type" type="submit" aria-label="Add Work Order Type">
+                                                <i class="fas fa-plus" aria-hidden="true"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </form>
+                            </td>
+                        </tr>
+                    </tbody>
+                    <tbody id="container--workOrderTypes"></tbody>
+                </table>
+            </div>
+            <div class="is-hidden" id="tab--lotStatuses">
+                <h2 class="title is-4"><%= configFunctions.getProperty("aliases.lot") %> Statuses</h2>
+                <table class="table is-striped is-hoverable">
+                    <thead>
+                        <tr>
+                            <th><%= configFunctions.getProperty("aliases.lot") %> Status</th>
+                            <th class="has-text-centered has-width-1">Options</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td colspan="2">
+                                <form id="form--addLotStatus">
+                                    <div class="field has-addons">
+                                        <div class="control is-expanded">
+                                            <input class="input" name="lotStatus" type="text" maxlength="100" placeholder="New <%= configFunctions.getProperty("aliases.lot") %> Status" required />
+                                        </div>
+                                        <div class="control">
+                                            <button class="button is-success" data-tooltip="Add Status" type="submit" aria-label="Add Status">
+                                                <i class="fas fa-plus" aria-hidden="true"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </form>
+                            </td>
+                        </tr>
+                    </tbody>
+                    <tbody id="container--lotStatuses"></tbody>
+                </table>
+            </div>
+            <div class="is-hidden" id="tab--lotOccupantTypes">
+                <h2 class="title is-4"><%= configFunctions.getProperty("aliases.lot") %> <%= configFunctions.getProperty("aliases.occupant") %> Types</h2>
+                <table class="table is-striped is-hoverable">
+                    <thead>
+                        <tr>
+                            <th><%= configFunctions.getProperty("aliases.lot") %> <%= configFunctions.getProperty("aliases.occupant") %> Type</th>
+                            <th class="has-text-centered has-width-1">Options</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td colspan="2">
+                                <form id="form--addLotOccupantType">
+                                    <div class="field has-addons">
+                                        <div class="control is-expanded">
+                                            <input class="input" name="lotOccupantType" type="text" maxlength="100" placeholder="New <%= configFunctions.getProperty("aliases.lot") %> <%= configFunctions.getProperty("aliases.occupant") %> Type" required />
+                                        </div>
+                                        <div class="control">
+                                            <button class="button is-success" data-tooltip="Add Type" type="submit" aria-label="Add Type">
+                                                <i class="fas fa-plus" aria-hidden="true"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </form>
+                            </td>
+                        </tr>
+                    </tbody>
+                    <tbody id="container--lotOccupantTypes"></tbody>
+                </table>
+            </div>
+        </div>
     </div>
 </div>