refactor(admin-ui): Pull out language selector into component

admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.html

@@ -1,18 +1,8 @@
 <vdr-action-bar>
     <vdr-ab-left>
-        <clr-dropdown>
-            <button type="button" class="btn btn-outline-primary" clrDropdownTrigger>
-                <clr-icon shape="world"></clr-icon>
-                {{ 'common.language' | translate }}: {{ languageCode$ | async | uppercase }}
-                <clr-icon shape="caret down"></clr-icon>
-            </button>
-            <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
-                <button type="button"
-                        *ngFor="let code of availableLanguages$ | async"
-                        (click)="setLanguage(code)"
-                        clrDropdownItem>{{ code }}</button>
-            </clr-dropdown-menu>
-        </clr-dropdown>
+        <vdr-language-selector [availableLanguageCodes]="availableLanguages$ | async"
+                               [currentLanguageCode]="languageCode$ | async"
+                               (languageCodeChange)="setLanguage($event)"></vdr-language-selector>
     </vdr-ab-left>
 
 

admin-ui/src/app/catalog/components/product-detail/product-detail.component.html

@@ -1,18 +1,8 @@
 <vdr-action-bar>
     <vdr-ab-left>
-        <clr-dropdown>
-            <button type="button" class="btn btn-outline-primary" clrDropdownTrigger>
-                <clr-icon shape="world"></clr-icon>
-                {{ 'common.language' | translate }}: {{ languageCode$ | async | uppercase }}
-                <clr-icon shape="caret down"></clr-icon>
-            </button>
-            <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
-                <button type="button"
-                        *ngFor="let code of availableLanguages$ | async"
-                        (click)="setLanguage(code)"
-                        clrDropdownItem>{{ code }}</button>
-            </clr-dropdown-menu>
-        </clr-dropdown>
+        <vdr-language-selector [availableLanguageCodes]="availableLanguages$ | async"
+                               [currentLanguageCode]="languageCode$ | async"
+                               (languageCodeChange)="setLanguage($event)"></vdr-language-selector>
     </vdr-ab-left>
 
 

admin-ui/src/app/shared/components/language-selector/language-selector.component.html

@@ -0,0 +1,13 @@
+<clr-dropdown>
+    <button type="button" class="btn btn-outline-primary" clrDropdownTrigger>
+        <clr-icon shape="world"></clr-icon>
+        {{ 'common.language' | translate }}: {{ currentLanguageCode | uppercase }}
+        <clr-icon shape="caret down"></clr-icon>
+    </button>
+    <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
+        <button type="button"
+                *ngFor="let code of availableLanguageCodes"
+                (click)="languageCodeChange.emit(code)"
+                clrDropdownItem>{{ code }}</button>
+    </clr-dropdown-menu>
+</clr-dropdown>

admin-ui/src/app/shared/components/language-selector/language-selector.component.ts

@@ -0,0 +1,14 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { LanguageCode } from '../../../data/types/gql-generated-types';
+
+@Component({
+    selector: 'vdr-language-selector',
+    templateUrl: './language-selector.component.html',
+    styleUrls: ['./language-selector.component.scss'],
+})
+export class LanguageSelectorComponent {
+    @Input() currentLanguageCode: LanguageCode;
+    @Input() availableLanguageCodes: LanguageCode[];
+    @Output() languageCodeChange = new EventEmitter<LanguageCode>();
+}

admin-ui/src/app/shared/shared.module.ts

@@ -19,6 +19,7 @@ import { DataTableComponent } from './components/data-table/data-table.component
 import { FormFieldControlDirective } from './components/form-field/form-field-control.directive';
 import { FormFieldComponent } from './components/form-field/form-field.component';
 import { FormItemComponent } from './components/form-item/form-item.component';
+import { LanguageSelectorComponent } from './components/language-selector/language-selector.component';
 import { DialogButtonsDirective } from './components/modal-dialog/dialog-buttons.directive';
 import { DialogComponentOutletComponent } from './components/modal-dialog/dialog-component-outlet.component';
 import { DialogTitleDirective } from './components/modal-dialog/dialog-title.directive';
@@ -57,6 +58,7 @@ const DECLARATIONS = [
     DialogButtonsDirective,
     DialogTitleDirective,
     SelectToggleComponent,
+    LanguageSelectorComponent,
 ];
 
 @NgModule({