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

improve time picker parsing, fix nested escape listeners, change project member select

Browse Source
This commit is contained in:
Gregor Vostrak
2024-11-12 15:30:39 +01:00
parent d5699da234
commit 4b0cb2e282
21 changed files with 224 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
e2e/project-members.spec.ts
View File

@@ -24,6 +24,7 @@ test('test that updating project member billable rate works for existing time en
await page.getByRole('button', { name: 'Add Member' }).click();
await expect(page.getByText('Add Project Member').first()).toBeVisible();
await page.getByRole('button', { name: 'Select a member' }).click();
await page.keyboard.press('Enter');
await page.getByRole('button', { name: 'Add Project Member' }).click();

11
e2e/time.spec.ts
View File

@@ -191,14 +191,7 @@ test('test that updating a the start of an existing time entry in the overview w
'time_entry_range_selector'
);
await timeEntryRangeElement.click();
await page
.getByTestId('time_entry_range_start')
.getByTestId('time_picker_hour')
.fill('1');
await page
.getByTestId('time_entry_range_start')
.getByTestId('time_picker_minute')
.fill('1');
await page.getByTestId('time_picker_input').first().fill('1');
await Promise.all([
page.waitForResponse(async (response) => {
return (
@@ -213,7 +206,7 @@ test('test that updating a the start of an existing time entry in the overview w
}),
page
.getByTestId('time_entry_range_end')
.getByTestId('time_picker_minute')
.getByTestId('time_picker_input')
.press('Enter'),
]);
});

153
resources/js/Components/Common/Member/MemberCombobox.vue
View File

@@ -1,13 +1,12 @@
<script setup lang="ts">
import { computed, nextTick, onMounted, ref, watch } from 'vue';
import { computed, onMounted, ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import ClientDropdownItem from '@/packages/ui/src/Client/ClientDropdownItem.vue';
import { useMembersStore } from '@/utils/useMembers';
import { UserIcon, XMarkIcon } from '@heroicons/vue/24/solid';
import TextInput from '@/packages/ui/src/Input/TextInput.vue';
import { UserIcon, ChevronDownIcon } from '@heroicons/vue/24/solid';
import { useFocus } from '@vueuse/core';
import type { ProjectMember } from '@/packages/api/src';
import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
import { Badge, SelectDropdown } from '@/packages/ui/src';
import type { Member } from '@/packages/api/src';
const membersStore = useMembersStore();
const { members } = storeToRefs(membersStore);
@@ -31,13 +30,9 @@ const searchInput = ref<HTMLInputElement | null>(null);
const searchValue = ref('');
function isMemberSelected(id: string) {
return model.value === id;
}
useFocus(searchInput, { initialValue: true });
const filteredMembers = computed(() => {
const filteredMembers = computed<Member[]>(() => {
return members.value.filter((member) => {
return (
member.name
@@ -65,70 +60,7 @@ function resetHighlightedItem() {
}
}
function updateSearchValue(event: Event) {
const newInput = (event.target as HTMLInputElement).value;
if (newInput === ' ') {
searchValue.value = '';
const highlightedClientId = highlightedItemId.value;
if (highlightedClientId) {
const highlightedClient = members.value.find(
(member) => member.id === highlightedClientId
);
if (highlightedClient) {
model.value = highlightedClient.id;
}
}
} else {
searchValue.value = newInput;
}
}
const emit = defineEmits(['update:modelValue', 'changed']);
function updateMember(newValue: string | null) {
if (newValue) {
model.value = newValue;
nextTick(() => {
emit('changed');
});
}
}
function moveHighlightUp() {
if (highlightedItem.value) {
const currentHightlightedIndex = filteredMembers.value.indexOf(
highlightedItem.value
);
if (currentHightlightedIndex === 0) {
highlightedItemId.value =
filteredMembers.value[filteredMembers.value.length - 1].id;
} else {
highlightedItemId.value =
filteredMembers.value[currentHightlightedIndex - 1].id;
}
}
}
function moveHighlightDown() {
if (highlightedItem.value) {
const currentHightlightedIndex = filteredMembers.value.indexOf(
highlightedItem.value
);
if (currentHightlightedIndex === filteredMembers.value.length - 1) {
highlightedItemId.value = filteredMembers.value[0].id;
} else {
highlightedItemId.value =
filteredMembers.value[currentHightlightedIndex + 1].id;
}
}
}
const highlightedItemId = ref<string | null>(null);
const highlightedItem = computed(() => {
return members.value.find(
(member) => member.id === highlightedItemId.value
);
});
const currentValue = computed(() => {
if (model.value) {
@@ -136,70 +68,27 @@ const currentValue = computed(() => {
}
return searchValue.value;
});
const hasMemberSelected = computed(() => {
return model.value !== '';
});
const showMembersDropdown = ref(true);
</script>
<template>
<Dropdown
align="bottom-start"
width="300"
v-model="showMembersDropdown"
:closeOnContentClick="true">
<template #trigger>
<div class="flex relative">
<div
ref="reference"
class="absolute h-full items-center px-3 w-full flex justify-between">
<UserIcon class="relative z-10 w-4 text-muted"></UserIcon>
<button
v-if="hasMemberSelected"
@click="model = ''"
class="focus:text-accent-200 focus:bg-card-background text-muted">
<XMarkIcon class="relative z-10 w-4"></XMarkIcon>
</button>
<SelectDropdown
v-model="model"
:items="filteredMembers"
:get-key-from-item="(member) => member.id"
:get-name-for-item="(member) => member.name">
<template v-slot:trigger>
<Badge
tag="button"
class="flex w-full text-base text-left space-x-3 px-3 text-text-secondary font-normal cursor py-1.5">
<UserIcon class="relative z-10 w-4 text-muted"></UserIcon>
<div v-if="currentValue" class="flex-1 truncate">
{{ currentValue }}
</div>
<TextInput
:value="currentValue"
:disabled="disabled"
@input="updateSearchValue"
data-testid="member_dropdown_search"
@keydown.enter.prevent="updateMember(highlightedItemId)"
@keydown.up.prevent="moveHighlightUp"
class="relative w-full pl-10"
@keydown.down.prevent="moveHighlightDown"
placeholder="Search for a member..."
ref="searchInput" />
</div>
<div class="flex-1" v-else>Select a member...</div>
<ChevronDownIcon class="w-4 text-muted"></ChevronDownIcon>
</Badge>
</template>
<template #content>
<div
class="py-2 text-white px-3"
v-if="filteredMembers.length === 0">
All members are already added.
</div>
<div
v-for="member in filteredMembers"
:key="member.id"
role="option"
:value="member.id"
:class="{
'bg-card-background-active':
member.id === highlightedItemId,
}"
@click="updateMember(member.id)"
data-testid="client_dropdown_entries"
:data-client-id="member.id">
<ClientDropdownItem
:selected="isMemberSelected(member.id)"
:name="member.name"></ClientDropdownItem>
</div>
</template>
</Dropdown>
</SelectDropdown>
</template>
<style scoped></style>

1
resources/js/Components/Common/Member/MemberEditModal.vue
View File

@@ -151,6 +151,7 @@ const roleDescription = computed(() => {
v-if="billableRateSelect === 'custom-rate'">
<InputLabel
for="memberBillableRate"
class="mb-2"
value="Billable Rate" />
<BillableRateInput
focus

1
resources/js/Components/Common/ProjectMember/ProjectMemberEditModal.vue
View File

@@ -89,6 +89,7 @@ useFocus(projectNameInput, { initialValue: true });
<div class="col-span-3 sm:col-span-1 flex-1">
<InputLabel
for="billable_rate"
class="mb-2"
value="Billable Rate"></InputLabel>
<BillableRateInput
@keydown.enter="submit"

1
resources/js/Components/Common/TimeEntry/TimeEntryCreateModal.vue
View File

@@ -219,7 +219,6 @@ const billableProxy = computed({
<InputLabel>Duration</InputLabel>
<div class="space-y-2 mt-1 flex flex-col">
<DurationHumanInput
class="h-full text-white py-2 flex-1 rounded-r-lg text-left px-3 text-base lg:text-lg font-bold border-input-border border rounded-lg bg-card-background placeholder-muted focus:ring-0 transition"
v-model:start="localStart"
v-model:end="localEnd"></DurationHumanInput>
<div class="text-sm flex space-x-1">

1
resources/js/Pages/Teams/Partials/OrganizationBillableRate.vue
View File

@@ -71,6 +71,7 @@ function checkForConfirmationModal() {
<div class="col-span-6 sm:col-span-4">
<InputLabel
for="organizationBillableRate"
class="mb-2"
value="Organization Billable Rate" />
<BillableRateInput
v-if="organization"

2
resources/js/packages/ui/src/Input/BillableRateInput.vue
View File

@@ -82,7 +82,7 @@ const inputValue = ref(formatValue(model.value));
type="text"
:name="name"
placeholder="Billable Rate"
class="mt-2 block w-full"
class="block w-full"
autocomplete="teamMemberRate" />
<div
class="absolute top-0 right-0 h-full flex items-center px-4 font-medium pointer-events-none">

2
resources/js/packages/ui/src/Input/DatePicker.vue
View File

@@ -54,7 +54,7 @@ const emit = defineEmits(['changed']);
@keydown.enter="updateDate"
:class="
twMerge(
'bg-input-background border text-white border-input-border focus-visible:outline-0 focus-visible:ring-0 rounded-md',
'bg-input-background border text-white border-input-border focus-visible:outline-0 focus-visible:border-input-border-active focus-visible:ring-0 rounded-md',
props.class
)
"

27
resources/js/packages/ui/src/Input/Dropdown.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import { onMounted, onUnmounted, ref, watch } from 'vue';
import {
flip,
limitShift,
@@ -10,6 +10,8 @@ import {
} from '@floating-ui/vue';
import { offset } from '@floating-ui/vue';
import { autoUpdate } from '@floating-ui/vue';
import { useId } from 'radix-vue';
import { isLastLayer, layers } from '@/packages/ui/src/utils/dismissableLayer';
const props = withDefaults(
defineProps<{
@@ -24,17 +26,28 @@ const props = withDefaults(
const emit = defineEmits(['open', 'submit']);
const open = defineModel({ default: false });
const id = useId();
const closeOnEscape = (e: KeyboardEvent) => {
if (open.value && e.key === 'Escape') {
open.value = false;
}
if (open.value && e.key === 'Enter') {
emit('submit');
if (props.closeOnContentClick) open.value = false;
if (isLastLayer(id)) {
if (open.value && e.key === 'Escape') {
open.value = false;
}
if (open.value && e.key === 'Enter') {
emit('submit');
if (props.closeOnContentClick) open.value = false;
}
}
};
watch(open, (value) => {
if (value) {
layers.value.push(id);
} else {
layers.value = layers.value.filter((layer) => layer !== id);
}
});
onMounted(() => document.addEventListener('keydown', closeOnEscape));
onUnmounted(() => document.removeEventListener('keydown', closeOnEscape));

44
resources/js/packages/ui/src/Input/DurationHumanInput.vue
View File

@@ -1,12 +1,13 @@
<script setup lang="ts">
import parse from 'parse-duration';
import { computed, ref } from 'vue';
import { onMounted, ref, watch } from 'vue';
import {
formatHumanReadableDuration,
getDayJsInstance,
} from '@/packages/ui/src/utils/time';
import dayjs from 'dayjs';
import { twMerge } from 'tailwind-merge';
import { TextInput } from '@/packages/ui/src';
const temporaryCustomTimerEntry = ref<string>('');
const start = defineModel('start', {
@@ -49,7 +50,7 @@ function updateDuration() {
start.value = newStartDate.utc().format();
}
// fallback to minutes if just a number is given
temporaryCustomTimerEntry.value = '';
updateTimeEntryInputValue();
}
function isNumeric(value: string) {
@@ -62,39 +63,24 @@ const props = defineProps<{
const HHMMtimeRegex = /^([0-9]{1,2}):([0-5]?[0-9])$/;
const currentTime = computed({
get() {
if (temporaryCustomTimerEntry.value !== '') {
return temporaryCustomTimerEntry.value;
}
if (start.value && end.value) {
const startTime = dayjs(start.value);
const diff = getDayJsInstance()(end.value).diff(
startTime,
'seconds'
);
return formatHumanReadableDuration(diff);
}
return null;
},
// setter
set(newValue) {
if (newValue) {
temporaryCustomTimerEntry.value = newValue;
} else {
temporaryCustomTimerEntry.value = '';
}
},
});
watch([start, end], updateTimeEntryInputValue);
onMounted(() => updateTimeEntryInputValue());
function updateTimeEntryInputValue() {
if (start.value && end.value) {
const startTime = dayjs(start.value);
const diff = getDayJsInstance()(end.value).diff(startTime, 'seconds');
temporaryCustomTimerEntry.value = formatHumanReadableDuration(diff);
}
}
</script>
<template>
<input
placeholder="00:00:00"
<TextInput
ref="inputField"
@blur="updateDuration"
@keydown.enter="updateDuration"
v-model="currentTime"
v-model="temporaryCustomTimerEntry"
:class="twMerge('text-text-secondary', props.class)"
type="text" />
</template>

61
resources/js/packages/ui/src/Input/SelectDropdown.vue
View File

@@ -5,7 +5,6 @@ import SelectDropdownItem from '@/packages/ui/src/Input/SelectDropdownItem.vue';
import { onKeyStroke } from '@vueuse/core';
import { type Placement } from '@floating-ui/vue';
import { twMerge } from 'tailwind-merge';
const model = defineModel<string | null>({
default: null,
});
@@ -41,12 +40,36 @@ const filteredItems = computed<T[]>(() => {
});
});
const highlightedItemId = ref<string | null>(model.value);
watch(model, () => {
highlightedItemId.value = model.value;
});
watch(filteredItems, () => {
if (filteredItems.value.length > 0) {
if (
filteredItems.value.length > 0 &&
filteredItems.value.find(
(item) => props.getKeyFromItem(item) === highlightedItemId.value
) === undefined
) {
highlightedItemId.value = props.getKeyFromItem(filteredItems.value[0]);
}
});
watch(highlightedItemId, () => {
if (highlightedItemId.value) {
const highlightedDomElement = dropdownViewport.value?.querySelector(
`[data-select-id="${highlightedItemId.value}"]`
) as HTMLElement;
highlightedDomElement?.scrollIntoView({
block: 'nearest',
inline: 'nearest',
});
}
});
const emit = defineEmits(['update:modelValue', 'changed']);
function setItem(newValue: string | null) {
@@ -89,7 +112,6 @@ function moveHighlightDown() {
}
}
const highlightedItemId = ref<string | null>(model.value);
const highlightedItem = computed(() => {
return props.items.find(
(item) => props.getKeyFromItem(item) === highlightedItemId.value
@@ -120,20 +142,16 @@ onKeyStroke('Enter', (e) => {
watch(open, () => {
if (open.value === true) {
nextTick(() => {
scrollCurrentItemInView();
const highlightedDomElement = dropdownViewport.value?.querySelector(
`[data-select-id="${model.value}"]`
) as HTMLElement;
dropdownViewport.value?.scrollTo({
top: highlightedDomElement?.offsetTop ?? 0,
behavior: 'instant',
});
});
}
});
function scrollCurrentItemInView() {
const highlightedDomElement = dropdownViewport.value?.querySelector(
`[data-select-id="${model.value}"]`
) as HTMLElement;
dropdownViewport.value?.scrollTo({
top: highlightedDomElement?.offsetTop ?? 0,
behavior: 'instant',
});
}
</script>
<template>
@@ -145,7 +163,10 @@ function scrollCurrentItemInView() {
<div
ref="dropdownViewport"
:class="
twMerge('w-60 max-h-60 overflow-y-scroll', props.class)
twMerge(
'w-60 py-1.5 max-h-60 overflow-y-scroll',
props.class
)
">
<div
v-for="item in filteredItems"
@@ -153,12 +174,14 @@ function scrollCurrentItemInView() {
role="option"
:data-select-id="props.getKeyFromItem(item)"
:value="props.getKeyFromItem(item)"
:class="{
'bg-card-background-active':
props.getKeyFromItem(item) === highlightedItemId,
}"
:data-item-id="props.getKeyFromItem(item)">
<SelectDropdownItem
@mouseenter="
highlightedItemId = props.getKeyFromItem(item)
"
:highlighted="
props.getKeyFromItem(item) === highlightedItemId
"
:selected="props.getKeyFromItem(item) === model"
@click="setItem(props.getKeyFromItem(item))"
:name="props.getNameForItem(item)"></SelectDropdownItem>

24
resources/js/packages/ui/src/Input/SelectDropdownItem.vue
View File

@@ -4,20 +4,24 @@ import { twMerge } from 'tailwind-merge';
const props = defineProps<{
name: string;
selected: boolean;
highlighted: boolean;
}>();
</script>
<template>
<div
:class="
twMerge(
'flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out cursor-pointer ',
props.selected
? 'bg-accent-300/20'
: 'hover:bg-card-background-active'
)
">
<span>{{ name }}</span>
<div class="px-1">
<div
:class="
twMerge(
'flex items-center space-x-3 w-full px-1.5 py-1.5 rounded text-start text-sm font-medium leading-5 text-white focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out cursor-pointer ',
props.highlighted && 'bg-card-background-active',
props.selected
? 'bg-accent-300/20'
: 'hover:bg-card-background-active'
)
">
<span>{{ name }}</span>
</div>
</div>
</template>

11
resources/js/packages/ui/src/Input/TextInput.vue
View File

@@ -1,8 +1,10 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { twMerge } from 'tailwind-merge';
defineProps<{
const props = defineProps<{
name?: string;
class?: string;
}>();
const input = ref<HTMLInputElement | null>(null);
@@ -20,7 +22,12 @@ const model = defineModel();
<template>
<input
ref="input"
class="border-input-border border bg-input-background text-white focus:ring-input-border-active focus:ring-0 focus-visible:border-input-border-active rounded-md shadow-sm"
:class="
twMerge(
'border-input-border border bg-input-background text-white focus:ring-input-border-active focus:ring-0 focus-visible:border-input-border-active rounded-md shadow-sm',
props.class
)
"
v-model="model"
:name="name" />
</template>

54
resources/js/packages/ui/src/Input/TimePicker.vue
View File

@@ -6,6 +6,7 @@ import {
} from '@/packages/ui/src/utils/time';
import { useFocus } from '@vueuse/core';
import { SelectDropdown, TextInput } from '@/packages/ui/src';
import { twMerge } from 'tailwind-merge';
// This has to be a localized timestamp, not UTC
const model = defineModel<string | null>({
@@ -36,6 +37,47 @@ function updateTime(event: Event) {
emit('changed', model.value);
}
}
// check if input is only numbers
else if (/^\d+$/.test(newValue)) {
if (newValue.length === 4) {
// parse 1300 to 13:00
const [hours, minutes] = [
newValue.slice(0, 2),
newValue.slice(2, 4),
];
model.value = getLocalizedDayJs(model.value)
.set('hours', Math.min(parseInt(hours), 23))
.set('minutes', Math.min(parseInt(minutes), 59))
.format();
emit('changed', model.value);
} else if (newValue.length === 3) {
// parse 130 to 01:30
const [hours, minutes] = [
newValue.slice(0, 1),
newValue.slice(1, 3),
];
model.value = getLocalizedDayJs(model.value)
.set('hours', Math.min(parseInt(hours), 23))
.set('minutes', Math.min(parseInt(minutes), 59))
.format();
emit('changed', model.value);
} else if (newValue.length === 2) {
// parse 13 to 13:00
model.value = getLocalizedDayJs(model.value)
.set('hours', Math.min(parseInt(newValue), 23))
.set('minutes', 0)
.format();
emit('changed', model.value);
} else if (newValue.length === 1) {
// parse 1 to 01:00
model.value = getLocalizedDayJs(model.value)
.set('hours', Math.min(parseInt(newValue), 23))
.set('minutes', 0)
.format();
emit('changed', model.value);
}
}
inputValue.value = getLocalizedDayJs(model.value).format('HH:mm');
}
@@ -96,7 +138,7 @@ const closestValue = computed({
<template>
<div class="flex min-w-0 items-center justify-center text-white">
<SelectDropdown
class="min-w-0 w-28"
:class="twMerge('mine-w-0 w-24', size === 'large' && 'w-28')"
v-model="closestValue"
v-model:open="open"
:get-key-from-item="(item) => item.timestamp"
@@ -106,18 +148,24 @@ const closestValue = computed({
<TextInput
v-model="inputValue"
ref="timeInput"
class="w-28 text-center"
:class="
twMerge(
'text-center w-24 px-3 py-2',
size === 'large' && 'w-28'
)
"
@blur="updateTime"
@keydown.enter="
updateTime($event);
open = false;
"
@keydown.tab="open = false"
@focus="($event.target as HTMLInputElement).select()"
@mouseup="($event.target as HTMLInputElement).select()"
@click="($event.target as HTMLInputElement).select()"
@pointerup="($event.target as HTMLInputElement).select()"
@focusin="open = true"
data-testid="time_picker_hour"
data-testid="time_picker_input"
type="text" />
</template>
</SelectDropdown>

8
resources/js/packages/ui/src/Input/TimeRangeSelector.vue
View File

@@ -57,27 +57,27 @@ watch(focused, (newValue, oldValue) => {
class="grid grid-cols-2 divide-x divide-card-background-separator text-center py-2">
<div class="px-2">
<div class="font-bold text-white text-sm pb-2">Start</div>
<div class="space-y-1">
<div class="space-y-2">
<TimePicker
data-testid="time_entry_range_start"
:focus
@changed="updateTimeEntry"
v-model="tempStart"></TimePicker>
<DatePicker
class="text-sm px-2 py-1"
class="text-xs text-text-tertiary max-w-24 px-1.5 py-1.5"
@changed="updateTimeEntry"
v-model="tempStart"></DatePicker>
</div>
</div>
<div class="px-2">
<div class="font-bold text-white text-sm pb-2">End</div>
<div v-if="tempEnd !== null" class="space-y-1">
<div v-if="tempEnd !== null" class="space-y-2">
<TimePicker
data-testid="time_entry_range_end"
@changed="updateTimeEntry"
v-model="tempEnd"></TimePicker>
<DatePicker
class="text-sm px-2 py-1"
class="text-xs text-text-tertiary max-w-24 px-1.5 py-1.5"
@changed="updateTimeEntry"
v-model="tempEnd"></DatePicker>
</div>

23
resources/js/packages/ui/src/Modal.vue
View File

@@ -1,5 +1,7 @@
<script setup lang="ts">
import { computed, onMounted, onUnmounted, watch } from 'vue';
import { useId } from 'radix-vue';
import { isLastLayer, layers } from '@/packages/ui/src/utils/dismissableLayer';
const props = defineProps({
show: {
@@ -34,20 +36,35 @@ const close = () => {
emit('close');
}
};
const id = useId();
const closeOnEscape = (e: KeyboardEvent) => {
if (e.key === 'Escape' && props.show) {
close();
if (isLastLayer(id)) {
if (e.key === 'Escape' && props.show) {
close();
}
}
};
onMounted(() => document.addEventListener('keydown', closeOnEscape));
onMounted(() => {
document.addEventListener('keydown', closeOnEscape);
});
onUnmounted(() => {
document.removeEventListener('keydown', closeOnEscape);
document.body.style.overflow = 'visible';
});
watch(
() => props.show,
(value) => {
if (value) {
layers.value.push(id);
} else {
layers.value = layers.value.filter((layer) => layer !== id);
}
}
);
const maxWidthClass = computed(() => {
return {
sm: 'sm:max-w-sm',

2
resources/js/packages/ui/src/Project/ProjectEditBillableSection.vue
View File

@@ -69,7 +69,7 @@ const emit = defineEmits(['submit']);
<div
class="sm:max-w-[120px]"
v-if="billableRateSelect === 'custom-rate'">
<InputLabel for="billableRate" value="Billable Rate" />
<InputLabel for="billableRate" value="Billable Rate" class="mb-2" />
<BillableRateInput
@keydown.enter="emit('submit')"
:currency="currency"

15
resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
View File

@@ -3,6 +3,7 @@ import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
import { defineProps, ref } from 'vue';
import { formatDate, formatStartEnd } from '@/packages/ui/src/utils/time';
import TimeRangeSelector from '@/packages/ui/src/Input/TimeRangeSelector.vue';
import { twMerge } from 'tailwind-merge';
defineProps<{
start: string;
@@ -27,11 +28,15 @@ const open = ref(false);
<template #trigger>
<button
data-testid="time_entry_range_selector"
class="text-muted w-[110px] px-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80"
:class="{
'text-sm py-2 font-medium': !showDate,
'text-xs py-1.5 font-semibold': showDate,
}">
:class="
twMerge(
'text-muted w-[110px] px-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80',
showDate
? 'text-xs py-1.5 font-semibold'
: 'text-sm py-2 font-medium',
open && 'border-card-border bg-card-background'
)
">
{{ formatStartEnd(start, end) }}
<span v-if="showDate" class="text-text-tertiary font-medium"
>{{ formatDate(start) }}

3
resources/js/packages/ui/src/TimeEntry/TimeEntryRowDurationInput.vue
View File

@@ -71,8 +71,9 @@ function selectInput(event: Event) {
<template #trigger>
<input
data-testid="time_entry_duration_input"
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"
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 focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-white/80"
@focus="selectInput"
@keydown.tab="open = false"
@blur="updateTimerAndStartLiveTimerUpdate"
@keydown.enter="updateTimerAndStartLiveTimerUpdate"
v-model="currentTime" />

7
resources/js/packages/ui/src/utils/dismissableLayer.ts Normal file
View File

@@ -0,0 +1,7 @@
import { ref } from 'vue';
export const layers = ref<string[]>([]);
export function isLastLayer(id: string) {
return layers.value[layers.value.length - 1] === id;
}