Skip to content
Permalink
Browse files

feat(navigation): add previous / next pagination

  • Loading branch information...
anehx committed May 29, 2019
1 parent fe61ca8 commit 6aea609f95d120dbf66fede9e260a24fc98bcc58
@@ -0,0 +1,115 @@
import Component from "@ember/component";
import layout from "../templates/components/cf-pagination";
import { computed } from "@ember/object";
import { filterBy } from "@ember/object/computed";

const buildParams = (section, subSections) => {
if (!section) {
return [];
}

return subSections.length
? subSections.map(s => ({
section: section.question.slug,
subSection: s.question.slug
}))
: [{ section: section.question.slug, subSection: undefined }];
};

export default Component.extend({
layout,

_sections: filterBy(
"rootDocument.visibleFields",
"visibleInNavigation",
true
),

_currentSection: computed("_sections.[]", "section", function() {
return this._sections.find(s => s.question.slug === this.section);
}),

_currentSubSection: computed(
"_currentSubSections.[]",
"subSection",
function() {
return this._currentSubSections.find(
s => s.question.slug === this.subSection
);
}
),

_currentSubSections: filterBy(
"_currentSection.childDocument.visibleFields",
"visibleInNavigation",
true
),

_currentSectionIndex: computed("_sections.[]", "section", function() {
return this._sections.indexOf(this._currentSection);
}),

_previousSection: computed("_currentSectionIndex", function() {
return this._currentSectionIndex > 0
? this._sections[this._currentSectionIndex - 1]
: null;
}),

_nextSection: computed(
"_currentSectionIndex",
"_sections.length",
function() {
return this._currentSectionIndex < this._sections.length
? this._sections[this._currentSectionIndex + 1]
: null;
}
),

_previousSubSections: filterBy(
"_previousSection.childDocument.visibleFields",
"visibleInNavigation",
true
),

_nextSubSections: filterBy(
"_nextSection.childDocument.visibleFields",
"visibleInNavigation",
true
),

adjacentSections: computed(
"_previousSubSections.[]",
"_currentSubSections.[]",
"_nextSubSections.[]",
function() {
return [
...buildParams(this._previousSection, this._previousSubSections),
...buildParams(this._currentSection, this._currentSubSections),
...buildParams(this._nextSection, this._nextSubSections)
];
}
),

sectionIndex: computed(
"adjacentSections.[]",
"section",
"subSection",
function() {
return this.adjacentSections.findIndex(
s => s.section === this.section && s.subSection === this.subSection
);
}
),

previousSection: computed("adjacentSections.[]", "sectionIndex", function() {
return this.sectionIndex > 0
? this.adjacentSections[this.sectionIndex - 1]
: null;
}),

nextSection: computed("adjacentSections.[]", "sectionIndex", function() {
return this.sectionIndex < this.adjacentSections.length
? this.adjacentSections[this.sectionIndex + 1]
: null;
})
});
@@ -5,6 +5,7 @@
rootDocument=rootDocument
displayedDocument=displayedDocument
navigation=(component "cf-navigation" rootDocument=rootDocument section=section subSection=subSection)
pagination=(component "cf-pagination" rootDocument=rootDocument section=section subSection=subSection)
form=(component "cf-form-wrapper" document=displayedDocument context=context disabled=disabled)
) as |content|}}
{{#if hasBlock}}
@@ -14,6 +15,8 @@
<div class="uk-width-1-1 uk-width-1-3@m">{{content.navigation}}</div>
<div class="uk-width-1-1 uk-width-2-3@m">
{{content.form}}
<hr>
{{content.pagination}}
</div>
</div>
{{else}}
@@ -0,0 +1,16 @@
<div uk-grid>
<div class="uk-text-left uk-width-1-2">
{{#if previousSection}}
{{#link-to (query-params section=previousSection.section subSection=previousSection.subSection) class="uk-button uk-button-default"}}
{{t "caluma.form.navigation.previous"}}
{{/link-to}}
{{/if}}
</div>
<div class="uk-text-right uk-width-1-2">
{{#if nextSection}}
{{#link-to (query-params section=nextSection.section subSection=nextSection.subSection) class="uk-button uk-button-default"}}
{{t "caluma.form.navigation.next"}}
{{/link-to}}
{{/if}}
</div>
</div>
@@ -0,0 +1 @@
export { default } from "ember-caluma/components/cf-pagination";
@@ -0,0 +1,26 @@
import { module, skip } from "qunit";
import { setupRenderingTest } from "ember-qunit";
import { render } from "@ember/test-helpers";
import hbs from "htmlbars-inline-precompile";

module("Integration | Component | cf-pagination", function(hooks) {
setupRenderingTest(hooks);

skip("it renders", async function(assert) {
// Set any properties with this.set('myProperty', 'value');
// Handle any actions with this.set('myAction', function(val) { ... });

await render(hbs`<CfPagination />`);

assert.equal(this.element.textContent.trim(), "");

// Template block usage:
await render(hbs`
<CfPagination>
template block text
</CfPagination>
`);

assert.equal(this.element.textContent.trim(), "template block text");
});
});
@@ -11,6 +11,10 @@ caluma:
selectFile: "Klicken um Datei hochzuladen"
changeFile: "Klicken um andere Datei hochzuladen"

navigation:
next: "Weiter"
previous: "Zurück"

notification:
table:
add:
@@ -11,6 +11,10 @@ caluma:
selectFile: "Click to upload a file"
changeFile: "Click to upload a different file"

navigation:
next: "Next"
previous: "Next"

notification:
table:
add:

0 comments on commit 6aea609

Please sign in to comment.
You can’t perform that action at this time.