Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add working pagination to proj #66

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add working pagination to proj #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions app/.meteor/packages
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,4 @@ mikowals:batch-insert
iron:router
check
aldeed:collection2-core
alethes:pages
5 changes: 5 additions & 0 deletions app/.meteor/versions
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
aldeed:collection2-core@2.1.2
alethes:pages@1.8.6
allow-deny@1.1.0
autoupdate@1.4.0
babel-compiler@7.0.0
Expand All @@ -13,6 +14,7 @@ caching-compiler@1.1.9
caching-html-compiler@1.1.2
callback-hook@1.1.0
check@1.3.0
coffeescript@1.0.17
ddp@1.4.0
ddp-client@2.3.1
ddp-common@1.4.0
Expand All @@ -26,6 +28,7 @@ ecmascript-runtime-client@0.6.0
ecmascript-runtime-server@0.5.0
ejson@1.1.0
es5-shim@4.7.0
fastclick@1.0.13
geojson-utils@1.0.10
hot-code-push@1.0.4
html-tools@1.0.11
Expand All @@ -47,6 +50,7 @@ livedata@1.0.18
logging@1.1.19
meteor@1.8.2
meteor-base@1.3.0
meteor-platform@1.2.6
mikowals:batch-insert@1.1.14
minifier-css@1.3.0
minifier-js@2.3.1
Expand All @@ -70,6 +74,7 @@ reload@1.2.0
retry@1.1.0
routepolicy@1.0.12
server-render@0.3.0
session@1.1.8
shell-server@0.3.1
shim-common@0.1.0
socket-stream-client@0.1.0
Expand Down
5 changes: 5 additions & 0 deletions app/client/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -387,3 +387,8 @@ section.articles {
section.articles ul li h3 {
font-weight: 600;
}
/* Pagination Nav */
.pagination {
justify-content: center;
margin: 10px !important;
}
170 changes: 33 additions & 137 deletions app/client/templates/sections/current-prosecutors.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,156 +5,52 @@
<h3>Filter by Role</h3>
<ul class="nav nav-pills btn-group" role="tablist">
<li class="nav-item">
<a data-target="#attorney-general" data-toggle="pill"><button class="btn btn-lg" type="button">Attorney General</button></a>
<a data-target="#attorney-general" data-toggle="pill"><button class="filterBtn btn btn-lg" value="Attorney General" type="button">Attorney General</button></a>
</li>
<li class="nav-item">
<a data-target="#us-attorney" data-toggle="pill"><button class="btn btn-lg" type="button">U.S. Attorney</button></a>
<a data-target="#us-attorney" data-toggle="pill"><button class="filterBtn btn btn-lg" value="US Attorney" type="button">U.S. Attorney</button></a>
</li>
<li class="nav-item">
<a data-target="#district-attorney" data-toggle="pill"><button class="btn btn-lg" type="button">District Attorney</button></a>
<a data-target="#district-attorney" data-toggle="pill"><button class="filterBtn btn btn-lg" value="District Attorney" type="button">District Attorney</button></a>
</li>
<li class="nav-item">
<a data-target="#municipal-attorney" data-toggle="pill"><button class="btn btn-lg" type="button">Municipal Attorney</button></a>
<a data-target="#municipal-attorney" data-toggle="pill"><button class="filterBtn btn btn-lg" value="Municipal Attorney" type="button">Municipal Attorney</button></a>
</li>
<li class="nav-item active">
<a data-target="#view-all" data-toggle="pill"><button class="btn btn-primary btn-lg" type="button">View All</button></a>
<a data-target="#view-all" data-toggle="pill"><button class="filterBtn btn btn-primary btn-lg" type="button">View All</button></a>
</li>
</ul>
</div>
</div>

<div class="container-fluid mx-auto text-center">
<div id="prosecutor-list" class="tab-content">
{{> paginatedAttorneys }}
</div>
</div>

<div class="container-fluid mx-auto text-center">
<div id="prosecutor-list" class="tab-content">
<div id="attorney-general" class="tab-pane">
{{#if findAttorneyType 'Attorney General'}}
<ul>
{{#each findAttorneyType 'Attorney General'}}
<li class="card col-sm-3 single-attorney">
<a href="{{pathFor 'attorneyView'}}">
<h3 class="card-header">{{name}}</h3>
<div class="thumbnail" style="background-image:url('{{headshot}}')"></div>
<div class="card-body">
<h4 class="card-title">{{role}}</h4>
<h5 class="card-subtitle">{{state}}</h5>
<div class="card-text">
{{#if county}}<p class="card-text">{{county}}</p>{{/if}}
{{#if district}}<p class="card-text">{{district}}</p>{{/if}}
</div>
</div>
<div class="card-footer text-muted">Appointed: <!--{{#if dateExists appointed}}<p class="card-text">{{unixToMMddYYYY appointed}}</p>{{/if}} --></div>
</a>
</li>
{{/each}}
</ul>
{{else}}
<p>No <strong>Attorney General</strong> data available.</p>
{{/if}}
</div>

<div id="us-attorney" class="tab-pane">
{{#if findAttorneyType 'US Attorney'}}
<ul>
{{#each findAttorneyType 'US Attorney'}}
<li class="card col-sm-3 single-attorney">
<a href="{{pathFor 'attorneyView'}}">
<h3 class="card-header">{{name}}</h3>
<div class="card-body">
<h4 class="card-title">{{role}}</h4>
<h5 class="card-subtitle">{{state}}</h5>
<div class="card-text">
{{#if county}}<p class="card-text">{{county}}</p>{{/if}}
{{#if district}}<p class="card-text">{{district}}</p>{{/if}}
</div>
</div>
<div class="card-footer text-muted">Appointed: <!--{{#if dateExists appointed}}<p class="card-text">{{unixToMMddYYYY appointed}}</p>{{/if}} --></div>
</a>
</li>
{{/each}}
</ul>
{{else}}
<p>No <strong>U.S. Attorney</strong> data available.</p>
{{/if}}
</div>

<div id="district-attorney" class="tab-pane">
{{#if findAttorneyType 'District Attorney'}}
<ul>
{{#each findAttorneyType 'District Attorney'}}
<li class="card col-sm-3 single-attorney">
<a href="{{pathFor 'attorneyView'}}">
<h3 class="card-header">{{name}}</h3>
<div class="thumbnail" style="background-image:url('{{headshot}}')"></div>
<div class="card-body">
<h4 class="card-title">{{role}}</h4>
<h5 class="card-subtitle">{{state}}</h5>
<div class="card-text">
{{#if county}}<p class="card-text">{{county}}</p>{{/if}}
{{#if district}}<p class="card-text">{{district}}</p>{{/if}}
</div>
</div>
<div class="card-footer text-muted">Appointed: <!--{{#if dateExists appointed}}<p class="card-text">{{unixToMMddYYYY appointed}}</p>{{/if}} --></div>
</a>
</li>
{{/each}}
</ul>
{{else}}
<p>No <strong>District Attorney</strong> data available.</p>
{{/if}}
</div>

<div id="municipal-attorney" class="tab-pane">
{{#if findAttorneyType 'Municipal Attorney'}}
<ul>
{{#each findAttorneyType 'Municipal Attorney'}}
<li class="card col-sm-3 single-attorney">
<a href="{{pathFor 'attorneyView'}}">
<h3 class="card-header">{{name}}</h3>
<div class="thumbnail" style="background-image:url('{{headshot}}')"></div>
<div class="card-body">
<h4 class="card-title">{{role}}</h4>
<h5 class="card-subtitle">{{state}}</h5>
<div class="card-text">
{{#if county}}<p class="card-text">{{county}}</p>{{/if}}
{{#if district}}<p class="card-text">{{district}}</p>{{/if}}
</div>
</div>
<div class="card-footer text-muted">Appointed: <!--{{#if dateExists appointed}}<p class="card-text">{{unixToMMddYYYY appointed}}</p>{{/if}} --></div>
</a>
</li>
{{/each}}
</ul>
{{else}}
<p>No <strong>Municipal, City, and/or County Attorney</strong> data available.</p>
{{/if}}
</div>

<div id="view-all" class="tab-pane active">
{{#if allAttorneys}}
<ul>
{{#each allAttorneys}}
<li class="card col-sm-3 single-attorney">
<a href="{{pathFor 'attorneyView'}}">
<h3 class="card-header">{{name}}</h3>
<div class="thumbnail" style="background-image:url('{{headshot}}')"></div>
<div class="card-body">
<h4 class="card-title">{{role}}</h4>
<h5 class="card-subtitle">{{state}}</h5>
<div class="card-text">
{{#if county}}<p class="card-text">{{county}}</p>{{/if}}
{{#if district}}<p class="card-text">{{district}}</p>{{/if}}
</div>
</div>
<div class="card-footer text-muted">Appointed: <!--{{#if dateExists appointed}}<p class="card-text">{{unixToMMddYYYY appointed}}</p>{{/if}} --></div>
</a>
</li>
{{/each}}
</ul>
{{else}}
<p>Error: no data available. Please try again later.</p>
{{/if}}
</div>
</template>

</div>
</div>
<!-- Format/Template for a single paginated item (Attorney cards) -->
<template name="prosecutorItem">
<li class="card col-sm-3 single-attorney">
<a href="{{pathFor 'attorneyView'}}">
<h3 class="card-header">{{name}}</h3>
<div class="thumbnail" style="background-image:url('{{headshot}}')"></div>
<div class="card-body">
<h4 class="card-title">{{role}}</h4>
<h5 class="card-subtitle">{{state}}</h5>
<div class="card-text">
{{#if county}}<p class="card-text">{{county}}</p>{{/if}}
{{#if district}}<p class="card-text">{{district}}</p>{{/if}}
</div>
</div>
<div class="card-footer text-muted">Appointed: <!--{{#if dateExists appointed}}<p class="card-text">{{unixToMMddYYYY appointed}}</p>{{/if}} --></div>
</a>
</li>
</template>

<template name="paginatedAttorneys">
{{> pages}}
{{> pagesNav}}
</template>
20 changes: 20 additions & 0 deletions app/imports/api/attorneys.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,3 +40,23 @@ let AttorneysSchema = new SimpleSchema({
});

Attorneys.attachSchema( AttorneysSchema );

// itemTemplate references the format for a single Attorney,
// templateName references the page that the paginated items
// are located in
// If settings are to be changed later on (like in the filters),
// have to say so in the availableSettings attribute.
// changing sort and perPage could be implemented in future?
export const AttorneyPages = new Meteor.Pagination(Attorneys, {
templateName: "paginatedAttorneys",
itemTemplate: "prosecutorItem",
perPage: 10,
sort: {
name: 1
},
availableSettings: {
filters: true,
sort: true,
perPage: true
}
});
63 changes: 43 additions & 20 deletions app/imports/startup/client/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,58 @@
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

import { Attorneys } from '../../api/attorneys.js';
import { Attorneys, AttorneyPages } from '../../api/attorneys.js';

import '/client/main.html';

/**
* HELPERS
*/

Template.registerHelper( 'findAttorneyType', (attorneyType) => {
if (attorneyType === "Attorney General") {
return Attorneys.find( {
"role" : "Attorney General"
} );
} else if (attorneyType === "US Attorney") {
return Attorneys.find( {
"role": "US Attorney"
} );
} else if (attorneyType === "District Attorney") {
return Attorneys.find( {
"role": "District Attorney"
} );
} else if(attorneyType === "Municipal Attorney") {
return Attorneys.find( {
"role": "Municipal Attorney"
} );
// have to manipulate the Pagination object (AttorneyPages), not
// the collection (Attorneys) itself for the collection to be
// properly filtered
Template.currentProsecutors.events({
'click .filterBtn': function(e) {
var attorneyType = e.target.value;
if (attorneyType === "Attorney General") {
return AttorneyPages.set({
filters: {
role: "Attorney General"
}
});
} else if (attorneyType === "US Attorney") {
return AttorneyPages.set({
filters: {
role: "US Attorney"
}
});
} else if (attorneyType === "District Attorney") {
return AttorneyPages.set({
filters: {
role: "District Attorney"
}
});
} else if(attorneyType === "Municipal Attorney") {
return AttorneyPages.set({
filters: {
role: "Municipal Attorney"
}
});
}
// "View All" selected
else {
return AttorneyPages.set({
filters: {}
})
}
}
});
})

Template.currentProsecutors.helpers({
// reference the items to be paginated (prosecutorItem)
// not entirely sure how this would affect the recentAttorneys
// functionality
Template.prosecutorItem.helpers({
allAttorneys() {
return Attorneys.find().fetch();
},
Expand Down