add task selector, change dropdowns to use floating-ui

solidtime-io · Apr 10, 2024 · c6f4dfc · c6f4dfc
1 parent 64062c4
commit c6f4dfc
Show file tree

Hide file tree

Showing 12 changed files with 452 additions and 82 deletions.
diff --git a/e2e/time.spec.ts b/e2e/time.spec.ts
@@ -151,7 +151,7 @@ test('test that adding a new tag to an existing time entry works', async ({
     const newTagName = Math.floor(Math.random() * 1000000).toString();
 
     await newTimeEntry.getByTestId('time_entry_tag_dropdown').click();
-    await newTimeEntry.getByTestId('tag_dropdown_search').fill(newTagName);
+    await page.getByTestId('tag_dropdown_search').fill(newTagName);
 
     const [tagReponse] = await Promise.all([
         page.waitForResponse(async (response) => {
@@ -162,7 +162,7 @@ test('test that adding a new tag to an existing time entry works', async ({
                 (await response.json()).data.name === newTagName
             );
         }),
-        newTimeEntry.getByTestId('tag_dropdown_search').press('Enter'),
+        page.getByTestId('tag_dropdown_search').press('Enter'),
     ]);
 
     await page.waitForResponse(async (response) => {
@@ -178,12 +178,8 @@ test('test that adding a new tag to an existing time entry works', async ({
         );
     });
 
-    await expect(newTimeEntry.getByTestId('tag_dropdown_search')).toHaveValue(
-        ''
-    );
-    await expect(
-        newTimeEntry.getByRole('option', { name: newTagName })
-    ).toBeVisible();
+    await expect(page.getByTestId('tag_dropdown_search')).toHaveValue('');
+    await expect(page.getByRole('option', { name: newTagName })).toBeVisible();
 });
 
 // Test that Start / End Time Update Works
@@ -201,11 +197,11 @@ test('test that updating a the start of an existing time entry in the overview w
         'time_entry_range_selector'
     );
     await timeEntryRangeElement.click();
-    await newTimeEntry
+    await page
         .getByTestId('time_entry_range_start')
         .getByTestId('time_picker_hour')
         .fill('1');
-    await newTimeEntry
+    await page
         .getByTestId('time_entry_range_start')
         .getByTestId('time_picker_minute')
         .fill('1');
@@ -221,7 +217,7 @@ test('test that updating a the start of an existing time entry in the overview w
                 (await response.json()).data.end !== null
             );
         }),
-        newTimeEntry
+        page
             .getByTestId('time_entry_range_end')
             .getByTestId('time_picker_minute')
             .press('Tab'),
@@ -420,7 +416,7 @@ test('test that deleting a time entry from the overview works', async ({
     const newTimeEntry = timeEntryRows.first();
     const actionsDropdown = newTimeEntry.getByTestId('time_entry_actions');
     await actionsDropdown.click();
-    const deleteButton = newTimeEntry.getByTestId('time_entry_delete');
+    const deleteButton = page.getByTestId('time_entry_delete');
     await deleteButton.click();
     await expect(timeEntryRows).toHaveCount(timeEntryCount - 1);
 });

diff --git a/resources/js/Components/Common/Client/ClientDropdown.vue b/resources/js/Components/Common/Client/ClientDropdown.vue
@@ -148,7 +148,7 @@ const highlightedItem = computed(() => {
                     "
                     class="bg-card-background-active">
                     <div
-                        class="flex space-x-3 items-center px-4 py-3 text-xs font-medium border-t rounded-b-lg border-card-background-separator">
+                        class="flex space-x-3 items-center px-4 py-3 text-xs text-white font-medium border-t rounded-b-lg border-card-background-separator">
                         <PlusCircleIcon
                             class="w-5 flex-shrink-0"></PlusCircleIcon>
                         <span>Add "{{ searchValue }}" as a new Client</span>

diff --git a/resources/js/Components/Common/Project/ProjectBadge.vue b/resources/js/Components/Common/Project/ProjectBadge.vue
@@ -32,9 +32,11 @@ const indicatorClasses = {
             :class="
                 twMerge(indicatorClasses[size], 'inline-block rounded-full')
             "></div>
-        <span>
-            {{ name }}
-        </span>
+        <div>
+            <slot>
+                {{ name }}
+            </slot>
+        </div>
     </Badge>
 </template>
 

diff --git a/resources/js/Components/Common/Project/ProjectDropdown.vue b/resources/js/Components/Common/Project/ProjectDropdown.vue
@@ -107,7 +107,7 @@ function updateValue(project: Project) {
 </script>
 
 <template>
-    <Dropdown v-model="open" align="right" width="60">
+    <Dropdown v-model="open" align="bottom-start" width="60">
         <template #trigger>
             <ProjectBadge
                 ref="projectDropdownTrigger"

diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryRangeSelector.vue b/resources/js/Components/Common/TimeEntry/TimeEntryRangeSelector.vue
@@ -34,7 +34,6 @@ const { focused } = useFocusWithin(dropdownContent);
 
 watch(focused, (newValue, oldValue) => {
     if (oldValue === true && newValue === false) {
-        console.log(newValue, oldValue);
         updateTimeEntry();
     }
 });
@@ -43,7 +42,7 @@ watch(focused, (newValue, oldValue) => {
 <template>
     <div class="relative">
         <Dropdown
-            align="right"
+            align="bottom"
             :close-on-content-click="false"
             @submit="updateTimeEntry">
             <template #trigger>

diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryRow.vue b/resources/js/Components/Common/TimeEntry/TimeEntryRow.vue
@@ -2,21 +2,16 @@
 import MainContainer from '@/Pages/MainContainer.vue';
 import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
 import TimeEntryRangeSelector from '@/Components/Common/TimeEntry/TimeEntryRangeSelector.vue';
-import type { Project, TimeEntry } from '@/utils/api';
-import { computed } from 'vue';
-import { useProjectsStore } from '@/utils/useProjects';
+import type { TimeEntry } from '@/utils/api';
 import { storeToRefs } from 'pinia';
-import ProjectDropdown from '@/Components/Common/Project/ProjectDropdown.vue';
 import TimeEntryDescriptionInput from '@/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue';
 import { useTimeEntriesStore } from '@/utils/useTimeEntries';
 import TimeEntryRowTagDropdown from '@/Components/Common/TimeEntry/TimeEntryRowTagDropdown.vue';
 import TimeEntryRowDurationInput from '@/Components/Common/TimeEntry/TimeEntryRowDurationInput.vue';
 import dayjs from 'dayjs';
 import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
 import TimeEntryMoreOptionsDropdown from '@/Components/Common/TimeEntry/TimeEntryMoreOptionsDropdown.vue';
-
-const projectsStore = useProjectsStore();
-const { projects } = storeToRefs(projectsStore);
+import TimeTrackerProjectTaskDropdown from '@/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
 
 const currentTimeEntryStore = useCurrentTimeEntryStore();
 const { stopTimer, updateTimer } = currentTimeEntryStore;
@@ -29,12 +24,6 @@ const props = defineProps<{
 const { updateTimeEntry, createTimeEntry, fetchTimeEntries } =
     useTimeEntriesStore();
 
-const timeEntryProject = computed<Project | undefined>(() => {
-    return projects.value.find(
-        (project) => project.id === props.timeEntry.project_id
-    );
-});
-
 async function updateStartEndTime(start: string, end: string | null) {
     if (currentTimeEntry.value.id === props.timeEntry.id) {
         currentTimeEntry.value.start = start;
@@ -76,9 +65,16 @@ function updateTimeEntryDescription(description: string) {
 }
 
 function updateTimeEntryTags(tags: string[]) {
-    console.log(tags);
     updateTimeEntry({ ...props.timeEntry, tags });
 }
+
+function updateProjectAndTask(projectId: string, taskId: string) {
+    updateTimeEntry({
+        ...props.timeEntry,
+        project_id: projectId,
+        task_id: taskId,
+    });
+}
 </script>
 
 <template>
@@ -96,9 +92,14 @@ function updateTimeEntryTags(tags: string[]) {
                         :modelValue="
                             timeEntry.description
                         "></TimeEntryDescriptionInput>
-                    <ProjectDropdown
-                        :border="false"
-                        :value="timeEntryProject"></ProjectDropdown>
+
+                    <TimeTrackerProjectTaskDropdown
+                        :showBadgeBorder="false"
+                        @changed="updateProjectAndTask"
+                        :project="timeEntry.project_id"
+                        :task="
+                            timeEntry.task_id
+                        "></TimeTrackerProjectTaskDropdown>
                 </div>
                 <div class="flex items-center font-medium space-x-2">
                     <TimeEntryRowTagDropdown

diff --git a/resources/js/Components/Common/TimePicker.vue b/resources/js/Components/Common/TimePicker.vue
@@ -38,7 +38,7 @@ function updateHours(event: Event) {
 </script>
 
 <template>
-    <div class="flex items-center justify-center">
+    <div class="flex items-center justify-center text-muted">
         <input
             :value="hours"
             @input="updateHours"