From a065744d402ee02d67d2032756319c45772df303 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Sat, 1 Jun 2024 02:04:20 +0200
Subject: [PATCH] indent design bug fixes on time view, fixes ST-208

---
 .../TimeEntry/TimeEntryAggregateRow.vue       | 23 ++++---
 .../TimeEntry/TimeEntryDescriptionInput.vue   | 69 +++++++------------
 .../Common/TimeEntry/TimeEntryRow.vue         |  1 -
 3 files changed, 37 insertions(+), 56 deletions(-)

diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryAggregateRow.vue b/resources/js/Components/Common/TimeEntry/TimeEntryAggregateRow.vue
index 45c7e99a..d4d20462 100644
--- a/resources/js/Components/Common/TimeEntry/TimeEntryAggregateRow.vue
+++ b/resources/js/Components/Common/TimeEntry/TimeEntryAggregateRow.vue
@@ -111,17 +111,18 @@ const expanded = ref(false);
                     <input
                         type="checkbox"
                         class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
-                    <GroupedItemsCountButton
-                        :expanded="expanded"
-                        @click="expanded = !expanded">
-                        {{ timeEntry?.timeEntries?.length }}
-                    </GroupedItemsCountButton>
-                    <TimeEntryDescriptionInput
-                        @changed="updateTimeEntryDescription"
-                        class="flex-1"
-                        :modelValue="
-                            timeEntry.description
-                        "></TimeEntryDescriptionInput>
+                    <div class="flex items-center">
+                        <GroupedItemsCountButton
+                            :expanded="expanded"
+                            @click="expanded = !expanded">
+                            {{ timeEntry?.timeEntries?.length }}
+                        </GroupedItemsCountButton>
+                        <TimeEntryDescriptionInput
+                            @changed="updateTimeEntryDescription"
+                            :modelValue="
+                                timeEntry.description
+                            "></TimeEntryDescriptionInput>
+                    </div>
                     <TimeTrackerProjectTaskDropdown
                         :showBadgeBorder="false"
                         @changed="updateProjectAndTask"
diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue b/resources/js/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue
index 2fa65429..28bdbdc4 100644
--- a/resources/js/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue
+++ b/resources/js/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue';
+
 const value = defineModel();
 const emit = defineEmits(['changed']);
 
@@ -6,60 +8,39 @@ function onChange(event: Event) {
     const target = event.target as HTMLInputElement;
     if (target.value !== value.value) {
         emit('changed', target.value);
+        value.value = target.value;
     }
 }
+
+function onInput(event: Event) {
+    liveDataValue.value = (event.target as HTMLInputElement).value;
+}
+
+const liveDataValue = ref(value.value);
+
+const displaysPlaceholder = computed(() => {
+    return liveDataValue.value === '' || liveDataValue.value === null;
+});
 </script>
 
 <template>
     <div>
-        <label class="input-sizer text-sm font-medium" :data-value="value">
+        <div class="relative text-sm font-medium p">
+            <div
+                :class="[
+                    'opacity-0 py-2 text-base whitespace-pre pl-3 pr-1',
+                    { 'min-w-[150px]': displaysPlaceholder },
+                ]">
+                {{ liveDataValue }}
+            </div>
             <input
                 data-testid="time_entry_description"
-                :value="value"
+                :value="liveDataValue"
                 @blur="onChange"
+                @input="onInput"
                 @keydown.enter="onChange"
                 placeholder="Add a description"
-                class="text-white font-medium bg-transparent focus-visible:ring-0 hover:bg-card-background rounded-lg border border-transparent hover:border-card-border" />
-        </label>
+                class="absolute px-0 pl-3 pr-1 left-0 top-0 w-full text-white font-medium bg-transparent focus-visible:ring-0 rounded-lg border-0" />
+        </div>
     </div>
 </template>
-
-<style scoped lang="postcss">
-.input-sizer {
-    display: inline-grid;
-    vertical-align: top;
-    align-items: center;
-    position: relative;
-
-    &.stacked {
-        align-items: stretch;
-
-        &::after,
-        input,
-        textarea {
-            grid-area: 2 / 1;
-        }
-    }
-
-    &::after,
-    input,
-    textarea {
-        width: auto;
-        min-width: 1em;
-        grid-area: 1 / 2;
-        padding: 0.5rem 0.75rem;
-        margin: 0;
-        font: inherit;
-        resize: none;
-        background: none;
-        appearance: none;
-        border: none;
-    }
-
-    &::after {
-        content: attr(data-value) ' ';
-        visibility: hidden;
-        white-space: pre-wrap;
-    }
-}
-</style>
diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryRow.vue b/resources/js/Components/Common/TimeEntry/TimeEntryRow.vue
index 36f321f2..981c40f2 100644
--- a/resources/js/Components/Common/TimeEntry/TimeEntryRow.vue
+++ b/resources/js/Components/Common/TimeEntry/TimeEntryRow.vue
@@ -96,7 +96,6 @@ function updateProjectAndTask(projectId: string, taskId: string) {
                     <div class="w-7 h-7" v-if="indent === true"></div>
                     <TimeEntryDescriptionInput
                         @changed="updateTimeEntryDescription"
-                        class="flex-1"
                         :modelValue="
                             timeEntry.description
                         "></TimeEntryDescriptionInput>