refactor required time entry emits to props

This commit is contained in:
Gregor Vostrak
2024-07-16 13:51:49 +02:00
parent 1e4f0afa67
commit 99c652a61b
4 changed files with 37 additions and 46 deletions

View File

@@ -22,40 +22,37 @@ const props = defineProps<{
tasks: Task[]; tasks: Task[];
tags: Tag[]; tags: Tag[];
createTag: (name: string) => Promise<Tag | undefined>; createTag: (name: string) => Promise<Tag | undefined>;
}>(); onStartStopClick: (timeEntry: TimeEntry) => void;
updateTimeEntries: (timeEntries: TimeEntry[]) => void;
const emit = defineEmits<{ deleteTimeEntries: (timeEntries: TimeEntry[]) => void;
onStartStopClick: [timeEntry: TimeEntry];
updateTimeEntries: [timeEntries: TimeEntry[]];
deleteTimeEntries: [timeEntries: TimeEntry[]];
}>(); }>();
function updateTimeEntryDescription(description: string) { function updateTimeEntryDescription(description: string) {
const updatedTimeEntries = props.timeEntry.timeEntries.map((entry) => { const updatedTimeEntries = props.timeEntry.timeEntries.map((entry) => {
return { ...entry, description }; return { ...entry, description };
}); });
emit('updateTimeEntries', updatedTimeEntries); props.updateTimeEntries(updatedTimeEntries);
} }
function updateTimeEntryTags(tags: string[]) { function updateTimeEntryTags(tags: string[]) {
const updatedTimeEntries = props.timeEntry.timeEntries.map((entry) => { const updatedTimeEntries = props.timeEntry.timeEntries.map((entry) => {
return { ...entry, tags }; return { ...entry, tags };
}); });
emit('updateTimeEntries', updatedTimeEntries); props.updateTimeEntries(updatedTimeEntries);
} }
function updateTimeEntryBillable(billable: boolean) { function updateTimeEntryBillable(billable: boolean) {
const updatedTimeEntries = props.timeEntry.timeEntries.map((entry) => { const updatedTimeEntries = props.timeEntry.timeEntries.map((entry) => {
return { ...entry, billable }; return { ...entry, billable };
}); });
emit('updateTimeEntries', updatedTimeEntries); props.updateTimeEntries(updatedTimeEntries);
} }
function updateProjectAndTask(projectId: string, taskId: string) { function updateProjectAndTask(projectId: string, taskId: string) {
const updatedTimeEntries = props.timeEntry.timeEntries.map((entry) => { const updatedTimeEntries = props.timeEntry.timeEntries.map((entry) => {
return { ...entry, project_id: projectId, task_id: taskId }; return { ...entry, project_id: projectId, task_id: taskId };
}); });
emit('updateTimeEntries', updatedTimeEntries); props.updateTimeEntries(updatedTimeEntries);
} }
const expanded = ref(false); const expanded = ref(false);
@@ -121,12 +118,12 @@ const expanded = ref(false);
</button> </button>
<TimeTrackerStartStop <TimeTrackerStartStop
@changed="emit('onStartStopClick', timeEntry)" @changed="onStartStopClick(timeEntry)"
:active="!!(timeEntry.start && !timeEntry.end)" :active="!!(timeEntry.start && !timeEntry.end)"
class="opacity-20 hidden sm:flex group-hover:opacity-100"></TimeTrackerStartStop> class="opacity-20 hidden sm:flex group-hover:opacity-100"></TimeTrackerStartStop>
<TimeEntryMoreOptionsDropdown <TimeEntryMoreOptionsDropdown
@delete=" @delete="
emit('deleteTimeEntries', timeEntry.timeEntries) deleteTimeEntries([timeEntry])
"></TimeEntryMoreOptionsDropdown> "></TimeEntryMoreOptionsDropdown>
</div> </div>
</div> </div>
@@ -139,9 +136,9 @@ const expanded = ref(false);
:tasks="tasks" :tasks="tasks"
:tags="tags" :tags="tags"
indent indent
@updateTimeEntry="(arg) => emit('updateTimeEntries', [arg])" :updateTimeEntry="(arg) => updateTimeEntries([arg])"
@onStartStopClick="emit('onStartStopClick', subEntry)" :onStartStopClick="() => onStartStopClick(subEntry)"
@deleteTimeEntry="emit('deleteTimeEntries', [subEntry])" :deleteTimeEntry="() => deleteTimeEntries([subEntry])"
:createTag :createTag
:key="subEntry.id" :key="subEntry.id"
v-for="subEntry in timeEntry.timeEntries" v-for="subEntry in timeEntry.timeEntries"

View File

