adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-16 20:22: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

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">