Skip to content

Commit

Permalink
Add pager & filters
Browse files Browse the repository at this point in the history
  • Loading branch information
@MPParsley
MPParsley committed May 28, 2024
1 parent 1469c68 commit 6bf5663
Show file tree
Hide file tree
Showing 2 changed files with 144 additions and 25 deletions.
4 changes: 2 additions & 2 deletions webcomponents/besluiten-lijst/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ <h1>Besluiten lijst</h1>
</besluiten-lijst>
<besluiten-lijst
sparql-endpoint="http://srvprobepr01:8890/sparql"
aantal="100"
bestuurseenheden="http://data.lblod.info/id/bestuurseenheden/763adc09114dd8d54a1c8bfabeaec5e5ce543d858c3dff057a1c39f9103249a0"
aantal="20"
pager="true"
taxonomy="http://stad.gent/id/concepts/decision_making_themes"
concepts="http://stad.gent/id/concepts/decision_making_themes/concept_36"
>
Expand Down
165 changes: 142 additions & 23 deletions webcomponents/besluiten-lijst/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,17 @@ class BesluitenLijst extends HTMLElement {

constructor() {
super();
this.amount = parseInt(this.getAttribute('aantal')) || 10;
this.pager = this.getAttribute('pager') !== null;
this.offset = 0;
this.maxCount = 1000;
}

connectedCallback() {
this.getBesluiten();
}

createDetail(besluit) {
console.log(besluit);
return `
<besluiten-detail
titel="${besluit.title.value}"
Expand All @@ -22,40 +25,73 @@ class BesluitenLijst extends HTMLElement {
}

renderResults(besluiten) {
const template = this.getTemplate();
const shadowRoot = this.attachShadow({mode: 'open'}).appendChild(
template.cloneNode(true)
);
if (!this.shadowRoot) { // Only attach a shadow root if one does not exist
const template = this.getTemplate();
this.attachShadow({mode: 'open'}).appendChild(
template.cloneNode(true)
);
}

let list = "";
besluiten.forEach(besluit => {
list += this.createDetail(besluit)
});

this.shadowRoot.querySelectorAll(".js-resolutions-items")[0].innerHTML = list;

if (this.pager) {
this.shadowRoot.querySelectorAll(".pager")[0].innerHTML = this.getPager();

this.nextButton = this.shadowRoot.querySelector('#js-pager-next');
if (this.nextButton) {
this.nextButton.addEventListener('click', (event) => {
event.preventDefault();
this.pageUp();
});
}
this.previousButton = this.shadowRoot.querySelector('#js-pager-previous');
if (this.previousButton) {
this.previousButton.addEventListener('click', (event) => {
event.preventDefault();
this.pageDown();
});
}
}
}

async getBesluiten() {
const endpoint = this.getAttribute('sparql-endpoint') + "?query=" + encodeURIComponent(this.constructQuery());
async executeQuery(query) {
const endpoint = this.getAttribute('sparql-endpoint') + "?query=" + encodeURIComponent(query);
const response = await fetch(endpoint,
{
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Accept': 'application/sparql-results+json'
}
});
{
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Accept': 'application/sparql-results+json'
}
});

if (response.ok) {
const json = await response.json();
//console.log(JSON.stringify(json.results.bindings));
this.renderResults(json.results.bindings);
return json;
} else {
console.log("Error when getting data.");
}
}

constructQuery() {
const amount = this.getAttribute('aantal');
async getBesluiten() {
let query = this.constructQuery();
if (this.pager) {
let count = await this.executeQuery(this.countQuery);
this.maxCount = count.results.bindings[0]['callret-0'].value;
console.log(this.maxCount);
}

let json = await this.executeQuery(this.selectQuery);
if (json) {
this.renderResults(json.results.bindings);
}
}

constructQuery() {
const statussen = this.getAttribute('statussen');
const bestuurseenheden = this.getAttribute('bestuurseenheden');
const bestuursorganen = this.getAttribute('bestuursorganen');
Expand Down Expand Up @@ -94,15 +130,17 @@ class BesluitenLijst extends HTMLElement {
VALUES ?thema { <${taxonomy}> }
VALUES ?concept { ` + conceptsArray.map(concept => `<${concept.trim()}>`).join(" ") + ` }
FILTER (!CONTAINS(STR(?url), "/notulen"))
FILTER (!CONTAINS(STR(?orgaan), "personeel"))
FILTER (!CONTAINS(STR(?orgaan), "gemeenteraad"))
`;
}

// @todo: remove OPTIONAL {} when eenheden are available.
// @TODO: remove OPTIONAL {} when eenheden are available.
queryBestuurseenheid = `OPTIONAL {${queryBestuurseenheid}}`;

// TODO: remove with query below after Bestuursorgaan has been moved to Zitting iso BehandelingVanAgendapunt
// @TODO: remove with query below after Bestuursorgaan has been moved to Zitting iso BehandelingVanAgendapunt
const endpoint = this.getAttribute('sparql-endpoint')
if (endpoint.includes("probe")) {
if (endpoint.includes("probesxcw")) {
queryBestuursorgaan = `
prov:wasGeneratedBy ?behandelingVanAgendapunt .
?behandelingVanAgendapunt dct:subject ?agendapunt .
Expand All @@ -112,6 +150,32 @@ class BesluitenLijst extends HTMLElement {
`;
}

let orderbyClause = 'ORDER BY DESC(?zitting_datum)';
let limitClause = `LIMIT ${this.amount}`;
let offsetClause = `OFFSET ${this.offset}`;

this.selectQuery = this.getQuery(
'DISTINCT ?besluit ?title ?agendapunt ?zitting ?zitting_datum ?orgaan ?url ?status',
queryBestuursorgaan,
queryThema,
filterparams,
queryBestuurseenheid,
orderbyClause,
limitClause,
offsetClause
);

this.countQuery = this.getQuery('COUNT(DISTINCT(?besluit))',
queryBestuursorgaan,
queryThema,
filterparams,
queryBestuurseenheid
);

return this.selectQuery;
}

getQuery(fields, queryBestuursorgaan, queryThema, filterparams, queryBestuurseenheid, orderbyClause='', limitClause='', offsetClause='') {
return `
PREFIX dct: <http://purl.org/dc/terms/>
PREFIX prov: <http://www.w3.org/ns/prov#>
Expand All @@ -122,21 +186,29 @@ class BesluitenLijst extends HTMLElement {
PREFIX ext: <http://mu.semte.ch/vocabularies/ext/>
SELECT
DISTINCT ?besluit ?title ?agendapunt ?zitting ?zitting_datum ?orgaan ?url ?status
${fields}
FROM <http://mu.semte.ch/graphs/public>
FROM <http://mu.semte.ch/application/probe/user-annotations>
WHERE {
?besluit a besluit:Besluit ;
eli:title_short ?title ;
prov:wasDerivedFrom ?url ;
prov:wasGeneratedBy/besluit:heeftStemming/besluit:gevolg ?status ;
${queryBestuursorgaan}
OPTIONAL {
?besluit prov:wasGeneratedBy/besluit:heeftStemming/besluit:gevolg ?statusLabel .
}
?bestuursorgaanURI skos:prefLabel ?orgaanLabel .
${queryThema}
${filterparams}
BIND(CONCAT(UCASE(SUBSTR(?orgaanLabel, 1, 1)), SUBSTR(?orgaanLabel, 2)) AS ?orgaan)
${queryBestuurseenheid}
} ORDER BY DESC(?zitting_datum) LIMIT ${amount}
BIND(COALESCE(?statusLabel, "") AS ?status)
}
${orderbyClause}
${limitClause}
${offsetClause}
`;
}

Expand All @@ -155,6 +227,8 @@ class BesluitenLijst extends HTMLElement {
<div class="resolutions-list__items js-resolutions-items"></div>
<div class="pager"></div>
<slot name="raadpleegomgeving"><a href="https://ebesluitvorming.gent.be/" class="button button-primary">Alle besluiten van Stad Gent</a></slot>
</div>
</section>
Expand All @@ -168,6 +242,51 @@ class BesluitenLijst extends HTMLElement {

return document.getElementById("template-besluiten-lijst").content;
}

pageUp() {
this.offset += this.amount;
console.log(this.offset);
this.getBesluiten()
}

pageDown() {
if (this.offset >= this.amount) {
this.offset -= this.amount;
console.log(this.offset);
this.getBesluiten()
}
}

getPager() {
let previous = '';
let next = '';

if (this.offset >= this.amount) {
previous = `
<li class="previous" id="js-pager-previous"><a href="#" class="standalone-link back">
Vorige
<span class="visually-hidden">pagina</span></a></li>
`;
}

if (this.offset < this.maxCount - this.amount) {
next = `
<li class="next" id="js-pager-next"><a href="#" class="standalone-link">
Volgende
<span class="visually-hidden">pagina</span></a></li>
`;
}

return `
<nav class="pager" aria-labelledby="pagination">
<h2 id="pagination" class="visually-hidden">Paginatie</h2>
<ul class="pager__items">
${previous}
${next}
</ul>
</nav>
`;
}
}

customElements.define('besluiten-lijst', BesluitenLijst);

0 comments on commit 6bf5663

Please sign in to comment.