From fe61a54c3580d0c57c90cd9634ec5afd7f9df892 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Tue, 16 Apr 2024 16:28:37 +0200
Subject: [PATCH] fix billable toggle on time tracker, add billable toggle on
 time entries row

---
 e2e/profile.spec.ts                           |  5 +++-
 e2e/timetracker.spec.ts                       |  2 ++
 .../Common/BillableToggleButton.vue           | 29 +++++++++++++++++--
 .../js/Components/Common/Tag/TagDropdown.vue  |  2 +-
 .../Common/TimeEntry/TimeEntryRow.vue         | 10 +++++++
 .../TimeTracker/TimeTrackerTagDropdown.vue    |  4 +--
 resources/js/Components/TimeTracker.vue       |  6 +++-
 .../Teams/Partials/UpdateTeamNameForm.vue     |  2 +-
 8 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/e2e/profile.spec.ts b/e2e/profile.spec.ts
index 2f66648f..dc0fd707 100644
--- a/e2e/profile.spec.ts
+++ b/e2e/profile.spec.ts
@@ -4,7 +4,10 @@ import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
 test('test that user name can be updated', async ({ page }) => {
     await page.goto(PLAYWRIGHT_BASE_URL + '/user/profile');
     await page.getByLabel('Name').fill('NEW NAME');
-    await page.getByRole('button', { name: 'Save' }).first().click();
+    await Promise.all([
+        page.getByRole('button', { name: 'Save' }).first().click(),
+        page.waitForResponse('**/user/profile-information'),
+    ]);
     await page.reload();
     await expect(page.getByLabel('Name')).toHaveValue('NEW NAME');
 });
