solidtime/resources/js/Components/Common/TimeTracker/TimeTrackerControls.vue

<script setup lang="ts">
import TimeTrackerTagDropdown from '@/Components/Common/TimeTracker/TimeTrackerTagDropdown.vue';
import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
import TimeTrackerRangeSelector from '@/Components/Common/TimeTracker/TimeTrackerRangeSelector.vue';
import BillableToggleButton from '@/Components/Common/BillableToggleButton.vue';
import TimeTrackerProjectTaskDropdown from '@/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
import type {
    CreateClientBody,
    CreateProjectBody,
    Project,
    Tag,
    Task,
    TimeEntry,
    Client,
} from '@/utils/api';
import { ref } 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;
}>();

const emit = defineEmits<{
    startTimer: [];
    stopTimer: [];
    updateTimeEntry: [];
    startLiveTimer: [];
    stopLiveTimer: [];
}>();

function updateProject() {
    setBillableDefaultForProject();
    emit('updateTimeEntry');
}

function startTimerIfNotActive() {
    if (!props.isActive) {
        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');
    }
}
</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="currentTimeEntry.description"
                    @keydown.enter="startTimerIfNotActive"
                    @blur="$emit('updateTimeEntry')"
                    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
                        :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>