removed debug code

frontend/src/components/Contributions/ContributionForm.vue

@@ -81,7 +81,7 @@
 </template>
 
 <script setup>
-import { reactive, computed, watchEffect, watch, ref } from 'vue'
+import { reactive, computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ValidatedInput from '@/components/Inputs/ValidatedInput'
 import LabeledInput from '@/components/Inputs/LabeledInput'
@@ -105,7 +105,7 @@ const form = reactive({ ...props.modelValue })
 watch(() => props.modelValue, (newValue) => Object.assign(form, newValue))
 
 // use computed to make sure child input update if props from parent from this component change
-const amount = computed(() => (form.hours * 20).toFixed(2).toString())
+const amount = computed(() => form.hours ? (form.hours * 20).toFixed(2).toString() : '20')
 const date = computed(() => form.date)
 const hours = computed(() => form.hours)
 const memo = computed(() => form.memo)
@@ -116,9 +116,6 @@ const isThisMonth = computed(() => {
   return formDate.getMonth() === now.getMonth() && formDate.getFullYear() === now.getFullYear()
 });
 
-// const maxHours = computed(() => Number((isThisMonth.value ? props.maxGddThisMonth : props.maxGddLastMonth) / 20))
-// const maxAmounts = computed(() => Number(isThisMonth.value ? parseFloat(props.maxGddThisMonth): parseFloat(props.maxGddLastMonth)))
-
 const validationSchema = computed(() => {
   const maxHours = Number((isThisMonth.value ? props.maxGddThisMonth : props.maxGddLastMonth) / 20)
   const maxAmounts = Number(isThisMonth.value ? parseFloat(props.maxGddThisMonth): parseFloat(props.maxGddLastMonth))
@@ -150,14 +147,14 @@ const validationSchema = computed(() => {
   })
 })
 
-const updateField = (newValue, name) => {
+const updateField = (newValue, name, valid) => {
   if (typeof name === 'string' && name.length) {
     form[name] = newValue
     if (name === 'hours') {
       form.amount = (newValue * 20).toFixed(2).toString()
     }
   }
-  console.log('update field', { newValue, name, form, amount: amount.value })
+  // console.log('update field', { newValue, name, form, amount: amount.value })
   emit('update:modelValue', form)  
 }
 
@@ -190,12 +187,12 @@ function submit() {
 }
 
 function fullFormReset() {
-  form = {
-    date: '',
+  emit('update:modelValue', {
+    date: null,
     memo: '',
-    hours: 0.0,
-    amount: 0.0,
-  }
+    hours: '',
+    amount: null,
+  })
 }
 </script>
 <style>

frontend/src/components/Inputs/LabeledInput.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script setup>
-import { computed, defineOptions, watchEffect, ref, defineModel } from 'vue'
+import { computed, defineOptions, defineModel } from 'vue'
 defineOptions({
   inheritAttrs: false,
 })
@@ -33,7 +33,6 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  // modelValue: [String, Number, Date],
   textarea: {
     type: Boolean,
     required: false,
@@ -42,18 +41,7 @@ const props = defineProps({
 })
 
 const model = defineModel()
-// const model = ref(props.modelValue)
-/*const model = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val)
-})*/
+
 const wrapperClassName = computed(() => props.name ? `input-${props.name}` : 'input')
 const labelFor = computed(() => `${props.name}-input-field`)
-
-// const emit = defineEmits(['update:modelValue'])
-
-watchEffect(() => {
-  console.log(`${props.name}: ${props.modelValue}`)
-  // model.value = props.modelValue
-})
 </script>

frontend/src/components/Inputs/ValidatedInput.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script setup>
-import { computed, ref, watchEffect, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import LabeledInput from './LabeledInput'
 import { translateYupErrorString } from '@/validationSchemas'
@@ -39,37 +39,31 @@ const props = defineProps({
     required: true,
   },
 })
-const model = ref(props.modelValue)
-let wasUpdated = false
-
-function updateErrorMessage() {
-  try {
-    props.rules.validateSync(model.value)
-    errorMessage.value = undefined
-  } catch(e) {
-    errorMessage.value = translateYupErrorString(e.message, t)
-  }
-}
 
 const { t } = useI18n()
-const errorMessage = ref()
-const valid = computed(() => props.rules.isValidSync(model.value))
+
+const model = ref(props.modelValue)
+
+const valid = computed(() => props.rules.isValidSync(props.modelValue))
+const errorMessage = computed(() => {
+  if (props.modelValue === undefined || props.modelValue === '' || props.modelValue === null) {
+    return undefined
+  } 
+  try {
+    props.rules.validateSync(props.modelValue)
+    return undefined
+  } catch(e) {
+    return translateYupErrorString(e.message, t)
+  }
+})
 
 const emit = defineEmits(['update:modelValue'])
 const updateValue = ((newValue) => {
-  wasUpdated = true
-  model.value = newValue
-  updateErrorMessage()
-  emit('update:modelValue', newValue, props.name)  
+  emit('update:modelValue', newValue, props.name, valid.value)  
 })
 
-// validate on rule change, but only if updateValue was called at least one
-watch(() => props.rules, () => {
-  if(wasUpdated) {
-    updateErrorMessage()
-  }
-})
-// update model if parent change
+// update model and if value changed and model isn't null, check validation,
+// for loading Input with existing value and show correct validation state
 watch(() => props.modelValue, () => {
   model.value = props.modelValue
 })
@@ -82,3 +76,4 @@ const maxValue = computed(() => getTestParameter('max'))
 const resetValue = computed(() => schemaDescription.default)
 const isOptional = computed(() => schemaDescription.optional)
 </script>
+

frontend/src/pages/Community.vue

@@ -90,9 +90,9 @@ const contributionCount = ref(0)
 const contributionCountAll = ref(0)
 const form = ref({
   id: null,
-  date: '',
+  date: null,
   memo: '',
-  hours: 0,
+  hours: '',
   amount: 20,
 })
 const originalContributionDate = ref('')