add endless scrolling to time overview page

This commit is contained in:
Gregor Vostrak
2024-03-27 14:59:22 +01:00
parent 57ff657199
commit a8b81fe298
3 changed files with 84 additions and 4 deletions

View File

@@ -3,10 +3,13 @@ import { getCurrentOrganizationId } from '@/utils/useUser';
import { api } from '../../../openapi.json.client';
import { reactive, ref } from 'vue';
import type { TimeEntry } from '@/utils/api';
import dayjs from 'dayjs';
export const useTimeEntriesStore = defineStore('timeEntries', () => {
const timeEntries = ref<TimeEntry[]>(reactive([]));
const allTimeEntriesLoaded = ref(false);
async function fetchTimeEntries() {
const organizationId = getCurrentOrganizationId();
if (organizationId) {
@@ -14,11 +17,40 @@ export const useTimeEntriesStore = defineStore('timeEntries', () => {
params: {
organization: organizationId,
},
queries: {
only_full_dates: true,
},
});
timeEntries.value = timeEntriesResponse.data;
}
}
async function fetchMoreTimeEntries() {
const organizationId = getCurrentOrganizationId();
if (organizationId) {
const latestTimeEntry =
timeEntries.value[timeEntries.value.length - 1];
dayjs(latestTimeEntry.start).utc().format('YYYY-MM-DD');
const timeEntriesResponse = await api.getTimeEntries({
params: {
organization: organizationId,
},
queries: {
only_full_dates: true,
before: dayjs(latestTimeEntry.start).utc().format(),
},
});
if (timeEntriesResponse.data.length > 0) {
timeEntries.value = timeEntries.value.concat(
timeEntriesResponse.data
);
} else {
allTimeEntriesLoaded.value = true;
}
}
}
async function updateTimeEntry(timeEntry: TimeEntry) {
const organizationId = getCurrentOrganizationId();
if (organizationId) {
@@ -65,5 +97,7 @@ export const useTimeEntriesStore = defineStore('timeEntries', () => {
updateTimeEntry,
createTimeEntry,
deleteTimeEntry,
fetchMoreTimeEntries,
allTimeEntriesLoaded,
};
});