feat(subscriptions/detail): introduce infinite scrolling

This will replace the "Load more" button with infinite scrolling.
adfinis · Feb 10, 2022 · ac8661c · ac8661c
1 parent d4131af
commit ac8661c
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 29 deletions.
diff --git a/frontend/app/application/template.hbs b/frontend/app/application/template.hbs
@@ -68,7 +68,7 @@
   </div>
 </header>
 
-<main class="main">
+<main class="main" id="scroll-container">
   {{outlet}}
 </main>
 

diff --git a/frontend/app/modifiers/in-viewport.js b/frontend/app/modifiers/in-viewport.js
@@ -0,0 +1,14 @@
+import { modifier } from "ember-modifier";
+
+export default modifier(function inViewport(
+  element,
+  _,
+  { onEnter = () => {}, onExit = () => {}, root = "#scroll-container" }
+) {
+  const intersectionObserver = new IntersectionObserver(
+    ([{ isIntersecting }]) => (isIntersecting ? onEnter() : onExit()),
+    { root: root instanceof Element ? root : document.getElementById(root) }
+  );
+  intersectionObserver.observe(element);
+  return () => intersectionObserver.disconnect();
+});
diff --git a/frontend/app/subscriptions/detail/index/controller.js b/frontend/app/subscriptions/detail/index/controller.js
@@ -2,7 +2,7 @@ import Controller from "@ember/controller";
 import { get } from "@ember/object";
 import { inject as service } from "@ember/service";
 import { tracked } from "@glimmer/tracking";
