feat(subscriptions): separate reports and orders view

This will introduce two tabs for Reports and Orders. Content remains the same.
adfinis · Feb 10, 2022 · 899ace4 · 899ace4
1 parent b7cf703
commit 899ace4
Show file tree

Hide file tree

Showing 15 changed files with 281 additions and 149 deletions.
diff --git a/frontend/app/components/sub-nav/item/component.js b/frontend/app/components/sub-nav/item/component.js
@@ -0,0 +1,10 @@
+import { inject as service } from "@ember/service";
+import Component from "@glimmer/component";
+
+export default class SubNavItemComponent extends Component {
+  @service router;
+
+  get isActive() {
+    return this.router.currentRoute.name.includes(this.args.route);
+  }
+}
diff --git a/frontend/app/components/sub-nav/item/template.hbs b/frontend/app/components/sub-nav/item/template.hbs
@@ -0,0 +1,5 @@
+<li class="uk-child-width-1-1 {{if this.isActive "uk-active"}}" ...attributes>
+  <LinkTo @route={{@route}}>
+    {{yield}}
+  </LinkTo>
+</li>
diff --git a/frontend/app/components/sub-nav/template.hbs b/frontend/app/components/sub-nav/template.hbs
@@ -0,0 +1,3 @@
+<ul class="uk-subnav uk-subnav-divider uk-subnav-pill uk-width-1 uk-child-width-1-{{@children}} uk-text-center uk-padding-small uk-padding-remove-horizontal">
+  {{yield}}
+</ul>
diff --git a/frontend/app/router.js b/frontend/app/router.js
@@ -20,7 +20,9 @@ Router.map(function () {
       this.route("own");
       this.route("list");
       this.route("confirm");
-      this.route("detail", { path: "/detail/:project_id" });
+      this.route("detail", { path: "/detail/:project_id" }, function () {
+        this.route("orders");
+      });
       this.route("reload", { path: "/reload/:project_id" });
     });
   });

diff --git a/frontend/app/services/timed.js b/frontend/app/services/timed.js
@@ -46,7 +46,7 @@ export default class TimedService extends Service {
       ordering: "-date",
       page: {
         number: page,
-        size: 5,
+        size: 10,
       },
     });
   }
@@ -57,7 +57,7 @@ export default class TimedService extends Service {
       project,
       page: {
         number: page,
-        size: 5,
+        size: 10,
       },
     });
   }

diff --git a/frontend/app/subscriptions/detail/controller.js b/frontend/app/subscriptions/detail/controller.js
@@ -1,20 +1,14 @@
 import Controller from "@ember/controller";
-import { get } from "@ember/object";
 import { inject as service } from "@ember/service";
 import { tracked } from "@glimmer/tracking";
 import ENV from "customer-center/config/environment";
