Skip to content

Commit

Permalink
Merge pull request #84 from Cavdy/ft-connect-api-to-ui-transactions-1…
Browse files Browse the repository at this point in the history 
…65482791

#165482791 connect api to ui transactions
  • Loading branch information
@Cavdy
Cavdy committed Apr 21, 2019
2 parents d343a95 + a3af516 commit 8ad3780
Show file tree
Hide file tree
Showing 8 changed files with 251 additions and 20 deletions.
212 changes: 212 additions & 0 deletions frontend-app/credit.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
<!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>Credit/Debit - 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">
<a href="./dashboard.html" class="sidebar-link">Dashboard</a>
</li>
<li class="sidebar-item sidebar-item-active">
<a href="./credit.html" class="sidebar-link">Credit / Debit</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">
<!--Accounts Limit-->
<div class="accounts">
<div class="card">
<form action="" class="accounts-form">
<div class="form-group">
<select class="accounts-select" id="accounts">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</div>

<input type="submit" id="submit" class="btn-go" value="Go">
</form>
</div>
</div>
<div class="card">
<h1 class="content-title">Credit / Debit Accounts</h1>

<div class="table">
<div class="table-row">
<div class="account-index">Index</div>
<div class="account-name">Account Name</div>
<div class="amount">Amount</div>
<div class="edit">Debit</div>
<div class="edit">Credit</div>
</div>
<div class="table-row">
<div class="account-index">1</div>
<div class="account-name">Fred Matthew</div>
<div class="amount">10000</div>
<div class="edit"><a href="#" class="delete-btn" id="show-modal">Debit</a></div>
<div class="edit"><a href="#" class="edit-btn" id="show-modal2">Credit</a></div>
</div>
</div>
</div>
</main>

</div>

<!--Debit Modal-->
<div id="modal" class="modal">
<div class="modal-content">
<div class="card">
<h1 class="content-title">Debit Account</h1>
<!--Account Name and Balance-->
<h4 class="username">Account name: <span id="username"></span></h4>
<h4 class="balance">Balance: <span id="balance"></span></h4>
<!--Debit Form-->
<form action="" class="form">
<div class="form-group">
<label for="debit" class="form-label">Debit</label>
<input type="number" placeholder="Debit" id="debit" class="form-input">
</div>

<input type="submit" class="btn btn-block btn-primary" value="Debit">
</form>
</div>
</div>
</div>

<!--Credit Modal-->
<div id="modal2" class="modal2">
<div class="modal-content">
<div class="card">
<h1 class="content-title">Credit Account</h1>
<!--Account Name and Balance-->
<h4 class="username">Account name: <span id="username"></span></h4>
<h4 class="balance">Balance: <span id="balance"></span></h4>
<!--Credit Form-->
<form action="" class="form">
<div class="form-group">
<label for="credit" class="form-label">Credit</label>
<input type="number" placeholder="Credit" id="credit" class="form-input">
</div>

<input type="submit" class="btn btn-block btn-primary" value="Credit">
</form>
</div>
</div>
</div>
</div>
</div>

<!--Js-->
<script src="./js/app.js"></script>
<script src="./js/credit-debit.js"></script>
</body>

</html>
6 changes: 0 additions & 6 deletions frontend-app/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,12 +71,6 @@ const modalFunction = (modalClick, modalIn, modalId) => {
modalFunction(showModal, '.modal', '#modal');
modalFunction(showModal2, '.modal2', '#modal2');

const welcome = document.querySelector('.welcome-user');

setTimeout(() => {
welcome.style.display = 'none';
}, 5000);

const logout = document.querySelector('#logout');
logout.addEventListener('click', (e) => {
e.preventDefault();
Expand Down
Empty file added frontend-app/js/credit-debit.js
View file
Empty file.
6 changes: 6 additions & 0 deletions frontend-app/js/dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,3 +87,9 @@ submit.addEventListener('click', (e) => {
const selected = accountSelect.value;
getAccountApi(`${api}/v1/accounts/${selected}`);
});

const welcome = document.querySelector('.welcome-user');

setTimeout(() => {
welcome.style.display = 'none';
}, 5000);
3 changes: 2 additions & 1 deletion server/v1/controllers/createAccount.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,9 @@ const CreateAccountController = {
// all accounts
async allAccounts(req, res) {
const queryParams = req.query.status;
const queryLimit = req.query.limit;
const allAccounts = await CreateAccountService
.allAccounts(queryParams);
.allAccounts(queryParams, queryLimit);

const data = await statusHelper
.statusHelper('nothing', res, allAccounts.returnStatus, allAccounts.returnError, allAccounts.returnSuccess);
Expand Down
3 changes: 2 additions & 1 deletion server/v1/controllers/users.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import statusHelper from '../helper/statusHelper';

const UsersController = {
async getAllUsers(req, res) {
const allUsers = await UserService.getAllUsers(req.authorizedData);
const queryLimit = req.query.limit;
const allUsers = await UserService.getAllUsers(req.authorizedData, queryLimit);

const data = await statusHelper
.statusHelper('nothing', res, allUsers.returnStatus, allUsers.returnError, allUsers.returnSuccess);
Expand Down
24 changes: 17 additions & 7 deletions server/v1/services/createAccount.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,23 +47,33 @@ const CreateAccountService = {
};
},

async allAccounts(queryParams) {
async allAccounts(queryParams, queryLimit) {
let returnStatus; let returnSuccess = ''; let returnError = '';
if (typeof queryParams === 'undefined' || queryParams === null) {
if (typeof queryParams !== 'undefined' && typeof queryLimit !== 'undefined') {
const allAccounts = await dbConnection
.dbConnect('SELECT * from accounts');
returnStatus = 200;
returnSuccess = allAccounts.rows;
} else {
.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 WHERE status=$1', [queryParams]);
.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 {
const allAccounts = await dbConnection
.dbConnect('SELECT * from accounts LIMIT $1', [10]);
returnStatus = 200;
returnSuccess = allAccounts.rows;
}
return {
returnStatus,
Expand Down
17 changes: 12 additions & 5 deletions server/v1/services/users.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,25 @@
import dbConnection from '../config/database';

const UsersServices = {
async getAllUsers(staff) {
async getAllUsers(staff, queryLimit) {
let returnStatus; let returnSuccess = ''; let returnError = '';
// check the users table
const userDetails = await dbConnection
.dbConnect('SELECT id, type, isadmin FROM users WHERE email=$1', [staff.email]);
const { type, isadmin } = userDetails.rows[0];

if (type === 'staff' || isadmin === true) {
const allAccounts = await dbConnection
.dbConnect('SELECT * from users');
returnStatus = 200;
returnSuccess = allAccounts.rows;
if (typeof queryLimit !== 'undefined') {
const allAccounts = await dbConnection
.dbConnect('SELECT * from users LIMIT $1', [queryLimit]);
returnStatus = 200;
returnSuccess = allAccounts.rows;
} else {
const allAccounts = await dbConnection
.dbConnect('SELECT * from users LIMIT $1', [10]);
returnStatus = 200;
returnSuccess = allAccounts.rows;
}
} else {
returnStatus = 401;
returnError = 'You don\'t have permission to view this page';
Expand Down

0 comments on commit 8ad3780

Please sign in to comment.