src/app/apps/components/app-list-bar/app-list-bar.component.ts
Applications List Bar
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | app-list-bar-app |
| templateUrl | ./app-list-bar.component.html |
Properties |
Methods |
Inputs |
Outputs |
constructor()
|
actions
|
Actions
Type: |
countSelected
|
Count selected checkbox
Default value: |
page
|
Page
Type: |
params
|
Params
Type: |
action
|
Action $event type: EventEmitter
|
refresh
|
Refresh $event type: EventEmitter
|
search
|
Search $event type: EventEmitter
|
| clearSearch |
clearSearch()
|
|
Reset the search parameters and run the search
Returns :
void
|
| doRefresh |
doRefresh()
|
|
Returns :
void
|
| doSearch |
doSearch()
|
|
Returns :
void
|
| fire | ||||||||
fire(action: )
|
||||||||
|
Parameters :
Returns :
void
|
| hasActions |
hasActions()
|
|
Returns :
boolean
|
| isEmpty |
isEmpty()
|
|
Determine if there is no application
Returns :
boolean
|
| isSearchActive |
isSearchActive()
|
|
Used to determinate the state of the query parameters
Returns :
boolean
Search is active |
| ngOnInit |
ngOnInit()
|
|
On Init
Returns :
void
|
| form |
form:
|
|
Form |
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { AppListParams } from '../apps.interface';
import { Page } from '../../../shared/model/page';
/**
* Applications List Bar
*
* @author Damien Vitrac
*/
@Component({
selector: 'app-list-bar-app',
templateUrl: './app-list-bar.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppListBarComponent implements OnInit {
/**
* Params
*/
@Input() params: AppListParams;
/**
* Page
*/
@Input() page: Page<any>;
/**
* Refresh
*/
@Output() refresh = new EventEmitter();
/**
* Search
*/
@Output() search = new EventEmitter<AppListParams>();
/**
* Action
*/
@Output() action = new EventEmitter<any>();
/**
* Count selected checkbox
*/
@Input() countSelected = 0;
/**
* Actions
*/
@Input() actions: Array<object>;
/**
* Form
*/
form = { q: '', type: null };
/**
* Constructor
*/
constructor() {
}
/**
* On Init
*/
ngOnInit() {
this.form.q = this.params.q;
this.form.type = this.params.type;
}
/**
* Determine if there is no application
*/
isEmpty(): boolean {
if (this.page && this.page.totalPages < 2 && this.page.totalElements < 1) {
return (this.params.q === '' || !this.params.q) && (!this.params.type);
}
return false;
}
/**
* Used to determinate the state of the query parameters
* @returns {boolean} Search is active
*/
isSearchActive() {
return (this.form.type !== this.params.type) || (this.form.q !== this.params.q);
}
/**
* Reset the search parameters and run the search
*/
clearSearch() {
this.form.q = '';
this.form.type = '';
this.doSearch();
}
doSearch() {
const params: AppListParams = Object.assign(this.params, { q: this.form.q, type: this.form.type, page: 1 });
this.search.emit(params);
}
doRefresh() {
this.refresh.emit();
}
fire(action) {
this.action.emit({ action: action });
}
hasActions() {
if (!this.actions) {
return false;
}
if (this.actions.length === 0) {
return false;
}
if (this.actions.filter((ac) => !ac['hidden']).length === 0) {
return false;
}
return true;
}
}
<form id="filters" class="list-bar list-bar-app" *ngIf="page && params && !isEmpty()" #registerAppsForm="ngForm"
name="registerAppsForm" role="form" (ngSubmit)="doSearch()" novalidate>
<div *ngIf="hasActions()" id="dropdown-actions" class="list-bar-action dropdown" dropdown
[isDisabled]="!(countSelected > 0)">
<button dropdownToggle type="button" class="btn btn-default btn-dropdown">
<span>Actions</span>
<strong *ngIf="countSelected > 0" style="margin-left: 4px;">({{ countSelected }})</strong>
<span class="caret"></span>
</button>
<ul *dropdownMenu class="dropdown-menu">
<li *ngFor="let action of actions">
<a *ngIf="!action.hidden" id="{{ action.id }}" style="cursor: pointer" (click)="fire(action.action)">
{{ action.title }}
</a>
</li>
</ul>
</div>
<div class="list-bar-filter">
<input type="text" id="filter-q" name="q" class="form-control input-sm" placeholder="Filter items"
[(ngModel)]="form.q">
<div class="list-bar-dropdown">
<div dropdown class="dropdown">
<a class="filter-dropdown-toggle" dropdownToggle>
<span *ngIf="form.type == '' || form.type == null">
All types
</span>
<span *ngIf="!(form.type == '' || form.type == null)">
Type: <strong>{{ form.type }}</strong>
</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu dropdown-menu-right" *dropdownMenu="">
<li [class.active]="form.type == '' || form.type == null"><a (click)="form.type = ''">All types</a></li>
<li [class.active]="form.type == 'app'"><a (click)="form.type = 'app'">App</a></li>
<li [class.active]="form.type == 'source'"><a (click)="form.type = 'source'">Source</a></li>
<li [class.active]="form.type == 'processor'"><a (click)="form.type = 'processor'">Processor</a></li>
<li [class.active]="form.type == 'sink'"><a (click)="form.type = 'sink'">Sink</a></li>
<li [class.active]="form.type == 'task'"><a (click)="form.type = 'task'">Task</a></li>
</ul>
</div>
</div>
<button id="search-submit" [disabled]="!isSearchActive()" type="submit" class="list-bar-submit btn btn-default">
<span class="fa fa-search"></span>
</button>
</div>
<div class="list-bar-divider"></div>
<div class="list-bar-right">
<button (click)="doRefresh()" name="app-refresh" type="button" class="btn btn-default btn-fa" title="Refresh">
<span class="fa fa-refresh"></span>
Refresh
</button>
</div>
</form>