From 5c3308264a72841361c1486e170906ffe70e4d93 Mon Sep 17 00:00:00 2001
From: cavdy <cavdyofficials@gmail.com>
Date: Mon, 22 Apr 2019 13:56:09 +0100
Subject: [PATCH] feature(connect api to patch and delete bank accounts):
 connect api to patch and delete bank accounts [Starts #165487105]

---
 frontend-app/activate.html      | 204 +++++++++++++++++++
 frontend-app/js/activate.js     | 343 ++++++++++++++++++++++++++++++++
 frontend-app/js/credit-debit.js |   3 +
 3 files changed, 550 insertions(+)
 create mode 100644 frontend-app/activate.html
 create mode 100644 frontend-app/js/activate.js
diff --git a/frontend-app/activate.html b/frontend-app/activate.html
new file mode 100644
index 0000000..f12e6db
--- /dev/null
+++ b/frontend-app/activate.html
@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Activate/Deactivate - Banka Dashboard</title>
+  <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
+  <link rel="stylesheet" href="./css/style.css">
+</head>
+
+<body>
+  <div class="container">
+
+    <!--Wrapper-->
+    <div class="wrapper">
+      <!--Sidebar-->
+      <div class="sidebar">
+        <div class="sidebar-header">
+          <h1 class="logo">Banka</h1>
+        </div>
+        <div class="sidebar-menu">
+          <ul class="sidebar-list">
+            <li class="sidebar-item  sidebar-item-active">
+              <a href="./dashboard.html" class="sidebar-link">Dashboard</a>
+            </li>
+            <li class="sidebar-item">
+              <a href="./accounts.html" class="sidebar-link">Accounts</a>
+            </li>
+            <li class="sidebar-item">
+              <a href="./users.html" class="sidebar-link">Users Accounts</a>
+            </li>
+            <li class="sidebar-item">
+              <a href="staffs.html" class="sidebar-link">Staffs</a>
+            </li>
+            <li class="sidebar-item">
+              <a href="./adduser.html" class="sidebar-link">Create Staffs</a>
+            </li>
+            <li class="sidebar-item">
+              <a href="./activate.html" class="sidebar-link">Activate / Deactivate</a>
+            </li>
+          </ul>
+        </div>
+        <div class="sidebar-legal">
+          &copy; 2019 Banka. All Rights Reserved.
+        </div>
+      </div>
+
+      <!--Main Content-->
+      <div class="main-content">
+        <!--Header-->
+        <header class="header">
+          <button class="toggle-sidebar" id="toggle-sidebar">
+            <svg class="toggle-sidebar-button">
+              <use xlink:href="./svg/sprite.svg#icon-list"></use>
+            </svg>
+          </button>
+          <form class="search-form">
+            <input type="text" class="search-input" placeholder="Search...">
+            <button class="search-form-button">
+              <svg class="search-form-icon">
+                <use xlink:href="./svg/sprite.svg#icon-magnifying-glass"></use>
+              </svg>
+            </button>
+          </form>
+
+          <nav class="user-nav">
+            <div class="user-nav-icon-box">
+              <svg class="user-nav-icon">
+                <use xlink:href="./svg/sprite.svg#icon-bell"></use>
+              </svg>
+              <span class="user-nav-notification"></span>
+
+              <div class="user-nav-notification-pop">
+                <ul class="list">
+                  <li class="item">
+                    <a href="#" class="link">Lorem ipsum dolor, sit amet consectetur adipisicing
+                      elit. Quae, optio?</a>
+                  </li>
+                  <li class="item">
+                    <a href="#" class="link">Lorem ipsum dolor, sit amet consectetur
+                      adipisicing.</a>
+                  </li>
+                  <li class="item">
+                    <a href="#" class="link">Lorem ipsum dolor sit amet consectetur adipisicing
+                      elit. Nobis similique soluta sit impedit, provident laborum?</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="user-nav-user">
+              <img class="user-nav-user-photo" src="./img/js2.png" alt="">
+              <span class="user-nav-username">Franklin</span>
+              <svg class="user-nav-user-icon">
+                <use xlink:href="./svg/sprite.svg#icon-chevron-down"></use>
+              </svg>
+
+              <div class="user-nav-user-pop">
+                <ul class="list">
+                  <li class="item"><a href="./profile.html" class="link">
+                      <svg class="user-nav-link-icon">
+                        <use xlink:href="./svg/sprite.svg#icon-user"></use>
+                      </svg>Profile</a>
+                  </li>
+                  <li class="item"><a href="#" class="link">
+                      <svg class="user-nav-link-icon">
+                        <use xlink:href="./svg/sprite.svg#icon-help-with-circle"></use>
+                      </svg>Help</a>
+                  </li>
+                  <li class="item"><a href="#" class="link" id="logout">
+                      <svg class="user-nav-link-icon">
+                        <use xlink:href="./svg/sprite.svg#icon-log-out"></use>
+                      </svg>Logout</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </nav>
+        </header>
+
+        <!--Main Body-->
+        <main class="main-body">
+          <p class="errorMessage"></p>
+          <p class="successMessage"></p>
+          <!--Accounts Limit-->
+          <div class="accountsQuery">
+            <div class="queryForm">
+              <div class="card">
+                <form action="" class="accounts-form">
+                  <div class="form-group">
+                    <select class="accounts-select" id="limit">
+                      <option value="5">5</option>
+                      <option value="10">10</option>
+                      <option value="20">20</option>
+                      <option value="30">30</option>
+                    </select>
+                  </div>
+
+                  <input type="submit" id="go" class="btn-go" value="Go">
+                </form>
+              </div>
+
+              <div class="card">
+                <form action="" class="accounts-form">
+                  <div class="form-group">
+                    <input type="number" class="accounts-input" placeholder="account number">
+                  </div>
+
+                  <input type="submit" id="ac-go" class="btn-go" value="Go">
+                </form>
+              </div>
+            </div>
+          </div>
+          <div class="card">
+            <h1 class="content-title">Activate / Deactivate Accounts</h1>
+            <div class="table">
+              <div class="table-row">
+                <div class="account-index">AC Number</div>
+                <div class="account-name">AC Name</div>
+                <div class="account-status">AC Status</div>
+                <div class="activate">Active/Dormant</div>
+                <div class="deactivate">Delete</div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+
+      <!--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>
+            <!--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>
+      </div>
+    </div>
+  </div>
+
+  <!--Js-->
+  <script src="./js/app.js"></script>
+  <script src="./js/activate.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/frontend-app/js/activate.js b/frontend-app/js/activate.js
new file mode 100644
index 0000000..90e27c8
--- /dev/null
+++ b/frontend-app/js/activate.js
@@ -0,0 +1,343 @@
+const token = sessionStorage.getItem('token');
+const api = 'https://bankaapp-api.herokuapp.com/api';
+const go = document.querySelector('#go');
+const limitSelect = document.querySelector('#limit');
+const onSuccess = document.querySelectorAll('.successMessage');
+const errMessage = document.querySelectorAll('.errMessage');
+const errMsg = document.querySelector('.errorMessage');
+
+// POST FETCH REQUEST FOR ACCOUNTS
+const formSelect = document.querySelector('.form-select');
+const submit = document.querySelector('#submit');
+
+const patchApi = (url, data) => {
+  fetch(url, {
+    method: 'PATCH',
+    mode: 'cors',
+    cache: 'no-cache',
+    credentials: 'same-origin',
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+    redirect: 'follow',
+    referrer: 'no-referrer',
+    body: JSON.stringify(data),
+  })
+    .then(response => response.json())
+    .then((data1) => {
+      if (data1.status === 200) {
+        errMessage.forEach((err) => {
+          err.innerHTML = '';
+        });
+        onSuccess.forEach((success) => {
+          success.innerHTML = 'Updated successfully';
+          setInterval(() => {
+            document.location.reload(true);
+          }, 3000);
+        });
+      }
+    });
+};
+
+// DELETE FETCH REQUEST FOR ACCOUNTS
+const deleteApi = (url, data) => {
+  fetch(url, {
+    method: 'DELETE',
+    mode: 'cors',
+    cache: 'no-cache',
+    credentials: 'same-origin',
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+    redirect: 'follow',
+    referrer: 'no-referrer',
+  })
+    .then((response) => {
+      if (response.status === 204) {
+        errMessage.forEach((err) => {
+          err.innerHTML = '';
+        });
+        onSuccess.forEach((success) => {
+          success.innerHTML = 'Deleted successfully';
+          setInterval(() => {
+            document.location.reload(true);
+          }, 3000);
+        });
+      }
+    });
+};
+
+// GET FETCH API REQUEST TO GET ALL ACCOUNTS OF A USER
+const getAccountsApi = (url) => {
+  fetch(url, {
+    method: 'GET',
+    mode: 'cors',
+    cache: 'no-cache',
+    credentials: 'same-origin',
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+    redirect: 'follow',
+    referrer: 'no-referrer',
+  })
+    .then((response) => {
+      if (response.status === 403) {
+        errMsg.innerHTML = 'you must be logged in to view accounts';
+      } else {
+        errMsg.innerHTML = '';
+        return response.json();
+      }
+    })
+    .then((data1) => {
+      if (data1.status === 401) {
+        errMsg.innerHTML = 'you must be an admin or staff to view accounts';
+      } else {
+        data1.data.map((i) => {
+          const table = document.querySelector('.table');
+          const tableRow = document.createElement('div');
+          tableRow.classList = 'table-row table-body';
+          const accountNumber = document.createElement('div');
+          accountNumber.className = 'account-index';
+          accountNumber.innerHTML = i.accountnumber;
+          const accountName = document.createElement('div');
+          accountName.className = 'account-name';
+          accountName.innerHTML = `${i.firstname} ${i.lastname}`;
+          const status = document.createElement('div');
+          status.className = 'account-status';
+          status.innerHTML = i.status;
+          const activate = document.createElement('div');
+          activate.className = 'activate';
+          const aActivate = document.createElement('a');
+          aActivate.href = '#';
+          aActivate.className = 'activate-btn';
+          aActivate.id = 'show-modal';
+          aActivate.innerHTML = 'Active/Dormant';
+          activate.appendChild(aActivate);
+          const deleteAccount = document.createElement('div');
+          deleteAccount.className = 'deactivate';
+          const aDeleteAccount = document.createElement('a');
+          aDeleteAccount.href = '#';
+          aDeleteAccount.className = 'deactivate-btn';
+          aDeleteAccount.innerHTML = 'Delete';
+          deleteAccount.appendChild(aDeleteAccount);
+          tableRow.appendChild(accountNumber);
+          tableRow.appendChild(accountName);
+          tableRow.appendChild(status);
+          tableRow.appendChild(activate);
+          tableRow.appendChild(deleteAccount);
+          table.appendChild(tableRow);
+        });
+      }
+      return data1;
+    })
+    .then(() => {
+      // modal
+      const showModal = document.querySelectorAll('#show-modal');
+      const accountName = document.querySelectorAll('#username');
+      const accountNumber = document.querySelectorAll('#acnumber');
+      const accountBalance = document.querySelectorAll('#balance');
+
+      const modalFunction = (modalClick, modalIn, modalId) => {
+        if (modalClick) {
+          const mModal = document.querySelector(modalIn);
+
+          modalClick.forEach((modal) => {
+            modal.addEventListener('click', (e) => {
+              mModal.style.visibility = 'visible';
+              mModal.style.opacity = '1';
+              if (e.target.parentElement.parentElement) {
+                const ACNumber = e.target.parentElement.parentElement.children[0].innerHTML;
+                const ACName = e.target.parentElement.parentElement.children[1].innerHTML;
+                const ACBalance = e.target.parentElement.parentElement.children[2].innerHTML;
+                accountName.forEach((name) => {
+                  name.innerHTML = ACName;
+                });
+                accountNumber.forEach((number) => {
+                  number.innerHTML = ACNumber;
+                });
+                accountBalance.forEach((balance) => {
+                  balance.innerHTML = ACBalance;
+                });
+
+                submit.addEventListener('click', () => {
+                  e.preventDefault();
+                  patchApi(`${api}/v1/accounts/${ACNumber}`, { status: formSelect.value });
+                });
+              }
+            });
+          });
+        }
+
+        window.addEventListener('click', (e) => {
+          const modal = document.querySelector(modalId);
+          const cModal = document.querySelector(modalIn);
+          if (e.target === modal) {
+            cModal.style.visibility = 'hidden';
+            cModal.style.opacity = '0';
+          }
+        });
+      };
+
+      modalFunction(showModal, '.modal', '#modal');
+
+      // DELETE
+      const dels = document.querySelectorAll('.deactivate-btn');
+      dels.forEach((del) => {
+        del.addEventListener('click', (e) => {
+          const ACNumber = e.target.parentElement.parentElement.children[0].innerHTML;
+          deleteApi(`${api}/v1/accounts/${ACNumber}`);
+          e.target.parentElement.parentElement.remove();
+        });
+      });
+    });
+};
+getAccountsApi(`${api}/v1/accounts?limit=${limitSelect.value}`);
+
+// GET FETCH API REQUEST TO GET A SPECIFIC ACCOUNT OF A USER
+const getSpecficAccountApi = (url) => {
+  fetch(url, {
+    method: 'GET',
+    mode: 'cors',
+    cache: 'no-cache',
+    credentials: 'same-origin',
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+    redirect: 'follow',
+    referrer: 'no-referrer',
+  })
+    .then((response) => {
+      if (response.status === 403) {
+        errMsg.innerHTML = 'you must be logged in to view accounts';
+      } else {
+        errMsg.innerHTML = '';
+        return response.json();
+      }
+    })
+    .then((data1) => {
+      const i = data1.data;
+      const table = document.querySelector('.table');
+      const tableRow = document.createElement('div');
+      tableRow.classList = 'table-row table-body';
+      const accountNumber = document.createElement('div');
+      accountNumber.className = 'account-index';
+      accountNumber.innerHTML = i.accountnumber;
+      const accountName = document.createElement('div');
+      accountName.className = 'account-name';
+      accountName.innerHTML = `${i.firstname} ${i.lastname}`;
+      const status = document.createElement('div');
+      status.className = 'account-status';
+      status.innerHTML = i.status;
+      const activate = document.createElement('div');
+      activate.className = 'activate';
+      const aActivate = document.createElement('a');
+      aActivate.href = '#';
+      aActivate.className = 'activate-btn';
+      aActivate.id = 'show-modal';
+      aActivate.innerHTML = 'Active/Dormant';
+      activate.appendChild(aActivate);
+      const deleteAccount = document.createElement('div');
+      deleteAccount.className = 'deactivate';
+      const aDeleteAccount = document.createElement('a');
+      aDeleteAccount.href = '#';
+      aDeleteAccount.className = 'deactivate-btn';
+      aDeleteAccount.innerHTML = 'Delete';
+      deleteAccount.appendChild(aDeleteAccount);
+      tableRow.appendChild(accountNumber);
+      tableRow.appendChild(accountName);
+      tableRow.appendChild(status);
+      tableRow.appendChild(activate);
+      tableRow.appendChild(deleteAccount);
+      table.appendChild(tableRow);
+      return data1;
+    })
+    .then(() => {
+      // modal
+      const showModal = document.querySelectorAll('#show-modal');
+      const accountName = document.querySelectorAll('#username');
+      const accountNumber = document.querySelectorAll('#acnumber');
+      const accountBalance = document.querySelectorAll('#balance');
+
+      const modalFunction = (modalClick, modalIn, modalId) => {
+        if (modalClick) {
+          const mModal = document.querySelector(modalIn);
+
+          modalClick.forEach((modal) => {
+            modal.addEventListener('click', (e) => {
+              mModal.style.visibility = 'visible';
+              mModal.style.opacity = '1';
+              if (e.target.parentElement.parentElement) {
+                const ACNumber = e.target.parentElement.parentElement.children[0].innerHTML;
+                const ACName = e.target.parentElement.parentElement.children[1].innerHTML;
+                const ACBalance = e.target.parentElement.parentElement.children[2].innerHTML;
+                accountName.forEach((name) => {
+                  name.innerHTML = ACName;
+                });
+                accountNumber.forEach((number) => {
+                  number.innerHTML = ACNumber;
+                });
+                accountBalance.forEach((balance) => {
+                  balance.innerHTML = ACBalance;
+                });
+
+                submit.addEventListener('click', () => {
+                  e.preventDefault();
+                  patchApi(`${api}/v1/accounts/${ACNumber}`, { status: formSelect.value });
+                });
+
+                console.log(e.target);
+              }
+            });
+          });
+        }
+
+        window.addEventListener('click', (e) => {
+          const modal = document.querySelector(modalId);
+          const cModal = document.querySelector(modalIn);
+          if (e.target === modal) {
+            cModal.style.visibility = 'hidden';
+            cModal.style.opacity = '0';
+          }
+        });
+      };
+
+      modalFunction(showModal, '.modal', '#modal');
+
+      // DELETE
+      const dels = document.querySelectorAll('.deactivate-btn');
+      dels.forEach((del) => {
+        del.addEventListener('click', (e) => {
+          const ACNumber = e.target.parentElement.parentElement.children[0].innerHTML;
+          deleteApi(`${api}/v1/accounts/${ACNumber}`);
+          e.target.parentElement.parentElement.remove();
+        });
+      });
+    });
+};
+
+go.addEventListener('click', (e) => {
+  e.preventDefault();
+  const tableBodies = document.querySelectorAll('.table-body');
+  tableBodies.forEach((tableBody) => {
+    tableBody.remove();
+  });
+
+  getAccountsApi(`${api}/v1/accounts?limit=${limitSelect.value}`);
+});
+
+const acBtn = document.querySelector('#ac-go');
+
+acBtn.addEventListener('click', (e) => {
+  e.preventDefault();
+  const acInput = document.querySelector('.accounts-input');
+  const tableBodies = document.querySelectorAll('.table-body');
+  tableBodies.forEach((tableBody) => {
+    tableBody.remove();
+  });
+
+  getSpecficAccountApi(`${api}/v1/accounts/${acInput.value}`);
+});
diff --git a/frontend-app/js/credit-debit.js b/frontend-app/js/credit-debit.js
index 7455bc0..15f11d1 100644
--- a/frontend-app/js/credit-debit.js
+++ b/frontend-app/js/credit-debit.js
@@ -34,6 +34,9 @@ const debitCreditApi = (url, data) => {
         });
         onSuccess.forEach((success) => {
           success.innerHTML = 'Transaction was successful';
+          setInterval(() => {
+            document.location.reload(true);
+          }, 3000);
         });
       }
     });
