add export modal to prevent firefox popup blocking behaviour

Author: Onatcer

resources/js/Components/Common/Reporting/ReportingExportModal.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import {
+    ArrowDownTrayIcon,
+    CheckCircleIcon,
+    XMarkIcon,
+} from '@heroicons/vue/20/solid';
+import { Modal, PrimaryButton } from '@/packages/ui/src';
+const props = defineProps<{
+    exportUrl: string | null;
+}>();
+
+const showExportModal = defineModel('show', { default: false });
+
+function downloadCurrentExport() {
+    if (props.exportUrl) {
+        window.open(props.exportUrl, '_blank')?.focus();
+    }
+}
+</script>
+
+<template>
+    <Modal
+        closeable
+        max-width="lg"
+        @close="showExportModal = false"
+        :show="showExportModal">
+        <button
+            class="text-text-tertiary w-6 mx-auto absolute focus-visible:outline-none focus-visible:ring-2 rounded-full focus-visible:ring-white/80 transition focus-visible:text-text-primary hover:text-text-primary top-2 right-2">
+            <XMarkIcon @click="showExportModal = false"></XMarkIcon>
+        </button>
+        <div class="text-center text-text-primary py-6">
+            <div
+                class="flex items-center font-semibold text-lg justify-center space-x-2 pb-2">
+                <CheckCircleIcon
+                    class="text-text-tertiary w-6"></CheckCircleIcon>
+                <span> Export Successful! </span>
+            </div>
+            <div class="text-center text-sm max-w-64 mx-auto">
+                <p class="pb-5">
+                    Your export is ready, you can download it with the button
+                    below.
+                </p>
+                <PrimaryButton
+                    :icon="ArrowDownTrayIcon"
+                    @click="downloadCurrentExport"
+                    >Download</PrimaryButton
+                >
+            </div>
+        </div>
+    </Modal>
+</template>
+
+<style scoped></style>

resources/js/Pages/Reporting.vue

@@ -198,15 +198,20 @@ async function downloadExport(format: ExportFormat) {
             'Export successful',
             'Export failed'
         );
+
         if (response?.download_url) {
-            window.open(response.download_url as string, '_blank')?.focus();
+            showExportModal.value = true;
+            exportUrl.value = response.download_url as string;
         }
     }
 }
 const { getNameForReportingRowEntry, emptyPlaceholder } = useReportingStore();
 import { useProjectsStore } from '@/utils/useProjects';
+import ReportingExportModal from '@/Components/Common/Reporting/ReportingExportModal.vue';
 const projectsStore = useProjectsStore();
 const { projects } = storeToRefs(projectsStore);
+const showExportModal = ref(false);
+const exportUrl = ref<string | null>(null);
 
 const groupedPieChartData = computed(() => {
     return (
@@ -274,6 +279,9 @@ const tableData = computed(() => {
         title="Reporting"
         data-testid="reporting_view"
         class="overflow-hidden">
+        <ReportingExportModal
+            v-model:show="showExportModal"
+            :exportUrl="exportUrl"></ReportingExportModal>
         <MainContainer
             class="py-3 sm:py-5 border-b border-default-background-separator flex justify-between items-center">
             <div class="flex items-center space-x-3 sm:space-x-6">

resources/js/Pages/ReportingDetailed.vue

@@ -67,6 +67,7 @@ import { useNotificationsStore } from '@/utils/notification';
 import TimeEntryMassActionRow from '@/packages/ui/src/TimeEntry/TimeEntryMassActionRow.vue';
 import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 import { canCreateProjects } from '@/utils/permissions';
+import ReportingExportModal from '@/Components/Common/Reporting/ReportingExportModal.vue';
 
 const startDate = useSessionStorage<string>(
     'reporting-start-date',
@@ -167,6 +168,9 @@ const { clients } = storeToRefs(clientStore);
 
 const selectedTimeEntries = ref<TimeEntry[]>([]);
 
+const showExportModal = ref(false);
+const exportUrl = ref<string | null>(null);
+
 async function createTag(name: string) {
     return await useTagsStore().createTag(name);
 }
@@ -234,7 +238,8 @@ async function downloadExport(format: ExportFormat) {
             'Export failed'
         );
         if (response?.download_url) {
-            window.open(response.download_url as string, '_blank')?.focus();
+            showExportModal.value = true;
+            exportUrl.value = response.download_url as string;
         }
     }
 }
@@ -245,6 +250,9 @@ async function downloadExport(format: ExportFormat) {
         title="Reporting"
         data-testid="reporting_view"
         class="overflow-hidden">
+        <ReportingExportModal
+            v-model:show="showExportModal"
+            :exportUrl="exportUrl"></ReportingExportModal>
         <MainContainer
             class="py-3 sm:py-5 border-b border-default-background-separator flex justify-between items-center">
             <div class="flex items-center space-x-3 sm:space-x-6">

resources/js/packages/ui/src/Buttons/PrimaryButton.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import type { HtmlButtonType } from '@/types/dom';
 import LoadingSpinner from '../LoadingSpinner.vue';
+import type { Component } from 'vue';
+import { twMerge } from 'tailwind-merge';
 
-withDefaults(
+const props = withDefaults(
     defineProps<{
         type: HtmlButtonType;
+        icon?: Component;
         loading: boolean;
     }>(),
     {
@@ -19,7 +22,18 @@ withDefaults(
         :type="type"
         :disabled="loading"
         class="inline-flex items-center px-2 sm:px-3 py-1 sm:py-2 bg-accent-300/10 border border-accent-300/20 rounded-md font-medium text-xs sm:text-sm text-white hover:bg-accent-300/20 active:bg-accent-300/20 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
-        <LoadingSpinner v-if="loading"></LoadingSpinner>
-        <slot />
+        <span
+            :class="
+                twMerge('flex items-center ', props.icon ? 'space-x-1.5' : '')
+            ">
+            <LoadingSpinner v-if="loading"></LoadingSpinner>
+            <component
+                v-if="props.icon && !loading"
+                :is="props.icon"
+                class="text-text-secondary w-4 -ml-0.5 mr-1"></component>
+            <span>
+                <slot />
+            </span>
+        </span>
     </button>
 </template>