add time overview page

This commit is contained in:
Gregor Vostrak
2024-03-26 18:19:08 +01:00
parent ab9a1d2fab
commit 26fef8b9f7
52 changed files with 2463 additions and 972 deletions

View File

@@ -5,28 +5,9 @@ import RecentlyTrackedTasksCard from '@/Components/Dashboard/RecentlyTrackedTask
import LastSevenDaysCard from '@/Components/Dashboard/LastSevenDaysCard.vue';
import TeamActivityCard from '@/Components/Dashboard/TeamActivityCard.vue';
import ThisWeekOverview from '@/Components/Dashboard/ThisWeekOverview.vue';
import { usePage } from '@inertiajs/vue3';
import type { Organization, User } from '@/types/models';
import { onMounted } from 'vue';
import { useProjectsStore } from '@/utils/useProjects';
import ActivityGraphCard from '@/Components/Dashboard/ActivityGraphCard.vue';
import MainContainer from '@/Pages/MainContainer.vue';
const page = usePage<{
auth: {
user: User & {
all_teams: Organization[];
};
};
}>();
onMounted(async () => {
if (page.props.auth.user.current_team_id) {
await useProjectsStore().fetchProjects(
page.props.auth.user.current_team_id
);
}
});
const props = defineProps<{
latestTasks: {
id: string;
@@ -73,7 +54,7 @@ const props = defineProps<{
<TimeTracker></TimeTracker>
</MainContainer>
<MainContainer
class="grid gap-x-6 xl:gap-x-8 grid-cols-4 pt-5 pb-6 border-b border-default-background-seperator items-stretch">
class="grid gap-x-6 grid-cols-2 xl:grid-cols-4 pt-5 pb-6 border-b border-default-background-seperator items-stretch">
<RecentlyTrackedTasksCard
:latestTasks="props.latestTasks"></RecentlyTrackedTasksCard>
<LastSevenDaysCard

View File

@@ -1,7 +1,7 @@
<script setup lang="ts"></script>
<template>
<div class="sm:px-6 lg:px-8 xl:px-10 2xl:px-12 mx-auto">
<div class="sm:px-6 lg:px-8 3xl:px-12 mx-auto">
<slot></slot>
</div>
</template>

View File

@@ -0,0 +1,47 @@
<script setup lang="ts">
import AppLayout from '@/Layouts/AppLayout.vue';
import TimeTracker from '@/Components/TimeTracker.vue';
import { computed, onMounted } from 'vue';
import MainContainer from '@/Pages/MainContainer.vue';
import { useTimeEntriesStore } from '@/utils/useTimeEntries';
import { storeToRefs } from 'pinia';
import dayjs from 'dayjs';
import type { TimeEntry } from '@/utils/api';
import TimeEntryRowHeading from '@/Components/Common/TimeEntry/TimeEntryRowHeading.vue';
import TimeEntryRow from '@/Components/Common/TimeEntry/TimeEntryRow.vue';
const timeEntriesStore = useTimeEntriesStore();
const { timeEntries } = storeToRefs(timeEntriesStore);
onMounted(async () => {
await timeEntriesStore.fetchTimeEntries();
});
const groupedTimeEntries = computed(() => {
const groupedEntries: Record<string, TimeEntry[]> = {};
for (const entry of timeEntries.value) {
const oldEntries =
groupedEntries[dayjs(entry.start).utc().format('YYYY-MM-DD')];
const newEntries = [...(oldEntries ?? []), entry];
groupedEntries[dayjs(entry.start).utc().format('YYYY-MM-DD')] =
newEntries;
}
return groupedEntries;
});
</script>
<template>
<AppLayout title="Dashboard" data-testid="dashboard_view">
<MainContainer
class="py-8 border-b border-default-background-seperator">
<TimeTracker></TimeTracker>
</MainContainer>
<div v-for="(value, key) in groupedTimeEntries" :key="key">
<TimeEntryRowHeading :date="key"></TimeEntryRowHeading>
<TimeEntryRow
:key="entry.id"
v-for="entry in value"
:time-entry="entry"></TimeEntryRow>
</div>
</AppLayout>
</template>