From 24c842a8dc03577537fb0d43a1ab9aa9ad715d7f Mon Sep 17 00:00:00 2001
From: Arthur Deierlein <arthur.deierlein@adfinis.com>
Date: Wed, 19 Feb 2025 14:25:25 +0100
Subject: [PATCH] fix(frontend): refactor report ability to be async

---
 frontend/app/abilities/report.js           |  62 ++++--
 frontend/app/analysis/index/controller.js  |  24 +--
 frontend/app/analysis/index/template.hbs   | 106 ++++-----
 frontend/app/components/can-edit.hbs       |   9 +
 frontend/app/components/report-row.hbs     | 240 +++++++++++----------
 frontend/app/components/report-row.js      |   9 +-
 frontend/app/helpers/conditional-action.js |  16 ++
 7 files changed, 261 insertions(+), 205 deletions(-)
 create mode 100644 frontend/app/components/can-edit.hbs
 create mode 100644 frontend/app/helpers/conditional-action.js

diff --git a/frontend/app/abilities/report.js b/frontend/app/abilities/report.js
index f0280c3b5..8312e069d 100644
--- a/frontend/app/abilities/report.js
+++ b/frontend/app/abilities/report.js
@@ -8,23 +8,49 @@ export default class ReportAbility extends Ability {
     return this.currentUser.user;
   }
 
-  get canEdit() {
-    const isEditable =
-      this.user?.isSuperuser ||
-      (!this.model?.verifiedBy?.get("id") &&
-        (this.model?.user?.get("id") === this.user?.get("id") ||
-          (this.model?.user?.get("supervisors") ?? [])
-            .map((s) => s.id)
-            .includes(this.user?.get("id"))));
-    const isReviewer =
-      (this.model?.taskAssignees ?? [])
-        .concat(
-          this.model?.projectAssignees ?? [],
-          this.model?.customerAssignees ?? [],
-        )
-        .filter((a) => a?.user)
-        .map((a) => a.user.get("id"))
-        .includes(this.user?.get("id")) && !this.model?.verifiedBy?.get("id");
-    return isEditable || isReviewer;
+  get canEditSync() {
+    if (this.user?.isSuperuser) {
+      return true;
+    }
+
+    if (this.model?.verifiedBy?.get("id")) {
+      return false;
+    }
+
+    if (this.model?.user?.get("id") === this.user?.get("id")) {
+      return true;
+    }
+
+    return false;
+  }
+
+  async isReviewer() {
+    return ((await this.model?.taskAssignees) ?? [])
+      .concat(
+        (await this.model?.projectAssignees) ?? [],
+        (await this.model?.customerAssignees) ?? [],
+      )
+      .filter((a) => a?.user)
+      .map((a) => a.user.get("id"))
+      .includes(this.user?.get("id"));
+  }
+
+  async isSupervisee() {
+    return ((await this.model?.user?.get("supervisors")) ?? [])
+      .map((s) => s.id)
+      .includes(this.user?.get("id"));
+  }
+
+  async canEditAsync() {
+    if (this.model?.verifiedBy?.get("id")) {
+      return false;
+    }
+
+    const isSupervisee = await this.isSupervisee();
+    if (isSupervisee) {
+      return true;
+    }
+
+    return await this.isReviewer();
   }
 }
diff --git a/frontend/app/analysis/index/controller.js b/frontend/app/analysis/index/controller.js
index a6a4b4435..da2b2cd1d 100644
--- a/frontend/app/analysis/index/controller.js
+++ b/frontend/app/analysis/index/controller.js
@@ -122,10 +122,8 @@ export default class AnalysisController extends QPController {
     return `The export limit is ${this.exportLimit}. Please use filters to reduce the amount of reports.`;
   }
 
