feat(navigation): add previous / next pagination

addon/components/cf-pagination.js

@@ -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;
+  })
+});

addon/templates/components/cf-content.hbs

@@ -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}}

addon/templates/components/cf-pagination.hbs

@@ -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>

app/components/cf-pagination.js

@@ -0,0 +1 @@
+export { default } from "ember-caluma/components/cf-pagination";

tests/integration/components/cf-pagination-test.js

@@ -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");
+  });
+});

translations/de-de.yaml

@@ -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:

translations/en-us.yaml

@@ -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: