feature(Add Modal to add staff):Add modal to add staff

Add modal to add staff [Delivers #165789270]
Cavdy · May 6, 2019 · d0d9c3b · d0d9c3b
1 parent 3b4ca57
commit d0d9c3b
Show file tree

Hide file tree

Showing 14 changed files with 888 additions and 523 deletions.
diff --git a/frontend-app/accounts.html b/frontend-app/accounts.html
@@ -41,10 +41,7 @@ <h1 class="logo">Banka</h1>
               <a href="./users.html" class="sidebar-link">Users</a>
             </li>
             <li class="sidebar-item admin">
-              <a href="staffs.html" class="sidebar-link">Staffs</a>
-            </li>
-            <li class="sidebar-item admin">
-              <a href="./adduser.html" class="sidebar-link">Create Staffs</a>
+              <a href="staffs.html" class="sidebar-link">Staff</a>
             </li>
             <li class="sidebar-item staff admin">
               <a href="./activate.html" class="sidebar-link">Activate / Deactivate</a>

diff --git a/frontend-app/activate.html b/frontend-app/activate.html
@@ -41,10 +41,7 @@ <h1 class="logo">Banka</h1>
               <a href="./users.html" class="sidebar-link">Users</a>
             </li>
             <li class="sidebar-item admin">
-              <a href="staffs.html" class="sidebar-link">Staffs</a>
-            </li>
-            <li class="sidebar-item admin">
-              <a href="./adduser.html" class="sidebar-link">Create Staffs</a>
+              <a href="staffs.html" class="sidebar-link">Staff</a>
             </li>
             <li class="sidebar-item staff admin sidebar-item-active">
               <a href="./activate.html" class="sidebar-link">Activate / Deactivate</a>
@@ -122,8 +119,9 @@ <h1 class="logo">Banka</h1>
 
         <!--Main Body-->
         <main class="main-body">
-          <p class="errorMessage"></p>
-          <p class="successMessage"></p>
+          <div class="alert alert-success"><span class="successMsg">Success </span><span id="close">X</span></div>
+          <div class="alert alert-danger"><span class="errMsg">Something went wrong. Try again </span><span
+              id="close">X</span></div>
           <!--Accounts Limit-->
           <div class="accountsQuery">
             <div class="queryForm">
@@ -143,7 +141,7 @@ <h1 class="logo">Banka</h1>
               </div>
             </div>
           </div>
-          <div class="card">
+          <div class="card user-table">
             <h1 class="content-title">Activate / Deactivate Accounts</h1>
             <div class="table">
               <div class="table-row">
@@ -161,32 +159,54 @@ <h1 class="content-title">Activate / Deactivate Accounts</h1>
       <!--Status Modal-->
       <div id="modal" class="modal">
         <div class="modal-content">
-          <div class="card">
-            <h1 class="content-title">Account Details</h1>
-            <p class="successMessage"></p>
-            <p class="errMessage"></p>
+          <!-- PATCH -->
+          <div class="card onPatch">
+            <div class="patch">
+              <h1 class="content-title">Account Details</h1>
+              <!--Account Name and Balance-->
+              <h4 class="username">Account Name: <span id="username"></span></h4>
+              <h4 class="username">Account Number: <span id="acnumber"></span></h4>
+              <h4 class="balance">Status: <span id="balance"></span></h4>
+              <!--Status Form-->
+              <form action="" class="form">
+                <div class="form-group">
+                  <label for="selectrole" class="form-label">Choose account status</label>
+                  <select class="form-select">
+                    <option value="active">Active</option>
+                    <option value="dormant">Dormant</option>
+                  </select>
+                </div>
+
+                <input type="submit" id="submit" class="btn btn-block btn-primary" value="Update">
+              </form>
+            </div>
+          </div>
+          <!-- DELETE -->
+          <div class="card onDelete">
+            <h1 class="content-title">Are you sure you want to delete?</h1>
             <!--Account Name and Balance-->
             <h4 class="username">Account Name: <span id="username"></span></h4>
             <h4 class="username">Account Number: <span id="acnumber"></span></h4>
-            <h4 class="balance">Status: <span id="balance"></span></h4>
             <!--Status Form-->
             <form action="" class="form">
-              <div class="form-group">
-                <label for="selectrole" class="form-label">Choose account status</label>
-                <select class="form-select">
-                  <option value="active">Active</option>
-                  <option value="dormant">Dormant</option>
-                </select>
+              <div class="tran-btn">
+                <input type="submit" class="debit-btn" id="delete" value="Delete">
+                <input type="submit" class="credit-btn" id="cancel" value="Cancel">
               </div>
-
-              <input type="submit" id="submit" class="btn btn-block btn-primary" value="Update">
             </form>
           </div>
         </div>
       </div>
     </div>
   </div>
 
+  <!--Loader-->
+  <div id="loader" class="loader">
+    <div class="loader-content">
+      <object data="./svg/loader.svg" type="image/svg+xml" class="loader-icon"></object>
+    </div>
+  </div>
+
   <!--Js-->
   <script src="./js/app.js"></script>
   <script src="./js/activate.js"></script>

diff --git a/frontend-app/adduser.html b/frontend-app/adduser.html
diff --git a/frontend-app/css/style.css b/frontend-app/css/style.css
@@ -271,6 +271,14 @@ body,
   display: none;
 }
 
+.onDelete {
+  height: 9rem;
+  text-align: center;
+}
+
+#username {
+  text-transform: capitalize;
+}
 
 /*
     ====================================

diff --git a/frontend-app/dashboard.html b/frontend-app/dashboard.html
@@ -41,10 +41,7 @@ <h1 class="logo">Banka</h1>
               <a href="./users.html" class="sidebar-link">Users</a>
             </li>
             <li class="sidebar-item admin">
-              <a href="staffs.html" class="sidebar-link">Staffs</a>
-            </li>
-            <li class="sidebar-item admin">
-              <a href="./adduser.html" class="sidebar-link">Create Staffs</a>
+              <a href="staffs.html" class="sidebar-link">Staff</a>
             </li>
             <li class="sidebar-item staff admin">
               <a href="./activate.html" class="sidebar-link">Activate / Deactivate</a>