-import { task } from "ember-concurrency";
 
 export default class SubscriptionsDetailController extends Controller {
   @service account;
   @service intl;
   @service timed;
 
   @tracked project;
-  @tracked orders;
-  @tracked ordersNext;
-  @tracked reports;
-  @tracked reportsNext;
 
   get showReloadButton() {
     return this.account.isInGroups("one", [
@@ -27,47 +21,7 @@ export default class SubscriptionsDetailController extends Controller {
     return [{ label: this.project.name }];
   }
 
-  @task *fetchNextReports() {
-    try {
-      this.reportsPage++;
-      const reports = yield this.timed.getProjectReports(
-        this.project.id,
-        this.reportsPage
-      );
-      this.reports.pushObjects(reports.toArray());
-
-      this.reportsNext = Boolean(get(reports, "links.next"));
-    } catch (error) {
-      console.error(error);
-      this.reportsNext = false;
-    }
-  }
-
-  @task *fetchNextOrders() {
-    try {
-      this.ordersPage++;
-      const orders = yield this.timed.getProjectOrders(
-        this.project.id,
-        this.ordersPage
-      );
-      this.orders.pushObjects(orders.toArray());
-
-      this.ordersNext = Boolean(get(orders, "links.next"));
-    } catch (error) {
-      console.error(error);
-      this.ordersNext = false;
-    }
-  }
-
   setup(model, transition) {
     this.project = model.project;
-
-    this.reports = model.reports.toArray();
-    this.reportsPage = 1;
-    this.reportsNext = Boolean(get(model, "reports.links.next"));
-
-    this.orders = model.orders.toArray();
-    this.ordersPage = 1;
-    this.ordersNext = Boolean(get(model, "orders.links.next"));
   }
 }
diff --git a/frontend/app/subscriptions/detail/index/controller.js b/frontend/app/subscriptions/detail/index/controller.js
@@ -0,0 +1,39 @@
+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";
+
+export default class SubscriptionsDetailIndexController extends Controller {
+  @service account;
+  @service intl;
+  @service timed;
+
+  @tracked project;
+  @tracked reports;
+  @tracked reportsNext;
+
+  @task *fetchNextReports() {
+    try {
+      this.reportsPage++;
+      const reports = yield this.timed.getProjectReports(
+        this.project.id,
+        this.reportsPage
+      );
+      this.reports.pushObjects(reports.toArray());
+
+      this.reportsNext = Boolean(get(reports, "links.next"));
+    } catch (error) {
+      console.error(error);
+      this.reportsNext = false;
+    }
+  }
+
+  setup(model, transition) {
+    this.project = model.project;
+
+    this.reports = model.reports.toArray();
+    this.reportsPage = 1;
+    this.reportsNext = Boolean(get(model, "reports.links.next"));
+  }
+}
diff --git a/frontend/app/subscriptions/detail/index/route.js b/frontend/app/subscriptions/detail/index/route.js
@@ -0,0 +1,16 @@
+import Route from "@ember/routing/route";
+import { inject as service } from "@ember/service";
+
+export default class SubscriptionsDetailIndexRoute extends Route {
+  @service timed;
+
+  model() {
+    return this.modelFor("subscriptions.detail");
+  }
+
+  setupController(controller, model) {
+    super.setupController(...arguments);
+
+    controller.setup(model);
+  }
+}
diff --git a/frontend/app/subscriptions/detail/index/template.hbs b/frontend/app/subscriptions/detail/index/template.hbs
@@ -0,0 +1,45 @@
+<section class="section">
+  <div class="section__inner">
+    <div>
+      {{#if this.reports.length}}
+        <div class="table">
+          <table>
+            <thead>
+              <th>{{t "page.subscriptions.detail.reports.table.date"}}</th>
+              <th>{{t "page.subscriptions.detail.reports.table.duration"}}</th>
+              <th>{{t "page.subscriptions.detail.reports.table.user"}}</th>
+              <th>{{t "page.subscriptions.detail.reports.table.comment"}}</th>
+            </thead>
+            <tbody>
+              {{#each this.reports as |report|}}
+                <tr>
+                  <td>{{moment-format report.date "DD.MM.YYYY"}}</td>
+                  <td>{{format-duration report.duration}}</td>
+                  <td>{{report.user.fullName}}</td>
+                  <td>{{report.comment}}</td>
+                </tr>
+              {{/each}}
+
+              {{#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}}
+                    >
+                      {{~t "page.subscriptions.detail.reports.more"}}
+                    </button>
+                  </td>
+                </tr>
+              {{/if}}
+            </tbody>
+          </table>
+        </div>
+      {{else}}
+        <p>{{t "page.subscriptions.detail.reports.empty"}}</p>
+      {{/if}}
+    </div>
+  </div>
+</section>
diff --git a/frontend/app/subscriptions/detail/orders/controller.js b/frontend/app/subscriptions/detail/orders/controller.js
@@ -0,0 +1,41 @@
+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";
+
+export default class SubscriptionsDetailOrdersController extends Controller {
+  @service account;
+  @service intl;
+  @service timed;
+
+  @tracked project;
+  @tracked orders;
+  @tracked ordersNext;
+  @tracked reports;
+  @tracked reportsNext;
+
+  @task *fetchNextOrders() {
+    try {
+      this.ordersPage++;
+      const orders = yield this.timed.getProjectOrders(
+        this.project.id,
+        this.ordersPage
+      );
+      this.orders.pushObjects(orders.toArray());
+
+      this.ordersNext = Boolean(get(orders, "links.next"));
+    } catch (error) {
+      console.error(error);
+      this.ordersNext = false;
+    }
+  }
+
+  setup(model, transition) {
+    this.project = model.project;
+
+    this.orders = model.orders.toArray();
+    this.ordersPage = 1;
+    this.ordersNext = Boolean(get(model, "orders.links.next"));
+  }
+}
diff --git a/frontend/app/subscriptions/detail/orders/route.js b/frontend/app/subscriptions/detail/orders/route.js
@@ -0,0 +1,16 @@
+import Route from "@ember/routing/route";
+import { inject as service } from "@ember/service";
+
+export default class SubscriptionsDetailOrdersRoute extends Route {
+  @service timed;
+
+  model() {
+    return this.modelFor("subscriptions.detail");
+  }
+
+  setupController(controller, model) {
+    super.setupController(...arguments);
+
+    controller.setup(model);
+  }
+}
diff --git a/frontend/app/subscriptions/detail/orders/template.hbs b/frontend/app/subscriptions/detail/orders/template.hbs
@@ -0,0 +1,45 @@
+<section class="section">
+  <div class="section__inner">
+    <div>
+      {{#if this.orders.length}}
+        <div class="table">
+          <table>
+            <thead>
+              <th>{{t "page.subscriptions.detail.orders.table.date"}}</th>
+              <th>{{t "page.subscriptions.detail.orders.table.duration"}}</th>
+              <th>{{t "page.subscriptions.detail.orders.table.acknowledged"}}</th>
+            </thead>
+            <tbody>
+              {{#each this.orders as |order|}}
+                <tr>
+                  <td>{{moment-format order.ordered "DD.MM.YYYY"}}</td>
+                  <td>{{format-duration order.duration}}</td>
+                  <td class="order-list--{{if order.acknowledged "acknowledged" "pending"}}">
+                    <span uk-icon={{if order.acknowledged "check" "clock"}}></span>
+                  </td>
+                </tr>
+              {{/each}}
+
+              {{#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}}
+                    >
+                      {{~t "page.subscriptions.detail.orders.more"}}
+                    </button>
+                  </td>
+                </tr>
+              {{/if}}
+            </tbody>
+          </table>
+        </div>
+      {{else}}
+        <p>{{t "page.subscriptions.detail.orders.empty"}}</p>
+      {{/if}}
+    </div>
+  </div>
+</section>