From ab4dbd64df8e3f9c6b09e4edccffc89230d3b34f Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Fri, 25 Oct 2024 18:09:28 +0200
Subject: [PATCH] add support for history_group and loading indicators to
 export buttons

---
 .../Reporting/ReportingExportButton.vue       | 28 +++++----
 resources/js/Pages/Reporting.vue              | 28 ++++++---
 resources/js/Pages/ReportingDetailed.vue      |  2 +-
 resources/js/packages/api/src/index.ts        |  2 +-
 .../packages/api/src/openapi.json.client.ts   | 61 ++++++++++---------
 .../ui/src/Buttons/SecondaryButton.vue        |  9 ++-
 6 files changed, 74 insertions(+), 56 deletions(-)

diff --git a/resources/js/Components/Common/Reporting/ReportingExportButton.vue b/resources/js/Components/Common/Reporting/ReportingExportButton.vue
index cc92e030..ce074a85 100644
--- a/resources/js/Components/Common/Reporting/ReportingExportButton.vue
+++ b/resources/js/Components/Common/Reporting/ReportingExportButton.vue
@@ -3,43 +3,47 @@ import { SecondaryButton } from '@/packages/ui/src';
 import { ArrowDownTrayIcon } from '@heroicons/vue/20/solid';
 import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
 import type { ExportFormat } from '@/types/reporting';
+import { ref } from 'vue';
 
