feat(admin-ui): Create ActionBarComponent

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

@@ -1,22 +1,31 @@
-<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-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-ab-left>
 
-<form class="form" [formGroup]="productForm" (ngSubmit)="save()">
-    <button class="btn btn-primary"
-            type="submit"
-            [disabled]="productForm.invalid || productForm.pristine">{{ 'common.update' | translate }}</button>
 
+    <vdr-ab-right>
+        <button class="btn btn-primary"
+                (click)="save()"
+                [disabled]="productForm.invalid || productForm.pristine">{{ 'common.update' | translate }}</button>
+    </vdr-ab-right>
+</vdr-action-bar>
+
+
+
+<form class="form" [formGroup]="productForm" >
     <section class="form-block" formGroupName="product">
         <label>{{ 'catalog.product' | translate }}</label>
         <vdr-form-field [label]="'catalog.product-name' | translate" for="name">

admin-ui/src/app/shared/components/action-bar/action-bar.component.html

@@ -0,0 +1,6 @@
+<div class="left-content">
+    <ng-content select="vdr-ab-left"></ng-content>
+</div>
+<div class="right-content">
+    <ng-content select="vdr-ab-right"></ng-content>
+</div>

admin-ui/src/app/shared/components/action-bar/action-bar.component.scss

@@ -0,0 +1,4 @@
+:host {
+    display: flex;
+    justify-content: space-between;
+}

admin-ui/src/app/shared/components/action-bar/action-bar.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActionBarComponent } from './action-bar.component';
+
+describe('ActionBarComponent', () => {
+    let component: ActionBarComponent;
+    let fixture: ComponentFixture<ActionBarComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [ActionBarComponent],
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ActionBarComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

admin-ui/src/app/shared/components/action-bar/action-bar.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'vdr-action-bar',
+    templateUrl: './action-bar.component.html',
+    styleUrls: ['./action-bar.component.scss'],
+})
+export class ActionBarComponent {}
+
+@Component({
+    selector: 'vdr-ab-left',
+    template: `<ng-content></ng-content>`,
+})
+export class ActionBarLeftComponent {}
+
+@Component({
+    selector: 'vdr-ab-right',
+    template: `<ng-content></ng-content>`,
+})
+export class ActionBarRightComponent {}

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

@@ -6,6 +6,11 @@ import { ClarityModule } from '@clr/angular';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgxPaginationModule } from 'ngx-pagination';
 
+import {
+    ActionBarComponent,
+    ActionBarLeftComponent,
+    ActionBarRightComponent,
+} from './components/action-bar/action-bar.component';
 import { DataTableColumnComponent } from './components/data-table/data-table-column.component';
 import { DataTableComponent } from './components/data-table/data-table.component';
 import { FormFieldControlDirective } from './components/form-field/form-field-control.directive';
@@ -30,6 +35,9 @@ const IMPORTS = [
 ];
 
 const DECLARATIONS = [
+    ActionBarComponent,
+    ActionBarLeftComponent,
+    ActionBarRightComponent,
     DataTableComponent,
     DataTableColumnComponent,
     PaginationControlsComponent,