-import { task } from "ember-concurrency";
+import { dropTask } from "ember-concurrency";
 
 export default class SubscriptionsDetailIndexController extends Controller {
   @service account;
@@ -13,7 +13,7 @@ export default class SubscriptionsDetailIndexController extends Controller {
   @tracked reports;
   @tracked reportsNext;
 
-  @task *fetchNextReports() {
+  @dropTask *fetchNextReports() {
     try {
       this.reportsPage++;
       const reports = yield this.timed.getProjectReports(

diff --git a/frontend/app/subscriptions/detail/index/template.hbs b/frontend/app/subscriptions/detail/index/template.hbs
@@ -22,16 +22,21 @@
 
               {{#if this.reportsNext}}
                 <tr class="table__fetch-more">
-                  <td colspan="4">
-                    <button
-                      {{on "click" (perform this.fetchNextReports)}}
-                      type="button"
-                      class="button"
-                      disabled={{this.fetchNextReports.isRunning}}
+                  {{#if this.fetchNextReports.isRunning}}
+                    <td
+                      colspan="4"
+                      class="uk-text-center"
                     >
-                      {{~t "page.subscriptions.detail.reports.more"}}
-                    </button>
-                  </td>
+                      {{~t "page.subscriptions.detail.reports.loading"}}
+                    </td>
+                  {{else}}
+                    <td
+                      colspan="4"
+                      class="uk-text-center"
+                      {{in-viewport onEnter=(perform this.fetchNextReports)}}
+                    >
+                    </td>
+                  {{/if}}
                 </tr>
               {{/if}}
             </tbody>

diff --git a/frontend/app/subscriptions/detail/orders/controller.js b/frontend/app/subscriptions/detail/orders/controller.js
@@ -2,7 +2,7 @@ import Controller from "@ember/controller";
 import { get } from "@ember/object";
 import { inject as service } from "@ember/service";
 import { tracked } from "@glimmer/tracking";
-import { task } from "ember-concurrency";
+import { dropTask } from "ember-concurrency";
 
 export default class SubscriptionsDetailOrdersController extends Controller {
   @service account;
@@ -15,7 +15,7 @@ export default class SubscriptionsDetailOrdersController extends Controller {
   @tracked reports;
   @tracked reportsNext;
 
-  @task *fetchNextOrders() {
+  @dropTask *fetchNextOrders() {
     try {
       this.ordersPage++;
       const orders = yield this.timed.getProjectOrders(

diff --git a/frontend/app/subscriptions/detail/orders/template.hbs b/frontend/app/subscriptions/detail/orders/template.hbs
@@ -22,16 +22,21 @@
 
               {{#if this.ordersNext}}
                 <tr class="table__fetch-more">
-                  <td colspan="3">
-                    <button
-                      {{on "click" (perform this.fetchNextOrders)}}
-                      type="button"
-                      class="button"
-                      disabled={{this.fetchNextOrders.isRunning}}
+                  {{#if this.fetchNextOrders.isRunning}}
+                    <td
+                      colspan="4"
+                      class="uk-text-center"
                     >
-                      {{~t "page.subscriptions.detail.orders.more"}}
-                    </button>
-                  </td>
+                      {{~t "page.subscriptions.detail.orders.loading"}}
+                    </td>
+                  {{else}}
+                    <td
+                      colspan="4"
+                      class="uk-text-center"
+                      {{in-viewport onEnter=(perform this.fetchNextOrders)}}
+                    >
+                    </td>
+                  {{/if}}
                 </tr>
               {{/if}}
             </tbody>

diff --git a/frontend/package.json b/frontend/package.json
@@ -76,6 +76,7 @@
     "ember-load-initializers": "^2.1.2",
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-model-namespaces": "adfinis-sygroup/ember-model-namespaces",
+    "ember-modifier": "^3.1.0",
     "ember-moment": "9.0.1",
     "ember-notify": "^6.0.0",
     "ember-page-title": "^6.2.2",

diff --git a/frontend/translations/de.yaml b/frontend/translations/de.yaml
@@ -101,7 +101,7 @@ page:
       orders:
         title: Bestellungen
         empty: Keine Bestellungen verbucht.
-        more: Mehr laden
+        loading: Laden...
 
         table:
           date: Datum
@@ -111,7 +111,7 @@ page:
       reports:
         title: Aufwände
         empty: Keine verbuchten Aufwände.
-        more: Mehr laden
+        loading: Laden...
 
         table:
           date: Datum

diff --git a/frontend/translations/en.yaml b/frontend/translations/en.yaml
@@ -101,7 +101,7 @@ page:
       orders:
         title: Past charges
         empty: No orders for this project.
-        more: Fetch more
+        loading: Loading...
 
         table:
           date: Date
@@ -111,7 +111,7 @@ page:
       reports:
         title: Expense
         empty: No reports for this project.
-        more: Fetch more
+        loading: Loading...
 
         table:
           date: Date

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -7230,7 +7230,7 @@ ember-cli-typescript@^3.0.0, ember-cli-typescript@^3.1.3, ember-cli-typescript@^
     stagehand "^1.0.0"
     walk-sync "^2.0.0"
 
-ember-cli-typescript@^4.0.0, ember-cli-typescript@^4.1.0:
+ember-cli-typescript@^4.0.0, ember-cli-typescript@^4.1.0, ember-cli-typescript@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/ember-cli-typescript/-/ember-cli-typescript-4.2.1.tgz#54d08fc90318cc986f3ea562f93ce58a6cc4c24d"
   integrity sha512-0iKTZ+/wH6UB/VTWKvGuXlmwiE8HSIGcxHamwNhEC5x1mN3z8RfvsFZdQWYUzIWFN2Tek0gmepGRPTwWdBYl/A==
@@ -7403,7 +7403,7 @@ ember-compatibility-helpers@^1.1.2, ember-compatibility-helpers@^1.2.0:
     ember-cli-version-checker "^2.1.1"
     semver "^5.4.1"
 
-ember-compatibility-helpers@^1.2.1, ember-compatibility-helpers@^1.2.4:
+ember-compatibility-helpers@^1.2.1, ember-compatibility-helpers@^1.2.4, ember-compatibility-helpers@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/ember-compatibility-helpers/-/ember-compatibility-helpers-1.2.5.tgz#b8363b1d5b8725afa9a4fe2b2986ac28626c6f23"
   integrity sha512-7cddkQQp8Rs2Mqrj0xqZ0uO7eC9tBCKyZNcP2iE1RxQqOGPv8fiPkj1TUeidUB/Qe80lstoVXWMEuqqhW7Yy9A==
@@ -7656,6 +7656,17 @@ ember-modifier@^2.1.0:
     ember-destroyable-polyfill "^2.0.2"
     ember-modifier-manager-polyfill "^1.2.0"
 
+ember-modifier@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/ember-modifier/-/ember-modifier-3.1.0.tgz#ba5b0941302accd787ed3dcfc8d20400b77ffc41"
+  integrity sha512-G5Lj9jVFsD2sVJcRNQfaGKG1p81wT4LGfClBhCuB4TgwP1NGJKdqI+Q8BW2MptONxQt/71UjjUH0YK7Gm9eahg==
+  dependencies:
+    ember-cli-babel "^7.26.6"
+    ember-cli-normalize-entity-name "^1.0.0"
+    ember-cli-string-utils "^1.1.0"
+    ember-cli-typescript "^4.2.1"
+    ember-compatibility-helpers "^1.2.5"
+
 [email protected]:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/ember-moment/-/ember-moment-9.0.1.tgz#fcf06cb8ef07c8d0108820c1639778590d613b38"