diff --git a/frontend/src/components/Contributions/ContributionForm.spec.js b/frontend/src/components/Contributions/ContributionForm.spec.js
index 47ee4a763..36c209f8d 100644
--- a/frontend/src/components/Contributions/ContributionForm.spec.js
+++ b/frontend/src/components/Contributions/ContributionForm.spec.js
@@ -4,13 +4,6 @@ import ContributionForm from './ContributionForm.vue'
import { useForm } from 'vee-validate'
// Mock external components and dependencies
-vi.mock('@/components/Inputs/InputHour', () => ({
- default: {
- name: 'InputHour',
- template: '',
- },
-}))
-
vi.mock('@/components/Inputs/InputAmount', () => ({
default: {
name: 'InputAmount',
diff --git a/frontend/src/components/Contributions/ContributionForm.vue b/frontend/src/components/Contributions/ContributionForm.vue
index 204105f1c..fc96b1706 100644
--- a/frontend/src/components/Contributions/ContributionForm.vue
+++ b/frontend/src/components/Contributions/ContributionForm.vue
@@ -27,8 +27,8 @@
:label="$t('contribution.activity')"
:placeholder="$t('contribution.yourActivity')"
:rules="validationSchema.fields.memo"
- @update:model-value="updateField"
textarea="true"
+ @update:model-value="updateField"
/>
props.modelValue, (newValue) => Object.assign(form, newValue))
+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 ? (form.hours * 20).toFixed(2).toString() : '20')
+const amount = computed(() => form.amount)
const date = computed(() => form.date)
const hours = computed(() => form.hours)
const memo = computed(() => form.memo)
@@ -114,50 +117,37 @@ const isThisMonth = computed(() => {
const formDate = new Date(form.date)
const now = new Date()
return formDate.getMonth() === now.getMonth() && formDate.getFullYear() === now.getFullYear()
-});
+})
+// reactive validation schema, because some boundaries depend on form input and existing data
const validationSchema = computed(() => {
- const maxHours = Number((isThisMonth.value ? props.maxGddThisMonth : props.maxGddLastMonth) / 20)
- const maxAmounts = Number(isThisMonth.value ? parseFloat(props.maxGddThisMonth): parseFloat(props.maxGddLastMonth))
+ const maxAmounts = Number(
+ isThisMonth.value ? parseFloat(props.maxGddThisMonth) : parseFloat(props.maxGddLastMonth),
+ )
+ const maxHours = Number(maxAmounts / 20)
return object({
// The date field is required and needs to be a valid date
// contribution date
date: dateSchema()
.required('contribution.noDateSelected')
- .min(new Date(new Date().setMonth(new Date().getMonth() - 1, 1)).toISOString().slice(0, 10)) // min date is first day of last month
+ .min(new Date(new Date().setMonth(new Date().getMonth() - 1, 1)).toISOString().slice(0, 10)) // min date is first day of last month
.max(new Date().toISOString().slice(0, 10))
.default(''), // date cannot be in the future
memo: memoSchema,
- hours: number().transform((value, originalValue) =>
- originalValue === "" ? undefined : value
- )
+ hours: number()
+ .transform((value, originalValue) => (originalValue === '' ? undefined : value))
.required('contribution.noHours')
- .min(0.01, ({min}) => ({ key: 'form.validation.gddCreationTime.min', values: { min } }))
- .max(maxHours, ({max}) => ({ key: 'form.validation.gddCreationTime.max', values: { max } }))
- .test(
- 'decimal-places',
- 'form.validation.gddCreationTime.decimal-places',
- (value) => {
- if (value === undefined || value === null) return true
- return /^\d+(\.\d{0,2})?$/.test(value.toString())
- }
- ),
- amount: number().max(maxAmounts)
+ .min(0.01, ({ min }) => ({ key: 'form.validation.gddCreationTime.min', values: { min } }))
+ .max(maxHours, ({ max }) => ({ key: 'form.validation.gddCreationTime.max', values: { max } }))
+ .test('decimal-places', 'form.validation.gddCreationTime.decimal-places', (value) => {
+ if (value === undefined || value === null) return true
+ return /^\d+(\.\d{0,2})?$/.test(value.toString())
+ }),
+ amount: number().max(maxAmounts),
})
})
-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 })
- emit('update:modelValue', form)
-}
-
const disabled = computed(() => !validationSchema.value.isValidSync(form))
const noOpenCreation = computed(() => {
@@ -175,6 +165,16 @@ const noOpenCreation = computed(() => {
return undefined
})
+const updateField = (newValue, name) => {
+ if (typeof name === 'string' && name.length) {
+ form[name] = newValue
+ if (name === 'hours') {
+ form.amount = form.hours ? (form.hours * 20).toFixed(2).toString() : '20'
+ }
+ }
+ emit('update:modelValue', form)
+}
+
function submit() {
const dataToSave = { ...form }
let emitOption = 'set-contribution'
@@ -188,6 +188,7 @@ function submit() {
function fullFormReset() {
emit('update:modelValue', {
+ id: undefined,
date: null,
memo: '',
hours: '',
diff --git a/frontend/src/components/Contributions/OpenCreationsAmount.vue b/frontend/src/components/Contributions/OpenCreationsAmount.vue
index 3a0b6ea5a..e88fb4f46 100644
--- a/frontend/src/components/Contributions/OpenCreationsAmount.vue
+++ b/frontend/src/components/Contributions/OpenCreationsAmount.vue
@@ -33,6 +33,9 @@
diff --git a/frontend/src/components/Inputs/LabeledInput.vue b/frontend/src/components/Inputs/LabeledInput.vue
index 825478d37..920fceacd 100644
--- a/frontend/src/components/Inputs/LabeledInput.vue
+++ b/frontend/src/components/Inputs/LabeledInput.vue
@@ -1,18 +1,16 @@
-
-
+ />
+
@@ -37,11 +35,11 @@ const props = defineProps({
type: Boolean,
required: false,
default: false,
- }
+ },
})
const model = defineModel()
-const wrapperClassName = computed(() => props.name ? `input-${props.name}` : 'input')
+const wrapperClassName = computed(() => (props.name ? `input-${props.name}` : 'input'))
const labelFor = computed(() => `${props.name}-input-field`)
diff --git a/frontend/src/components/Inputs/ValidatedInput.vue b/frontend/src/components/Inputs/ValidatedInput.vue
index d55828b1f..04c346292 100644
--- a/frontend/src/components/Inputs/ValidatedInput.vue
+++ b/frontend/src/components/Inputs/ValidatedInput.vue
@@ -1,5 +1,5 @@
-
+ >
- {{ errorMessage }}
+ {{ errorMessage }}
@@ -48,32 +48,35 @@ 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) {
+ } catch (e) {
return translateYupErrorString(e.message, t)
}
})
const emit = defineEmits(['update:modelValue'])
-const updateValue = ((newValue) => {
- emit('update:modelValue', newValue, props.name, valid.value)
-})
+const updateValue = (newValue) => {
+ emit('update:modelValue', newValue, props.name, valid.value)
+}
// 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
-})
+watch(
+ () => props.modelValue,
+ () => {
+ model.value = props.modelValue
+ },
+)
// extract additional parameter like min and max from schema
const schemaDescription = computed(() => props.rules.describe())
-const getTestParameter = (name) => schemaDescription.value?.tests?.find(t => t.name === name)?.params[name]
+const getTestParameter = (name) =>
+ schemaDescription.value?.tests?.find((t) => t.name === name)?.params[name]
const minValue = computed(() => getTestParameter('min'))
const maxValue = computed(() => getTestParameter('max'))
-const resetValue = computed(() => schemaDescription.default)
-const isOptional = computed(() => schemaDescription.optional)
+const resetValue = computed(() => schemaDescription.value.default)
+const isOptional = computed(() => schemaDescription.value.optional)
-
diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index 887b3ed33..47e2edc65 100644
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@@ -105,7 +105,7 @@ const minimalDate = computed(() => {
return new Date(date.setMonth(date.getMonth() - 1, 1))
})
-const amountToAdd = computed(() => (form.value.id ? parseInt(updateAmount.value) : 0))
+const amountToAdd = computed(() => (form.value.id ? parseFloat(updateAmount.value) : 0.0))
const maxForMonths = computed(() => {
const originalDate = new Date(originalContributionDate.value)
@@ -115,9 +115,9 @@ const maxForMonths = computed(() => {
creation.year === originalDate.getFullYear() &&
creation.month === originalDate.getMonth()
) {
- return parseInt(creation.amount) + amountToAdd.value
+ return parseFloat(creation.amount)
}
- return parseInt(creation.amount)
+ return parseFloat(creation.amount)
})
}
return [0, 0]
@@ -263,20 +263,20 @@ const handleUpdateListContributions = (pagination) => {
}
const handleUpdateContributionForm = (item) => {
- /*Object.assign(form.value, {
+ /* Object.assign(form.value, {
id: item.id,
date: new Date(item.contributionDate).toISOString().slice(0, 10),
memo: item.memo,
amount: item.amount,
hours: item.amount / 20,
- })*/
+ }) */
form.value = {
id: item.id,
date: new Date(item.contributionDate).toISOString().slice(0, 10),
memo: item.memo,
amount: item.amount,
hours: item.amount / 20,
- }//*/
+ } //* /
originalContributionDate.value = item.contributionDate
updateAmount.value = item.amount
tabIndex.value = 0
diff --git a/frontend/src/validationSchemas.js b/frontend/src/validationSchemas.js
index cbf74d0b8..e4f1194cf 100644
--- a/frontend/src/validationSchemas.js
+++ b/frontend/src/validationSchemas.js
@@ -1,7 +1,8 @@
import { string } from 'yup'
// TODO: only needed for grace period, before all inputs updated for using veeValidate + yup
-export const isLanguageKey = (str) => str.match(/^(?!\.)[a-z][a-zA-Z0-9-]*([.][a-z][a-zA-Z0-9-]*)*(?
+ str.match(/^(?!\.)[a-z][a-zA-Z0-9-]*([.][a-z][a-zA-Z0-9-]*)*(? {
const type = typeof error
@@ -16,6 +17,5 @@ export const translateYupErrorString = (error, t) => {
export const memo = string()
.required('contribution.yourActivity')
- .min(5, ({min}) => ({ key: 'form.validation.memo.min', values: { min } }))
- .max(255, ({max}) => ({ key: 'form.validation.memo.max', values: { max } }))
-
+ .min(5, ({ min }) => ({ key: 'form.validation.memo.min', values: { min } }))
+ .max(255, ({ max }) => ({ key: 'form.validation.memo.max', values: { max } }))