add empty state for time page

This commit is contained in:
Gregor Vostrak
2024-04-15 22:29:58 +02:00
parent 5a359583eb
commit c30763d718
3 changed files with 14 additions and 4 deletions

View File

@@ -62,3 +62,5 @@ test('test that error shows if no role is selected', async ({ page }) => {
'The role field is required.'
);
});
// TODO: Add Test for import

View File

@@ -6,7 +6,7 @@ import { ref } from 'vue';
import { useNotificationsStore } from '@/utils/notification';
import { api } from '../../../../../openapi.json.client';
import InputLabel from '@/Components/InputLabel.vue';
import { PhotoIcon } from '@heroicons/vue/24/solid';
import { DocumentIcon } from '@heroicons/vue/24/solid';
import { getCurrentOrganizationId } from '@/utils/useUser';
defineProps<{
@@ -111,8 +111,8 @@ const importType = ref<ImportType | null>(null);
<div
class="mt-2 flex justify-center rounded-lg border border-dashed border-white/30 px-6 py-10">
<div class="text-center">
<PhotoIcon
class="mx-auto h-12 w-12 text-gray-500"
<DocumentIcon
class="mx-auto h-8 w-8 text-muted"
aria-hidden="true" />
<div class="mt-4 flex text-sm leading-6 text-muted">

View File

@@ -10,6 +10,7 @@ import type { TimeEntry } from '@/utils/api';
import TimeEntryRowHeading from '@/Components/Common/TimeEntry/TimeEntryRowHeading.vue';
import TimeEntryRow from '@/Components/Common/TimeEntry/TimeEntryRow.vue';
import { useElementVisibility } from '@vueuse/core';
import { ClockIcon } from '@heroicons/vue/20/solid';
const timeEntriesStore = useTimeEntriesStore();
const { timeEntries, allTimeEntriesLoaded } = storeToRefs(timeEntriesStore);
@@ -49,7 +50,7 @@ const groupedTimeEntries = computed(() => {
<template>
<AppLayout title="Dashboard" data-testid="time_view">
<MainContainer
class="py-4 sm:py-8 border-b border-default-background-separator">
class="pt-5 sm:pt-8 pb-4 sm:pb-6 border-b border-default-background-separator">
<TimeTracker></TimeTracker>
</MainContainer>
<div v-for="(value, key) in groupedTimeEntries" :key="key">
@@ -59,6 +60,13 @@ const groupedTimeEntries = computed(() => {
v-for="entry in value"
:time-entry="entry"></TimeEntryRow>
</div>
<div
v-if="Object.keys(groupedTimeEntries).length === 0"
class="text-center pt-12">
<ClockIcon class="w-8 text-icon-default inline pb-2"></ClockIcon>
<h3 class="text-white font-semibold">No time entries found</h3>
<p class="pb-5">Create your first time entry now!</p>
</div>
<div ref="loadMoreContainer">
<div
v-if="loading && !allTimeEntriesLoaded"