ws-form-builder/src-inlined/components/ws-punchcard/ws-punchcard.ts

Ionic 2 Form Builder

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { FormBuilderProvider } from '../../providers/form-builder/form-builder';



@Component({
  selector: 'ws-punchcard',
  template: `
    <div class="ws-punchard-container">
    	<ion-grid>
      		<ion-row>
      			<ion-col></ion-col> <!-- add blank col for spacing -->
      			<ion-col *ngFor="let col of question.xAxis; let i = index;">
      				<div class="xAxis-col col-{{col.field}}" id="col-{{col.field}}">
      					<ion-icon name="md-star"></ion-icon>
    					<span class="col-label">{{col.label}}</span>
    				</div>

    			</ion-col>
      		</ion-row>
		
      		<span *ngFor="let row of question.yAxis; let r = index;">

    			<ion-row>
    				<ion-col>{{row.label}}</ion-col>
			
    			<ion-col *ngFor="let col of question.xAxis; let c = index;">
    				<div class="body-col">
    				<ion-checkbox (ionChange)="updateCheckbox($event,row,col,question)"></ion-checkbox>
    			</div>
    			</ion-col>
    			</ion-row>
    		</span>

    	</ion-grid>
    </div>


    <pre style="max-height:150px;" *ngIf="isDebug">
      {{fieldAnswers | json}}
    </pre>
  `,
  styles: [`
    .ws-punchard-container .xAxis-col{text-align:center}.ws-punchard-container .xAxis-col .icon{display:block;font-size:30px}.ws-punchard-container .body-col{text-align:center}
  `]
})
export class WsPunchcardComponent {

  @Input('question') question;
  @Output() answerGiven = new EventEmitter();

  fieldValue:string = '';
  isFieldValid:boolean = false;
  showError:boolean = false;
  fieldAnswers:object = {};
  isDebug:boolean = false;
  
  constructor(public formBuilder: FormBuilderProvider){
    	this.fieldValue = '';
  }

  ngOnInit() {
      if(typeof this.question.xAxis !== 'undefined' && typeof this.question.yAxis !== 'undefined'){
          this.generateFields();
          
      } 

      if(typeof this.question.isDebug !== 'undefined' && this.question.isDebug === true){
        this.isDebug = true;
      }
  }

  generateFields(){
    let data = {};
	  	for(let i=0; i < Object.keys(this.question.yAxis).length; i++){
	         //string = string+this.fieldAnswers[i]; 
	         let rowField = this.question.yAxis[i]['field'];
            if(typeof data[rowField] === 'undefined'){
                data[rowField] = {};
            }

	         for(let x=0; x < Object.keys(this.question.xAxis).length; x++){
	         	    let colField = this.question.xAxis[x]['field'];
                data[rowField][colField] = false;
	         }
	    }

      this.fieldAnswers = data;
      //this.getFieldData('');

  }

  getFieldData(key){
      if(typeof this.question.data !== 'undefined'){

      }
  }

  setAnswer(event,question){
  	let isStringValid = this.validateAnswer(question,event.value);

  	if(!isStringValid){
		this.isFieldValid = false;
  		this.showError = true;
  	}else{
		this.isFieldValid = true;
  		this.showError = false;
  	}

  	if(this.isFieldValid){
  		question.value = event.value;
      question.valid = true;
  		this.answerGiven.emit(question);
  	}
  		
  }


  validateAnswer(question,string){	
  		return this.formBuilder.validateAnswer(question,string);
  }

  updateCheckbox(event,row,col,question){
    question.valid = true;
    this.fieldAnswers[row.field][col.field] = event.value;
    question.data = this.fieldAnswers;
    this.answerGiven.emit(question);
  }

}