File

src/app/shared/flo/properties-groups/properties-groups-dialog.component.ts

Description

Component for displaying generic properties and capturing their values.

Implements

OnInit

Example

Metadata

encapsulation ViewEncapsulation.None
selector app-properties-groups-dialog-content
styleUrls properties-groups-dialog.component.scss
templateUrl properties-groups-dialog.component.html

Index

Properties
Methods
Accessors

Constructor

constructor(bsModalRef: BsModalRef)
Parameters :
Name Type Optional Description
bsModalRef BsModalRef

Methods

collapse
collapse(id: string)
Parameters :
Name Type Optional Description
id string
Returns : void
handleCancel
handleCancel()
Returns : void
handleOk
handleOk()
Returns : void
ngOnInit
ngOnInit()
Returns : void
setData
setData(groupPropertiesSources: GroupPropertiesSources)
Parameters :
Name Type Optional Description
groupPropertiesSources GroupPropertiesSources
Returns : void

Properties

Private groupPropertiesSources
groupPropertiesSources: GroupPropertiesSources
Type : GroupPropertiesSources
propertiesFormGroup
propertiesFormGroup: FormGroup
Type : FormGroup

Template will eventually add controls to this group.

propertiesGroupModels
propertiesGroupModels: Array<GroupPropertiesGroupModel>
Type : Array<GroupPropertiesGroupModel>

Groups are eventually added here and accessed from a template.

state
state: any
Type : any

Collapse states for groups are kept here. i.e. {my.group1: true, my.group2: false}

Public title
title: string
Type : string

Dialog title.

Accessors

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">&times;</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>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""