Fix Add Language check for form submit

webapp/components/ContributionForm/ContributionForm.vue

@@ -24,7 +24,7 @@
         <ds-text align="right">
           <ds-chip v-if="form.title.length < formSchema.title.min" class="checkicon" size="base">
             {{ form.title.length }}/{{ formSchema.title.max }}
-            <ds-icon name="warning"></ds-icon>
+            <ds-icon name="warning" class="colorRed"></ds-icon>
           </ds-chip>
           <ds-chip
             v-else-if="form.title.length < formSchema.title.max"
@@ -54,7 +54,7 @@
               size="base"
             >
               {{ form.contentLength }}
-              <ds-icon name="warning"></ds-icon>
+              <ds-icon name="warning" class="colorRed"></ds-icon>
             </ds-chip>
             <ds-chip v-else class="checkicon" size="base" color="primary">
               {{ form.contentLength }}
@@ -71,7 +71,7 @@
         <ds-text align="right">
           <ds-chip v-if="form.categoryIds.length === 0" class="checkicon checkicon_cat" size="base">
             {{ form.categoryIds.length }} / 3
-            <ds-icon name="warning"></ds-icon>
+            <ds-icon name="warning" class="colorRed">></ds-icon>
           </ds-chip>
           <ds-chip v-else class="checkicon checkicon_cat" size="base" color="primary">
             {{ form.categoryIds.length }} / 3
@@ -79,18 +79,28 @@
           </ds-chip>
         </ds-text>
         <ds-flex class="contribution-form-footer">
-          <ds-flex-item :width="{ base: '10%', sm: '10%', md: '10%', lg: '15%' }" />
-          <ds-flex-item :width="{ base: '80%', sm: '30%', md: '30%', lg: '20%' }">
+          <ds-flex-item>
             <ds-space margin-bottom="small" />
             <ds-select
               model="language"
               :options="form.languageOptions"
               icon="globe"
-              :placeholder="locale"
+              :placeholder="form.languageDefault"
               :label="$t('contribution.languageSelectLabel')"
+              @input.native="updateLanguage"
             />
           </ds-flex-item>
         </ds-flex>
+        <ds-text align="right">
+          <ds-chip v-if="form.language !== null" size="base" color="primary">
+            {{ form.language.label }}
+            <ds-icon name="check"></ds-icon>
+          </ds-chip>
+          <ds-chip v-else size="base">
+            {{ $t('contribution.languageSelectLabel') }}
+            <ds-icon name="warning" class="colorRed"></ds-icon>
+          </ds-chip>
+        </ds-text>
         <ds-space />
         <div slot="footer" style="text-align: right">
           <ds-button
@@ -150,6 +160,8 @@ export default {
         image: null,
         language: null,
         languageOptions: [],
+        languageDefault: this.$t('contribution.languageSelectText'),
+        selectedLanguage: '',
         categoryIds: [],
       },
       formSchema: {
@@ -258,6 +270,10 @@ export default {
       this.form.categoryIds = ids
       this.validatePost()
     },
+    updateLanguage() {
+      this.form.selectedLanguage = this.form.language.label
+      this.validatePost()
+    },
     addTeaserImage(file) {
       this.form.teaserImage = file
     },
@@ -272,7 +288,13 @@ export default {
       const passesContentValidations = this.form.contentLength >= this.contentMin
       const passesCategoryValidations =
         this.form.categoryIds.length > 0 && this.form.categoryIds.length <= 3
-      this.failsValidations = !(passesContentValidations && passesCategoryValidations)
+      const passedLanguageValidation = this.form.language !== null
+
+      this.failsValidations = !(
+        passesContentValidations &&
+        passesCategoryValidations &&
+        passedLanguageValidation
+      )
     },
   },
   apollo: {
@@ -334,4 +356,7 @@ export default {
 .checkicon_cat {
   top: -58px;
 }
+.colorRed {
+  color: red;
+}
 </style>

webapp/locales/de.json

@@ -579,7 +579,8 @@
     "filterFollow": "Beiträge filtern von Usern denen ich folge",
     "filterALL": "Alle Beiträge anzeigen",
     "success": "Gespeichert!",
-    "languageSelectLabel": "Sprache",
+    "languageSelectLabel": "Sprache deines Beitrags",
+    "languageSelectText": "Sprache wählen",
     "categories": {
       "infoSelectedNoOfMaxCategories": "{chosen} von {max} Kategorien ausgewählt"
     },

webapp/locales/en.json

@@ -580,7 +580,8 @@
     "filterFollow": "Filter contributions from users I follow",
     "filterALL": "View all contributions",
     "success": "Saved!",
-    "languageSelectLabel": "Language",
+    "languageSelectLabel": "Language of your contribution",
+    "languageSelectText": "Select Language",
     "categories": {
       "infoSelectedNoOfMaxCategories": "{chosen} of {max} categories selected"
     },