File

projects/app-base-library/src/lib/angular/modules/drupal/components/node-editor.component.ts

Implements

OnChanges

Metadata

selector ab-drupal-entity-node-editor
template
<div *ngIf="data" class="node node--view-mode-edit clearfix">

    <form *ngIf="form" [formGroup]="form" (ngSubmit)="submitForm(form.value)" class="panel card padding margin-xs">

        <fieldset *ngIf="form.controls['title']" class="form-group"
                  [ngClass]="{'has-error':!form.controls['title'].valid && form.controls['title'].touched}">
            <label>{{ 'title' | uppercase | translate }}</label>
            <input name="title" [(ngModel)]="data.attributes.title" [formControl]="form.controls['title']" class="form-control" type="text" placeholder="">
            <div *ngIf="form.controls['title'].hasError('required') && form.controls['title'].touched"
                 class="form-error">{{ 'FIELD REQUIRED' | translate }}.
            </div>
        </fieldset>

        <fieldset *ngIf="form.controls['body']" class="form-group"
                  [ngClass]="{'has-error':!form.controls['body'].valid && form.controls['body'].touched}">
            <label>{{ 'body' | translate }}</label>
            <textarea name="body" [(ngModel)]="data.attributes.body.value" class="form-control" type="text" placeholder=""
                      [formControl]="form.controls['body']"></textarea>
            <div *ngIf="form.controls['body'].hasError('required') && form.controls['body'].touched"
                 class="form-error">{{ 'FIELD REQUIRED' | translate }}.
            </div>
        </fieldset>

        <fieldset  *ngIf="form.controls['field_iframe']"  class="form-group"
                  [ngClass]="{'has-error':!form.controls['field_iframe'].valid && form.controls['field_iframe'].touched}">
            <label>{{ 'field_iframe' | translate }}</label>
            <input name="field_iframe" [(ngModel)]="data.attributes.field_iframe.uri" class="form-control" type="text" placeholder=""
                      [formControl]="form.controls['field_iframe']">
            <div *ngIf="form.controls['field_iframe'].hasError('required') || form.controls['field_iframe'].hasError('pattern') && form.controls['field_iframe'].touched"
                 class="form-error">{{ 'URL INVALID' | translate }}.
            </div>
        </fieldset>

        <fieldset *ngIf="form.controls['field_json']" class="form-group"
                  [ngClass]="{'has-error':!form.controls['field_json'].valid && form.controls['field_json'].touched}">
            <label>{{ 'field_json' | translate }}</label>
            <textarea name="field_json" [(ngModel)]="data.attributes.field_json.value" class="form-control" type="text" placeholder=""
                      [formControl]="form.controls['field_json']"></textarea>
            <div *ngIf="form.controls['field_iframe'].hasError('required') || form.controls['field_json'].hasError('pattern') && form.controls['field_json'].touched"
                 class="form-error">{{ 'JSON INVALID' | translate }}.
            </div>
        </fieldset>

        <div class="form-group">
            <button type="submit" class="btn btn-primary" [disabled]="!form.valid">
                {{ 'SUBMIT' | translate }}
            </button>
            <button class="btn btn-primary" (click)="cancelForm()">
                {{ 'CANCEL' | translate }}
            </button>
            <div *ngIf="!form.valid && submitted"
                 class="form-error">{{ submitError | translate }}.
            </div>
        </div>

    </form>

</div>


Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(fb: FormBuilder, config: ConfigService)
Parameters :
Name Type Optional
fb FormBuilder no
config ConfigService no

Inputs

authenticated

Type: boolean

node

Type: any

state

Type: string

Default value: 'read'

submitError

Default value: 'FORM INVALID'

Outputs

cancel $event type: EventEmitter<any>
submit $event type: EventEmitter<any>

Methods

cancelForm
cancelForm()
Returns : void
ngOnChanges
ngOnChanges()
Returns : void
ngOnInit
ngOnInit()
Returns : void
submitForm
submitForm(form: )
Parameters :
Name Optional
form no
Returns : void

Properties

Public config
config: ConfigService
Type : ConfigService
Public data
data: any
Type : any
Public fb
fb: FormBuilder
Type : FormBuilder
Public form
form: FormGroup
Type : FormGroup
Public submitted
submitted:
Default value : false
import {Component, EventEmitter, OnInit, OnChanges, Input, Output} from '@angular/core';
// import {BrowserModule, DomSanitizer, SafeHtml, SafeResourceUrl} from '@angular/platform-browser';
import {FormGroup, FormBuilder, Validators} from '@angular/forms';
import {validationConstants} from '../../../../shared/validation/validationConstants';
import {ConfigService} from '../../../../angular/services/index';

