From 049b9728c558fe502901ce2cadbf79ae3a2972cd Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Tue, 26 Jul 2022 11:17:35 +0200
Subject: [PATCH] Replace own logic to validation-provider.

---
 .../Contributions/ContributionForm.vue        | 40 ++++++++++---------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/Contributions/ContributionForm.vue b/frontend/src/components/Contributions/ContributionForm.vue
index 6b8ef39d0..1c98dfd98 100644
--- a/frontend/src/components/Contributions/ContributionForm.vue
+++ b/frontend/src/components/Contributions/ContributionForm.vue
@@ -25,25 +25,27 @@
         :label-no-date-selected="$t('contribution.noDateSelected')"
         required
       ></b-form-datepicker>
-      <label class="mt-3">{{ $t('contribution.activity') }}</label>
-      <b-form-textarea
-        id="contribution-memo"
-        v-model="form.memo"
-        rows="3"
-        max-rows="6"
-        required
-        :minlength="minlength"
-        :maxlength="maxlength"
-      ></b-form-textarea>
-      <div
-        v-show="form.memo.length > 0"
-        class="text-right"
-        :class="form.memo.length < minlength ? 'text-danger' : 'text-success'"
+      <validation-provider
+        :rules="{
+          required: true,
+          min: minlength,
+          max: maxlength,
+        }"
+        :name="$t('form.message')"
+        v-slot="{ errors }"
       >
-        {{ form.memo.length }}
-        <span v-if="form.memo.length < minlength">{{ $t('math.lower') }} {{ minlength }}</span>
-        <span v-else>{{ $t('math.divide') }} {{ maxlength }}</span>
-      </div>
+        <label class="mt-3">{{ $t('contribution.activity') }}</label>
+        <b-form-textarea
+          id="contribution-memo"
+          v-model="form.memo"
+          rows="3"
+          max-rows="6"
+          required
+        ></b-form-textarea>
+        <b-col v-if="errors">
+          <span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
+        </b-col>
+      </validation-provider>
       <label class="mt-3">{{ $t('form.amount') }}</label>
       <b-input-group size="lg" prepend="GDD" append=".00">
         <b-form-input
@@ -90,7 +92,7 @@ export default {
   },
   data() {
     return {
-      minlength: 50,
+      minlength: 5,
       maxlength: 255,
       maximalDate: new Date(),
       form: this.value,