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

add aggregation/grouping of time entries with same attributes in time view

Browse Source
This commit is contained in:
Gregor Vostrak
2024-05-16 13:08:10 +02:00
parent 4edf282083
commit e2c6026b47
15 changed files with 355 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@@ -13,7 +13,7 @@
"@vue/eslint-config-prettier": "^9.0.0",
"@vue/eslint-config-typescript": "^13.0.0",
"@vueuse/core": "^10.9.0",
"dayjs": "^1.11.10",
"dayjs": "^1.11.11",
"echarts": "^5.5.0",
"parse-duration": "^1.1.0",
"pinia": "^2.1.7",
@@ -2549,9 +2549,9 @@
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
},
"node_modules/dayjs": {
"version": "1.11.10",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
"version": "1.11.11",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.11.tgz",
"integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg=="
},
"node_modules/de-indent": {
"version": "1.0.2",

2
package.json
View File

@@ -41,7 +41,7 @@
"@vue/eslint-config-prettier": "^9.0.0",
"@vue/eslint-config-typescript": "^13.0.0",
"@vueuse/core": "^10.9.0",
"dayjs": "^1.11.10",
"dayjs": "^1.11.11",
"echarts": "^5.5.0",
"parse-duration": "^1.1.0",
"pinia": "^2.1.7",

4
resources/js/Components/Common/Member/MemberTableRow.vue
View File

@@ -1,7 +1,6 @@
<script setup lang="ts">
import type { Member } from '@/utils/api';
import { CheckCircleIcon, UserCircleIcon } from '@heroicons/vue/20/solid';
import { useClientsStore } from '@/utils/useClients';
import MemberMoreOptionsDropdown from '@/Components/Common/Member/MemberMoreOptionsDropdown.vue';
import TableRow from '@/Components/TableRow.vue';
import { capitalizeFirstLetter } from '../../../utils/format';
@@ -10,13 +9,14 @@ import { api } from '../../../../../openapi.json.client';
import { getCurrentOrganizationId } from '@/utils/useUser';
import { useNotificationsStore } from '@/utils/notification';
import { canInvitePlaceholderMembers } from '@/utils/permissions';
import { useMembersStore } from '@/utils/useMembers';
const props = defineProps<{
member: Member;
}>();
function removeMember() {
useClientsStore().deleteClient(props.member.id);
useMembersStore().removeMember(props.member.id);
}
async function invitePlaceholder(id: string) {

195
resources/js/Components/Common/TimeEntry/TimeEntryAggregateRow.vue Normal file
View File

@@ -0,0 +1,195 @@
<script setup lang="ts">
import MainContainer from '@/Pages/MainContainer.vue';
import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
import type { TimeEntry } from '@/utils/api';
import { storeToRefs } from 'pinia';
import TimeEntryDescriptionInput from '@/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue';
import {
type TimeEntriesGroupedByType,
useTimeEntriesStore,
} from '@/utils/useTimeEntries';
import TimeEntryRowTagDropdown from '@/Components/Common/TimeEntry/TimeEntryRowTagDropdown.vue';
import dayjs from 'dayjs';
import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
import TimeEntryMoreOptionsDropdown from '@/Components/Common/TimeEntry/TimeEntryMoreOptionsDropdown.vue';
import TimeTrackerProjectTaskDropdown from '@/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
import BillableToggleButton from '@/Components/Common/BillableToggleButton.vue';
import { computed, ref } from 'vue';
import { twMerge } from 'tailwind-merge';
import {
formatHumanReadableDuration,
formatStartEnd,
} from '../../../utils/time';
import TimeEntryRow from '@/Components/Common/TimeEntry/TimeEntryRow.vue';
const currentTimeEntryStore = useCurrentTimeEntryStore();
const { stopTimer } = currentTimeEntryStore;
const { currentTimeEntry } = storeToRefs(currentTimeEntryStore);
const props = defineProps<{
timeEntry: TimeEntriesGroupedByType;
}>();
const { updateTimeEntry, createTimeEntry, fetchTimeEntries } =
useTimeEntriesStore();
async function onStartStopClick() {
if (props.timeEntry.start && !props.timeEntry.end) {
await updateTimeEntry({
...props.timeEntry,
end: dayjs().utc().format(),
});
} else {
if (currentTimeEntry.value.id) {
await stopTimer();
}
await createTimeEntry({
...props.timeEntry,
start: dayjs().utc().format(),
end: null,
});
}
useCurrentTimeEntryStore().fetchCurrentTimeEntry();
fetchTimeEntries();
}
function deleteTimeEntry() {
const timeEntries = props.timeEntry.timeEntries;
timeEntries.forEach((entry) => {
useTimeEntriesStore().deleteTimeEntry(entry.id);
});
fetchTimeEntries();
}
function updateTimeEntryDescription(description: string) {
const timeEntries = props.timeEntry.timeEntries;
timeEntries.forEach((entry) => {
updateTimeEntry({ ...entry, description });
entry.description = description;
});
}
function updateTimeEntryTags(tags: string[]) {
const timeEntries = props.timeEntry.timeEntries as TimeEntry[];
timeEntries.forEach((entry) => {
updateTimeEntry({ ...entry, tags });
entry.tags = tags;
});
}
function updateTimeEntryBillable(billable: boolean) {
const timeEntries = props.timeEntry.timeEntries as TimeEntry[];
timeEntries.forEach((entry) => {
updateTimeEntry({ ...entry, billable });
entry.billable = billable;
});
}
function updateProjectAndTask(projectId: string, taskId: string) {
const timeEntries = props.timeEntry.timeEntries as TimeEntry[];
timeEntries.forEach((entry) => {
updateTimeEntry({
...entry,
project_id: projectId,
task_id: taskId,
});
entry.project_id = projectId;
entry.task_id = taskId;
});
}
const expanded = ref(false);
const expandedStatusClasses = computed(() => {
if (expanded.value) {
return 'border-card-border border bg-card-background-active text-white';
}
return 'border-card-border border bg-card-background text-muted';
});
</script>
<template>
<div
class="border-b border-default-background-separator transition"
data-testid="time_entry_row">
<MainContainer>
<div class="sm:flex py-1.5 items-center justify-between group">
<div class="flex space-x-3 items-center">
<input
type="checkbox"
class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
<button
@click="expanded = !expanded"
:class="
twMerge(
expandedStatusClasses,
'font-medium w-7 h-7 rounded flex items-center transition justify-center'
)
">
<span>
{{ timeEntry?.timeEntries?.length }}
</span>
</button>
<TimeEntryDescriptionInput
@changed="updateTimeEntryDescription"
class="flex-1"
:modelValue="
timeEntry.description
"></TimeEntryDescriptionInput>
<TimeTrackerProjectTaskDropdown
:showBadgeBorder="false"
@changed="updateProjectAndTask"
:project="timeEntry.project_id"
:task="
timeEntry.task_id
"></TimeTrackerProjectTaskDropdown>
</div>
<div class="flex items-center font-medium space-x-2">
<TimeEntryRowTagDropdown
@changed="updateTimeEntryTags"
:modelValue="timeEntry.tags"></TimeEntryRowTagDropdown>
<BillableToggleButton
:modelValue="timeEntry.billable"
size="small"
@changed="
updateTimeEntryBillable
"></BillableToggleButton>
<div class="flex-1">
<button
@click="expanded = !expanded"
class="text-muted w-[110px] px-2 py-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium">
{{ formatStartEnd(timeEntry.start, timeEntry.end) }}
</button>
</div>
<button
@click="expanded = !expanded"
class="text-white w-[100px] px-3 py-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-semibold">
{{
formatHumanReadableDuration(timeEntry.duration ?? 0)
}}
</button>
<TimeTrackerStartStop
@changed="onStartStopClick"
:active="!!(timeEntry.start && !timeEntry.end)"
class="opacity-20 hidden sm:flex group-hover:opacity-100"></TimeTrackerStartStop>
<TimeEntryMoreOptionsDropdown
@delete="
deleteTimeEntry
"></TimeEntryMoreOptionsDropdown>
</div>
</div>
</MainContainer>
<div
v-if="expanded"
class="w-full border-t border-default-background-separator bg-black/15">
<TimeEntryRow
indent
:key="subEntry.id"
v-for="subEntry in timeEntry.timeEntries"
:time-entry="subEntry"></TimeEntryRow>
</div>
</div>
</template>
<style scoped></style>

6
resources/js/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue
View File

@@ -4,7 +4,9 @@ const emit = defineEmits(['changed']);
function onChange(event: Event) {
const target = event.target as HTMLInputElement;
emit('changed', target.value);
if (target.value !== value.value) {
emit('changed', target.value);
}
}
</script>
@@ -13,7 +15,7 @@ function onChange(event: Event) {
<label class="input-sizer text-sm font-medium" :data-value="value">
<input
data-testid="time_entry_description"
v-model="value"
:value="value"
@blur="onChange"
@keydown.enter="onChange"
placeholder="Add a description"

9
resources/js/Components/Common/TimeEntry/TimeEntryRangeSelector.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import Dropdown from '@/Components/Dropdown.vue';
import { defineProps, ref, watch } from 'vue';
import { formatTime } from '@/utils/time';
import { formatStartEnd } from '@/utils/time';
import TimePicker from '@/Components/Common/TimePicker.vue';
import { useFocusWithin } from '@vueuse/core';
@@ -10,13 +10,6 @@ const props = defineProps<{
end: string | null;
}>();
function formatStartEnd(start: string, end: string | null) {
if (end) {
return `${formatTime(start)} - ${formatTime(end)}`;
} else {
return `${formatTime(start)} - ...`;
}
}
const emit = defineEmits(['changed']);
const tempStart = ref(props.start);
const tempEnd = ref(props.end || null);

12
resources/js/Components/Common/TimeEntry/TimeEntryRow.vue
View File

@@ -20,6 +20,7 @@ const { currentTimeEntry } = storeToRefs(currentTimeEntryStore);
const props = defineProps<{
timeEntry: TimeEntry;
indent?: boolean;
}>();
const { updateTimeEntry, createTimeEntry, fetchTimeEntries } =
@@ -69,6 +70,10 @@ function updateTimeEntryTags(tags: string[]) {
updateTimeEntry({ ...props.timeEntry, tags });
}
function updateTimeEntryBillable(billable: boolean) {
updateTimeEntry({ ...props.timeEntry, billable });
}
function updateProjectAndTask(projectId: string, taskId: string) {
updateTimeEntry({
...props.timeEntry,
@@ -88,13 +93,13 @@ function updateProjectAndTask(projectId: string, taskId: string) {
<input
type="checkbox"
class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
<div class="w-7 h-7" v-if="indent === true"></div>
<TimeEntryDescriptionInput
@changed="updateTimeEntryDescription"
class="flex-1"
:modelValue="
timeEntry.description
"></TimeEntryDescriptionInput>
<TimeTrackerProjectTaskDropdown
:showBadgeBorder="false"
@changed="updateProjectAndTask"
@@ -111,10 +116,7 @@ function updateProjectAndTask(projectId: string, taskId: string) {
:modelValue="timeEntry.billable"
size="small"
@changed="
updateTimeEntry({
...timeEntry,
billable: $event,
})
updateTimeEntryBillable
"></BillableToggleButton>
<div class="flex-1">
<TimeEntryRangeSelector

51
resources/js/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue
View File

@@ -54,28 +54,43 @@ withDefaults(
);
const filteredProjects = computed(() => {
return projects.value.reduce((filtered: ProjectWithTasks[], project) => {
const projectNameIncludesSearchTerm = project.name
.toLowerCase()
.includes(searchValue.value?.toLowerCase()?.trim() || '');
// check if one of the project tasks
const projectTasks = tasks.value.filter((task) => {
return task.project_id === project.id;
});
const filteredTasks = projectTasks.filter((task) => {
return task.name
return projects.value.reduce(
(filtered: ProjectWithTasks[], project) => {
const projectNameIncludesSearchTerm = project.name
.toLowerCase()
.includes(searchValue.value?.toLowerCase()?.trim() || '');
});
if (projectNameIncludesSearchTerm || filteredTasks.length > 0) {
filtered.push({ project: project, tasks: filteredTasks });
}
// check if one of the project tasks
const projectTasks = tasks.value.filter((task) => {
return task.project_id === project.id;
});
return filtered;
}, []);
const filteredTasks = projectTasks.filter((task) => {
return task.name
.toLowerCase()
.includes(searchValue.value?.toLowerCase()?.trim() || '');
});
if (projectNameIncludesSearchTerm || filteredTasks.length > 0) {
filtered.push({ project: project, tasks: filteredTasks });
}
return filtered;
},
[
{
project: {
id: '',
name: 'No Project',
color: 'var(--theme-color-icon-default)',
value: '',
client_id: null,
billable_rate: null,
},
tasks: [],
},
]
);
});
async function addClientIfNoneExists() {

4
resources/js/Components/Common/TimeTrackerStartStop.vue
View File

@@ -16,11 +16,11 @@ const props = withDefaults(
);
const buttonSizeClasses = {
base: 'w-8 h-8 bg-accent-200/40 hover:scale-110 hover:bg-accent-300/70 ring-accent-200/10 focus:ring-accent-200/10 hover:ring-4',
large: 'w-8 sm:w-11 h-8 sm:h-11 ring-accent-200/10 focus:ring-accent-200/20 ring-4 sm:ring-8 hover:scale-110',
large: 'w-11 h-11 ring-accent-200/10 focus:ring-accent-200/20 ring-4 sm:ring-8 hover:scale-110',
};
const iconClass = {
base: 'w-3.5 h-3.5',
large: 'w-3.5 h-3.5 sm:w-4 sm:h-4',
large: 'w-4 h-4',
};
const buttonColorClasses = computed(() => {

10
resources/js/Components/Dropdown.vue
View File

@@ -8,18 +8,11 @@ const props = withDefaults(
defineProps<{
align: Placement;
width: string;
contentClasses?: string[];
closeOnContentClick: boolean;
}>(),
{
align: 'bottom-start',
width: '48',
contentClasses: () => [
'overflow-none',
'bg-card-background',
'border',
'border-card-border',
],
closeOnContentClick: true,
}
);
@@ -101,8 +94,7 @@ const { floatingStyles } = useFloating(reference, floating, {
leave-to-class="transform opacity-0 scale-95">
<div
v-if="open"
class="rounded-lg ring-1 relative ring-black ring-opacity-5"
:class="contentClasses">
class="rounded-lg ring-1 relative ring-black ring-opacity-5 border border-card-border overflow-none bg-card-background shadow-lg">
<slot name="content" />
</div>
</transition>

2
resources/js/Components/TimeTracker.vue
View File

@@ -194,7 +194,7 @@ function switchToTimeEntryOrganization() {
v-model="currentTimeEntry.description"
@keydown.enter="startTimerIfNotActive"
@blur="updateTimeEntry"
class="w-full rounded-l-lg py-2.5 px-3 border-b border-b-card-background-separator sm:px-4 text-sm sm:text-lg text-white focus:bg-card-background-active font-medium bg-transparent border-none placeholder-muted focus:ring-0 transition"
class="w-full rounded-l-lg py-4 sm:py-2.5 px-3 border-b border-b-card-background-separator sm:px-4 text-base sm:text-lg text-white focus:bg-card-background-active font-medium bg-transparent border-none placeholder-muted focus:ring-0 transition"
type="text" />
</div>
<div class="flex items-center justify-between pl-2">

87
resources/js/Pages/Time.vue
View File

@@ -3,17 +3,21 @@ import AppLayout from '@/Layouts/AppLayout.vue';
import TimeTracker from '@/Components/TimeTracker.vue';
import { computed, onMounted, ref, watch } from 'vue';
import MainContainer from '@/Pages/MainContainer.vue';
import { useTimeEntriesStore } from '@/utils/useTimeEntries';
import {
type TimeEntriesGroupedByType,
useTimeEntriesStore,
} from '@/utils/useTimeEntries';
import { storeToRefs } from 'pinia';
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';
import { getLocalizedDateFromTimestamp } from '@/utils/time';
import { getDayJsInstance, getLocalizedDateFromTimestamp } from '@/utils/time';
import SecondaryButton from '@/Components/SecondaryButton.vue';
import { PlusIcon } from '@heroicons/vue/16/solid';
import TimeEntryCreateModal from '@/Components/Common/TimeEntry/TimeEntryCreateModal.vue';
import TimeEntryAggregateRow from '@/Components/Common/TimeEntry/TimeEntryAggregateRow.vue';
const timeEntriesStore = useTimeEntriesStore();
const { timeEntries, allTimeEntriesLoaded } = storeToRefs(timeEntriesStore);
@@ -38,14 +42,67 @@ onMounted(async () => {
});
const groupedTimeEntries = computed(() => {
const groupedEntries: Record<string, TimeEntry[]> = {};
const groupedEntriesByDay: Record<string, TimeEntry[]> = {};
for (const entry of timeEntries.value) {
const oldEntries =
groupedEntries[getLocalizedDateFromTimestamp(entry.start)];
const newEntries = [...(oldEntries ?? []), entry];
groupedEntries[getLocalizedDateFromTimestamp(entry.start)] = newEntries;
groupedEntriesByDay[getLocalizedDateFromTimestamp(entry.start)];
groupedEntriesByDay[getLocalizedDateFromTimestamp(entry.start)] = [
...(oldEntries ?? []),
entry,
];
}
return groupedEntries;
const groupedEntriesByDayAndType: Record<
string,
TimeEntriesGroupedByType[]
> = {};
for (const dailyEntriesKey in groupedEntriesByDay) {
const dailyEntries = groupedEntriesByDay[dailyEntriesKey];
const newDailyEntries: TimeEntriesGroupedByType[] = [];
for (const entry of dailyEntries) {
// check if same entry already exists
const oldEntriesIndex = newDailyEntries.findIndex(
(e) =>
e.project_id === entry.project_id &&
e.task_id === entry.task_id &&
e.billable === entry.billable &&
e.description === entry.description
);
console.log(oldEntriesIndex);
if (oldEntriesIndex !== -1 && newDailyEntries[oldEntriesIndex]) {
newDailyEntries[oldEntriesIndex].timeEntries.push(entry);
// Add up durations for time entries of the same type
console.log(newDailyEntries[oldEntriesIndex], entry?.duration);
newDailyEntries[oldEntriesIndex].duration =
(newDailyEntries[oldEntriesIndex].duration ?? 0) +
(entry?.duration ?? 0);
// adapt start end times so they show the earliest start and latest end time
if (
getDayJsInstance()(entry.start).isBefore(
getDayJsInstance()(
newDailyEntries[oldEntriesIndex].start
)
)
) {
newDailyEntries[oldEntriesIndex].start = entry.start;
}
if (
getDayJsInstance()(entry.end).isAfter(
getDayJsInstance()(newDailyEntries[oldEntriesIndex].end)
)
) {
newDailyEntries[oldEntriesIndex].end = entry.end;
}
} else {
newDailyEntries.push({ ...entry, timeEntries: [entry] });
}
}
groupedEntriesByDayAndType[dailyEntriesKey] = newDailyEntries;
}
return groupedEntriesByDayAndType;
});
const showManualTimeEntryModal = ref(false);
</script>
@@ -66,17 +123,21 @@ const showManualTimeEntryModal = ref(false);
class="w-full text-center flex justify-center"
@click="showManualTimeEntryModal = true"
:icon="PlusIcon"
>Manual time entry</SecondaryButton
>
>Manual time entry
</SecondaryButton>
</div>
</div>
</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>
<template v-for="entry in value" :key="entry.id">
<TimeEntryAggregateRow
v-if="
'timeEntries' in entry && entry.timeEntries.length > 1
"
:time-entry="entry"></TimeEntryAggregateRow>
<TimeEntryRow v-else :time-entry="entry"></TimeEntryRow>
</template>
</div>
<div
v-if="Object.keys(groupedTimeEntries).length === 0"

8
resources/js/utils/time.ts
View File

@@ -87,3 +87,11 @@ export function formatHumanReadableDate(date: string) {
}
return dayjs(date).fromNow();
}
export function formatStartEnd(start: string, end: string | null) {
if (end) {
return `${formatTime(start)} - ${formatTime(end)}`;
} else {
return `${formatTime(start)} - ...`;
}
}

22
resources/js/utils/useMembers.ts
View File

@@ -24,9 +24,29 @@ export const useMembersStore = defineStore('members', () => {
}
}
async function removeMember(membershipId: string) {
const organization = getCurrentOrganizationId();
if (organization) {
await handleApiRequestNotifications(
api.removeMember(
{},
{
params: {
organization: organization,
membership: membershipId,
},
}
),
'Member deleted successfully',
'Failed to delete member'
);
await fetchMembers();
}
}
const members = computed<Member[]>(() => {
return membersResponse.value?.data || [];
});
return { members, fetchMembers };
return { members, fetchMembers, removeMember };
});

1
resources/js/utils/useTimeEntries.ts
View File

@@ -5,6 +5,7 @@ import { reactive, ref } from 'vue';
import type { CreateTimeEntryBody, TimeEntry } from '@/utils/api';
import dayjs from 'dayjs';
import { useNotificationsStore } from '@/utils/notification';
export type TimeEntriesGroupedByType = TimeEntry & { timeEntries: TimeEntry[] };
export const useTimeEntriesStore = defineStore('timeEntries', () => {
const timeEntries = ref<TimeEntry[]>(reactive([]));