IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor contribution form

Browse Source
This commit is contained in:
ogerly 2022-07-18 11:12:21 +02:00
parent a438c5c680
commit 0b8e898818
3 changed files with 63 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
frontend/src/components/Contributions/ContributionForm.vue
View File

@ -12,14 +12,14 @@
<b>{{ $t('contribution.formText.text2') }}</b>
</div>
</div>
<b-form ref="form" @submit.prevent="submit">
<b-form ref="form" @submit.prevent="submit" class="border p-3">
<label>{{ $t('time.month') }}</label>
<b-form-datepicker
id="contribution-date"
v-model="form.date"
size="lg"
:max="max"
:min="min"
:max="maximalDate"
:min="minimalDate"
class="mb-4"
reset-value=""
:label-no-date-selected="$t('contribution.noDateSelected')"
@ -36,9 +36,11 @@
:maxlength="maxlength"
></b-form-textarea>
<div
v-show="form.memo.length > 0"
class="text-right"
:class="form.memo.length < minlength ? 'text-danger' : 'text-success'"
>
{{ form.memo.length }}
<span v-if="form.memo.length < minlength">{{ $t('math.equalTo') }} {{ minlength }}</span>
<span v-else>{{ $t('math.divide') }} {{ maxlength }}</span>
</div>
@ -49,15 +51,39 @@
v-model="form.amount"
type="number"
min="1"
max="1000"
:max="isThisMonth ? maxGddThisMonth : maxGddLastMonth"
></b-form-input>
</b-input-group>
<div class="mt-3 text-right">
<b-button class="test-submit" type="submit" variant="primary" :disabled="disabled">
{{ $t('contribution.submit') }}
</b-button>
<div
v-if="
(isThisMonth && form.amount > maxGddThisMonth) ||
(!isThisMonth && form.amount > maxGddLastMonth)
"
class="text-danger text-right"
>
{{
isThisMonth && form.amount > maxGddThisMonth
? $t('contribution.formText.maxGDDforMonth', { amount: maxGddThisMonth })
: ''
}}
{{
!isThisMonth && form.amount > maxGddLastMonth
? $t('contribution.formText.maxGDDforMonth', { amount: maxGddLastMonth })
: ''
}}
</div>
<b-row class="mt-3">
<b-col>
<b-button type="button" variant="light" @click.prevent="reset">
{{ $t('form.reset') }}
</b-button>
</b-col>
<b-col class="text-right">
<b-button class="test-submit" type="submit" variant="primary" :disabled="disabled">
{{ id === null ? $t('contribution.submit') : $t('form.edit') }}
</b-button>
</b-col>
</b-row>
</b-form>
</div>
</template>
@ -69,36 +95,47 @@ export default {
},
data() {
return {
maxGddLastMonth: this.$store.state.creation[1],
maxGddThisMonth: this.$store.state.creation[2],
minlength: 50,
maxlength: 255,
max: new Date(),
maximalDate: new Date(),
form: this.value,
id: this.value.id,
}
},
methods: {
submit() {
this.$emit('set-contribution', this.form)
if (this.id === null) {
this.$emit('set-contribution', this.form)
} else {
this.$emit('edit-contribution', this.value)
}
this.reset()
},
reset() {
this.$refs.form.reset()
this.form.date = ''
this.id = null
this.form.memo = ''
},
},
computed: {
/*
* lastMonth() = The date set back by one month.
* min() = The date is reset by one month to the 1st of the previous month.
* minimalDate() = The date is reset by one month to the 1st of the previous month.
*
*/
lastMonth() {
return new Date(this.max.getFullYear(), this.max.getMonth() - 1, 1)
},
min() {
return new Date(this.max.getFullYear(), this.max.getMonth() - 1, 1)
minimalDate() {
return new Date(this.maximalDate.getFullYear(), this.maximalDate.getMonth() - 1, 1)
},
disabled() {
if (
this.form.memo.length < this.minlength ||
this.form.amount <= 0 ||
this.form.amount > 1000
this.form.amount > 1000 ||
(this.isThisMonth && this.form.amount > this.maxGddThisMonth) ||
(!this.isThisMonth && this.form.amount > this.maxGddlastMonth)
)
return true
return false
@ -106,7 +143,7 @@ export default {
lastMonthObject() {
// new Date().getMonth === 1 If the current month is January, then one year must be gone back in the previous month
const obj = {
monthAndYear: this.$d(new Date(this.lastMonth), 'monthAndYear'),
monthAndYear: this.$d(new Date(this.minimalDate), 'monthAndYear'),
creation: this.$store.state.creation[1],
}
return this.$t('contribution.formText.lastMonth', obj)
@ -118,6 +155,9 @@ export default {
}
return this.$t('contribution.formText.thisMonth', obj)
},
isThisMonth() {
return new Date(this.form.date).getMonth() === new Date().getMonth()
},
},
}
</script>

3
frontend/src/locales/de.json
View File

@ -38,7 +38,8 @@
"lastMonth": "Für <b>{monthAndYear}</b> kannst du noch <b>{creation}</b> GDD einreichen.",
"text1": "Bring dich mit deinen Talenten in die Gemeinschaft ein! Dein freiwilliges Engagement honorieren wir mit 20 GDD pro Stunde bis maximal 1.000 GDD im Monat.",
"text2": "Beschreibe deine Gemeinwohl-Tätigkeit mit Angabe der Stunden und trage einen Betrag von 20 GDD pro Stunde ein! Nach Bestätigung durch einen Moderator wird der Betrag deinem Konto gutgeschrieben.",
"thisMonth": "Für <b>{monthAndYear}</b> kannst du noch <b>{creation}</b> GDD einreichen. "
"thisMonth": "Für <b>{monthAndYear}</b> kannst du noch <b>{creation}</b> GDD einreichen.",
"maxGDDforMonth":"Du kannst für den ausgewählten Monat nur noch maximal {amount} GDD einreichen."
},
"noDateSelected": "Kein Datum ausgewählt",
"submit": "Einreichen"

3
frontend/src/locales/en.json
View File

@ -38,7 +38,8 @@
"lastMonth": "For <b>{monthAndYear}</b>, you can still submit <b>{creation}</b> GDD.",
"text1": "Bring your talents to the community! Your voluntary commitment will be rewarded with 20 GDD per hour up to a maximum of 1,000 GDD per month.",
"text2": "Describe your community service activity with hours and enter an amount of 20 GDD per hour! After confirmation by a moderator, the amount will be credited to your account.",
"thisMonth": "For <b>{monthAndYear}</b>, you can still submit <b>{creation}</b> GDD."
"thisMonth": "For <b>{monthAndYear}</b>, you can still submit <b>{creation}</b> GDD.",
"maxGDDforMonth":"You can only submit a maximum of {amount} GDD for the selected month."
},
"noDateSelected": "No date selected",
"submit": "Submit"