fix billable rate input field, fixes ST-203

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) {
+function formatValue(modelValue: number | null) {
-    const formattedValue = formatCents(modelValue);
+    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"

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,
     };
 }
 

resources/js/Components/TextInput.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 
-defineProps({
+defineProps<{
-    modelValue: String,
+    name?: string;
-    name: String,
+}>();
-});
 
 const input = ref<HTMLInputElement | null>(null);
 
@@ -15,21 +14,13 @@ onMounted(() => {
 });
 
 defineExpose({ focus: () => input.value?.focus() });
-
+const model = defineModel();
-const emit = defineEmits(['update:modelValue']);
-
-function updateValue(event: Event) {
-    if (event.target && 'value' in event.target) {
-        emit('update:modelValue', event?.target?.value);
-    }
-}
 </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"
+        v-model="model"
-        :name="name"
+        :name="name" />
-        @input="updateValue" />
 </template>