diff --git a/e2e/timetracker.spec.ts b/e2e/timetracker.spec.ts
index 77276a1f..fbb11494 100644
--- a/e2e/timetracker.spec.ts
+++ b/e2e/timetracker.spec.ts
@@ -276,3 +276,5 @@ test('test that adding a new tag when the timer is running', async ({
 // test that sidebar timetracker starts and stops timer
 
 // test that sidebar timetracker changes state when tmer on dashboard is started
+
+// test billable toggle
diff --git a/resources/js/Components/Common/BillableToggleButton.vue b/resources/js/Components/Common/BillableToggleButton.vue
index e6378fb9..b284b49c 100644
--- a/resources/js/Components/Common/BillableToggleButton.vue
+++ b/resources/js/Components/Common/BillableToggleButton.vue
@@ -2,10 +2,21 @@
 import { computed } from 'vue';
 import { twMerge } from 'tailwind-merge';
 const active = defineModel({ default: false });
+const emit = defineEmits(['changed']);
 function toggleBillable() {
     active.value = !active.value;
+    emit('changed', active.value);
 }
 
+const props = withDefaults(
+    defineProps<{
+        size: 'small' | 'base';
+    }>(),
+    {
+        size: 'base',
+    }
+);
+
 const iconColorClasses = computed(() => {
     if (active.value) {
         return 'text-accent-200/80 focus:text-accent-200 hover:text-accent-200';
@@ -13,6 +24,19 @@ const iconColorClasses = computed(() => {
         return 'text-icon-default focus:text-icon-active hover:text-icon-active';
     }
 });
+
+const iconSizeClasses = computed(() => {
+    if (props.size === 'small') {
+        return 'w-5 h-5';
+    } else {
+        return 'w-5 sm:w-6 h-5 sm:h-6';
+    }
+});
+
+const iconSizeWrapperClasses =
+    props.size === 'small'
+        ? 'w-6 sm:w-8 h-6 sm:h-8'
+        : 'w-7 sm:w-10 h-7 sm:h-10';
 </script>
 
 <template>
@@ -21,11 +45,12 @@ const iconColorClasses = computed(() => {
         :class="
             twMerge(
                 iconColorClasses,
-                'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full w-7 sm:w-11 h-7 sm:h-11 flex items-center justify-center'
+                iconSizeWrapperClasses,
+                'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full flex items-center justify-center'
             )
         ">
         <svg
-            class="w-5 sm:w-7 h-5 sm:h-7"
+            :class="iconSizeClasses"
             viewBox="0 0 8 14"
             fill="none"
             xmlns="http://www.w3.org/2000/svg">
diff --git a/resources/js/Components/Common/Tag/TagDropdown.vue b/resources/js/Components/Common/Tag/TagDropdown.vue
index 1de5a08b..ec0e364e 100644
--- a/resources/js/Components/Common/Tag/TagDropdown.vue
+++ b/resources/js/Components/Common/Tag/TagDropdown.vue
@@ -166,7 +166,7 @@ const highlightedItem = computed(() => {
                     v-if="searchValue.length > 0 && filteredTags.length === 0"
                     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="text-white flex space-x-3 items-center px-4 py-3 text-xs 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 Tag</span>
diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryRow.vue b/resources/js/Components/Common/TimeEntry/TimeEntryRow.vue
index 0da4e6c9..cba52d38 100644
--- a/resources/js/Components/Common/TimeEntry/TimeEntryRow.vue
+++ b/resources/js/Components/Common/TimeEntry/TimeEntryRow.vue
@@ -12,6 +12,7 @@ import dayjs from 'dayjs';
 import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
 import TimeEntryMoreOptionsDropdown from '@/Components/Common/TimeEntry/TimeEntryMoreOptionsDropdown.vue';
 import TimeTrackerProjectTaskDropdown from '@/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
+import BillableToggleButton from '@/Components/Common/BillableToggleButton.vue';
 
 const currentTimeEntryStore = useCurrentTimeEntryStore();
 const { stopTimer, updateTimer } = currentTimeEntryStore;
@@ -106,6 +107,15 @@ function updateProjectAndTask(projectId: string, taskId: string) {
                     <TimeEntryRowTagDropdown
                         @changed="updateTimeEntryTags"
                         :modelValue="timeEntry.tags"></TimeEntryRowTagDropdown>
+                    <BillableToggleButton
+                        :modelValue="timeEntry.billable"
+                        size="small"
+                        @changed="
+                            updateTimeEntry({
+                                ...timeEntry,
+                                billable: $event,
+                            })
+                        "></BillableToggleButton>
                     <div class="flex-1">
                         <TimeEntryRangeSelector
                             :start="timeEntry.start"
diff --git a/resources/js/Components/Common/TimeTracker/TimeTrackerTagDropdown.vue b/resources/js/Components/Common/TimeTracker/TimeTrackerTagDropdown.vue
index 23dc6b60..1f7411d7 100644
--- a/resources/js/Components/Common/TimeTracker/TimeTrackerTagDropdown.vue
+++ b/resources/js/Components/Common/TimeTracker/TimeTrackerTagDropdown.vue
@@ -25,10 +25,10 @@ const iconColorClasses = computed(() => {
                 :class="
                     twMerge(
                         iconColorClasses,
-                        'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full w-7 sm:w-11 h-7 sm:h-11 flex items-center justify-center'
+                        'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full w-7 sm:w-10 h-7 sm:h-10 flex items-center justify-center'
                     )
                 ">
-                <TagIcon class="w-5 sm:w-7 h-5 sm:h-7"></TagIcon>
+                <TagIcon class="w-5 sm:w-6 h-5 sm:h-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">
diff --git a/resources/js/Components/TimeTracker.vue b/resources/js/Components/TimeTracker.vue
index be327ead..aec48068 100644
--- a/resources/js/Components/TimeTracker.vue
+++ b/resources/js/Components/TimeTracker.vue
@@ -180,7 +180,11 @@ function onTimeEntryEnterPress() {
                         v-model="
                             currentTimeEntry.tags
                         "></TimeTrackerTagDropdown>
-                    <BillableToggleButton></BillableToggleButton>
+                    <BillableToggleButton
+                        @changed="updateTimeEntry"
+                        v-model="
+                            currentTimeEntry.billable
+                        "></BillableToggleButton>
                 </div>
                 <div class="border-l border-card-border">
                     <input
diff --git a/resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue b/resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue
index 2baec305..308fa794 100644
--- a/resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue
+++ b/resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue
@@ -61,7 +61,7 @@ const updateTeamName = () => {
                 </div>
                 <div>
                     <Link href="/billing">
-                        <PrimaryButton v-if="isBillingActivated()">
+                        <PrimaryButton type="button" v-if="isBillingActivated()">
                             <CreditCardIcon class="w-5 h-5 me-2" />
                             Go to Billing
                         </PrimaryButton>