hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

Refactor filter buttons to standalone component

pull/40/head
HardiReady 2018-07-08 16:46:13 +02:00
parent ff0e615862
commit 0255e63c3a
5 changed files with 64 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
static/src/app/common/user-interface/list-filter/list-filter.component.css Normal file
View File

@ -0,0 +1,15 @@
.list-header {
width: 100%;
padding-bottom: 20px;
}
.add-btn {
margin-right: 16px;
margin-top: -3px;
float: right;
}
:host/deep/.mat-icon {
height: 32px;
width: 32px;
}

11
static/src/app/common/user-interface/list-filter/list-filter.component.html Normal file
View File

@ -0,0 +1,11 @@
<div class="input-group list-header pull-left">
<mat-button-toggle-group #group="matButtonToggleGroup">
<mat-button-toggle *ngFor="let button of filterButtons" value="{{button.value}}" (change)="execute(group)">
{{button.label}}
</mat-button-toggle>
</mat-button-toggle-group>
<button mat-icon-button class="add-btn">
<mat-icon svgIcon="{{addButton.svgIcon}}" title="addButton.tooltip"
(click)="add()"></mat-icon>
</button>
</div>

28
static/src/app/common/user-interface/list-filter/list-filter.component.ts Normal file
View File

@ -0,0 +1,28 @@
import {Component, EventEmitter, Input, Output} from '@angular/core';
@Component({
selector: 'cc-list-filter',
templateUrl: './list-filter.component.html',
styleUrls: ['./list-filter.component.css']
})
export class ListFilterComponent {
@Input() filterButtons: any[];
@Input() addButton: any;
@Output() executeSearch = new EventEmitter();
@Output() openAddFrom = new EventEmitter();
constructor() {
}
execute(group) {
this.executeSearch.emit(group);
}
add() {
this.openAddFrom.emit();
}
}

25
static/src/app/decorations/decoration-list/decoration-list.component.html
View File

@ -1,21 +1,12 @@
<div class="select-list">
<div class="input-group list-header pull-left">
<mat-button-toggle-group #group="matButtonToggleGroup">
<mat-button-toggle value="BLUFOR" (change)="filterDecorations(group)">
{{fraction.BLUFOR}}
</mat-button-toggle>
<mat-button-toggle value="OPFOR" (change)="filterDecorations(group)">
{{fraction.OPFOR}}
</mat-button-toggle>
<mat-button-toggle value="GLOBAL" (change)="filterDecorations(group)">
Global
</mat-button-toggle>
</mat-button-toggle-group>
<button mat-icon-button class="add-btn">
<mat-icon svgIcon="add" title="Neue Auszeichnung hinzufügen"
(click)="openNewDecorationForm()"></mat-icon>
</button>
</div>
<cc-list-filter
[filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
{label: fraction.OPFOR, value: 'OPFOR'},
{label: 'Global', value: 'GLOBAL'}]"
[addButton]="{svgIcon: 'add', tooltip: 'Neue Auszeichnung hinzufügen'}"
(executeSearch)="filterDecorations($event)"
(openAddFrom)="openNewDecorationForm()">
</cc-list-filter>
<div class="input-group list-header">
<input id="search-tasks"

3
static/src/app/decorations/decoration.routing.ts
View File

@ -4,6 +4,7 @@ import {DecorationListComponent} from './decoration-list/decoration-list.compone
import {EditDecorationComponent} from './edit-decoration/edit-decoration.component';
import {ModuleWithProviders} from '@angular/core';
import {DecorationItemComponent} from './decoration-list/decoration-item.component';
import {ListFilterComponent} from '../common/user-interface/list-filter/list-filter.component';
export const decorationsRoutes: Routes = [{
path: '', component: DecorationComponent,
@ -28,5 +29,5 @@ export const decorationsRoutes: Routes = [{
export const decorationRoutesModule: ModuleWithProviders = RouterModule.forChild(decorationsRoutes);
export const decorationsRoutingComponents = [DecorationItemComponent, DecorationComponent, DecorationListComponent,
EditDecorationComponent];
EditDecorationComponent, ListFilterComponent];