Merge pull request #2088 from gradido/2081-contribution-memo-error-message

[Feat] Replace logic to validation-provider.

frontend/src/components/Contributions/ContributionForm.spec.js

@@ -23,6 +23,9 @@ describe('ContributionForm', () => {
         creation: ['1000', '1000', '1000'],
       },
     },
+    $i18n: {
+      locale: 'en',
+    },
   }
 
   const Wrapper = () => {

frontend/src/components/Contributions/ContributionForm.vue

@@ -18,6 +18,7 @@
         id="contribution-date"
         v-model="form.date"
         size="lg"
+        :locale="$i18n.locale"
         :max="maximalDate"
         :min="minimalDate"
         class="mb-4"
@@ -25,25 +26,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 +93,7 @@ export default {
   },
   data() {
     return {
-      minlength: 50,
+      minlength: 5,
       maxlength: 255,
       maximalDate: new Date(),
       form: this.value,
@@ -166,3 +169,8 @@ export default {
   },
 }
 </script>
+<style>
+span.errors {
+  color: red;
+}
+</style>

frontend/src/locales/de.json

@@ -203,10 +203,8 @@
   "login": "Anmeldung",
   "math": {
     "aprox": "~",
-    "divide": "/",
     "equal": "=",
     "exclaim": "!",
-    "lower": "<",
     "minus": "−",
     "pipe": "|"
   },

frontend/src/locales/en.json

@@ -203,10 +203,8 @@
   "login": "Login",
   "math": {
     "aprox": "~",
-    "divide": "/",
     "equal": "=",
     "exclaim": "!",
-    "lower": "<",
     "minus": "−",
     "pipe": "|"
   },

frontend/src/pages/Community.spec.js

@@ -26,6 +26,9 @@ describe('Community', () => {
         creation: ['1000', '1000', '1000'],
       },
     },
+    $i18n: {
+      locale: 'en',
+    },
   }
 
   const Wrapper = () => {