-  get canBill() {
-    return (
-      this.currentUser.user.isAccountant || this.currentUser.user.isSuperuser
-    );
+  get isAccountant() {
+    return this.currentUser.user.isAccountant;
   }
 
   get appliedFilters() {
@@ -362,16 +360,14 @@ export default class AnalysisController extends QPController {
 
   @action
   selectRow(report) {
-    if (this.abilities.can("edit report", report) || this.canBill) {
-      const selected = this.selectedReportIds;
-
-      if (selected.includes(report.id)) {
-        this.selectedReportIds = A([
-          ...selected.filter((id) => id !== report.id),
-        ]);
-      } else {
-        this.selectedReportIds = A([...selected, report.id]);
-      }
+    const selected = this.selectedReportIds;
+
+    if (selected.includes(report.id)) {
+      this.selectedReportIds = A([
+        ...selected.filter((id) => id !== report.id),
+      ]);
+    } else {
+      this.selectedReportIds = A([...selected, report.id]);
     }
   }
 }
diff --git a/frontend/app/analysis/index/template.hbs b/frontend/app/analysis/index/template.hbs
index 621c60401..56e883eba 100644
--- a/frontend/app/analysis/index/template.hbs
+++ b/frontend/app/analysis/index/template.hbs
@@ -330,56 +330,64 @@
                 <tbody>
                   {{#each reports as |report|}}
                     {{! template-lint-disable}}
-                    <Table::Tr
-                      class="{{if
-                          (includes report.id this.selectedReportIds)
-                          'selected bg-primary text-foreground-primary'
-                          'striped'
+                    <CanEdit @report={{report}} as |canEdit|>
+                      <Table::Tr
+                        class="{{if
+                            (includes report.id this.selectedReportIds)
+                            'selected bg-primary text-foreground-primary'
+                            'striped'
+                          }}
+                          {{if
+                            (or this.isAccountant canEdit)
+                            'text-foreground-accent cursor-pointer'
+                          }}
+                          shadow-foreground/5 align-top shadow transition-colors"
+                        {{on
+                          "click"
+                          (conditional-action
+                            (or this.isAccountant canEdit)
+                            (fn this.selectRow report)
+                          )
                         }}
-                        {{if
-                          (or this.canBill (can 'edit report' report))
-                          'text-foreground-accent cursor-pointer'
-                        }}
-                        shadow-foreground/5 align-top shadow transition-colors"
-                      {{on "click" (fn this.selectRow report)}}
-                    >
-                      <Table::Td>{{report.user.username}}</Table::Td>
-                      <Table::Td>{{moment-format
-                          report.date
-                          "DD.MM.YYYY"
-                        }}</Table::Td>
-                      <Table::Td>{{format-duration
-                          report.duration
-                          false
-                        }}</Table::Td>
-                      <Table::Td
-                      >{{report.task.project.customer.name}}</Table::Td>
-                      <Table::Td>{{report.task.project.name}}</Table::Td>
-                      <Table::Td>{{report.task.name}}</Table::Td>
-                      <Table::Td><span
-                          title="{{report.comment}}"
-                        >{{report.comment}}</span></Table::Td>
-                      <Table::Td>{{if
-                          report.verifiedBy
-                          report.verifiedBy.username
-                        }}</Table::Td>
-                      <Table::Td><Checkmark
-                          @checked={{report.rejected}}
-                          @highlight={{true}}
-                        /></Table::Td>
-                      <Table::Td><Checkmark
-                          @checked={{report.review}}
-                          @highlight={{true}}
-                        /></Table::Td>
-                      <Table::Td><Checkmark
-                          @checked={{report.notBillable}}
-                          @highlight={{true}}
-                        /></Table::Td>
-                      <Table::Td><Checkmark
-                          @checked={{report.billed}}
-                          @highlight={{true}}
-                        /></Table::Td>
-                    </Table::Tr>
+                      >
+                        <Table::Td>{{report.user.username}}</Table::Td>
+                        <Table::Td>{{moment-format
+                            report.date
+                            "DD.MM.YYYY"
+                          }}</Table::Td>
+                        <Table::Td>{{format-duration
+                            report.duration
+                            false
+                          }}</Table::Td>
+                        <Table::Td
+                        >{{report.task.project.customer.name}}</Table::Td>
+                        <Table::Td>{{report.task.project.name}}</Table::Td>
+                        <Table::Td>{{report.task.name}}</Table::Td>
+                        <Table::Td><span
+                            title="{{report.comment}}"
+                          >{{report.comment}}</span></Table::Td>
+                        <Table::Td>{{if
+                            report.verifiedBy
+                            report.verifiedBy.username
+                          }}</Table::Td>
+                        <Table::Td><Checkmark
+                            @checked={{report.rejected}}
+                            @highlight={{true}}
+                          /></Table::Td>
+                        <Table::Td><Checkmark
+                            @checked={{report.review}}
+                            @highlight={{true}}
+                          /></Table::Td>
+                        <Table::Td><Checkmark
+                            @checked={{report.notBillable}}
+                            @highlight={{true}}
+                          /></Table::Td>
+                        <Table::Td><Checkmark
+                            @checked={{report.billed}}
+                            @highlight={{true}}
+                          /></Table::Td>
+                      </Table::Tr>
+                    </CanEdit>
                   {{/each}}
                   {{#if this._canLoadMore}}
                     <tr
diff --git a/frontend/app/components/can-edit.hbs b/frontend/app/components/can-edit.hbs
new file mode 100644
index 000000000..a8b216801
--- /dev/null
+++ b/frontend/app/components/can-edit.hbs
@@ -0,0 +1,9 @@
+{{#let (can "editSync report" @report) as |sync|}}
+  {{#if sync}}
+    {{yield true}}
+  {{else}}
+    {{#let (can "editAsync report" @report) as |promise|}}
+      {{yield (await promise)}}
+    {{/let}}
+  {{/if}}
+{{/let}}
\ No newline at end of file
diff --git a/frontend/app/components/report-row.hbs b/frontend/app/components/report-row.hbs
index f1c4a8e9d..e33253f87 100644
--- a/frontend/app/components/report-row.hbs
+++ b/frontend/app/components/report-row.hbs
@@ -1,127 +1,131 @@
-{{#let (changeset @report this.ReportValidations) as |cs|}}
-  <ValidatedForm
-    @model={{cs}}
-    class="report-row grid grid-cols-4 gap-2 p-1 lg:grid-cols-[repeat(3,minmax(0,0.9fr)),minmax(0,1.6fr),minmax(0,0.45fr),minmax(2rem,0.6fr),repeat(2,minmax(2rem,0.6fr))] lg:p-1.5 xl:grid-cols-[repeat(3,minmax(0,1.2fr)),minmax(0,1.8fr),minmax(0,0.4fr),minmax(2rem,0.5fr),repeat(2,minmax(2rem,0.5fr))] xl:p-2.5 max-lg:[&>*]:w-full"
-    title={{this.title}}
-    @on-submit={{perform this.save}}
-    ...attributes
-    as |f|
-  >
-    <TaskSelection
-      @disabled={{not this.editable}}
-      @task={{cs.task}}
-      @on-set-task={{fn this.updateTask cs}}
-      as |t|
+<CanEdit @report={{@report}} as |editable|>
+  {{#let (changeset @report this.ReportValidations) as |cs|}}
+    <ValidatedForm
+      @model={{cs}}
+      class="report-row grid grid-cols-4 gap-2 p-1 lg:grid-cols-[repeat(3,minmax(0,0.9fr)),minmax(0,1.6fr),minmax(0,0.45fr),minmax(2rem,0.6fr),repeat(2,minmax(2rem,0.6fr))] lg:p-1.5 xl:grid-cols-[repeat(3,minmax(0,1.2fr)),minmax(0,1.8fr),minmax(0,0.4fr),minmax(2rem,0.5fr),repeat(2,minmax(2rem,0.5fr))] xl:p-2.5 max-lg:[&>*]:w-full"
+      title={{this.title editable}}
+      @on-submit={{perform this.save}}
+      ...attributes
+      as |f|
     >
-      <t.customer
-        class="form-group max-lg:col-span-full {{if cs.error.task 'has-error'}}"
-      />
-      <t.project
-        class="form-group max-lg:col-span-full {{if cs.error.task 'has-error'}}"
-      />
-      <f.input @labelComponent="void" @errorComponent="void" @name="task">
-        <t.task
+      <TaskSelection
+        @disabled={{not editable}}
+        @task={{cs.task}}
+        @on-set-task={{fn this.updateTask cs}}
+        as |t|
+      >
+        <t.customer
+          class="form-group max-lg:col-span-full
+            {{if cs.error.task 'has-error'}}"
+        />
+        <t.project
           class="form-group max-lg:col-span-full
             {{if cs.error.task 'has-error'}}"
         />
-      </f.input>
-    </TaskSelection>
+        <f.input @labelComponent="void" @errorComponent="void" @name="task">
+          <t.task
+            class="form-group max-lg:col-span-full
+              {{if cs.error.task 'has-error'}}"
+          />
+        </f.input>
+      </TaskSelection>
 
-    <div class="form-list-cell form-group max-lg:col-span-full">
-      <label for="row-comment" hidden>Comment</label>
-      <input
-        type="text"
-        class="form-control comment-field rounded
-          {{if cs.task.project.customerVisible 'customer-comment'}}"
-        placeholder="Comment"
-        name="comment"
-        id="row-comment"
-        value={{cs.comment}}
-        disabled={{not this.editable}}
-        title={{if
-          cs.task.project.customerVisible
-          "This project's comments are visible to the customer"
-        }}
-        spellcheck="true"
-        {{on "change" (pick "target.value" (fn (mut cs.comment)))}}
-        data-test-report-comment
-      />
-    </div>
-    <div class="form-list-cell form-group cell-duration">
-      <DurationpickerDay
-        data-test-report-duration
-        @disabled={{not this.editable}}
-        @value={{cs.duration}}
-        @onChange={{fn (mut cs.duration)}}
-        @title="Task duration"
-      />
-    </div>
-    <div class="form-list-cell form-group cell-remaining-effort">
-      {{#if cs.task.project.remainingEffortTracking}}
-        <Durationpicker
-          data-test-report-remaining-effort
-          class="remaining-effort"
-          @disabled={{not this.editable}}
-          @value={{cs.remainingEffort}}
-          @onChange={{fn (mut cs.remainingEffort)}}
-          @title="Remaining estimated effort"
+      <div class="form-list-cell form-group max-lg:col-span-full">
+        <label for="row-comment" hidden>Comment</label>
+        <input
+          type="text"
+          class="form-control comment-field rounded
+            {{if cs.task.project.customerVisible 'customer-comment'}}"
+          placeholder="Comment"
+          name="comment"
+          id="row-comment"
+          value={{cs.comment}}
+          disabled={{not editable}}
+          title={{if
+            cs.task.project.customerVisible
+            "This project's comments are visible to the customer"
+          }}
+          spellcheck="true"
+          {{on "change" (pick "target.value" (fn (mut cs.comment)))}}
+          data-test-report-comment
         />
-      {{/if}}
-    </div>
+      </div>
+      <div class="form-list-cell form-group cell-duration">
+        <DurationpickerDay
+          data-test-report-duration
+          @disabled={{not editable}}
+          @value={{cs.duration}}
+          @onChange={{fn (mut cs.duration)}}
+          @title="Task duration"
+        />
+      </div>
+      <div class="form-list-cell form-group cell-remaining-effort">
+        {{#if cs.task.project.remainingEffortTracking}}
+          <Durationpicker
+            data-test-report-remaining-effort
+            class="remaining-effort"
+            @disabled={{not editable}}
+            @value={{cs.remainingEffort}}
+            @onChange={{fn (mut cs.remainingEffort)}}
+            @title="Remaining estimated effort"
+          />
+        {{/if}}
+      </div>
 
-    <div
-      class="form-list-cell form-group cell-review-billable-icons grid grid-cols-2 content-between gap-1 self-center"
-    >
-      <Toggle
-        class="margin-small-right form-control"
-        data-test-report-review
-        @disabled={{not this.editable}}
-        @hint="Needs review"
-        @onToggle={{toggle "review" cs}}
-        @value={{cs.review}}
+      <div
+        class="form-list-cell form-group cell-review-billable-icons grid grid-cols-2 content-between gap-1 self-center"
       >
-        <span class="fa-layers fa-fw">
-          <FaIcon @icon="user" />
-          <FaIcon
-            @icon="question"
-            @prefix="fas"
-            @transform="shrink-6 up-7 right-8"
-          />
-        </span>
-      </Toggle>
-      <Toggle
-        class="form-control"
-        data-test-report-not-billable
-        @disabled={{not this.editable}}
-        @hint="Not billable"
-        @onToggle={{toggle "notBillable" cs}}
-        @value={{cs.notBillable}}
+        <Toggle
+          class="margin-small-right form-control"
+          data-test-report-review
+          @disabled={{not editable}}
+          @hint="Needs review"
+          @onToggle={{toggle "review" cs}}
+          @value={{cs.review}}
+        >
+          <span class="fa-layers fa-fw">
+            <FaIcon @icon="user" />
+            <FaIcon
+              @icon="question"
+              @prefix="fas"
+              @transform="shrink-6 up-7 right-8"
+            />
+          </span>
+        </Toggle>
+        <Toggle
+          class="form-control"
+          data-test-report-not-billable
+          @disabled={{not editable}}
+          @hint="Not billable"
+          @onToggle={{toggle "notBillable" cs}}
+          @value={{cs.notBillable}}
+        >
+          <span class="fa-layers fa-fw">
+            <FaIcon @icon="dollar-sign" @prefix="fas" />
+            <FaIcon @icon="slash" @prefix="fas" />
+          </span>
+        </Toggle>
+      </div>
+      <div
+        class="form-list-cell form-group cell-buttons grid grid-cols-2 justify-around gap-2 self-center text-sm [&>*]:px-2"
       >
-        <span class="fa-layers fa-fw">
-          <FaIcon @icon="dollar-sign" @prefix="fas" />
-          <FaIcon @icon="slash" @prefix="fas" />
-        </span>
-      </Toggle>
-    </div>
-    <div
-      class="form-list-cell form-group cell-buttons grid grid-cols-2 justify-around gap-2 self-center text-sm [&>*]:px-2"
-    >
-      {{#if this.editable}}
-        <button
-          type="button"
-          data-test-delete-report
-          class="btn btn-danger"
-          disabled={{or this.report.verifiedBy.id cs.isNew}}
-          {{on "click" (fn (optional @onDelete) @report)}}
-        ><FaIcon @icon="trash-can" /></button>
-        <f.submit
-          data-test-save-report
-          disabled={{or
-            this.save.isRunning
-            (or (not cs.isValid) (not (or cs.isDirty cs.isNew)))
-          }}
-        ><FaIcon @icon="floppy-disk" /></f.submit>
-      {{/if}}
-    </div>
-  </ValidatedForm>
-{{/let}}
\ No newline at end of file
+        {{#if editable}}
+          <button
+            type="button"
+            data-test-delete-report
+            class="btn btn-danger"
+            disabled={{or this.report.verifiedBy.id cs.isNew}}
+            {{on "click" (fn (optional @onDelete) @report)}}
+          ><FaIcon @icon="trash-can" /></button>
+          <f.submit
+            data-test-save-report
+            disabled={{or
+              this.save.isRunning
+              (or (not cs.isValid) (not (or cs.isDirty cs.isNew)))
+            }}
+          ><FaIcon @icon="floppy-disk" /></f.submit>
+        {{/if}}
+      </div>
+    </ValidatedForm>
+  {{/let}}
+</CanEdit>
\ No newline at end of file
diff --git a/frontend/app/components/report-row.js b/frontend/app/components/report-row.js
index c630c4ec6..e90cf2a68 100644
--- a/frontend/app/components/report-row.js
+++ b/frontend/app/components/report-row.js
@@ -10,12 +10,9 @@ export default class ReportRowComponent extends Component {
 
   ReportValidations = ReportValidations;
 
-  get editable() {
-    return this.abilities.can("edit report", this.args.report);
-  }
-
-  get title() {
-    return this.editable
+  @action
+  title(editable) {
+    return editable
       ? ""
       : `This entry was already verified by ${this.args.report.get(
           "verifiedBy.fullName",
diff --git a/frontend/app/helpers/conditional-action.js b/frontend/app/helpers/conditional-action.js
new file mode 100644
index 000000000..3deda63a0
--- /dev/null
+++ b/frontend/app/helpers/conditional-action.js
@@ -0,0 +1,16 @@
+import { helper } from "@ember/component/helper";
+
+/**
+ * Returns an action if the condition is true; otherwise, returns a no-op function.
+ *
+ * @param {[boolean, Function]} args - An array where the first element is a condition (boolean) and the second element is an action (function).
+ * @returns {Function} The action if the condition is true; otherwise, a no-op function.
+ */
+export const conditionalAction = ([condition, action]) => {
+  if (condition) {
+    return action;
+  }
+  return () => {};
+};
+
+export default helper(conditionalAction);