From ee6999af9029a20f5b0a0a79d8e7e6634dddea91 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Sun, 2 Jun 2024 19:02:22 +0200
Subject: [PATCH] fix billable rate input field, fixes ST-203

---
 .../Components/Common/BillableRateInput.vue   | 26 ++++++++++++++-----
 .../Common/Project/ProjectCreateModal.vue     |  2 ++
 resources/js/Components/TextInput.vue         | 21 +++++----------
 3 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/resources/js/Components/Common/BillableRateInput.vue b/resources/js/Components/Common/BillableRateInput.vue
index d297abcf..ca34c905 100644
--- a/resources/js/Components/Common/BillableRateInput.vue
+++ b/resources/js/Components/Common/BillableRateInput.vue
@@ -5,14 +5,14 @@ import {
     getOrganizationCurrencyString,
     getOrganizationCurrencySymbol,
 } from '../../utils/money';
+import { ref, watch } from 'vue';
 
 defineProps<{
     name: string;
 }>();
 
-const model = defineModel({
+const model = defineModel<number | null>({
     default: null,
-    type: Number,
 });
 
 function cleanUpDecimalValue(value: string) {
@@ -38,15 +38,29 @@ function updateRate(value: string) {
             value = cleanUpDecimalValue(value);
             model.value = parseInt(value);
         }
+    } else if (value === '') {
+        model.value = 0;
     } else {
         // if it doesn't contain a comma or a dot, it's probably a whole number so let's convert it to cents
-        model.value = parseInt(cleanUpDecimalValue(value)) * 100;
+        const parsedValue = parseInt(cleanUpDecimalValue(value)) * 100;
+        if (parsedValue) {
+            model.value = parsedValue;
+        } else {
+            model.value = 0;
+        }
     }
+    inputValue.value = formatValue(model.value);
 }
-function formatValue(modelValue: number) {
-    const formattedValue = formatCents(modelValue);
+function formatValue(modelValue: number | null) {
+    const formattedValue = formatCents(modelValue ?? 0);
     return formattedValue.replace(getOrganizationCurrencySymbol(), '').trim();
 }
+
+watch(model, (newValue) => {
+    inputValue.value = formatValue(newValue);
+});
+
+const inputValue = ref(formatValue(model.value));
 </script>
 
 <template>
@@ -54,7 +68,7 @@ function formatValue(modelValue: number) {
         <TextInput
             :id="name"
             ref="projectMemberRateInput"
-            :modelValue="formatValue(model)"
+            v-model="inputValue"
             @blur="updateRate($event.target.value)"
             type="text"
             :name="name"
diff --git a/resources/js/Components/Common/Project/ProjectCreateModal.vue b/resources/js/Components/Common/Project/ProjectCreateModal.vue
index 70c99c5f..08890c4c 100644
--- a/resources/js/Components/Common/Project/ProjectCreateModal.vue
+++ b/resources/js/Components/Common/Project/ProjectCreateModal.vue
@@ -26,6 +26,7 @@ const project = ref<CreateProjectBody>({
     name: '',
     color: getRandomColor(),
     client_id: null,
+    billable_rate: null,
 });
 
 async function submit() {
@@ -35,6 +36,7 @@ async function submit() {
         name: '',
         color: getRandomColor(),
         client_id: null,
+        billable_rate: null,
     };
 }
 
diff --git a/resources/js/Components/TextInput.vue b/resources/js/Components/TextInput.vue
index c9e176ca..c8f08554 100644
--- a/resources/js/Components/TextInput.vue
+++ b/resources/js/Components/TextInput.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 
-defineProps({
-    modelValue: String,
-    name: String,
-});
+defineProps<{
+    name?: string;
+}>();
 
 const input = ref<HTMLInputElement | null>(null);
 
@@ -15,21 +14,13 @@ onMounted(() => {
 });
 
 defineExpose({ focus: () => input.value?.focus() });
-
-const emit = defineEmits(['update:modelValue']);
-
-function updateValue(event: Event) {
-    if (event.target && 'value' in event.target) {
-        emit('update:modelValue', event?.target?.value);
-    }
-}
+const model = defineModel();
 </script>
 
 <template>
     <input
         ref="input"
         class="border-input-border border bg-input-background text-white focus:ring-input-border-active focus:ring-0 focus-visible:border-input-border-active rounded-md shadow-sm"
-        :value="modelValue"
-        :name="name"
-        @input="updateValue" />
+        v-model="model"
+        :name="name" />
 </template>