UI for language searchfield

src/main/webapp/app/search/search-input/search-input.component.html

@@ -72,6 +72,23 @@
             
             </form>
         </div>
+        <div>
+            <form name="searchFormLanguage" class="form-inline">
+                 <div class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">
+                       <span jhiTranslate="exercise.metadata.language.mix">Language(s)</span>
+                    </a><span *ngFor="let language of languageValues, let isLast=last">{{'exercise.metadata.' + language | translate}}{{isLast ? '' : ', '}}</span>
+                    <div class="dropdown-menu" style="padding-left: 10px;">
+                    <table><tr *ngFor="let language of languageValues"><td>
+                        <input class="form-check-input" [value]="language" type="checkbox" queryParamName="{{language}}">
+                        </td><td style="text-align: left;">
+                        <label class="form-check-label" style="display: inline-block;align-items: left" for="language">{{'exercise.metadata.' + language | translate}}</label>
+                        </td></table>
+                    </div>
+                </div>
+            
+            </form>
+        </div>
     </ng-container>
 </div>
 

src/main/webapp/app/search/search-input/search-input.component.ts

@@ -28,6 +28,7 @@ export class SearchInputComponent implements OnInit, OnDestroy {
   public pageSize = 4;
 
   typeValues = Object.keys(IExerciseType);
+  languageValues = ['en', 'de'];
 
   questionIcon = faQuestion;
   public paramGroup: QueryParamGroup;
@@ -80,6 +81,14 @@ export class SearchInputComponent implements OnInit, OnDestroy {
       });
     });
 
+    // add type language checkbox support
+    this.languageValues.forEach(language => {
+      groupDef[language] = qpb.stringParam(language, {
+        debounceTime: SearchInputComponent.DEBOUNCE_TIME,
+        emptyOn: '',
+      });
+    });
+
     this.paramGroup = qpb.group(groupDef);
 
     this.paramGroup.valueChanges.pipe(takeUntil(this.componentDestroyed$)).subscribe(value => {
@@ -96,6 +105,14 @@ export class SearchInputComponent implements OnInit, OnDestroy {
     return result;
   }
 
+  getSelectedLanguages(): string[] {
+    const result: string[] = [];
+    this.languageValues.forEach(language => {
+      if (this.paramGroup.queryParams[language].value) result.push(language);
+    });
+    return result;
+  }
+
   ngOnInit(): void {}
 
   ngOnDestroy(): void {

src/main/webapp/i18n/de/exercise.json

@@ -20,7 +20,8 @@
       },
       "language": {
         "singular": "Sprache",
-        "plural": "Sprachen"
+        "plural": "Sprachen",
+        "mix": "Sprache(n)"
       },
       "creator": {
         "singular": "Ersteller",
@@ -80,7 +81,9 @@
       "final": "Final",
       "draft": "Entwurf",
       "revised": "Überarbeitet",
-      "unavailable": "Nicht verfügbar"
+      "unavailable": "Nicht verfügbar",
+      "en": "Englisch",
+      "de": "Deutsch"
     },
     "export": {
       "export": "Exportieren",

src/main/webapp/i18n/en/exercise.json

@@ -20,7 +20,8 @@
       },
       "language": {
         "singular": "Language",
-        "plural": "Languages"
+        "plural": "Languages",
+        "mix": "Language(s)"
       },
       "creator": {
         "singular": "Creator",
@@ -80,7 +81,9 @@
       "final": "Final",
       "draft": "Draft",
       "revised": "Revised",
-      "unavailable": "Unavailable"
+      "unavailable": "Unavailable",
+      "en": "English",
+      "de": "German"
     },
     "export": {
       "export": "Export",