@@ -20,13 +20,10 @@ const props = defineProps<{
tasks: Task[]; tasks: Task[];
tags: Tag[]; tags: Tag[];
createTag: (name: string) => Promise<Tag | undefined>; createTag: (name: string) => Promise<Tag | undefined>;
}>(); updateTimeEntry: (entry: TimeEntry) => void;
updateTimeEntries: (entries: TimeEntry[]) => void;
const emit = defineEmits<{ deleteTimeEntries: (entries: TimeEntry[]) => void;
updateTimeEntry: [entry: TimeEntry]; createTimeEntry: (entry: Omit<CreateTimeEntryBody, 'member_id'>) => void;
updateTimeEntries: [entries: TimeEntry[]];
deleteTimeEntries: [entries: TimeEntry[]];
createTimeEntry: [entry: Omit<CreateTimeEntryBody, 'member_id'>];
}>(); }>();
const groupedTimeEntries = computed(() => { const groupedTimeEntries = computed(() => {
@@ -96,7 +93,7 @@ const groupedTimeEntries = computed(() => {
}); });
function startTimeEntryFromExisting(entry: TimeEntry) { function startTimeEntryFromExisting(entry: TimeEntry) {
emit('createTimeEntry', { props.createTimeEntry({
project_id: entry.project_id, project_id: entry.project_id,
task_id: entry.task_id, task_id: entry.task_id,
start: dayjs().utc().format(), start: dayjs().utc().format(),
@@ -115,9 +112,9 @@ function startTimeEntryFromExisting(entry: TimeEntry) {
:projects="projects" :projects="projects"
:tasks="tasks" :tasks="tasks"
:tags="tags" :tags="tags"
@onStartStopClick="startTimeEntryFromExisting(entry)" :onStartStopClick="startTimeEntryFromExisting"
@updateTimeEntries="(arg) => emit('updateTimeEntries', arg)" :updateTimeEntries
@deleteTimeEntries="(arg) => emit('deleteTimeEntries', arg)" :deleteTimeEntries
:createTag :createTag
v-if="'timeEntries' in entry && entry.timeEntries.length > 1" v-if="'timeEntries' in entry && entry.timeEntries.length > 1"
:time-entry="entry"></TimeEntryAggregateRow> :time-entry="entry"></TimeEntryAggregateRow>
@@ -126,9 +123,9 @@ function startTimeEntryFromExisting(entry: TimeEntry) {
:tasks="tasks" :tasks="tasks"
:tags="tags" :tags="tags"
:createTag :createTag
@updateTimeEntry="(arg) => emit('updateTimeEntry', arg)" :updateTimeEntry
@onStartStopClick="startTimeEntryFromExisting(entry)" :onStartStopClick="() => startTimeEntryFromExisting(entry)"
@deleteTimeEntry="() => emit('deleteTimeEntries', [entry])" :deleteTimeEntry="() => deleteTimeEntries([entry])"
v-else v-else
:time-entry="entry"></TimeEntryRow> :time-entry="entry"></TimeEntryRow>
</template> </template>

View File

@@ -17,32 +17,29 @@ const props = defineProps<{
tasks: Task[]; tasks: Task[];
tags: Tag[]; tags: Tag[];
createTag: (name: string) => Promise<Tag | undefined>; createTag: (name: string) => Promise<Tag | undefined>;
}>(); onStartStopClick: () => void;
deleteTimeEntry: () => void;
const emit = defineEmits<{ updateTimeEntry: (timeEntry: TimeEntry) => void;
onStartStopClick: [];
deleteTimeEntry: [];
updateTimeEntry: [timeEntry: TimeEntry];
}>(); }>();
function updateTimeEntryDescription(description: string) { function updateTimeEntryDescription(description: string) {
emit('updateTimeEntry', { ...props.timeEntry, description }); props.updateTimeEntry({ ...props.timeEntry, description });
} }
function updateTimeEntryTags(tags: string[]) { function updateTimeEntryTags(tags: string[]) {
emit('updateTimeEntry', { ...props.timeEntry, tags }); props.updateTimeEntry({ ...props.timeEntry, tags });
} }
function updateTimeEntryBillable(billable: boolean) { function updateTimeEntryBillable(billable: boolean) {
emit('updateTimeEntry', { ...props.timeEntry, billable }); props.updateTimeEntry({ ...props.timeEntry, billable });
} }
function updateStartEndTime(start: string, end: string | null) { function updateStartEndTime(start: string, end: string | null) {
emit('updateTimeEntry', { ...props.timeEntry, start, end }); props.updateTimeEntry({ ...props.timeEntry, start, end });
} }
function updateProjectAndTask(projectId: string, taskId: string) { function updateProjectAndTask(projectId: string, taskId: string) {
emit('updateTimeEntry', { props.updateTimeEntry({
...props.timeEntry, ...props.timeEntry,
project_id: projectId, project_id: projectId,
task_id: taskId, task_id: taskId,
@@ -106,12 +103,12 @@ function updateProjectAndTask(projectId: string, taskId: string) {
updateStartEndTime updateStartEndTime
"></TimeEntryRowDurationInput> "></TimeEntryRowDurationInput>
<TimeTrackerStartStop <TimeTrackerStartStop
@changed="emit('onStartStopClick')" @changed="onStartStopClick"
:active="!!(timeEntry.start && !timeEntry.end)" :active="!!(timeEntry.start && !timeEntry.end)"
class="opacity-20 hidden sm:flex group-hover:opacity-100"></TimeTrackerStartStop> class="opacity-20 hidden sm:flex group-hover:opacity-100"></TimeTrackerStartStop>
<TimeEntryMoreOptionsDropdown <TimeEntryMoreOptionsDropdown
@delete=" @delete="
emit('deleteTimeEntry') deleteTimeEntry
"></TimeEntryMoreOptionsDropdown> "></TimeEntryMoreOptionsDropdown>
</div> </div>
</div> </div>

View File

@@ -104,10 +104,10 @@ async function createTag(name: string) {
</div> </div>
</MainContainer> </MainContainer>
<TimeEntryGroupedTable <TimeEntryGroupedTable
@updateTimeEntry="updateTimeEntry" :updateTimeEntry
@updateTimeEntries="updateTimeEntries" :updateTimeEntries
@deleteTimeEntries="deleteTimeEntries" :deleteTimeEntries
@createTimeEntry="startTimeEntry" :createTimeEntry="startTimeEntry"
:createTag :createTag
:projects="projects" :projects="projects"
:tasks="tasks" :tasks="tasks"