Umsetzung #67 (Suche nach Typ) nochmals Auswahl aufgehübscht.

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

@@ -57,15 +57,19 @@
         </div>
         <div>
             <form name="searchForm" class="form-inline">
-                <div class="input-group w-100 mt-3">
-                <table><tr><td><p jhiTranslate="exercise.metadata.type">Type</p></td>
-                </tr><tr *ngFor="let type of typeValues"><td>
-	                    <input 
-	                    class="form-check-input" [value]="type" style="align:left" type="checkbox" queryParamName="{{type}}" id="type"
-	                    ><label class="form-check-label" for="type">{{'exercise.metadata.' + type | translate}}</label>
-                </td></tr>
-                </table>
-                 </div>
+                 <div class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">
+                       <span jhiTranslate="exercise.metadata.type">Type</span>
+                    </a><span *ngFor="let type of getSelectedTypes(), let isLast=last">{{'exercise.metadata.' + type | translate}}{{isLast ? '' : ', '}}</span>
+                    <div class="dropdown-menu" style="padding-left: 10px;">
+                    <table><tr *ngFor="let type of typeValues"><td>
+                        <input class="form-check-input" [value]="type" type="checkbox" queryParamName="{{type}}" id="type">
+                        </td><td style="text-align: left;">
+                        <label class="form-check-label" style="display: inline-block;align-items: left" for="type">{{'exercise.metadata.' + type | translate}}</label>
+                        </td></table>
+                    </div>
+                </div>
+            
             </form>
         </div>
     </ng-container>

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

@@ -84,6 +84,13 @@ export class SearchInputComponent implements OnInit, OnDestroy {
       this.searchInputEvent.emit(this.searchInput);
     });
   }
+  
+  getSelectedTypes(): string[] {
+    const result: string[] = [];
+    this.typeValues.forEach(
+        type => {if(this.paramGroup.queryParams[type].value) result.push(type)});
+    return result;
+}
 
   ngOnInit(): void {}