From af2b3b2f7b0e3a2030dd7e8d37b069fa6672e73a Mon Sep 17 00:00:00 2001 From: cavdy Date: Mon, 22 Apr 2019 01:46:31 +0100 Subject: [PATCH] feature(connect api to transactions): connect api to transactions, admin and staff can debit and credit users [Starts #165482791] --- frontend-app/{credit.html => accounts.html} | 71 +++-- frontend-app/css/style.css | 36 ++- frontend-app/dashboard.html | 2 +- frontend-app/js/credit-debit.js | 334 ++++++++++++++++++++ server/v1/controllers/createAccount.js | 2 +- server/v1/services/createAccount.js | 54 ++-- server/v1/test/accounts.js | 2 +- ui/credit.html | 2 +- 8 files changed, 447 insertions(+), 56 deletions(-) rename frontend-app/{credit.html => accounts.html} (74%) diff --git a/frontend-app/credit.html b/frontend-app/accounts.html similarity index 74% rename from frontend-app/credit.html rename to frontend-app/accounts.html index 571d9c3..917ff65 100644 --- a/frontend-app/credit.html +++ b/frontend-app/accounts.html @@ -26,7 +26,7 @@

Banka

Dashboard
  • - Credit / Debit + Accounts
  • Users Accounts @@ -120,20 +120,34 @@

    Banka

    +

    -
    -
    -
    -
    - -
    - - -
    +
    +
    +
    +
    +
    + +
    + + +
    +
    + +
    +
    +
    + +
    + + +
    +
    @@ -141,19 +155,12 @@

    Credit / Debit Accounts

    - - -
    Amount
    + + +
    Balance
    Debit
    Credit
    -
    - - -
    10000
    -
    Debit
    -
    Credit
    -
    @@ -165,17 +172,20 @@

    Credit / Debit Accounts

    Debit Account

    +

    +

    -

    Account name:

    +

    Account Name:

    +

    Account Number:

    Balance:

    - +
    - +
    @@ -186,17 +196,20 @@

    Balance:

    Credit Account

    +

    +

    Account name:

    +

    Account Number:

    Balance:

    - +
    - +
    diff --git a/frontend-app/css/style.css b/frontend-app/css/style.css index 90d27f9..bf799ec 100644 --- a/frontend-app/css/style.css +++ b/frontend-app/css/style.css @@ -938,9 +938,9 @@ body, accounts dropdown ======================= */ -.accounts { +.accounts, +.accountsQuery { margin-bottom: .5rem; - width: 15rem; height: 3rem; } @@ -965,6 +965,30 @@ body, color: var(--color-blue); } +.queryForm { + display: flex; + justify-content: space-between; +} + +.accounts-input { + width: 10rem; + height: 2rem; + font-size: 1rem; + border: 1px solid var(--color-blue); + padding-left: .5rem; +} + +.errorMessage, +.errMessage { + font-size: 1rem; + color: var(--color-red); +} + +.successMessage { + font-size: 1rem; + color: var(--color-green); +} + /* ======================= Responsiveness @@ -1124,4 +1148,12 @@ body, height: 20rem; font-size: 1rem; } + + .queryForm { + flex-direction: column; + } + + .accountsQuery { + margin-bottom: 4rem; + } } \ No newline at end of file diff --git a/frontend-app/dashboard.html b/frontend-app/dashboard.html index 9a5cbc7..a7a16a3 100644 --- a/frontend-app/dashboard.html +++ b/frontend-app/dashboard.html @@ -26,7 +26,7 @@

    Banka

    Dashboard
  • - Credit / Debit + Accounts
  • Users Accounts diff --git a/frontend-app/js/credit-debit.js b/frontend-app/js/credit-debit.js index e69de29..264f161 100644 --- a/frontend-app/js/credit-debit.js +++ b/frontend-app/js/credit-debit.js @@ -0,0 +1,334 @@ +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'); + +// POST FETCH REQUEST FOR DEBIT/CREDIT TRANSACTION +const debitForm = document.querySelector('#debit'); +const debitBtn = document.querySelector('#debitbtn'); +const creditForm = document.querySelector('#credit'); +const creditBtn = document.querySelector('#creditbtn'); + +const debitCreditApi = (url, data) => { + fetch(url, { + method: 'POST', + 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 === 201) { + errMessage.forEach((err) => { + err.innerHTML = ''; + }); + onSuccess.forEach((success) => { + success.innerHTML = 'Transaction was successful'; + }); + } + }); +}; + +// 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) => { + const errMsg = document.querySelector('.errorMessage'); + if (response.status === 403) { + errMsg.innerHTML = 'you must be logged in to view accounts'; + } else { + errMsg.innerHTML = ''; + return response.json(); + } + }) + .then((data1) => { + 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 balance = document.createElement('div'); + balance.className = 'amount'; + balance.innerHTML = i.balance; + const debit = document.createElement('div'); + debit.className = 'edit'; + const aDebit = document.createElement('a'); + aDebit.href = '#'; + aDebit.className = 'delete-btn'; + aDebit.id = 'show-modal'; + aDebit.innerHTML = 'Debit'; + debit.appendChild(aDebit); + const credit = document.createElement('div'); + credit.className = 'edit'; + const aCredit = document.createElement('a'); + aCredit.href = '#'; + aCredit.className = 'edit-btn'; + aCredit.id = 'show-modal2'; + aCredit.innerHTML = 'Credit'; + credit.appendChild(aCredit); + tableRow.appendChild(accountNumber); + tableRow.appendChild(accountName); + tableRow.appendChild(balance); + tableRow.appendChild(debit); + tableRow.appendChild(credit); + table.appendChild(tableRow); + }); + return data1; + }) + .then(() => { + // modal + const showModal = document.querySelectorAll('#show-modal'); + const showModal2 = document.querySelectorAll('#show-modal2'); + 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; + }); + + debitBtn.addEventListener('click', () => { + e.preventDefault(); + + const checkForDigit = /^-?\d+\.?\d*$/; + if (checkForDigit.test(debitForm.value)) { + debitCreditApi(`${api}/v1/transactions/${ACNumber}/debit`, { amount: debitForm.value }); + } else { + errMessage.forEach((err) => { + err.innerHTML = 'Invalid Amount. Please numbers only'; + }); + } + }); + + creditBtn.addEventListener('click', () => { + e.preventDefault(); + const checkForDigit = /^-?\d+\.?\d*$/; + if (checkForDigit.test(creditForm.value)) { + debitCreditApi(`${api}/v1/transactions/${ACNumber}/credit`, { amount: creditForm.value }); + } else { + errMessage.forEach((err) => { + err.innerHTML = 'Invalid Amount. Please numbers only'; + }); + } + }); + } + }); + }); + } + + 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'); + modalFunction(showModal2, '.modal2', '#modal2'); + }); +}; +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) => { + const errMsg = document.querySelector('.errorMessage'); + 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 balance = document.createElement('div'); + balance.className = 'amount'; + balance.innerHTML = i.balance; + const debit = document.createElement('div'); + debit.className = 'edit'; + const aDebit = document.createElement('a'); + aDebit.href = '#'; + aDebit.className = 'delete-btn'; + aDebit.id = 'show-modal'; + aDebit.innerHTML = 'Debit'; + debit.appendChild(aDebit); + const credit = document.createElement('div'); + credit.className = 'edit'; + const aCredit = document.createElement('a'); + aCredit.href = '#'; + aCredit.className = 'edit-btn'; + aCredit.id = 'show-modal2'; + aCredit.innerHTML = 'Credit'; + credit.appendChild(aCredit); + tableRow.appendChild(accountNumber); + tableRow.appendChild(accountName); + tableRow.appendChild(balance); + tableRow.appendChild(debit); + tableRow.appendChild(credit); + table.appendChild(tableRow); + return data1; + }) + .then(() => { + // modal + const showModal = document.querySelectorAll('#show-modal'); + const showModal2 = document.querySelectorAll('#show-modal2'); + 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; + }); + + debitBtn.addEventListener('click', () => { + e.preventDefault(); + + const checkForDigit = /^-?\d+\.?\d*$/; + if (checkForDigit.test(debitForm.value)) { + debitCreditApi(`${api}/v1/transactions/${ACNumber}/debit`, { amount: debitForm.value }); + } else { + errMessage.forEach((err) => { + err.innerHTML = 'Invalid Amount. Please numbers only'; + }); + } + }); + + creditBtn.addEventListener('click', () => { + e.preventDefault(); + const checkForDigit = /^-?\d+\.?\d*$/; + if (checkForDigit.test(creditForm.value)) { + debitCreditApi(`${api}/v1/transactions/${ACNumber}/credit`, { amount: creditForm.value }); + } else { + errMessage.forEach((err) => { + err.innerHTML = 'Invalid Amount. Please numbers only'; + }); + } + }); + } + }); + }); + } + + 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'); + modalFunction(showModal2, '.modal2', '#modal2'); + }); +}; + +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/server/v1/controllers/createAccount.js b/server/v1/controllers/createAccount.js index 39c4c43..f15baae 100644 --- a/server/v1/controllers/createAccount.js +++ b/server/v1/controllers/createAccount.js @@ -17,7 +17,7 @@ const CreateAccountController = { const queryParams = req.query.status; const queryLimit = req.query.limit; const allAccounts = await CreateAccountService - .allAccounts(queryParams, queryLimit); + .allAccounts(queryParams, queryLimit, req.authorizedData); const data = await statusHelper .statusHelper('nothing', res, allAccounts.returnStatus, allAccounts.returnError, allAccounts.returnSuccess); diff --git a/server/v1/services/createAccount.js b/server/v1/services/createAccount.js index 06b3e23..2d4ac4e 100644 --- a/server/v1/services/createAccount.js +++ b/server/v1/services/createAccount.js @@ -47,34 +47,46 @@ const CreateAccountService = { }; }, - async allAccounts(queryParams, queryLimit) { + async allAccounts(queryParams, queryLimit, staff) { let returnStatus; let returnSuccess = ''; let returnError = ''; - if (typeof queryParams !== 'undefined' && typeof queryLimit !== 'undefined') { - const allAccounts = await dbConnection - .dbConnect('SELECT * from accounts WHERE status=$1 LIMIT $2', [queryParams, queryLimit]); - if (allAccounts.rows.length > 0) { - returnStatus = 200; - returnSuccess = allAccounts.rows; + + // pulling users data from database + const userDetails = await dbConnection + .dbConnect('SELECT type, isadmin FROM users WHERE email=$1', [staff.email]); + const { type, isadmin } = userDetails.rows[0]; + + if (type === 'staff' || isadmin === true) { + if (typeof queryParams !== 'undefined' && typeof queryLimit !== 'undefined') { + const allAccounts = await dbConnection + .dbConnect('SELECT * from accounts WHERE status=$1 LIMIT $2', [queryParams, queryLimit]); + if (allAccounts.rows.length > 0) { + returnStatus = 200; + returnSuccess = allAccounts.rows; + } else { + returnStatus = 404; + returnError = 'no account found for this user'; + } + } else if (typeof queryParams === 'undefined' || typeof queryLimit !== 'undefined') { + const allAccounts = await dbConnection + .dbConnect('SELECT * from accounts LIMIT $1', [queryLimit]); + if (allAccounts.rows.length > 0) { + returnStatus = 200; + returnSuccess = allAccounts.rows; + } else { + returnStatus = 404; + returnError = 'no account found for this user'; + } } else { - returnStatus = 404; - returnError = 'no account found for this user'; - } - } else if (typeof queryParams === 'undefined' || typeof queryLimit !== 'undefined') { - const allAccounts = await dbConnection - .dbConnect('SELECT * from accounts LIMIT $1', [queryLimit]); - if (allAccounts.rows.length > 0) { + const allAccounts = await dbConnection + .dbConnect('SELECT * from accounts LIMIT $1', [10]); returnStatus = 200; returnSuccess = allAccounts.rows; - } else { - returnStatus = 404; - returnError = 'no account found for this user'; } } else { - const allAccounts = await dbConnection - .dbConnect('SELECT * from accounts LIMIT $1', [10]); - returnStatus = 200; - returnSuccess = allAccounts.rows; + returnStatus = 401; + returnError = 'Sorry you don\'t have permission to perform this task'; } + return { returnStatus, returnSuccess, diff --git a/server/v1/test/accounts.js b/server/v1/test/accounts.js index 0d640fc..be5619f 100644 --- a/server/v1/test/accounts.js +++ b/server/v1/test/accounts.js @@ -132,7 +132,7 @@ describe('Testing Accounts Controller', () => { const response = await chai.request(app) .post(signinUrl) .send({ - email: 'banka872@banka4.com', + email: 'admin@banka.com', password: 'passworD4@', }); const { token } = response.body.data; diff --git a/ui/credit.html b/ui/credit.html index 803601a..a1fd8c2 100644 --- a/ui/credit.html +++ b/ui/credit.html @@ -159,7 +159,7 @@

    Balance:

    - +