-const emit = defineEmits<{
-    submit: [ExportFormat];
+const props = defineProps<{
+    download: (format: ExportFormat) => Promise<void>;
 }>();
+const loading = ref(false);
+function triggerDownload(format: ExportFormat) {
+    loading.value = true;
+    props.download(format).finally(() => {
+        loading.value = false;
+    });
+}
 </script>
 
 <template>
     <Dropdown align="bottom-end">
         <template #trigger>
-            <SecondaryButton>
-                <div class="flex space-x-2 items-center">
-                    <ArrowDownTrayIcon
-                        class="w-4 text-text-tertiary"></ArrowDownTrayIcon>
-                    <span>Export</span>
-                </div>
+            <SecondaryButton :icon="ArrowDownTrayIcon" :loading>
+                Export
             </SecondaryButton>
         </template>
         <template #content>
             <div class="flex flex-col space-y-1 p-1.5">
                 <SecondaryButton
                     class="border-0 px-2"
-                    @click="emit('submit', 'pdf')"
+                    @click="triggerDownload('pdf')"
                     >Export as PDF</SecondaryButton
                 >
                 <SecondaryButton
                     class="border-0 px-2"
-                    @click="emit('submit', 'xlsx')"
+                    @click="triggerDownload('xlsx')"
                     >Export as Excel</SecondaryButton
                 >
                 <SecondaryButton
                     class="border-0 px-2"
-                    @click="emit('submit', 'csv')"
+                    @click="triggerDownload('csv')"
                     >Export as CSV</SecondaryButton
                 >
                 <SecondaryButton
                     class="border-0 px-2"
-                    @click="emit('submit', 'ods')"
+                    @click="triggerDownload('ods')"
                     >Export as ODS
                 </SecondaryButton>
             </div>
diff --git a/resources/js/Pages/Reporting.vue b/resources/js/Pages/Reporting.vue
index 28d8d14b..2d77bccc 100644
--- a/resources/js/Pages/Reporting.vue
+++ b/resources/js/Pages/Reporting.vue
@@ -75,7 +75,7 @@ const { aggregatedGraphTimeEntries, aggregatedTableTimeEntries } =
 
 const { groupByOptions } = reportingStore;
 
-function getFilterAttributes() {
+function getFilterAttributes(): AggregatedTimeEntriesQueryParams {
     let params: AggregatedTimeEntriesQueryParams = {
         start: getLocalizedDayJs(startDate.value).startOf('day').utc().format(),
         end: getLocalizedDayJs(endDate.value).endOf('day').utc().format(),
@@ -103,16 +103,12 @@ function getFilterAttributes() {
 }
 
 function updateGraphReporting() {
-    const diffInDays = getDayJsInstance()(endDate.value).diff(
-        getDayJsInstance()(startDate.value),
-        'd'
-    );
     const params = getFilterAttributes();
     if (getCurrentRole() === 'employee') {
         params.member_id = getCurrentMembershipId();
     }
     params.fill_gaps_in_time_groups = 'true';
-    params.group = getOptimalGroupingOption(diffInDays);
+    params.group = getOptimalGroupingOption(startDate.value, endDate.value);
     useReportingStore().fetchGraphReporting(params);
 }
 
@@ -139,10 +135,18 @@ function updateReporting() {
     updateTableReporting();
 }
 
-function getOptimalGroupingOption(diff: number): 'day' | 'week' | 'month' {
-    if (diff <= 31) {
+function getOptimalGroupingOption(
+    startDate: string,
+    endDate: string
+): 'day' | 'week' | 'month' {
+    const diffInDays = getDayJsInstance()(endDate).diff(
+        getDayJsInstance()(startDate),
+        'd'
+    );
+
+    if (diffInDays <= 31) {
         return 'day';
-    } else if (diff <= 200) {
+    } else if (diffInDays <= 200) {
         return 'week';
     } else {
         return 'month';
@@ -172,6 +176,10 @@ async function downloadExport(format: ExportFormat) {
                         ...getFilterAttributes(),
                         group: group.value,
                         sub_group: subGroup.value,
+                        history_group: getOptimalGroupingOption(
+                            startDate.value,
+                            endDate.value
+                        ),
                         format: format,
                     },
                 }),
@@ -203,7 +211,7 @@ async function downloadExport(format: ExportFormat) {
                 </TabBar>
             </div>
             <ReportingExportButton
-                @submit="downloadExport"></ReportingExportButton>
+                :download="downloadExport"></ReportingExportButton>
         </MainContainer>
         <div class="py-2.5 w-full border-b border-default-background-separator">
             <MainContainer
diff --git a/resources/js/Pages/ReportingDetailed.vue b/resources/js/Pages/ReportingDetailed.vue
index bc4c7ee8..2d041f81 100644
--- a/resources/js/Pages/ReportingDetailed.vue
+++ b/resources/js/Pages/ReportingDetailed.vue
@@ -262,7 +262,7 @@ async function downloadExport(format: ExportFormat) {
                 </TabBar>
             </div>
             <ReportingExportButton
-                @submit="downloadExport"></ReportingExportButton>
+                :download="downloadExport"></ReportingExportButton>
         </MainContainer>
         <div class="py-2.5 w-full border-b border-default-background-separator">
             <MainContainer
diff --git a/resources/js/packages/api/src/index.ts b/resources/js/packages/api/src/index.ts
index 13917ea0..7b066a68 100644
--- a/resources/js/packages/api/src/index.ts
+++ b/resources/js/packages/api/src/index.ts
@@ -123,7 +123,7 @@ export type TimeEntriesQueryParams = ZodiosQueryParamsByAlias<
 export type AggregatedTimeEntriesQueryParams = ZodiosQueryParamsByAlias<
     SolidTimeApi,
     'getAggregatedTimeEntries'
->;
+> & { start: string; end: string };
 
 export type OrganizationResponse = ZodiosResponseByAlias<
     SolidTimeApi,
diff --git a/resources/js/packages/api/src/openapi.json.client.ts b/resources/js/packages/api/src/openapi.json.client.ts
index c84045fa..b92e1b43 100644
--- a/resources/js/packages/api/src/openapi.json.client.ts
+++ b/resources/js/packages/api/src/openapi.json.client.ts
@@ -2675,38 +2675,39 @@ If the group parameters are all set to &#x60;null&#x60; or are all missing, the
             {
                 name: 'group',
                 type: 'Query',
-                schema: z
-                    .enum([
-                        'day',
-                        'week',
-                        'month',
-                        'year',
-                        'user',
-                        'project',
-                        'task',
-                        'client',
-                        'billable',
-                        'description',
-                    ])
-                    .optional(),
+                schema: z.enum([
+                    'day',
+                    'week',
+                    'month',
+                    'year',
+                    'user',
+                    'project',
+                    'task',
+                    'client',
+                    'billable',
+                    'description',
+                ]),
             },
             {
                 name: 'sub_group',
                 type: 'Query',
-                schema: z
-                    .enum([
-                        'day',
-                        'week',
-                        'month',
-                        'year',
-                        'user',
-                        'project',
-                        'task',
-                        'client',
-                        'billable',
-                        'description',
-                    ])
-                    .optional(),
+                schema: z.enum([
+                    'day',
+                    'week',
+                    'month',
+                    'year',
+                    'user',
+                    'project',
+                    'task',
+                    'client',
+                    'billable',
+                    'description',
+                ]),
+            },
+            {
+                name: 'history_group',
+                type: 'Query',
+                schema: z.enum(['day', 'week', 'month', 'year']),
             },
             {
                 name: 'member_id',
@@ -2721,12 +2722,12 @@ If the group parameters are all set to &#x60;null&#x60; or are all missing, the
             {
                 name: 'start',
                 type: 'Query',
-                schema: start,
+                schema: z.string(),
             },
             {
                 name: 'end',
                 type: 'Query',
-                schema: start,
+                schema: z.string(),
             },
             {
                 name: 'active',
diff --git a/resources/js/packages/ui/src/Buttons/SecondaryButton.vue b/resources/js/packages/ui/src/Buttons/SecondaryButton.vue
index ede24a4a..25845617 100644
--- a/resources/js/packages/ui/src/Buttons/SecondaryButton.vue
+++ b/resources/js/packages/ui/src/Buttons/SecondaryButton.vue
@@ -2,16 +2,19 @@
 import type { HtmlButtonType } from '@/types/dom';
 import { twMerge } from 'tailwind-merge';
 import { type Component } from 'vue';
+import LoadingSpinner from '../LoadingSpinner.vue';
 
 const props = withDefaults(
     defineProps<{
         type: HtmlButtonType;
         icon?: Component;
         size: 'small' | 'base';
+        loading: boolean;
     }>(),
     {
         type: 'button',
         size: 'base',
+        loading: false,
     }
 );
 
@@ -24,6 +27,7 @@ const sizeClasses = {
 <template>
     <button
         :type="type"
+        :disabled="loading"
         :class="
             twMerge(
                 'bg-button-secondary-background border border-button-secondary-border hover:bg-button-secondary-background-hover shadow-sm transition text-white rounded-lg font-semibold inline-flex items-center space-x-1.5 focus-visible:border-input-border-active focus:outline-none focus:ring-0 disabled:opacity-25 ease-in-out',
@@ -34,10 +38,11 @@ const sizeClasses = {
             :class="
                 twMerge('flex items-center ', props.icon ? 'space-x-1.5' : '')
             ">
+            <LoadingSpinner v-if="loading"></LoadingSpinner>
             <component
-                v-if="props.icon"
+                v-if="props.icon && !loading"
                 :is="props.icon"
-                class="w-4 sm:w-5 h-4 sm:h-5 -ml-0.5 sm:-ml-1"></component>
+                class="text-text-tertiary w-4 -ml-0.5 mr-1"></component>
             <span>
                 <slot />
             </span>