mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-08 08:12:17 +01:00
58d7b33366
[Added] - Introduced a tag filter feature allowing users to specify whether tags should be included or excluded in time entry filters. This supports 'contains' and 'not_contains' modes.
476 lines
20 KiB
Vue
476 lines
20 KiB
Vue
<script setup lang="ts">
|
|
import MainContainer from '@/packages/ui/src/MainContainer.vue';
|
|
import AppLayout from '@/Layouts/AppLayout.vue';
|
|
import PageTitle from '@/Components/Common/PageTitle.vue';
|
|
import {
|
|
ChartBarIcon,
|
|
ChevronLeftIcon,
|
|
ChevronDoubleLeftIcon,
|
|
ChevronRightIcon,
|
|
ChevronDoubleRightIcon,
|
|
ClockIcon,
|
|
EllipsisVerticalIcon,
|
|
ArrowDownTrayIcon,
|
|
LockClosedIcon,
|
|
} from '@heroicons/vue/20/solid';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@/packages/ui/src';
|
|
import { SecondaryButton } from '@/packages/ui/src';
|
|
import { computed, onMounted, ref, watch } from 'vue';
|
|
import { getDayJsInstance, getLocalizedDayJs } from '@/packages/ui/src/utils/time';
|
|
import { storeToRefs } from 'pinia';
|
|
import {
|
|
api,
|
|
type Client,
|
|
type CreateClientBody,
|
|
type CreateProjectBody,
|
|
type Project,
|
|
type TimeEntry,
|
|
} from '@/packages/api/src';
|
|
import { useTagsQuery } from '@/utils/useTagsQuery';
|
|
import { useTagsStore } from '@/utils/useTags';
|
|
import { useSessionStorage } from '@vueuse/core';
|
|
import TimeEntryRow from '@/packages/ui/src/TimeEntry/TimeEntryRow.vue';
|
|
import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
|
|
import { useProjectsQuery } from '@/utils/useProjectsQuery';
|
|
import { useProjectsStore } from '@/utils/useProjects';
|
|
import { useTasksQuery } from '@/utils/useTasksQuery';
|
|
import { useClientsQuery } from '@/utils/useClientsQuery';
|
|
import { useClientsStore } from '@/utils/useClients';
|
|
import { getOrganizationCurrencyString } from '@/utils/money';
|
|
import { useMembersQuery } from '@/utils/useMembersQuery';
|
|
import {
|
|
PaginationEllipsis,
|
|
PaginationFirst,
|
|
PaginationLast,
|
|
PaginationList,
|
|
PaginationListItem,
|
|
PaginationNext,
|
|
PaginationPrev,
|
|
PaginationRoot,
|
|
} from 'radix-vue';
|
|
import { useQueryClient } from '@tanstack/vue-query';
|
|
import { getCurrentOrganizationId, getCurrentMembershipId } from '@/utils/useUser';
|
|
import ReportingTabNavbar from '@/Components/Common/Reporting/ReportingTabNavbar.vue';
|
|
import UpgradeModal from '@/Components/Common/UpgradeModal.vue';
|
|
import type { ExportFormat } from '@/types/reporting';
|
|
import { useNotificationsStore } from '@/utils/notification';
|
|
import TimeEntryMassActionRow from '@/packages/ui/src/TimeEntry/TimeEntryMassActionRow.vue';
|
|
import { isAllowedToPerformPremiumAction } from '@/utils/billing';
|
|
import { canCreateProjects, canViewAllTimeEntries } from '@/utils/permissions';
|
|
import ReportingExportModal from '@/Components/Common/Reporting/ReportingExportModal.vue';
|
|
import ReportingFilterBar from '@/Components/Common/Reporting/ReportingFilterBar.vue';
|
|
import { useTimeEntriesReportQuery } from '@/utils/useTimeEntriesReportQuery';
|
|
import { useTimeEntriesMutations } from '@/utils/useTimeEntriesMutations';
|
|
import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
|
|
import type { TagFilter } from '@/types/reporting';
|
|
|
|
// TimeEntryRoundingType is now defined in ReportingRoundingControls component
|
|
type TimeEntryRoundingType = 'up' | 'down' | 'nearest';
|
|
|
|
const startDate = useSessionStorage<string>(
|
|
'reporting-start-date',
|
|
getLocalizedDayJs(getDayJsInstance()().format()).subtract(14, 'd').format()
|
|
);
|
|
const endDate = useSessionStorage<string>(
|
|
'reporting-end-date',
|
|
getLocalizedDayJs(getDayJsInstance()().format()).format()
|
|
);
|
|
const selectedTags = ref<string[]>([]);
|
|
const selectedProjects = ref<string[]>([]);
|
|
const selectedMembers = ref<string[]>([]);
|
|
const selectedTasks = ref<string[]>([]);
|
|
const selectedClients = ref<string[]>([]);
|
|
const tagFilter = ref<TagFilter>('contains');
|
|
const billable = ref<'true' | 'false' | null>(null);
|
|
const roundingEnabled = ref<boolean>(false);
|
|
const roundingType = ref<TimeEntryRoundingType>('nearest');
|
|
const roundingMinutes = ref<number>(15);
|
|
|
|
const { members } = useMembersQuery();
|
|
const { organization } = useOrganizationQuery(getCurrentOrganizationId()!);
|
|
const pageLimit = 15;
|
|
|
|
// Watch rounding enabled state to trigger updates
|
|
watch(roundingEnabled, () => {
|
|
updateFilteredTimeEntries();
|
|
});
|
|
const currentPage = ref(1);
|
|
|
|
function getFilterAttributes() {
|
|
const defaultParams = {
|
|
start: getLocalizedDayJs(startDate.value).startOf('day').utc().format(),
|
|
end: getLocalizedDayJs(endDate.value).endOf('day').utc().format(),
|
|
active: 'false' as 'true' | 'false',
|
|
limit: pageLimit,
|
|
offset: currentPage.value * pageLimit - pageLimit,
|
|
};
|
|
const params = {
|
|
...defaultParams,
|
|
member_id: !canViewAllTimeEntries() ? getCurrentMembershipId() : undefined,
|
|
member_ids: selectedMembers.value.length > 0 ? selectedMembers.value : undefined,
|
|
project_ids: selectedProjects.value.length > 0 ? selectedProjects.value : undefined,
|
|
task_ids: selectedTasks.value.length > 0 ? selectedTasks.value : undefined,
|
|
client_ids: selectedClients.value.length > 0 ? selectedClients.value : undefined,
|
|
tag_ids: selectedTags.value.length > 0 ? selectedTags.value : undefined,
|
|
tag_filter: selectedTags.value.length > 0 ? tagFilter.value : undefined,
|
|
billable: billable.value !== null ? billable.value : undefined,
|
|
rounding_type: roundingEnabled.value ? roundingType.value : undefined,
|
|
rounding_minutes: roundingEnabled.value ? roundingMinutes.value : undefined,
|
|
};
|
|
return params;
|
|
}
|
|
|
|
const currentTimeEntryStore = useCurrentTimeEntryStore();
|
|
const { currentTimeEntry } = storeToRefs(currentTimeEntryStore);
|
|
const { setActiveState, startLiveTimer } = currentTimeEntryStore;
|
|
const { handleApiRequestNotifications } = useNotificationsStore();
|
|
|
|
const {
|
|
createTimeEntry,
|
|
updateTimeEntry,
|
|
updateTimeEntries: updateTimeEntriesMutation,
|
|
deleteTimeEntries: deleteTimeEntriesMutation,
|
|
} = useTimeEntriesMutations();
|
|
|
|
async function updateTimeEntries(
|
|
ids: string[],
|
|
changes: Parameters<typeof updateTimeEntriesMutation>[0]['changes']
|
|
) {
|
|
await updateTimeEntriesMutation({ ids, changes });
|
|
}
|
|
|
|
const { tags } = useTagsQuery();
|
|
|
|
const filterParams = computed(() => getFilterAttributes());
|
|
const { data: timeEntryResponse } = useTimeEntriesReportQuery(filterParams);
|
|
|
|
const totalPages = computed(() => {
|
|
return timeEntryResponse?.value?.meta?.total ?? 1;
|
|
});
|
|
|
|
async function deleteTimeEntries(timeEntries: TimeEntry[]) {
|
|
await deleteTimeEntriesMutation(timeEntries);
|
|
selectedTimeEntries.value = [];
|
|
await updateFilteredTimeEntries();
|
|
}
|
|
|
|
const timeEntries = computed(() => {
|
|
return timeEntryResponse?.value?.data || [];
|
|
});
|
|
|
|
onMounted(async () => {
|
|
await updateFilteredTimeEntries();
|
|
});
|
|
|
|
const { projects } = useProjectsQuery();
|
|
const { tasks } = useTasksQuery();
|
|
const { clients } = useClientsQuery();
|
|
|
|
const selectedTimeEntries = ref<TimeEntry[]>([]);
|
|
|
|
const showExportModal = ref(false);
|
|
const exportUrl = ref<string | null>(null);
|
|
const showPremiumModal = ref(false);
|
|
const exportLoading = ref(false);
|
|
|
|
function triggerExport(format: ExportFormat) {
|
|
if (format === 'pdf' && !isAllowedToPerformPremiumAction()) {
|
|
showPremiumModal.value = true;
|
|
return;
|
|
}
|
|
exportLoading.value = true;
|
|
downloadExport(format).finally(() => {
|
|
exportLoading.value = false;
|
|
});
|
|
}
|
|
|
|
async function createTag(name: string) {
|
|
return await useTagsStore().createTag(name);
|
|
}
|
|
|
|
async function createProject(project: CreateProjectBody): Promise<Project | undefined> {
|
|
return await useProjectsStore().createProject(project);
|
|
}
|
|
|
|
async function createClient(body: CreateClientBody): Promise<Client | undefined> {
|
|
return await useClientsStore().createClient(body);
|
|
}
|
|
|
|
async function startTimeEntryFromExisting(entry: TimeEntry) {
|
|
if (currentTimeEntry.value.id) {
|
|
await setActiveState(false);
|
|
}
|
|
await createTimeEntry({
|
|
project_id: entry.project_id,
|
|
task_id: entry.task_id,
|
|
start: getDayJsInstance().utc().format(),
|
|
end: null,
|
|
billable: entry.billable,
|
|
description: entry.description,
|
|
});
|
|
startLiveTimer();
|
|
updateFilteredTimeEntries();
|
|
useCurrentTimeEntryStore().fetchCurrentTimeEntry();
|
|
}
|
|
const queryClient = useQueryClient();
|
|
async function updateFilteredTimeEntries() {
|
|
await queryClient.invalidateQueries({
|
|
queryKey: ['timeEntries', 'detailed-report'],
|
|
});
|
|
}
|
|
watch(currentPage, () => {
|
|
updateFilteredTimeEntries();
|
|
});
|
|
function deleteSelected() {
|
|
deleteTimeEntries(selectedTimeEntries.value);
|
|
}
|
|
|
|
async function clearSelectionAndState() {
|
|
selectedTimeEntries.value = [];
|
|
await updateFilteredTimeEntries();
|
|
}
|
|
async function downloadExport(format: ExportFormat) {
|
|
const organizationId = getCurrentOrganizationId();
|
|
if (organizationId) {
|
|
const response = await handleApiRequestNotifications(
|
|
() =>
|
|
api.exportTimeEntries({
|
|
params: {
|
|
organization: organizationId,
|
|
},
|
|
queries: {
|
|
...getFilterAttributes(),
|
|
format: format,
|
|
},
|
|
}),
|
|
'Export successful',
|
|
'Export failed'
|
|
);
|
|
if (response?.download_url) {
|
|
showExportModal.value = true;
|
|
exportUrl.value = response.download_url as string;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout title="Reporting" data-testid="reporting_view" class="overflow-hidden">
|
|
<ReportingExportModal
|
|
v-model:show="showExportModal"
|
|
:export-url="exportUrl"></ReportingExportModal>
|
|
<UpgradeModal v-model:show="showPremiumModal">
|
|
<strong>PDF Reports</strong> are only available in solidtime Professional.
|
|
</UpgradeModal>
|
|
<MainContainer
|
|
class="h-14 sm:h-16 border-b border-default-background-separator flex flex-wrap gap-y-3 justify-between items-center">
|
|
<div class="flex items-center space-x-3 sm:space-x-6">
|
|
<PageTitle :icon="ChartBarIcon" title="Reporting"></PageTitle>
|
|
<ReportingTabNavbar active="detailed" class="hidden sm:flex"></ReportingTabNavbar>
|
|
</div>
|
|
<div class="hidden sm:block">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<SecondaryButton :icon="ArrowDownTrayIcon" :loading="exportLoading">
|
|
Export
|
|
</SecondaryButton>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem @click="triggerExport('pdf')">
|
|
<div class="flex items-center space-x-2">
|
|
<span>Export as PDF</span>
|
|
<LockClosedIcon
|
|
v-if="!isAllowedToPerformPremiumAction()"
|
|
class="w-3.5 text-text-tertiary" />
|
|
</div>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem @click="triggerExport('xlsx')">
|
|
Export as Excel
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem @click="triggerExport('csv')">
|
|
Export as CSV
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem @click="triggerExport('ods')">
|
|
Export as ODS
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child class="sm:hidden">
|
|
<button
|
|
class="p-1.5 rounded-lg border border-border-tertiary text-text-secondary hover:text-text-primary hover:bg-secondary transition"
|
|
aria-label="More options">
|
|
<EllipsisVerticalIcon class="w-5 h-5" />
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem @click="triggerExport('pdf')">
|
|
<div class="flex items-center space-x-2">
|
|
<span>Export as PDF</span>
|
|
<LockClosedIcon
|
|
v-if="!isAllowedToPerformPremiumAction()"
|
|
class="w-3.5 text-text-tertiary" />
|
|
</div>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem @click="triggerExport('xlsx')">
|
|
Export as Excel
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem @click="triggerExport('csv')">
|
|
Export as CSV
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem @click="triggerExport('ods')">
|
|
Export as ODS
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</MainContainer>
|
|
<MainContainer class="sm:hidden py-2 border-b border-default-background-separator">
|
|
<ReportingTabNavbar active="detailed"></ReportingTabNavbar>
|
|
</MainContainer>
|
|
|
|
<ReportingFilterBar
|
|
v-model:selected-members="selectedMembers"
|
|
v-model:selected-projects="selectedProjects"
|
|
v-model:selected-tasks="selectedTasks"
|
|
v-model:selected-clients="selectedClients"
|
|
v-model:selected-tags="selectedTags"
|
|
v-model:tag-filter="tagFilter"
|
|
v-model:billable="billable"
|
|
v-model:rounding-enabled="roundingEnabled"
|
|
v-model:rounding-type="roundingType"
|
|
v-model:rounding-minutes="roundingMinutes"
|
|
v-model:start-date="startDate"
|
|
v-model:end-date="endDate"
|
|
@submit="updateFilteredTimeEntries" />
|
|
<TimeEntryMassActionRow
|
|
:selected-time-entries="selectedTimeEntries"
|
|
:can-create-project="canCreateProjects()"
|
|
:enable-estimated-time="isAllowedToPerformPremiumAction()"
|
|
:delete-selected="deleteSelected"
|
|
:all-selected="selectedTimeEntries.length === timeEntries.length"
|
|
:projects="projects"
|
|
:tasks="tasks"
|
|
:tags="tags"
|
|
:currency="getOrganizationCurrencyString()"
|
|
:clients="clients"
|
|
:organization-billable-rate="organization?.billable_rate ?? null"
|
|
class="border-b border-default-background-separator"
|
|
:update-time-entries="
|
|
(args) =>
|
|
updateTimeEntries(
|
|
selectedTimeEntries.map((timeEntry) => timeEntry.id),
|
|
args
|
|
)
|
|
"
|
|
:create-project="createProject"
|
|
:create-client="createClient"
|
|
:create-tag="createTag"
|
|
@submit="clearSelectionAndState"
|
|
@select-all="selectedTimeEntries = [...timeEntries]"
|
|
@unselect-all="selectedTimeEntries = []"></TimeEntryMassActionRow>
|
|
<div class="w-full relative @container">
|
|
<div v-for="entry in timeEntries" :key="entry.id">
|
|
<TimeEntryRow
|
|
:selected="selectedTimeEntries.some((item) => item.id === entry.id)"
|
|
:can-create-project="canCreateProjects()"
|
|
:create-client
|
|
:create-project
|
|
:enable-estimated-time="isAllowedToPerformPremiumAction()"
|
|
:projects="projects"
|
|
:tasks="tasks"
|
|
:tags="tags"
|
|
:clients
|
|
:create-tag
|
|
:update-time-entry
|
|
:on-start-stop-click="() => startTimeEntryFromExisting(entry)"
|
|
:delete-time-entry="() => deleteTimeEntries([entry])"
|
|
:currency="getOrganizationCurrencyString()"
|
|
:organization-billable-rate="organization?.billable_rate ?? null"
|
|
:duplicate-time-entry="() => createTimeEntry(entry)"
|
|
:members="members"
|
|
is-report
|
|
show-date
|
|
show-member
|
|
:time-entry="entry"
|
|
@selected="selectedTimeEntries.push(entry)"
|
|
@unselected="
|
|
selectedTimeEntries = selectedTimeEntries.filter(
|
|
(item) => item.id !== entry.id
|
|
)
|
|
"></TimeEntryRow>
|
|
</div>
|
|
<div v-if="timeEntries.length === 0">
|
|
<div class="text-center pt-12">
|
|
<ClockIcon class="w-8 text-icon-default inline pb-2"></ClockIcon>
|
|
<h3 class="text-text-primary font-semibold">No time entries found</h3>
|
|
<p class="pb-5">Adjust the filters to see more time entries!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<PaginationRoot
|
|
v-model:page="currentPage"
|
|
:total="totalPages"
|
|
:items-per-page="pageLimit"
|
|
class="flex justify-center items-center py-8"
|
|
:sibling-count="1"
|
|
show-edges>
|
|
<PaginationList v-slot="{ items }" class="flex items-center space-x-1 relative">
|
|
<div class="pr-2 flex items-center space-x-1 border-r border-border-primary mr-1">
|
|
<PaginationFirst class="navigation-item">
|
|
<ChevronDoubleLeftIcon class="w-4"> </ChevronDoubleLeftIcon>
|
|
</PaginationFirst>
|
|
<PaginationPrev class="mr-4 navigation-item">
|
|
<ChevronLeftIcon class="w-4 text-text-tertiary hover:text-text-primary">
|
|
</ChevronLeftIcon>
|
|
</PaginationPrev>
|
|
</div>
|
|
<template v-for="(page, index) in items">
|
|
<PaginationListItem
|
|
v-if="page.type === 'page'"
|
|
:key="index"
|
|
class="pagination-item"
|
|
:value="page.value">
|
|
{{ page.value }}
|
|
</PaginationListItem>
|
|
<PaginationEllipsis
|
|
v-else
|
|
:key="page.type"
|
|
:index="index"
|
|
class="PaginationEllipsis">
|
|
<div class="px-2">…</div>
|
|
</PaginationEllipsis>
|
|
</template>
|
|
<div class="!ml-2 pl-2 flex items-center space-x-1 border-l border-border-primary">
|
|
<PaginationNext class="navigation-item">
|
|
<ChevronRightIcon
|
|
class="w-4 text-text-tertiary hover:text-text-primary"></ChevronRightIcon>
|
|
</PaginationNext>
|
|
<PaginationLast class="navigation-item">
|
|
<ChevronDoubleRightIcon
|
|
class="w-4 text-text-tertiary hover:text-text-primary"></ChevronDoubleRightIcon>
|
|
</PaginationLast>
|
|
</div>
|
|
</PaginationList>
|
|
</PaginationRoot>
|
|
</AppLayout>
|
|
</template>
|
|
<style lang="postcss">
|
|
.navigation-item {
|
|
@apply bg-quaternary h-8 w-8 flex items-center justify-center rounded border border-border-primary text-text-tertiary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-ring;
|
|
}
|
|
|
|
.pagination-item {
|
|
@apply bg-secondary h-8 w-8 flex items-center justify-center rounded border border-border-tertiary text-text-secondary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-ring;
|
|
}
|
|
.pagination-item[data-selected] {
|
|
@apply text-text-primary bg-accent-300/10 border border-accent-300/20 rounded-md font-medium hover:bg-accent-300/20 active:bg-accent-300/20 outline-0 focus-visible:ring-2 focus:ring-ring transition ease-in-out duration-150;
|
|
}
|
|
</style>
|