mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-14 03:02:15 +01:00
move ui and api to seperate packages and add npm actions for them
This commit is contained in:
Gregor Vostrak
161
resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue
Normal file
161
resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<script setup lang="ts">
|
||||
import TimeTrackerTagDropdown from '@/packages/ui/src/TimeTracker/TimeTrackerTagDropdown.vue';
|
||||
import TimeTrackerStartStop from '@/packages/ui/src/TimeTrackerStartStop.vue';
|
||||
import TimeTrackerRangeSelector from '@/packages/ui/src/TimeTracker/TimeTrackerRangeSelector.vue';
|
||||
import BillableToggleButton from '@/packages/ui/src/Input/BillableToggleButton.vue';
|
||||
import TimeTrackerProjectTaskDropdown from '@/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
|
||||
import type {
|
||||
CreateClientBody,
|
||||
CreateProjectBody,
|
||||
Project,
|
||||
Tag,
|
||||
Task,
|
||||
TimeEntry,
|
||||
Client,
|
||||
} from '@/packages/api/src';
|
||||
import { ref, watch } from 'vue';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
|
||||
const currentTimeEntry = defineModel<TimeEntry>('currentTimeEntry', {
|
||||
required: true,
|
||||
});
|
||||
const liveTimer = defineModel<Dayjs | null>('liveTimer', { required: true });
|
||||
|
||||
const currentTimeEntryDescriptionInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
const props = defineProps<{
|
||||
projects: Project[];
|
||||
tasks: Task[];
|
||||
tags: Tag[];
|
||||
clients: Client[];
|
||||
createTag: (name: string) => Promise<Tag | undefined>;
|
||||
createProject: (project: CreateProjectBody) => Promise<Project | undefined>;
|
||||
createClient: (client: CreateClientBody) => Promise<Client | undefined>;
|
||||
isActive: boolean;
|
||||
currency: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
startTimer: [];
|
||||
stopTimer: [];
|
||||
updateTimeEntry: [];
|
||||
startLiveTimer: [];
|
||||
stopLiveTimer: [];
|
||||
}>();
|
||||
|
||||
function updateProject() {
|
||||
setBillableDefaultForProject();
|
||||
emit('updateTimeEntry');
|
||||
}
|
||||
|
||||
function startTimerIfNotActive() {
|
||||
if (!props.isActive) {
|
||||
currentTimeEntry.value.description = tempDescription.value;
|
||||
emit('startTimer');
|
||||
}
|
||||
}
|
||||
|
||||
function setBillableDefaultForProject() {
|
||||
const project = props.projects.find(
|
||||
(project) => project.id === currentTimeEntry.value.project_id
|
||||
);
|
||||
if (project) {
|
||||
currentTimeEntry.value.billable = project.is_billable;
|
||||
}
|
||||
}
|
||||
|
||||
function onToggleButtonPress(newState: boolean) {
|
||||
if (newState) {
|
||||
emit('startTimer');
|
||||
currentTimeEntryDescriptionInput.value?.focus();
|
||||
} else {
|
||||
emit('stopTimer');
|
||||
}
|
||||
}
|
||||
const tempDescription = ref(currentTimeEntry.value.description);
|
||||
watch(
|
||||
() => currentTimeEntry.value.description,
|
||||
() => {
|
||||
tempDescription.value = currentTimeEntry.value.description;
|
||||
}
|
||||
);
|
||||
function updateTimeEntryDescription() {
|
||||
if (currentTimeEntry.value.description !== tempDescription.value) {
|
||||
currentTimeEntry.value.description = tempDescription.value;
|
||||
emit('updateTimeEntry');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex items-center relative @container"
|
||||
data-testid="dashboard_timer">
|
||||
<div
|
||||
class="flex flex-col sm:flex-row w-full justify-between rounded-lg bg-card-background border-card-border border transition shadow-card">
|
||||
<div class="flex flex-1 items-center pr-6">
|
||||
<input
|
||||
placeholder="What are you working on?"
|
||||
data-testid="time_entry_description"
|
||||
ref="currentTimeEntryDescriptionInput"
|
||||
v-model="tempDescription"
|
||||
@keydown.enter="startTimerIfNotActive"
|
||||
@blur="updateTimeEntryDescription"
|
||||
class="w-full rounded-l-lg py-4 sm:py-2.5 px-3.5 border-b border-b-card-background-separator lg:px-4 text-base @4xl:text-lg text-white font-medium bg-transparent border-none placeholder-muted focus:ring-0 transition"
|
||||
type="text" />
|
||||
</div>
|
||||
<div class="flex items-center justify-between pl-2 shrink min-w-0">
|
||||
<div
|
||||
class="flex items-center w-[130px] sm:w-auto shrink min-w-0">
|
||||
<TimeTrackerProjectTaskDropdown
|
||||
:createClient
|
||||
:clients
|
||||
:createProject
|
||||
:currency="currency"
|
||||
:projects="projects"
|
||||
:tasks="tasks"
|
||||
@changed="updateProject"
|
||||
v-model:project="currentTimeEntry.project_id"
|
||||
v-model:task="
|
||||
currentTimeEntry.task_id
|
||||
"></TimeTrackerProjectTaskDropdown>
|
||||
</div>
|
||||
<div class="flex items-center lg:space-x-2 px-2 lg:px-4">
|
||||
<TimeTrackerTagDropdown
|
||||
@changed="$emit('updateTimeEntry')"
|
||||
:createTag
|
||||
:tags="tags"
|
||||
v-model="
|
||||
currentTimeEntry.tags
|
||||
"></TimeTrackerTagDropdown>
|
||||
<BillableToggleButton
|
||||
@changed="$emit('updateTimeEntry')"
|
||||
v-model="
|
||||
currentTimeEntry.billable
|
||||
"></BillableToggleButton>
|
||||
</div>
|
||||
<div class="border-l border-card-border">
|
||||
<TimeTrackerRangeSelector
|
||||
@startLiveTimer="emit('startLiveTimer')"
|
||||
@stopLiveTimer="emit('stopLiveTimer')"
|
||||
@updateTimer="emit('updateTimeEntry')"
|
||||
@startTimer="emit('startTimer')"
|
||||
v-model:currentTimeEntry="currentTimeEntry"
|
||||
v-model:liveTimer="liveTimer"
|
||||
@keydown.enter="
|
||||
startTimerIfNotActive
|
||||
"></TimeTrackerRangeSelector>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="pl-4 lg:pl-6 pr-3 absolute sm:relative top-[6px] sm:top-0 right-0">
|
||||
<TimeTrackerStartStop
|
||||
:active="isActive"
|
||||
@changed="onToggleButtonPress"
|
||||
size="large"></TimeTrackerStartStop>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,433 @@
|
||||
<script setup lang="ts">
|
||||
import { ChevronRightIcon } from '@heroicons/vue/16/solid';
|
||||
import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
|
||||
import { type Component, computed, nextTick, ref, watch } from 'vue';
|
||||
import ProjectDropdownItem from '@/packages/ui/src/Project/ProjectDropdownItem.vue';
|
||||
import type {
|
||||
CreateClientBody,
|
||||
CreateProjectBody,
|
||||
Project,
|
||||
Task,
|
||||
Client,
|
||||
} from '@/packages/api/src';
|
||||
import ProjectBadge from '@/packages/ui/src/Project/ProjectBadge.vue';
|
||||
import Badge from '@/packages/ui/src/Badge.vue';
|
||||
import { PlusIcon, PlusCircleIcon } from '@heroicons/vue/16/solid';
|
||||
import ProjectCreateModal from '@/packages/ui/src/Project/ProjectCreateModal.vue';
|
||||
|
||||
const task = defineModel<string | null>('task', {
|
||||
default: null,
|
||||
});
|
||||
|
||||
const project = defineModel<string | null>('project', {
|
||||
default: null,
|
||||
});
|
||||
|
||||
const searchInput = ref<HTMLInputElement | null>(null);
|
||||
const open = ref(false);
|
||||
const dropdownViewport = ref<Component | null>(null);
|
||||
|
||||
const searchValue = ref('');
|
||||
|
||||
watch(open, (isOpen) => {
|
||||
if (isOpen) {
|
||||
nextTick(() => {
|
||||
initializeHighlightedItem();
|
||||
searchInput.value?.focus();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
type ProjectWithTasks = {
|
||||
project: Project;
|
||||
tasks: Task[];
|
||||
};
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
showBadgeBorder: boolean;
|
||||
size: 'base' | 'large' | 'xlarge';
|
||||
projects: Project[];
|
||||
tasks: Task[];
|
||||
clients: Client[];
|
||||
createProject: (
|
||||
project: CreateProjectBody
|
||||
) => Promise<Project | undefined>;
|
||||
createClient: (client: CreateClientBody) => Promise<Client | undefined>;
|
||||
currency: string;
|
||||
}>(),
|
||||
{
|
||||
showBadgeBorder: true,
|
||||
size: 'large',
|
||||
}
|
||||
);
|
||||
|
||||
const filteredProjects = computed(() => {
|
||||
return props.projects.reduce(
|
||||
(filtered: ProjectWithTasks[], filterProject) => {
|
||||
const projectNameIncludesSearchTerm = filterProject.name
|
||||
.toLowerCase()
|
||||
.includes(searchValue.value?.toLowerCase()?.trim() || '');
|
||||
|
||||
// check if one of the project tasks
|
||||
const projectTasks = props.tasks.filter((task) => {
|
||||
return task.project_id === filterProject.id;
|
||||
});
|
||||
|
||||
const filteredTasks = projectTasks.filter((filterTask) => {
|
||||
return (
|
||||
filterTask.name
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchValue.value?.toLowerCase()?.trim() || ''
|
||||
) &&
|
||||
(!filterTask.is_done || filterTask.id === task.value)
|
||||
);
|
||||
});
|
||||
|
||||
if (
|
||||
(projectNameIncludesSearchTerm || filteredTasks.length > 0) &&
|
||||
(!filterProject.is_archived ||
|
||||
project.value === filterProject.id)
|
||||
) {
|
||||
filtered.push({ project: filterProject, tasks: filteredTasks });
|
||||
}
|
||||
|
||||
return filtered;
|
||||
},
|
||||
[
|
||||
{
|
||||
project: {
|
||||
id: '',
|
||||
name: 'No Project',
|
||||
color: 'var(--theme-color-icon-default)',
|
||||
value: '',
|
||||
client_id: null,
|
||||
billable_rate: null,
|
||||
is_archived: false,
|
||||
is_billable: false,
|
||||
},
|
||||
tasks: [],
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
|
||||
async function addClientIfNoneExists() {
|
||||
setProjectAndClientBasedOnHighlightedItem();
|
||||
}
|
||||
|
||||
function isProjectSelected(project: Project) {
|
||||
return project.value === project.id;
|
||||
}
|
||||
|
||||
function initializeHighlightedItem() {
|
||||
if (filteredProjects.value.length > 0) {
|
||||
highlightedItemId.value = filteredProjects.value[0].project.id;
|
||||
}
|
||||
}
|
||||
|
||||
watch(filteredProjects, () => {
|
||||
initializeHighlightedItem();
|
||||
});
|
||||
|
||||
function setProjectAndClientBasedOnHighlightedItem() {
|
||||
const highlightedProject = filteredProjects.value.find(
|
||||
(project) => project.project.id === highlightedItemId.value
|
||||
);
|
||||
if (highlightedProject) {
|
||||
selectProject(highlightedProject.project.id);
|
||||
}
|
||||
const highlightedTask = filteredProjects.value
|
||||
.map((project) => project.tasks)
|
||||
.flat()
|
||||
.find((task) => task.id === highlightedItemId.value);
|
||||
if (highlightedTask) {
|
||||
selectTask(highlightedTask.id);
|
||||
}
|
||||
}
|
||||
|
||||
function updateSearchValue(event: Event) {
|
||||
const newInput = (event.target as HTMLInputElement).value;
|
||||
if (newInput === ' ') {
|
||||
searchValue.value = '';
|
||||
setProjectAndClientBasedOnHighlightedItem();
|
||||
} else {
|
||||
searchValue.value = newInput;
|
||||
}
|
||||
}
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'changed']);
|
||||
|
||||
function moveHighlightUp() {
|
||||
const currentHighlightedIndex = filteredProjects.value.findIndex(
|
||||
(projectWithTasks) =>
|
||||
projectWithTasks.project.id === highlightedItemId.value
|
||||
);
|
||||
// check if it is a project id
|
||||
if (currentHighlightedIndex === -1) {
|
||||
// the ID is a task ID
|
||||
const currentProjectWithTasks = filteredProjects.value.find(
|
||||
(projectWithTasks) =>
|
||||
projectWithTasks.tasks.some(
|
||||
(task) => task.id === highlightedItemId.value
|
||||
)
|
||||
);
|
||||
if (currentProjectWithTasks) {
|
||||
const taskIndex = currentProjectWithTasks.tasks.findIndex(
|
||||
(task) => task.id === highlightedItemId.value
|
||||
);
|
||||
if (taskIndex === -1) {
|
||||
return;
|
||||
}
|
||||
if (taskIndex === 0) {
|
||||
// highlight the project if it was the first task before
|
||||
highlightedItemId.value = currentProjectWithTasks.project.id;
|
||||
return;
|
||||
}
|
||||
highlightedItemId.value =
|
||||
currentProjectWithTasks.tasks[taskIndex - 1].id;
|
||||
}
|
||||
}
|
||||
if (currentHighlightedIndex === 0) {
|
||||
// highlight the last project or the last project of the last project
|
||||
const lastProject =
|
||||
filteredProjects.value[filteredProjects.value.length - 1];
|
||||
if (lastProject.tasks.length > 0) {
|
||||
// highlight last task of last project
|
||||
highlightedItemId.value =
|
||||
lastProject.tasks[lastProject.tasks.length - 1].id;
|
||||
} else {
|
||||
highlightedItemId.value =
|
||||
filteredProjects.value[
|
||||
filteredProjects.value.length - 1
|
||||
].project.id;
|
||||
}
|
||||
} else {
|
||||
const previousProject =
|
||||
filteredProjects.value[currentHighlightedIndex - 1];
|
||||
if (previousProject.tasks.length > 0) {
|
||||
// highlight last task of previous project
|
||||
highlightedItemId.value =
|
||||
previousProject.tasks[previousProject.tasks.length - 1].id;
|
||||
} else {
|
||||
highlightedItemId.value =
|
||||
filteredProjects.value[currentHighlightedIndex - 1].project.id;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function moveHighlightDown() {
|
||||
const currentHighlightedIndex = filteredProjects.value.findIndex(
|
||||
(projectWithTasks) =>
|
||||
projectWithTasks.project.id === highlightedItemId.value
|
||||
);
|
||||
// check if it is a project id
|
||||
if (currentHighlightedIndex === -1) {
|
||||
// the ID is a task ID
|
||||
const currentProjectWithTasks = filteredProjects.value.find(
|
||||
(projectWithTasks) =>
|
||||
projectWithTasks.tasks.some(
|
||||
(task) => task.id === highlightedItemId.value
|
||||
)
|
||||
);
|
||||
if (currentProjectWithTasks) {
|
||||
const taskIndex = currentProjectWithTasks.tasks.findIndex(
|
||||
(task) => task.id === highlightedItemId.value
|
||||
);
|
||||
if (taskIndex === -1) {
|
||||
return;
|
||||
}
|
||||
if (taskIndex === currentProjectWithTasks.tasks.length - 1) {
|
||||
// highlight the next project if it was the last task in current project
|
||||
const projectIndex = filteredProjects.value.indexOf(
|
||||
currentProjectWithTasks
|
||||
);
|
||||
if (projectIndex === filteredProjects.value.length - 1) {
|
||||
// highlight the first project if it was the last project
|
||||
highlightedItemId.value =
|
||||
filteredProjects.value[0].project.id;
|
||||
} else {
|
||||
highlightedItemId.value =
|
||||
filteredProjects.value[projectIndex + 1].project.id;
|
||||
}
|
||||
return;
|
||||
}
|
||||
highlightedItemId.value =
|
||||
currentProjectWithTasks.tasks[taskIndex + 1].id;
|
||||
}
|
||||
}
|
||||
if (currentHighlightedIndex === filteredProjects.value.length - 1) {
|
||||
// highlight the first project or the last project of the last project
|
||||
const lastProject =
|
||||
filteredProjects.value[filteredProjects.value.length - 1];
|
||||
if (lastProject.tasks.length > 0) {
|
||||
// highlight last task of last project
|
||||
highlightedItemId.value = lastProject.tasks[0].id;
|
||||
} else {
|
||||
highlightedItemId.value = filteredProjects.value[0].project.id;
|
||||
}
|
||||
} else {
|
||||
const currentProjectWithTasks =
|
||||
filteredProjects.value[currentHighlightedIndex];
|
||||
if (currentProjectWithTasks.tasks.length > 0) {
|
||||
// highlight last task of previous project
|
||||
highlightedItemId.value = currentProjectWithTasks.tasks[0].id;
|
||||
} else {
|
||||
highlightedItemId.value =
|
||||
filteredProjects.value[currentHighlightedIndex + 1].project.id;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const highlightedItemId = ref<string | null>(null);
|
||||
|
||||
const currentProject = computed(() => {
|
||||
return props.projects.find(
|
||||
(iteratingProject) => iteratingProject.id === project.value
|
||||
);
|
||||
});
|
||||
|
||||
const currentTask = computed(() => {
|
||||
return props.tasks.find(
|
||||
(iteratingTasks) => iteratingTasks.id === task.value
|
||||
);
|
||||
});
|
||||
|
||||
const selectedProjectName = computed(() => {
|
||||
return currentProject.value?.name || 'No Project';
|
||||
});
|
||||
|
||||
const selectedProjectColor = computed(() => {
|
||||
return currentProject.value?.color || 'var(--theme-color-icon-default)';
|
||||
});
|
||||
|
||||
function selectTask(taskId: string) {
|
||||
task.value = taskId;
|
||||
project.value =
|
||||
props.tasks.find((task) => task.id === taskId)?.project_id || null;
|
||||
open.value = false;
|
||||
emit('changed', project.value, task.value);
|
||||
}
|
||||
|
||||
function selectProject(projectId: string) {
|
||||
project.value = projectId;
|
||||
task.value = null;
|
||||
open.value = false;
|
||||
emit('changed', project.value, task.value);
|
||||
}
|
||||
|
||||
const showCreateProject = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="projects.length === 0">
|
||||
<Badge
|
||||
@click="showCreateProject = true"
|
||||
size="large"
|
||||
class="cursor-pointer hover:bg-tertiary">
|
||||
<PlusIcon class="-ml-1 w-5"></PlusIcon>
|
||||
<span>Add new project</span>
|
||||
</Badge>
|
||||
</div>
|
||||
<Dropdown v-else v-model="open" :closeOnContentClick="false" align="bottom">
|
||||
<template #trigger>
|
||||
<ProjectBadge
|
||||
ref="projectDropdownTrigger"
|
||||
:color="selectedProjectColor"
|
||||
:size="size"
|
||||
:border="showBadgeBorder"
|
||||
tag="button"
|
||||
:name="selectedProjectName"
|
||||
class="focus:border-border-tertiary w-full focus:outline-0 focus:bg-card-background-separator min-w-0 hover:bg-card-background-separator">
|
||||
<div class="flex items-center lg:space-x-1 min-w-0">
|
||||
<span class="whitespace-nowrap text-xs lg:text-sm">
|
||||
{{ selectedProjectName }}
|
||||
</span>
|
||||
<ChevronRightIcon
|
||||
v-if="currentTask"
|
||||
class="w-4 lg:w-5 text-muted shrink-0"></ChevronRightIcon>
|
||||
<div
|
||||
class="min-w-0 shrink text-xs lg:text-sm truncate"
|
||||
v-if="currentTask">
|
||||
{{ currentTask.name }}
|
||||
</div>
|
||||
</div>
|
||||
</ProjectBadge>
|
||||
</template>
|
||||
<template #content>
|
||||
<input
|
||||
:value="searchValue"
|
||||
@input="updateSearchValue"
|
||||
@keydown.enter="addClientIfNoneExists"
|
||||
@click.prevent="searchInput?.focus()"
|
||||
data-testid="client_dropdown_search"
|
||||
@keydown.up.prevent="moveHighlightUp"
|
||||
@keydown.down.prevent="moveHighlightDown"
|
||||
ref="searchInput"
|
||||
class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
|
||||
placeholder="Search for a project or task..." />
|
||||
<div
|
||||
ref="dropdownViewport"
|
||||
class="min-w-[300px] max-h-[250px] overflow-y-scroll relative">
|
||||
<template
|
||||
v-for="projectWithTasks in filteredProjects"
|
||||
:key="projectWithTasks.project.id">
|
||||
<div
|
||||
role="option"
|
||||
:value="projectWithTasks.project.id"
|
||||
@click="selectProject(projectWithTasks.project.id)"
|
||||
class="border-t border-card-background-separator"
|
||||
:class="{
|
||||
'bg-card-background-active':
|
||||
projectWithTasks.project.id ===
|
||||
highlightedItemId,
|
||||
}"
|
||||
data-testid="client_dropdown_entries"
|
||||
:data-project-id="projectWithTasks.project.id">
|
||||
<ProjectDropdownItem
|
||||
:selected="
|
||||
isProjectSelected(projectWithTasks.project)
|
||||
"
|
||||
:name="projectWithTasks.project.name"
|
||||
:color="
|
||||
projectWithTasks.project.color
|
||||
"></ProjectDropdownItem>
|
||||
</div>
|
||||
<div
|
||||
v-for="task in projectWithTasks.tasks"
|
||||
:key="task.id"
|
||||
@click="selectTask(task.id)"
|
||||
:class="{
|
||||
'bg-card-background-active':
|
||||
task.id === highlightedItemId,
|
||||
}"
|
||||
class="flex items-center space-x-3 w-full px-3 py-1.5 text-start text-xs font-semibold leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
|
||||
<div class="w-3 h-3 rounded-full"></div>
|
||||
<span>{{ task.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="hover:bg-card-background-active rounded-b-lg">
|
||||
<button
|
||||
@click="
|
||||
open = false;
|
||||
showCreateProject = true;
|
||||
"
|
||||
class="text-white flex space-x-3 items-center px-4 py-3 text-xs font-semibold border-t border-card-background-separator">
|
||||
<PlusCircleIcon
|
||||
class="w-5 flex-shrink-0 text-icon-default"></PlusCircleIcon>
|
||||
<span>Create new Project</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
<ProjectCreateModal
|
||||
:createClient
|
||||
:currency="currency"
|
||||
:clients="clients"
|
||||
:createProject
|
||||
v-model:show="showCreateProject"></ProjectCreateModal>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,165 @@
|
||||
<script setup lang="ts">
|
||||
import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import TimeRangeSelector from '@/packages/ui/src/Input/TimeRangeSelector.vue';
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import parse from 'parse-duration';
|
||||
import { formatDuration, getDayJsInstance } from '@/packages/ui/src/utils/time';
|
||||
import type { TimeEntry } from '@/packages/api/src';
|
||||
|
||||
const currentTimeEntry = defineModel<TimeEntry>('currentTimeEntry', {
|
||||
required: true,
|
||||
});
|
||||
const now = defineModel<null | Dayjs>('liveTimer');
|
||||
|
||||
const emit = defineEmits<{
|
||||
startLiveTimer: [];
|
||||
stopLiveTimer: [];
|
||||
updateTimer: [];
|
||||
startTimer: [];
|
||||
}>();
|
||||
|
||||
const open = ref(false);
|
||||
|
||||
function pauseLiveTimerUpdate(event: FocusEvent) {
|
||||
(event.target as HTMLInputElement).select();
|
||||
emit('stopLiveTimer');
|
||||
}
|
||||
|
||||
function onTimeEntryEnterPress() {
|
||||
updateTimerAndStartLiveTimerUpdate();
|
||||
const activeElement = document.activeElement as HTMLElement;
|
||||
activeElement?.blur();
|
||||
}
|
||||
|
||||
const currentTime = computed({
|
||||
get() {
|
||||
if (temporaryCustomTimerEntry.value !== '') {
|
||||
return temporaryCustomTimerEntry.value;
|
||||
}
|
||||
if (now.value && currentTimeEntry.value.start) {
|
||||
const startTime = dayjs(currentTimeEntry.value.start);
|
||||
const diff = now.value.diff(startTime, 'seconds');
|
||||
return formatDuration(diff);
|
||||
}
|
||||
return null;
|
||||
},
|
||||
// setter
|
||||
set(newValue) {
|
||||
if (newValue) {
|
||||
temporaryCustomTimerEntry.value = newValue;
|
||||
} else {
|
||||
temporaryCustomTimerEntry.value = '';
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
function updateTimerAndStartLiveTimerUpdate() {
|
||||
const time = parse(temporaryCustomTimerEntry.value, 's');
|
||||
|
||||
if (isNumeric(temporaryCustomTimerEntry.value)) {
|
||||
const newStartDate = dayjs().subtract(
|
||||
parseInt(temporaryCustomTimerEntry.value),
|
||||
'm'
|
||||
);
|
||||
currentTimeEntry.value.start = newStartDate.utc().format();
|
||||
if (currentTimeEntry.value.id !== '') {
|
||||
emit('updateTimer');
|
||||
} else {
|
||||
emit('startTimer');
|
||||
}
|
||||
} else if (isHHMM(temporaryCustomTimerEntry.value)) {
|
||||
const results = parseHHMM(temporaryCustomTimerEntry.value);
|
||||
if (results) {
|
||||
const newStartDate = dayjs()
|
||||
.subtract(parseInt(results[1]), 'h')
|
||||
.subtract(parseInt(results[2]), 'm');
|
||||
currentTimeEntry.value.start = newStartDate.utc().format();
|
||||
if (currentTimeEntry.value.id !== '') {
|
||||
emit('updateTimer');
|
||||
} else {
|
||||
emit('startTimer');
|
||||
}
|
||||
}
|
||||
}
|
||||
// try to parse natural language like "1h 30m"
|
||||
else if (time && time > 1) {
|
||||
const newStartDate = dayjs().subtract(time, 's');
|
||||
currentTimeEntry.value.start = newStartDate.utc().format();
|
||||
if (currentTimeEntry.value.id !== '') {
|
||||
emit('updateTimer');
|
||||
} else {
|
||||
emit('startTimer');
|
||||
}
|
||||
}
|
||||
// fallback to minutes if just a number is given
|
||||
now.value = dayjs().utc();
|
||||
temporaryCustomTimerEntry.value = '';
|
||||
emit('startLiveTimer');
|
||||
}
|
||||
|
||||
function isNumeric(value: string) {
|
||||
return /^-?\d+$/.test(value);
|
||||
}
|
||||
|
||||
const HHMMtimeRegex = /^([0-9]{1,2}):([0-5]?[0-9])$/;
|
||||
|
||||
function isHHMM(value: string): boolean {
|
||||
return HHMMtimeRegex.test(value);
|
||||
}
|
||||
|
||||
function parseHHMM(value: string): string[] | null {
|
||||
return value.match(HHMMtimeRegex);
|
||||
}
|
||||
const temporaryCustomTimerEntry = ref<string>('');
|
||||
|
||||
async function updateTimeRange(newStart: string) {
|
||||
// prohibit updates in the future
|
||||
if (getDayJsInstance()(newStart).isBefore(getDayJsInstance()())) {
|
||||
currentTimeEntry.value.start = newStart;
|
||||
if (currentTimeEntry.value.id) {
|
||||
emit('updateTimer');
|
||||
} else {
|
||||
emit('startTimer');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const startTime = computed(() => {
|
||||
if (currentTimeEntry.value.start && currentTimeEntry.value.start !== '') {
|
||||
return currentTimeEntry.value.start;
|
||||
}
|
||||
return dayjs().utc().format();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative">
|
||||
<Dropdown
|
||||
v-model="open"
|
||||
@submit="open = false"
|
||||
align="bottom"
|
||||
:close-on-content-click="false">
|
||||
<template #trigger>
|
||||
<input
|
||||
placeholder="00:00:00"
|
||||
@focus="pauseLiveTimerUpdate"
|
||||
data-testid="time_entry_time"
|
||||
@blur="updateTimerAndStartLiveTimerUpdate"
|
||||
@keydown.enter="onTimeEntryEnterPress"
|
||||
v-model="currentTime"
|
||||
class="w-[110px] lg:w-[130px] h-full text-white py-2.5 rounded-r-lg text-center px-4 text-base lg:text-lg font-bold bg-card-background border-none placeholder-muted focus:ring-0 transition"
|
||||
type="text" />
|
||||
</template>
|
||||
<template #content>
|
||||
<TimeRangeSelector
|
||||
@changed="updateTimeRange"
|
||||
:start="startTime"
|
||||
:end="null">
|
||||
</TimeRangeSelector>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
|
||||
|
||||
defineEmits<{
|
||||
switchOrganization: [];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="absolute w-full h-full backdrop-blur-sm z-10 flex items-center justify-center">
|
||||
<div
|
||||
class="w-full h-[calc(100%+10px)] absolute bg-default-background opacity-75 backdrop-blur-sm"></div>
|
||||
<div class="flex space-x-3 items-center w-full z-20 justify-center">
|
||||
<span class="text-sm text-white">
|
||||
The Timer is running in a different organization.
|
||||
</span>
|
||||
<SecondaryButton @click="$emit('switchOrganization')"
|
||||
>Switch to organization</SecondaryButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
import { TagIcon } from '@heroicons/vue/20/solid';
|
||||
import { computed } from 'vue';
|
||||
import type { Tag } from '@/packages/api/src';
|
||||
|
||||
const emit = defineEmits<{
|
||||
changed: [];
|
||||
}>();
|
||||
|
||||
const model = defineModel({
|
||||
default: [],
|
||||
});
|
||||
const iconColorClasses = computed(() => {
|
||||
if (model.value.length > 0) {
|
||||
return 'text-accent-200/80 focus:text-accent-200 hover:text-accent-200';
|
||||
} else {
|
||||
return 'text-icon-default hover:text-icon-active focus:text-icon-active';
|
||||
}
|
||||
});
|
||||
defineProps<{
|
||||
tags: Tag[];
|
||||
createTag: (name: string) => Promise<Tag | undefined>;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TagDropdown
|
||||
:createTag
|
||||
@changed="emit('changed')"
|
||||
v-model="model"
|
||||
:tags="tags">
|
||||
<template #trigger>
|
||||
<button
|
||||
data-testid="tag_dropdown"
|
||||
:class="
|
||||
twMerge(
|
||||
iconColorClasses,
|
||||
'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus-visible:bg-card-background-separator hover:bg-card-background-separator rounded-full w-11 h-11 flex items-center justify-center'
|
||||
)
|
||||
">
|
||||
<TagIcon class="w-5 h-5 lg:h-6 lg:w-6"></TagIcon>
|
||||
<span
|
||||
v-if="model.length > 1"
|
||||
class="font-extrabold absolute rounded-full text-xs w-3 h-3 block top-[15px] rotate-[45deg] right-[14px] text-card-background">
|
||||
{{ model.length }}
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
</TagDropdown>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user