From fe19593f6eff8e79edbadcbbe49484f9cc486822 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Wed, 16 Oct 2024 14:50:56 +0200
Subject: [PATCH] add Export download buttons

---
 .../Api/V1/TimeEntryController.php            |   2 +
 resources/js/Pages/Reporting.vue              |  67 +++++++-
 .../packages/api/src/openapi.json.client.ts   | 149 +++++++++++++++---
 3 files changed, 192 insertions(+), 26 deletions(-)

diff --git a/app/Http/Controllers/Api/V1/TimeEntryController.php b/app/Http/Controllers/Api/V1/TimeEntryController.php
index 0cd69621..c27dd9c2 100644
--- a/app/Http/Controllers/Api/V1/TimeEntryController.php
+++ b/app/Http/Controllers/Api/V1/TimeEntryController.php
@@ -147,6 +147,8 @@ private function getTimeEntriesQuery(Organization $organization, TimeEntryIndexR
 
     /**
      * @throws AuthorizationException
+     *
+     * @operationId exportTimeEntries
      */
     public function indexExport(Organization $organization, TimeEntryIndexExportRequest $request): JsonResponse
     {
diff --git a/resources/js/Pages/Reporting.vue b/resources/js/Pages/Reporting.vue
index edc6ecbc..aec899de 100644
--- a/resources/js/Pages/Reporting.vue
+++ b/resources/js/Pages/Reporting.vue
@@ -8,10 +8,12 @@ import {
     UserGroupIcon,
     CheckCircleIcon,
     TagIcon,
+    ArrowDownTrayIcon,
 } from '@heroicons/vue/20/solid';
 import DateRangePicker from '@/packages/ui/src/Input/DateRangePicker.vue';
 import ReportingChart from '@/Components/Common/Reporting/ReportingChart.vue';
 import BillableIcon from '@/packages/ui/src/Icons/BillableIcon.vue';
+
 import { onMounted, ref } from 'vue';
 import {
     formatHumanReadableDuration,
@@ -21,7 +23,7 @@ import {
 import { type GroupingOption, useReportingStore } from '@/utils/useReporting';
 import { storeToRefs } from 'pinia';
 import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue';
-import type { AggregatedTimeEntriesQueryParams } from '@/packages/api/src';
+import { type AggregatedTimeEntriesQueryParams, api } from '@/packages/api/src';
 import ReportingFilterBadge from '@/Components/Common/Reporting/ReportingFilterBadge.vue';
 import ProjectMultiselectDropdown from '@/Components/Common/Project/ProjectMultiselectDropdown.vue';
 import MemberMultiselectDropdown from '@/Components/Common/Member/MemberMultiselectDropdown.vue';
@@ -31,7 +33,11 @@ import ReportingGroupBySelect from '@/Components/Common/Reporting/ReportingGroup
 import ReportingRow from '@/Components/Common/Reporting/ReportingRow.vue';
 import { getOrganizationCurrencyString } from '@/utils/money';
 import ReportingPieChart from '@/Components/Common/Reporting/ReportingPieChart.vue';
-import { getCurrentMembershipId, getCurrentRole } from '@/utils/useUser';
+import {
+    getCurrentMembershipId,
+    getCurrentOrganizationId,
+    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';
@@ -39,6 +45,10 @@ import { useSessionStorage, useStorage } from '@vueuse/core';
 import TabBar from '@/Components/Common/TabBar/TabBar.vue';
 import TabBarItem from '@/Components/Common/TabBar/TabBarItem.vue';
 import { router } from '@inertiajs/vue3';
+import { SecondaryButton } from '@/packages/ui/src';
+import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
+import { useNotificationsStore } from '@/utils/notification';
+const { handleApiRequestNotifications } = useNotificationsStore();
 
 const startDate = useSessionStorage<string>(
     'reporting-start-date',
@@ -149,6 +159,29 @@ const { tags } = storeToRefs(useTagsStore());
 async function createTag(tag: string) {
     return await useTagsStore().createTag(tag);
 }
+
+type ExportFormat = 'xlsx' | 'csv' | 'ods';
+
+async function downloadExport(format: ExportFormat) {
+    const organizationId = getCurrentOrganizationId();
+    if (organizationId) {
+        const response = await handleApiRequestNotifications(
+            () =>
+                api.exportTimeEntries({
+                    params: {
+                        organization: organizationId,
+                    },
+                    queries: {
+                        ...getFilterAttributes(),
+                        format: format,
+                    },
+                }),
+            'Export successful',
+            'Export failed'
+        );
+        window.open(response.download_url, '_self')?.focus();
+    }
+}
 </script>
 
 <template>
@@ -170,6 +203,36 @@ async function createTag(tag: string) {
                     >
                 </TabBar>
             </div>
+            <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>
+                </template>
+                <template #content>
+                    <div class="flex flex-col space-y-1 p-1.5">
+                        <SecondaryButton
+                            class="border-0 px-2"
+                            @click="downloadExport('xlsx')"
+                            >Export as Excel</SecondaryButton
+                        >
+                        <SecondaryButton
+                            class="border-0 px-2"
+                            @click="downloadExport('csv')"
+                            >Export as CSV</SecondaryButton
+                        >
+                        <SecondaryButton
+                            class="border-0 px-2"
+                            @click="downloadExport('ods')"
+                            >Export as ODS
+                        </SecondaryButton>
+                    </div>
+                </template>
+            </Dropdown>
         </MainContainer>
         <div class="p-3 w-full border-b border-default-background-separator">
             <MainContainer
diff --git a/resources/js/packages/api/src/openapi.json.client.ts b/resources/js/packages/api/src/openapi.json.client.ts
index 7e47cd66..698043b0 100644
--- a/resources/js/packages/api/src/openapi.json.client.ts
+++ b/resources/js/packages/api/src/openapi.json.client.ts
@@ -105,7 +105,7 @@ const ProjectMemberResource = z
     .passthrough();
 const ProjectMemberStoreRequest = z
     .object({
-        member_id: z.string().uuid(),
+        member_id: z.string(),
         billable_rate: z.union([z.number(), z.null()]).optional(),
     })
     .passthrough();
@@ -172,14 +172,14 @@ const TimeEntryResource = z
     .passthrough();
 const TimeEntryStoreRequest = z
     .object({
-        member_id: z.string().uuid(),
+        member_id: z.string(),
         project_id: z.union([z.string(), z.null()]).optional(),
         task_id: z.union([z.string(), z.null()]).optional(),
         start: z.string(),
         end: z.union([z.string(), z.null()]).optional(),
         billable: z.boolean(),
         description: z.union([z.string(), z.null()]).optional(),
-        tags: z.union([z.array(z.string().uuid()), z.null()]).optional(),
+        tags: z.union([z.array(z.string()), z.null()]).optional(),
     })
     .passthrough();
 const TimeEntryUpdateMultipleRequest = z
@@ -187,12 +187,12 @@ const TimeEntryUpdateMultipleRequest = z
         ids: z.array(z.string().uuid()),
         changes: z
             .object({
-                member_id: z.string().uuid(),
+                member_id: z.string(),
                 project_id: z.union([z.string(), z.null()]),
                 task_id: z.union([z.string(), z.null()]),
                 billable: z.boolean(),
                 description: z.union([z.string(), z.null()]),
-                tags: z.union([z.array(z.string().uuid()), z.null()]),
+                tags: z.union([z.array(z.string()), z.null()]),
             })
             .partial()
             .passthrough(),
@@ -200,14 +200,14 @@ const TimeEntryUpdateMultipleRequest = z
     .passthrough();
 const TimeEntryUpdateRequest = z
     .object({
-        member_id: z.string().uuid(),
+        member_id: z.string(),
         project_id: z.union([z.string(), z.null()]),
         task_id: z.union([z.string(), z.null()]),
         start: z.string(),
         end: z.union([z.string(), z.null()]),
         billable: z.boolean(),
         description: z.union([z.string(), z.null()]),
-        tags: z.union([z.array(z.string().uuid()), z.null()]),
+        tags: z.union([z.array(z.string()), z.null()]),
     })
     .partial()
     .passthrough();
@@ -370,7 +370,7 @@ const endpoints = makeApi([
             {
                 name: 'page',
                 type: 'Query',
-                schema: z.number().int().gte(1).optional(),
+                schema: z.number().int().gte(1).lte(2147483647).optional(),
             },
             {
                 name: 'archived',
@@ -1317,7 +1317,7 @@ const endpoints = makeApi([
             {
                 name: 'page',
                 type: 'Query',
-                schema: z.number().int().gte(1).optional(),
+                schema: z.number().int().gte(1).lte(2147483647).optional(),
             },
             {
                 name: 'archived',
@@ -1889,7 +1889,7 @@ const endpoints = makeApi([
             {
                 name: 'project_id',
                 type: 'Query',
-                schema: z.string().uuid().optional(),
+                schema: z.string().optional(),
             },
             {
                 name: 'done',
@@ -2118,7 +2118,7 @@ Users with the permission &#x60;time-entries:view:own&#x60; can only use this en
             {
                 name: 'member_id',
                 type: 'Query',
-                schema: z.string().uuid().optional(),
+                schema: z.string().optional(),
             },
             {
                 name: 'start',
@@ -2148,7 +2148,7 @@ Users with the permission &#x60;time-entries:view:own&#x60; can only use this en
             {
                 name: 'offset',
                 type: 'Query',
-                schema: z.number().int().gte(0).optional(),
+                schema: z.number().int().gte(0).lte(2147483647).optional(),
             },
             {
                 name: 'only_full_dates',
@@ -2158,27 +2158,27 @@ Users with the permission &#x60;time-entries:view:own&#x60; can only use this en
             {
                 name: 'member_ids',
                 type: 'Query',
-                schema: z.array(z.string().uuid()).min(1).optional(),
+                schema: z.array(z.string()).min(1).optional(),
             },
             {
                 name: 'client_ids',
                 type: 'Query',
-                schema: z.array(z.string().uuid()).min(1).optional(),
+                schema: z.array(z.string()).min(1).optional(),
             },
             {
                 name: 'project_ids',
                 type: 'Query',
-                schema: z.array(z.string().uuid()).min(1).optional(),
+                schema: z.array(z.string()).min(1).optional(),
             },
             {
                 name: 'tag_ids',
                 type: 'Query',
-                schema: z.array(z.string().uuid()).min(1).optional(),
+                schema: z.array(z.string()).min(1).optional(),
             },
             {
                 name: 'task_ids',
                 type: 'Query',
-                schema: z.array(z.string().uuid()).min(1).optional(),
+                schema: z.array(z.string()).min(1).optional(),
             },
             {
                 name: 'user_id',
@@ -2524,12 +2524,12 @@ If the group parameters are all set to &#x60;null&#x60; or are all missing, the
             {
                 name: 'member_id',
                 type: 'Query',
-                schema: z.string().uuid().optional(),
+                schema: z.string().optional(),
             },
             {
                 name: 'user_id',
                 type: 'Query',
-                schema: z.string().uuid().optional(),
+                schema: z.string().optional(),
             },
             {
                 name: 'start',
@@ -2559,27 +2559,27 @@ If the group parameters are all set to &#x60;null&#x60; or are all missing, the
             {
                 name: 'member_ids',
                 type: 'Query',
-                schema: z.array(z.string().uuid()).min(1).optional(),
+                schema: z.array(z.string()).min(1).optional(),
             },
             {
                 name: 'project_ids',
                 type: 'Query',
-                schema: z.array(z.string().uuid()).min(1).optional(),
+                schema: z.array(z.string()).min(1).optional(),
             },
             {
                 name: 'client_ids',
                 type: 'Query',
-                schema: z.array(z.string().uuid()).min(1).optional(),
+                schema: z.array(z.string()).min(1).optional(),
             },
             {
                 name: 'tag_ids',
                 type: 'Query',
-                schema: z.array(z.string().uuid()).min(1).optional(),
+                schema: z.array(z.string()).min(1).optional(),
             },
             {
                 name: 'task_ids',
                 type: 'Query',
-                schema: z.array(z.string().uuid()).min(1).optional(),
+                schema: z.array(z.string()).min(1).optional(),
             },
         ],
         response: z
@@ -2656,6 +2656,107 @@ If the group parameters are all set to &#x60;null&#x60; or are all missing, the
             },
         ],
     },
+    {
+        method: 'get',
+        path: '/v1/organizations/:organization/time-entries/export',
+        alias: 'exportTimeEntries',
+        requestFormat: 'json',
+        parameters: [
+            {
+                name: 'organization',
+                type: 'Path',
+                schema: z.string(),
+            },
+            {
+                name: 'format',
+                type: 'Query',
+                schema: z.enum(['csv', 'pdf', 'xlsx', 'ods']),
+            },
+            {
+                name: 'member_id',
+                type: 'Query',
+                schema: z.string().uuid().optional(),
+            },
+            {
+                name: 'start',
+                type: 'Query',
+                schema: start,
+            },
+            {
+                name: 'end',
+                type: 'Query',
+                schema: start,
+            },
+            {
+                name: 'active',
+                type: 'Query',
+                schema: z.enum(['true', 'false']).optional(),
+            },
+            {
+                name: 'billable',
+                type: 'Query',
+                schema: z.enum(['true', 'false']).optional(),
+            },
+            {
+                name: 'limit',
+                type: 'Query',
+                schema: z.number().int().gte(1).lte(500).optional(),
+            },
+            {
+                name: 'only_full_dates',
+                type: 'Query',
+                schema: z.enum(['true', 'false']).optional(),
+            },
+            {
+                name: 'member_ids',
+                type: 'Query',
+                schema: z.array(z.string().uuid()).min(1).optional(),
+            },
+            {
+                name: 'project_ids',
+                type: 'Query',
+                schema: z.array(z.string().uuid()).min(1).optional(),
+            },
+            {
+                name: 'tag_ids',
+                type: 'Query',
+                schema: z.array(z.string().uuid()).min(1).optional(),
+            },
+            {
+                name: 'task_ids',
+                type: 'Query',
+                schema: z.array(z.string().uuid()).min(1).optional(),
+            },
+        ],
+        response: z.object({ download_url: z.string() }).passthrough(),
+        errors: [
+            {
+                status: 401,
+                description: `Unauthenticated`,
+                schema: z.object({ message: z.string() }).passthrough(),
+            },
+            {
+                status: 403,
+                description: `Authorization error`,
+                schema: z.object({ message: z.string() }).passthrough(),
+            },
+            {
+                status: 404,
+                description: `Not found`,
+                schema: z.object({ message: z.string() }).passthrough(),
+            },
+            {
+                status: 422,
+                description: `Validation error`,
+                schema: z
+                    .object({
+                        message: z.string(),
+                        errors: z.record(z.array(z.string())),
+                    })
+                    .passthrough(),
+            },
+        ],
+    },
     {
         method: 'get',
         path: '/v1/users/me',