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

add time picker to timetracker, fixes ST-180

Browse Source
This commit is contained in:
Gregor Vostrak
2024-06-03 15:24:39 +02:00
parent ee6999af90
commit 5bfd9e7dce
5 changed files with 227 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,35 +1,15 @@
<script setup lang="ts">
import Dropdown from '@/Components/Dropdown.vue';
import { defineProps, ref, watch } from 'vue';
import { defineProps, ref } from 'vue';
import { formatStartEnd } from '@/utils/time';
import TimePicker from '@/Components/Common/TimePicker.vue';
import { useFocusWithin } from '@vueuse/core';
import TimeRangeSelector from '@/Components/Common/TimeRangeSelector.vue';
const props = defineProps<{
defineProps<{
start: string;
end: string | null;
}>();
const emit = defineEmits(['changed']);
const tempStart = ref(props.start);
const tempEnd = ref(props.end || null);
watch(props, () => {
tempStart.value = props.start;
tempEnd.value = props.end;
});
function updateTimeEntry() {
emit('changed', tempStart.value, tempEnd.value);
}
const dropdownContent = ref();
const { focused } = useFocusWithin(dropdownContent);
watch(focused, (newValue, oldValue) => {
if (oldValue === true && newValue === false) {
updateTimeEntry();
}
});
const open = ref(false);
</script>
@@ -49,26 +29,13 @@ const open = ref(false);
</button>
</template>
<template #content>
<div
ref="dropdownContent"
class="grid grid-cols-2 divide-x divide-card-background-separator text-center py-1">
<div>
<div class="font-bold text-white text-sm pb-1">
Start
</div>
<TimePicker
data-testid="time_entry_range_start"
@updated="updateTimeEntry"
v-model="tempStart"></TimePicker>
</div>
<div>
<div class="font-bold text-white text-sm pb-1">End</div>
<TimePicker
data-testid="time_entry_range_end"
@updated="updateTimeEntry"
v-model="tempEnd"></TimePicker>
</div>
</div>
<TimeRangeSelector
@changed="
(newStart, newEnd) => emit('changed', newStart, newEnd)
"
:start="start"
:end="end">
</TimeRangeSelector>
</template>
</Dropdown>
</div>