src/app/shared/flo/properties-groups/properties-groups-dialog.component.ts
Component for displaying generic properties and capturing their values.
encapsulation | ViewEncapsulation.None |
selector | app-properties-groups-dialog-content |
styleUrls | properties-groups-dialog.component.scss |
templateUrl | properties-groups-dialog.component.html |
Properties |
|
Methods |
Accessors |
constructor(bsModalRef: BsModalRef)
|
||||||||
Parameters :
|
collapse | ||||||||
collapse(id: string)
|
||||||||
Parameters :
Returns :
void
|
handleCancel |
handleCancel()
|
Returns :
void
|
handleOk |
handleOk()
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
setData | ||||||||
setData(groupPropertiesSources: GroupPropertiesSources)
|
||||||||
Parameters :
Returns :
void
|
Private groupPropertiesSources |
groupPropertiesSources:
|
Type : GroupPropertiesSources
|
propertiesFormGroup |
propertiesFormGroup:
|
Type : FormGroup
|
Template will eventually add controls to this group. |
propertiesGroupModels |
propertiesGroupModels:
|
Type : Array<GroupPropertiesGroupModel>
|
Groups are eventually added here and accessed from a template. |
state |
state:
|
Type : any
|
Collapse states for groups are kept here. i.e. {my.group1: true, my.group2: false} |
Public title |
title:
|
Type : string
|
Dialog title. |
okDisabled |
getokDisabled()
|
import { Component, ViewEncapsulation, OnInit, EventEmitter } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap';
import { FormGroup } from '@angular/forms';
import { of } from 'rxjs';
import { Properties } from 'spring-flo';
import { PropertiesGroupModel } from '../support/properties-group-model';
import PropertiesSource = Properties.PropertiesSource;
/**
* Class to add group title to a model.
*/
export class GroupPropertiesGroupModel extends PropertiesGroupModel {
constructor(propertiesSource: PropertiesSource, public title: string = '') {
super(propertiesSource);
}
}
/**
* Class to implement PropertiesSource and to have needed features
* to support multiple sources.
*/
export class GroupPropertiesSource implements PropertiesSource {
private options: Array<any>;
constructor(options: Array<any>, public title: string = '') {
this.options = options;
}
getProperties(): Promise<Properties.Property[]> {
return of(this.options).toPromise();
}
applyChanges(properties: Properties.Property[]): void {
// nothing to do as we don't rely calling applyChanges() for model
// classes because we have multiple groups so controls and its
// properties are accesses manually.
}
}
/**
* Class to keep GroupPropertiesSource in one place and to have
* emitter to notify user of a new property changes.
*/
export class GroupPropertiesSources {
public confirm = new EventEmitter();
constructor(public propertiesSources: Array<GroupPropertiesSource>) {
}
applyChanges(properties: Properties.Property[]): void {
this.confirm.emit(properties);
}
}
/**
* Component for displaying generic properties and capturing their values.
*
* @author Janne Valkealahti
*/
@Component({
selector: 'app-properties-groups-dialog-content',
templateUrl: 'properties-groups-dialog.component.html',
styleUrls: [ 'properties-groups-dialog.component.scss' ],
encapsulation: ViewEncapsulation.None
})
export class PropertiesGroupsDialogComponent implements OnInit {
/**
* Dialog title.
*/
public title: string;
/**
* Groups are eventually added here and accessed from a template.
*/
propertiesGroupModels: Array<GroupPropertiesGroupModel> = [];
/**
* Template will eventually add controls to this group.
*/
propertiesFormGroup: FormGroup;
private groupPropertiesSources: GroupPropertiesSources;
/**
* Collapse states for groups are kept here.
* i.e. {my.group1: true, my.group2: false}
*/
state: any = {};
constructor(private bsModalRef: BsModalRef
) {
this.propertiesFormGroup = new FormGroup({});
}
handleOk() {
const properties: Properties.Property[] = [];
this.propertiesGroupModels.forEach(p => {
p.getControlsModels().forEach(cm => {
properties.push(cm.property);
});
});
this.groupPropertiesSources.applyChanges(properties);
this.bsModalRef.hide();
}
handleCancel() {
this.bsModalRef.hide();
}
collapse(id: string) {
// Collapse already open group, otherwise keep selected
// group open and close others.
Object.entries(this.state).forEach(e => {
if (e[0] === id && e[1]) {
this.state[e[0]] = false;
} else {
this.state[e[0]] = (e[0] === id);
}
});
}
get okDisabled() {
return !(this.propertiesGroupModels.length > 0)
|| !this.propertiesFormGroup
|| this.propertiesFormGroup.invalid
|| !this.propertiesFormGroup.dirty;
}
ngOnInit() {
}
setData(groupPropertiesSources: GroupPropertiesSources) {
let first = true;
groupPropertiesSources.propertiesSources.forEach(ps => {
this.state[ps.title] = first;
first = false;
const model: GroupPropertiesGroupModel = new GroupPropertiesGroupModel(ps, ps.title);
model.load();
model.loadedSubject.subscribe();
this.propertiesGroupModels.push(model);
});
this.groupPropertiesSources = groupPropertiesSources;
}
}
<div class="modal-header">
<h4 class="modal-title pull-left">{{ title }}</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="handleCancel()">
<span aria-hidden="true">×</span>
</button>
</div>
<form name="app-properties" (submit)="handleOk()" class="modal-body app-properties">
<div class="properties"
*ngFor="let group of propertiesGroupModels">
<div class="line-toggle">
<a class="toggle" (click)="collapse(group.title)">
<span class="fa" [class.fa-chevron-down]="state[group.title]"
[class.fa-chevron-right]="!state[group.title]"></span>
{{group.title}}
</a>
</div>
<div *ngIf="state[group.title]">
<properties-group [propertiesGroupModel]="group"
[form]="propertiesFormGroup"></properties-group>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" (click)="handleCancel()">Close</button>
<button type="submit" class="btn btn-primary" [disabled]="okDisabled">OK</button>
</div>
</form>