@Component({
    selector: 'ab-drupal-entity-node-editor',
    template: `
        <div *ngIf="data" class="node node--view-mode-edit clearfix">
            
            <form *ngIf="form" [formGroup]="form" (ngSubmit)="submitForm(form.value)" class="panel card padding margin-xs">

                <fieldset *ngIf="form.controls['title']" class="form-group" 
                          [ngClass]="{'has-error':!form.controls['title'].valid && form.controls['title'].touched}">
                    <label>{{ 'title' | uppercase | translate }}</label>
                    <input name="title" [(ngModel)]="data.attributes.title" [formControl]="form.controls['title']" class="form-control" type="text" placeholder="">
                    <div *ngIf="form.controls['title'].hasError('required') && form.controls['title'].touched"
                         class="form-error">{{ 'FIELD REQUIRED' | translate }}.
                    </div>
                </fieldset>
                
                <fieldset *ngIf="form.controls['body']" class="form-group"
                          [ngClass]="{'has-error':!form.controls['body'].valid && form.controls['body'].touched}">
                    <label>{{ 'body' | translate }}</label>
                    <textarea name="body" [(ngModel)]="data.attributes.body.value" class="form-control" type="text" placeholder=""
                              [formControl]="form.controls['body']"></textarea>
                    <div *ngIf="form.controls['body'].hasError('required') && form.controls['body'].touched"
                         class="form-error">{{ 'FIELD REQUIRED' | translate }}.
                    </div>
                </fieldset>
                
                <fieldset  *ngIf="form.controls['field_iframe']"  class="form-group"
                          [ngClass]="{'has-error':!form.controls['field_iframe'].valid && form.controls['field_iframe'].touched}">
                    <label>{{ 'field_iframe' | translate }}</label>
                    <input name="field_iframe" [(ngModel)]="data.attributes.field_iframe.uri" class="form-control" type="text" placeholder=""
                              [formControl]="form.controls['field_iframe']">
                    <div *ngIf="form.controls['field_iframe'].hasError('required') || form.controls['field_iframe'].hasError('pattern') && form.controls['field_iframe'].touched"
                         class="form-error">{{ 'URL INVALID' | translate }}.
                    </div>
                </fieldset>

                <fieldset *ngIf="form.controls['field_json']" class="form-group"
                          [ngClass]="{'has-error':!form.controls['field_json'].valid && form.controls['field_json'].touched}">
                    <label>{{ 'field_json' | translate }}</label>
                    <textarea name="field_json" [(ngModel)]="data.attributes.field_json.value" class="form-control" type="text" placeholder=""
                              [formControl]="form.controls['field_json']"></textarea>
                    <div *ngIf="form.controls['field_iframe'].hasError('required') || form.controls['field_json'].hasError('pattern') && form.controls['field_json'].touched"
                         class="form-error">{{ 'JSON INVALID' | translate }}.
                    </div>
                </fieldset>
                
                <div class="form-group">
                    <button type="submit" class="btn btn-primary" [disabled]="!form.valid">
                        {{ 'SUBMIT' | translate }}
                    </button>
                    <button class="btn btn-primary" (click)="cancelForm()">
                        {{ 'CANCEL' | translate }}
                    </button>
                    <div *ngIf="!form.valid && submitted"
                         class="form-error">{{ submitError | translate }}.
                    </div>
                </div>

            </form>
 
        </div>
        
        
    `
})
export class NodeEditorComponent implements OnChanges {
    @Input() node: any;
    @Input() state: string = 'read';
    @Input() authenticated: boolean;
    @Input() submitError = 'FORM INVALID';
    @Output() submit: EventEmitter<any> = new EventEmitter();
    @Output() cancel: EventEmitter<any> = new EventEmitter();

    public form: FormGroup;
    public data: any;
    public submitted = false;

    // constructor(public fb: FormBuilder, public config: ConfigService, public sanitizer: DomSanitizer) { }
    constructor(public fb: FormBuilder, public config: ConfigService ) { }

    ngOnInit() {
        let type = this.node.data.type.split('--')[1];
        let form = {
            title: [null, [Validators.required]]
        };
        this.data = this.node.data;
        let fields = this.config.get('drupal')['definitions'][type];
        let validators = [];
        Object.keys(fields).forEach((fieldName, i) => {
            if(!this.data.attributes[fieldName]) {
                console.log('drupal definition error: field "'+fieldName+'" does not exist on node type "'+type+'"');
            }
            console.log(type+'.'+fieldName,fields[fieldName]);
            if(fields[fieldName].required) {
                validators.push(Validators.required)
            }
        });
        console.log('fields',fields);
        console.log('validators',validators);

        if (this.data.attributes['body']) {
            form['body'] = [null, [Validators.required]];
            // form['body'] = [null, [Validators.pattern(validationConstants.REGEX_REQUIRED)]];
        }
        if (this.data.attributes['field_iframe']) {
            // form['field_iframe'] = [null, [Validators.required]];
            form['field_iframe'] = [null, [Validators.required, Validators.pattern(validationConstants.REGEX_URL)]];
        }
        if (this.data.attributes['field_json']) {
            form['field_json'] = [null, []];
            // form['field_json'] = [null, [Validators.pattern(validationConstants.REGEX_JSON)]];
            // form['field_json'] = [null, [Validators.required,Validators.pattern(validationConstants.REGEX_JSON)]];
        }
        this.form = this.fb.group(form);
    }

    submitForm(form) {
        console.log('submitForm(form)');
        console.log(form);
        this.submitted = true;
        if(!this.form.valid){
            return;
        }
        this.submit.emit(this.node);
    }
    cancelForm() {
        this.cancel.emit(this.node);
    }



    ngOnChanges() {
        if (!this.node) {
            return;
        }

       // this.parse(this.node);
    }

}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""