feat: show month hours per project as well

FrontMen · Mar 18, 2021 · 8125509 · 8125509
1 parent 86f0a18
commit 8125509
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 34 deletions.
diff --git a/composables/useMonthlyReport.ts b/composables/useMonthlyReport.ts
@@ -1,7 +1,10 @@
+import { uniqueByKey } from "~/helpers/array";
+
 export default () => {
   function createFields(report: MonthlyReport | null) {
     const leftFields = [
       { key: "name", sortable: true },
+      { key: "project", sortable: true },
       { key: "billable", sortable: true, variant: "success" },
       { key: "nonBillable", sortable: true, variant: "warning" },
     ];
@@ -19,39 +22,78 @@ export default () => {
     return [...leftFields, ...(middleFields || []), ...rightFields];
   }
 
-  function createItems(report: MonthlyReport | null) {
-    if (!report || !report.users) return [];
-
-    return report.users.map((entry) => {
-      const nonBillableColumns = report?.nonBillableProjects.reduce(
-        (total: any, current) => {
-          total[current.name] = entry.nonBillableProjects
-            .filter((x) => x.customerId === current.id)
-            .reduce((total, y) => (total += y.hours), 0);
-
-          return total;
-        },
-        {}
+  function getNonBillableColumns(
+    user: ReportUser,
+    nonBillableProjects: Customer[]
+  ) {
+    return nonBillableProjects.reduce((total: any, currentProject) => {
+      const records = user.nonBillableProjects.filter(
+        (project) => project.customerId === currentProject.id
       );
 
-      const nonBillableHours = entry.nonBillableProjects.reduce(
-        (total, current) => (total += current.hours),
+      total[currentProject.name] = records.reduce(
+        (total, y) => (total += y.hours),
         0
       );
 
+      return total;
+    }, {});
+  }
+
+  function createTotalsProject(user: ReportUser, report: MonthlyReport) {
+    const nonBillableColumns = getNonBillableColumns(
+      user,
+      report.nonBillableProjects
+    );
+
+    const nonBillableHours = user.nonBillableProjects.reduce(
+      (total, current) => (total += current.hours),
+      0
+    );
+
+    const productivity =
+      (user.billableHours / (user.billableHours + nonBillableHours)) * 100;
+
+    return {
+      name: user.name,
+      billable: user.billableHours || 0,
+      project: "Totals",
+      nonBillable: nonBillableHours,
+      totalHours: user.billableHours + nonBillableHours,
+      productivity: (productivity || 0) + "%",
+      ...nonBillableColumns,
+    };
+  }
+
+  function createRecordProjects(user: ReportUser) {
+    const customers = uniqueByKey(
+      user.billableRecords.map((x) => x.customer),
+      "id"
+    );
+
+    return customers.map((customer) => {
+      const records = user.billableRecords.filter(
+        (x) => x.customer.id === customer.id
+      );
+
       return {
-        name: entry.name,
-        billable: entry.billableHours || 0,
-        nonBillable: nonBillableHours,
-        totalHours: entry.billableHours + nonBillableHours,
-        productivity:
-          (entry.billableHours / (entry.billableHours + nonBillableHours)) *
-            100 +
-          "%",
-        ...nonBillableColumns,
+        name: user.name,
+        project: customer.name,
+        billable: records.reduce((total, record) => (total += record.hours), 0),
       };
     });
   }
 
+  function createItems(report: MonthlyReport | null) {
+    const items: any = [];
+
+    report?.users.forEach((user) => {
+      items.push(createTotalsProject(user, report));
+      items.push(...createRecordProjects(user));
+    });
+
+    return items;
+  }
+
   return { createFields, createItems };
 };
diff --git a/pages/reports.vue b/pages/reports.vue
@@ -1,14 +1,12 @@
 <template>
-  <div class="mx-5 my-5">
-    <reports-table
-      :busy="isLoading || !items.length"
-      :items="items"
-      :fields="fields"
-      bordered
-      table-variant="light"
-      striped
-      hover
-    />
+  <div class="page-wrapper">
+    <div class="content-wrapper my-5">
+      <reports-table
+        :busy="isLoading || !items.length"
+        :items="items"
+        :fields="fields"
+      />
+    </div>
   </div>
 </template>
 

diff --git a/store/reports/mutations.ts b/store/reports/mutations.ts
@@ -36,6 +36,7 @@ const mutations: MutationTree<ReportsStoreState> = {
           customerId: record.customer.id,
           hours: record.hours,
         })),
+        billableRecords: userBillableRecords,
         billableHours: userBillableRecords.reduce(
           (total, record) => (total += record.hours),
           0

diff --git a/types/reports.d.ts b/types/reports.d.ts
@@ -1,6 +1,7 @@
 interface ReportUser {
   name: string;
   billableHours: number;
+  billableRecords: TimeRecord[];
   nonBillableProjects: {
     customerId: string;
     hours: number;