adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-16 20:22:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

change dashboard ui to use api instead of inertia props

Browse Source
This commit is contained in:
Gregor Vostrak
2025-03-18 12:39:58 +01:00
parent 919399e828
commit 9070f6cd7e
14 changed files with 915 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
resources/js/Pages/Dashboard.vue
View File

@@ -1,100 +1,51 @@
<script setup lang="ts">
import AppLayout from '@/Layouts/AppLayout.vue';
import TimeTracker from '@/Components/TimeTracker.vue';
import RecentlyTrackedTasksCard from '@/Components/Dashboard/RecentlyTrackedTasksCard.vue';
import LastSevenDaysCard from '@/Components/Dashboard/LastSevenDaysCard.vue';
import TeamActivityCard from '@/Components/Dashboard/TeamActivityCard.vue';
import ThisWeekOverview from '@/Components/Dashboard/ThisWeekOverview.vue';
import ActivityGraphCard from '@/Components/Dashboard/ActivityGraphCard.vue';
import MainContainer from '@/packages/ui/src/MainContainer.vue';
import { canViewMembers } from '@/utils/permissions';
import { router } from '@inertiajs/vue3';
import AppLayout from "@/Layouts/AppLayout.vue";
import TimeTracker from "@/Components/TimeTracker.vue";
import RecentlyTrackedTasksCard from "@/Components/Dashboard/RecentlyTrackedTasksCard.vue";
import LastSevenDaysCard from "@/Components/Dashboard/LastSevenDaysCard.vue";
import TeamActivityCard from "@/Components/Dashboard/TeamActivityCard.vue";
import ThisWeekOverview from "@/Components/Dashboard/ThisWeekOverview.vue";
import ActivityGraphCard from "@/Components/Dashboard/ActivityGraphCard.vue";
import MainContainer from "@/packages/ui/src/MainContainer.vue";
import { canViewMembers } from "@/utils/permissions";
import { useQueryClient } from "@tanstack/vue-query";
const props = defineProps<{
latestTasks: {
id: string;
name: string;
project_name: string;
project_id: string;
}[];
latestTeamActivity: {
user_id: string;
name: string;
description: string;
time_entry_id: string;
task_id: string;
status: boolean;
}[];
lastSevenDays: {
date: string;
duration: number; // Total duration in seconds
history: number[]; // Array representing the duration in seconds of the 3h windows for the day
}[];
dailyTrackedHours: { duration: number; date: string }[];
weeklyProjectOverview: {
value: number;
name: string;
color: string;
}[];
totalWeeklyTime: number;
totalWeeklyBillableTime: number;
totalWeeklyBillableAmount: {
value: number;
currency: string;
};
weeklyHistory: {
date: string;
duration: number;
}[];
}>();
const queryClient = useQueryClient();
const refreshDashboardData = () => {
// Invalidate all dashboard queries to trigger refetching
queryClient.invalidateQueries({ queryKey: ["latestTasks"] });
queryClient.invalidateQueries({ queryKey: ["lastSevenDays"] });
queryClient.invalidateQueries({ queryKey: ["dailyTrackedHours"] });
queryClient.invalidateQueries({ queryKey: ["latestTeamActivity"] });
queryClient.invalidateQueries({ queryKey: ["weeklyProjectOverview"] });
queryClient.invalidateQueries({ queryKey: ["totalWeeklyTime"] });
queryClient.invalidateQueries({ queryKey: ["totalWeeklyBillableTime"] });
queryClient.invalidateQueries({ queryKey: ["totalWeeklyBillableAmount"] });
queryClient.invalidateQueries({ queryKey: ["weeklyHistory"] });
};
function refreshDashboardData() {
router.reload({
only: [
'latestTasks',
'latestTeamActivity',
'lastSevenDays',
'dailyTrackedHours',
'weeklyProjectOverview',
'totalWeeklyTime',
'totalWeeklyBillableTime',
'totalWeeklyBillableAmount',
'weeklyHistory',
],
});
}
</script>
<template>
<AppLayout title="Dashboard" data-testid="dashboard_view">
<MainContainer
class="pt-5 sm:pt-8 pb-4 sm:pb-6 border-b border-default-background-separator">
<TimeTracker @change="refreshDashboardData"></TimeTracker>
</MainContainer>
<MainContainer
class="grid gap-5 sm:gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 pt-3 sm:pt-5 pb-4 sm:pb-6 border-b border-default-background-separator items-stretch">
<RecentlyTrackedTasksCard
:latest-tasks="props.latestTasks"></RecentlyTrackedTasksCard>
<LastSevenDaysCard
:last7-days="props.lastSevenDays"></LastSevenDaysCard>
<ActivityGraphCard
:daily-hours-tracked="
props.dailyTrackedHours
"></ActivityGraphCard>
<TeamActivityCard
v-if="canViewMembers()"
class="flex lg:hidden xl:flex"
:latest-team-activity="
props.latestTeamActivity
"></TeamActivityCard>
</MainContainer>
<MainContainer class="py-5">
<ThisWeekOverview
:weekly-project-overview="props.weeklyProjectOverview"
:total-weekly-billable-amount="props.totalWeeklyBillableAmount"
:total-weekly-billable-time="props.totalWeeklyBillableTime"
:total-weekly-time="props.totalWeeklyTime"
:weekly-history="props.weeklyHistory"></ThisWeekOverview>
</MainContainer>
<MainContainer
class="pt-5 sm:pt-8 pb-4 sm:pb-6 border-b border-default-background-separator">
<TimeTracker @change="refreshDashboardData"></TimeTracker>
</MainContainer>
<MainContainer
class="grid gap-5 sm:gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 pt-3 sm:pt-5 pb-4 sm:pb-6 border-b border-default-background-separator items-stretch">
<RecentlyTrackedTasksCard></RecentlyTrackedTasksCard>
<LastSevenDaysCard></LastSevenDaysCard>
<ActivityGraphCard></ActivityGraphCard>
<TeamActivityCard
v-if="canViewMembers()"
class="flex lg:hidden xl:flex">
</TeamActivityCard>
</MainContainer>
<MainContainer class="py-5">
<ThisWeekOverview></ThisWeekOverview>
</MainContainer>
</AppLayout>
</template>