From b2ad4b378578c26e34e47e79e71ac20983b8d793 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Tue, 17 Sep 2024 16:47:40 +0200
Subject: [PATCH] add description grouping to reporting page (fixes ST-399),
 persist grouping selection in local storage

---
 resources/js/Pages/Reporting.vue                     |  5 +++--
 resources/js/packages/api/src/openapi.json.client.ts |  2 ++
 resources/js/utils/useReporting.ts                   | 11 +++++++++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/resources/js/Pages/Reporting.vue b/resources/js/Pages/Reporting.vue
index 420a8ccf..0a0ed7d1 100644
--- a/resources/js/Pages/Reporting.vue
+++ b/resources/js/Pages/Reporting.vue
@@ -35,6 +35,7 @@ import { getCurrentMembershipId, getCurrentRole } from '@/utils/useUser';
 import ClientMultiselectDropdown from '@/Components/Common/Client/ClientMultiselectDropdown.vue';
 import { useTagsStore } from '@/utils/useTags';
 import { formatCents } from '@/packages/ui/src/utils/money';
+import { useStorage } from '@vueuse/core';
 
 const startDate = ref<string>(
     getLocalizedDayJs(getDayJsInstance()().format()).subtract(14, 'd').format()
@@ -50,8 +51,8 @@ const selectedClients = ref<string[]>([]);
 
 const billable = ref<'true' | 'false' | null>(null);
 
-const group = ref<GroupingOption>('project');
-const subGroup = ref<GroupingOption>('task');
+const group = useStorage<GroupingOption>('reporting-group', 'project');
+const subGroup = useStorage<GroupingOption>('reporting-sub-group', 'task');
 
 const reportingStore = useReportingStore();
 
diff --git a/resources/js/packages/api/src/openapi.json.client.ts b/resources/js/packages/api/src/openapi.json.client.ts
index d5a979bc..e1c9df03 100644
--- a/resources/js/packages/api/src/openapi.json.client.ts
+++ b/resources/js/packages/api/src/openapi.json.client.ts
@@ -2430,6 +2430,7 @@ If the group parameters are all set to &#x60;null&#x60; or are all missing, the
                         'task',
                         'client',
                         'billable',
+                        'description',
                     ])
                     .optional(),
             },
@@ -2447,6 +2448,7 @@ If the group parameters are all set to &#x60;null&#x60; or are all missing, the
                         'task',
                         'client',
                         'billable',
+                        'description',
                     ])
                     .optional(),
             },
diff --git a/resources/js/utils/useReporting.ts b/resources/js/utils/useReporting.ts
index 65d071f8..24c8e7ca 100644
--- a/resources/js/utils/useReporting.ts
+++ b/resources/js/utils/useReporting.ts
@@ -17,7 +17,7 @@ import {
     UserCircleIcon,
     UserGroupIcon,
 } from '@heroicons/vue/20/solid';
-import { FolderIcon } from '@heroicons/vue/16/solid';
+import { DocumentTextIcon, FolderIcon } from '@heroicons/vue/16/solid';
 import BillableIcon from '@/packages/ui/src/Icons/BillableIcon.vue';
 
 export type GroupingOption =
@@ -25,7 +25,8 @@ export type GroupingOption =
     | 'task'
     | 'user'
     | 'billable'
-    | 'client';
+    | 'client'
+    | 'description';
 
 export const useReportingStore = defineStore('reporting', () => {
     const reportingGraphResponse = ref<ReportingResponse | null>(null);
@@ -85,6 +86,7 @@ export const useReportingStore = defineStore('reporting', () => {
         task: 'No Task',
         billable: 'Non-Billable',
         client: 'No Client',
+        description: 'No Description',
     } as Record<string, string>;
 
     function getNameForReportingRowEntry(
@@ -158,6 +160,11 @@ export const useReportingStore = defineStore('reporting', () => {
             value: 'billable',
             icon: BillableIcon,
         },
+        {
+            label: 'Description',
+            value: 'description',
+            icon: DocumentTextIcon,
+        },
     ];
 
     return {