Added pagination to products and orders in admin

master
Mark Moffat 2020-03-19 17:02:52 +10:30
parent 5f81173919
commit a7a1fadae6
8 changed files with 63 additions and 15 deletions

View File

@ -75,6 +75,12 @@ body {
.pagination > li > a {
background-color: #cc4135 !important;
}
.page-item.active .page-link {
color: #762323 !important;
}
.page-link:hover {
color: #762323 !important;
}
.admin-card {
background-color: white !important;
border-radius: 5px;

View File

@ -1 +1 @@
body,html{height:100%;background-color:#f8f9fa!important}.content-body{margin-bottom:0}.feather{width:16px;height:16px}.btn-outline-danger,.btn-outline-info,.btn-outline-primary,.btn-outline-success,.btn-outline-warning{background-color:#fff}.btn-outline-primary{color:#fff!important;background-color:#000;border-color:#000}.btn-outline-danger{color:#dc3545!important}.btn-outline-danger:hover{color:#fff!important}.has-error div,.has-error input,.has-error textarea{border-color:#cc4135}#frm_search,.search-bar-input,.search-bar-input .btn{padding-top:10px;height:45px}.footer{padding-top:20px}.admin-menu{padding-left:0}.admin-menu .list-group-item{border-bottom:none}.navbarMenuWrapper{background-color:#f5f5f5}.navbarMenu>ul>li>a:hover{color:#cc4135!important}.navbarMenu{padding-right:0;padding-left:0}.product-wrapper>a:hover{color:#cc4135!important}#navbar,#navbar>.navbar-nav,#navbar>.navbar-nav>li>a,.navbar-header,.navbar-static-top{margin-bottom:0;height:100px!important}#navbar>.navbar-nav>li>a{padding-top:35px}.pagination>li>a{background-color:#cc4135!important}.admin-card{background-color:#fff!important;border-radius:5px;padding:15px;margin:10px;box-shadow:0 0 1px rgba(0,0,0,.12),0 1px 6px rgba(0,0,0,.03),0 6px 10px -8px rgba(0,0,0,.1)}.admin-card-body{padding:5px}body .popover{display:none!important}.navbar-brand{color:#cc4135!important;letter-spacing:4px;padding-left:20px!important;padding-top:0!important;height:80px!important;font-size:55px!important}.navbar-brand,.navbar-brand-image{height:80px;padding-left:10px;padding-top:10px}.navbar-default .badge{background-color:#cc4135}#empty-cart:active,#empty-cart:active:hover,#empty-cart:focus,#empty-cart:hover,.pushy-link:active,.pushy-link:active:hover,.pushy-link:focus,.pushy-link:hover{border-color:#cc4135;background-color:#cc4135}.navActive>a{margin-bottom:0;padding-top:15px;border-bottom:5px solid #cc4135}#navbar,#navbar>.navbar-nav,#navbar>.navbar-nav>li>a,.navbar-header,.navbar-static-top{background-color:#fff}.navbar-default .navbar-nav>li>a{color:#838b8f;font-size:20px}.global-result-type{color:#8d8d8d}.global-result:hover{background-color:#007bff}.global-result:hover .global-result-detail,.global-result:hover .global-result-type,.global-result:hover .global-result-type .fal{color:#fff!important}.global-result a{text-decoration:none!important}.global-result:hover{cursor:pointer}.global-result:first-child{border-top-left-radius:0;border-top-right-radius:0}.global-result{border-left:0;border-right:0}.global-search-modal-content,.global-search-modal-header{background-color:transparent;border:none}#global-search-results{padding-right:0;border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.global-search-form{margin-bottom:0}#global-search-value{border-bottom-right-radius:0}.search-input-addon{border-bottom-left-radius:0}.sidebar{position:fixed;top:0;bottom:0;left:0;z-index:100;padding:0;background-color:#fff;box-shadow:inset -1px 0 0 rgba(0,0,0,.1)}.sidebar-sticky{position:relative;top:0;height:100vh;padding-top:15px;overflow-x:hidden;overflow-y:auto}@supports ((position:-webkit-sticky) or (position:sticky)){.sidebar-sticky{position:-webkit-sticky;position:sticky}}.sidebar .nav-link{font-weight:400;color:#333}.sidebar .nav-link .feather{margin-right:4px;color:#999}.sidebar .nav-link.active .feather,.sidebar .nav-link:hover .feather{color:inherit}.sidebar-heading{font-size:.75rem;text-transform:uppercase}.sidebar-brand{width:80%}.sidebar-search{text-align:center;width:20%}.sidebar-addon{height:40px}.sidebar-link{display:inline-block;width:80%}.sidebar-link-addon{display:inline-block;width:10%}[role=main]{padding-top:20px;margin-bottom:20px}@media (min-width:768px){[role=main]{padding-top:20px;padding-bottom:20px}}@media only screen and (max-width:768px){.navbar-default .navbar-brand{padding-top:10px}.navbar-default .navbar-nav>li>a{font-size:16px}.searchBarWrapper{padding-top:10px}.navbarMenuWrapper{padding-left:0;padding-right:0}.navbarMenuOuter{padding-left:0;padding-right:0}.navActive>a{color:#fff!important}.navbarMenu{padding-right:7.5px;padding-left:7.5px}.navActive>a{color:#fff!important;background-color:#cc4135;border-bottom:none}.footer{padding-top:10px}}
body,html{height:100%;background-color:#f8f9fa!important}.content-body{margin-bottom:0}.feather{width:16px;height:16px}.btn-outline-danger,.btn-outline-info,.btn-outline-primary,.btn-outline-success,.btn-outline-warning{background-color:#fff}.btn-outline-primary{color:#fff!important;background-color:#000;border-color:#000}.btn-outline-danger{color:#dc3545!important}.btn-outline-danger:hover{color:#fff!important}.has-error div,.has-error input,.has-error textarea{border-color:#cc4135}#frm_search,.search-bar-input,.search-bar-input .btn{padding-top:10px;height:45px}.footer{padding-top:20px}.admin-menu{padding-left:0}.admin-menu .list-group-item{border-bottom:none}.navbarMenuWrapper{background-color:#f5f5f5}.navbarMenu>ul>li>a:hover{color:#cc4135!important}.navbarMenu{padding-right:0;padding-left:0}.product-wrapper>a:hover{color:#cc4135!important}#navbar,#navbar>.navbar-nav,#navbar>.navbar-nav>li>a,.navbar-header,.navbar-static-top{margin-bottom:0;height:100px!important}#navbar>.navbar-nav>li>a{padding-top:35px}.pagination>li>a{background-color:#cc4135!important}.page-item.active .page-link{color:#fff!important}.page-item .page-link{color:#fff!important}.admin-card{background-color:#fff!important;border-radius:5px;padding:15px;margin:10px;box-shadow:0 0 1px rgba(0,0,0,.12),0 1px 6px rgba(0,0,0,.03),0 6px 10px -8px rgba(0,0,0,.1)}.admin-card-body{padding:5px}body .popover{display:none!important}.navbar-brand{color:#cc4135!important;letter-spacing:4px;padding-left:20px!important;padding-top:0!important;height:80px!important;font-size:55px!important}.navbar-brand,.navbar-brand-image{height:80px;padding-left:10px;padding-top:10px}.navbar-default .badge{background-color:#cc4135}#empty-cart:active,#empty-cart:active:hover,#empty-cart:focus,#empty-cart:hover,.pushy-link:active,.pushy-link:active:hover,.pushy-link:focus,.pushy-link:hover{border-color:#cc4135;background-color:#cc4135}.navActive>a{margin-bottom:0;padding-top:15px;border-bottom:5px solid #cc4135}#navbar,#navbar>.navbar-nav,#navbar>.navbar-nav>li>a,.navbar-header,.navbar-static-top{background-color:#fff}.navbar-default .navbar-nav>li>a{color:#838b8f;font-size:20px}.global-result-type{color:#8d8d8d}.global-result:hover{background-color:#007bff}.global-result:hover .global-result-detail,.global-result:hover .global-result-type,.global-result:hover .global-result-type .fal{color:#fff!important}.global-result a{text-decoration:none!important}.global-result:hover{cursor:pointer}.global-result:first-child{border-top-left-radius:0;border-top-right-radius:0}.global-result{border-left:0;border-right:0}.global-search-modal-content,.global-search-modal-header{background-color:transparent;border:none}#global-search-results{padding-right:0;border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.global-search-form{margin-bottom:0}#global-search-value{border-bottom-right-radius:0}.search-input-addon{border-bottom-left-radius:0}.sidebar{position:fixed;top:0;bottom:0;left:0;z-index:100;padding:0;background-color:#fff;box-shadow:inset -1px 0 0 rgba(0,0,0,.1)}.sidebar-sticky{position:relative;top:0;height:100vh;padding-top:15px;overflow-x:hidden;overflow-y:auto}@supports ((position:-webkit-sticky) or (position:sticky)){.sidebar-sticky{position:-webkit-sticky;position:sticky}}.sidebar .nav-link{font-weight:400;color:#333}.sidebar .nav-link .feather{margin-right:4px;color:#999}.sidebar .nav-link.active .feather,.sidebar .nav-link:hover .feather{color:inherit}.sidebar-heading{font-size:.75rem;text-transform:uppercase}.sidebar-brand{width:80%}.sidebar-search{text-align:center;width:20%}.sidebar-addon{height:40px}.sidebar-link{display:inline-block;width:80%}.sidebar-link-addon{display:inline-block;width:10%}[role=main]{padding-top:20px;margin-bottom:20px}@media (min-width:768px){[role=main]{padding-top:20px;padding-bottom:20px}}@media only screen and (max-width:768px){.navbar-default .navbar-brand{padding-top:10px}.navbar-default .navbar-nav>li>a{font-size:16px}.searchBarWrapper{padding-top:10px}.navbarMenuWrapper{padding-left:0;padding-right:0}.navbarMenuOuter{padding-left:0;padding-right:0}.navActive>a{color:#fff!important}.navbarMenu{padding-right:7.5px;padding-left:7.5px}.navActive>a{color:#fff!important;background-color:#cc4135;border-bottom:none}.footer{padding-top:10px}}

View File

@ -4,6 +4,7 @@
@btn-danger-color-txt: #ffffff;
@btn-danger-color-bg: #000000;
@btn-danger-color-border: #000000;
@pagination-hover: #762323;
html,body {
height: 100%;
@ -92,6 +93,14 @@ html,body {
background-color: @accent-color !important;
}
.page-item.active .page-link {
color: @pagination-hover !important;
}
.page-link:hover {
color: @pagination-hover !important;
}
.admin-card {
background-color: white !important;
border-radius: 5px;

View File

@ -6,18 +6,22 @@ const {
getId,
sendEmail,
getEmailTemplate,
clearCustomer
clearCustomer,
paginateData
} = require('../lib/common');
const { restrict, checkAccess } = require('../lib/auth');
const { indexOrders } = require('../lib/indexing');
const router = express.Router();
// Show orders
router.get('/admin/orders', restrict, async (req, res, next) => {
const db = req.app.db;
router.get('/admin/orders/:page?', restrict, async (req, res, next) => {
let pageNum = 1;
if(req.params.page){
pageNum = req.params.page;
}
// Top 10 products
const orders = await db.orders.find({}).sort({ orderDate: -1 }).limit(10).toArray();
// Get our paginated data
const orders = await paginateData(false, req, pageNum, 'orders', {}, { productAddedDate: -1 });
// If API request, return json
if(req.apiAuthenticated){
@ -29,7 +33,10 @@ router.get('/admin/orders', restrict, async (req, res, next) => {
res.render('orders', {
title: 'Cart',
orders: orders,
orders: orders.data,
totalItemCount: orders.totalItems,
pageNum,
paginateUrl: 'admin/orders',
admin: true,
config: req.app.config,
session: req.session,

View File

@ -9,13 +9,21 @@ const fs = require('fs');
const path = require('path');
const router = express.Router();
router.get('/admin/products', restrict, async (req, res, next) => {
const db = req.app.db;
// get the top results
const topResults = await db.products.find({}).sort({ productAddedDate: -1 }).limit(10).toArray();
router.get('/admin/products/:page?', restrict, async (req, res, next) => {
let pageNum = 1;
if(req.params.page){
pageNum = req.params.page;
}
// Get our paginated data
const products = await common.paginateData(false, req, pageNum, 'products', {}, { productAddedDate: -1 });
res.render('products', {
title: 'Cart',
results: topResults,
results: products.data,
totalItemCount: products.totalItems,
pageNum,
paginateUrl: 'admin/products',
resultType: 'top',
session: req.session,
admin: true,

View File

@ -233,7 +233,7 @@
{{/ifCond}}
{{/unless}}
<div class="container-fluid content-body h-100" id="container">
<div class="row h-100">
<div class="row">
{{{body}}}
</div>
</div>

View File

@ -62,4 +62,13 @@
{{/if}}
</ul>
</div>
</main>
<div class="col-md-12 mt-5">
<div id="pager" class="d-flex justify-content-center"></div>
</div>
</main>
{{!-- Pager settings --}}
<input type="hidden" id="itemsPerPage" value="10" >
<input type="hidden" id="pageNum" value="{{pageNum}}">
<input type="hidden" id="totalItemCount" value="{{totalItemCount}}">
<input type="hidden" id="paginateUrl" value="{{paginateUrl}}">
<input type="hidden" id="searchTerm" value="{{searchTerm}}">

View File

@ -32,4 +32,13 @@
{{/each}}
</ul>
</div>
</div>
<div class="col-md-12 mt-5">
<div id="pager" class="d-flex justify-content-center"></div>
</div>
</div>
{{!-- Pager settings --}}
<input type="hidden" id="itemsPerPage" value="10" >
<input type="hidden" id="pageNum" value="{{pageNum}}">
<input type="hidden" id="totalItemCount" value="{{totalItemCount}}">
<input type="hidden" id="paginateUrl" value="{{paginateUrl}}">
<input type="hidden" id="searchTerm" value="{{searchTerm}}">