survery-lib 0.1.9 → 0.1.11

package/src/lib/components/question-radio-button-template/question-radio-button-template.component.ts

@@ -0,0 +1,111 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup } from '@ng-stack/forms';
+import { SurveyAnswerDto } from '../../../shared/dtos/survey-answer.dto';
+import { SurveyQuestionDto } from '../../../shared/dtos/survey-question.dto';
+import { QuestionTypeEnum } from '../../../shared/enums/question-type.enum';
+import {
+  AnswerChildOfQuestionRadioButtonTemplateFormInterface,
+  QuestionRadioButtonTemplateFormInterface
+} from '../../../shared/form-interfaces/question-radio-button-template.form-interface';
+import { QuestionTextTemplateFormInterface } from '../../../shared/form-interfaces/question-text-template.form-interface';
+import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs';
+import { v4 as guidGenerator } from 'uuid';
+import { QuestionAnswerModel } from '../../../shared/models/question-answer.model';
+import { DefaultQuestionAnswerDto } from '../../../shared/dtos/default-question-answers.dto';
+import { SurveyLibService } from '../../services/survey-lib.service';
+
+@Component({
+  selector: 'lib-question-radio-button-template',
+  templateUrl: './question-radio-button-template.component.html',
+  styleUrls: ['./question-radio-button-template.component.scss']
+})
+export class QuestionRadioButtonTemplateComponent implements OnInit {
+  elemId = guidGenerator() as string;
+  surveyQuestion: SurveyQuestionDto;
+  rForm: FormGroup<QuestionRadioButtonTemplateFormInterface>;
+
+  get fCtrls() {
+    return this.rForm.controls;
+  }
+
+  get questionTypeEnum() {
+    return QuestionTypeEnum;
+  }
+
+  @Output() emitter = new EventEmitter<QuestionAnswerModel>();
+
+  @Input() isShow: boolean = true;
+  @Input() isDisabled: boolean = false;
+  @Input() set setQuestion(value: SurveyQuestionDto) {
+    this.surveyQuestion = value;
+    this.rForm.patchValue({
+      id: value.questionId,
+      name: value.questionName,
+      title: value.questionTitle,
+      typeId: value.questionTypeId,
+      description: value.questionDescription
+    });
+
+    value.surveyAnswers.forEach(surveryAnswer => {
+      this.fCtrls.answerArray.push(this._formBuilder.group<AnswerChildOfQuestionRadioButtonTemplateFormInterface>({
+        id: [surveryAnswer.answerId],
+        title: [surveryAnswer.answerTitle],
+        isSelected: [false]
+      }))
+    })
+
+    if (value.isRequired == true) {
+      this.fCtrls.answer.addValidators([Validators.required]);
+      this.fCtrls.answer.updateValueAndValidity();
+    }
+
+    this.isShow = value.isVisable;
+    this.isDisabled = value.isReadOnly;
+  }
+
+  constructor(private _formBuilder: FormBuilder, private _surveyLibService: SurveyLibService) {
+    this.rForm = this._formBuilder.group<QuestionRadioButtonTemplateFormInterface>({
+      id: [null],
+      name: [null],
+      title: [null],
+      typeId: [null],
+      description: [null],
+      answer: [null],
+      answerArray: this._formBuilder.array<AnswerChildOfQuestionRadioButtonTemplateFormInterface>([])
+    });
+  }
+
+  ngOnInit(): void {
+    this.fCtrls.answer.valueChanges.pipe().pipe(debounceTime(200)).subscribe(value => {
+      console.log(value);
+      const formValue = this.rForm.value;
+      this.emitter.emit({
+        QuestionId: formValue.id,
+        IsValid: this.fCtrls.answer.valid,
+        Answer: value
+      })
+    });
+
+    this.fCtrls.answer.setValue(null);
+
+    this._surveyLibService.surveyAnswersObsrv.pipe(map(x => x.defaultAnswers.filter(x => x.QuestionId == this.fCtrls.id.value)))
+      .pipe(filter(x => x.length > 0)).pipe(map(x => x.at(0)))
+      .subscribe(answer => {
+        this.fCtrls.answer.setValue(answer.AnswerId);
+
+        const groupIndex = this.fCtrls.answerArray.value.findIndex(x => x.id == answer.AnswerId);
+        if (groupIndex > -1) {
+          this.fCtrls.answerArray.at(groupIndex).controls.isSelected.setValue(true);
+        }
+      });
+  }
+
+  onChangeAnswer(item: AnswerChildOfQuestionRadioButtonTemplateFormInterface) {
+    this.fCtrls.answer.setValue(item.id);
+  }
+
+  convertToFormControl(element: any) {
+    return element as FormControl;
+  }
+}

package/src/lib/components/question-text-template/question-text-template.component.html

@@ -0,0 +1,13 @@
+<div class="quastion" [formGroup]="rForm" [attr.id]="'question_'+fCtrls.id.value"
+    [ngClass]="{'invalid-question': fCtrls.answer.invalid , 'd-none':isShow != true}">
+    <h3 class="quastion-title ">
+        {{fCtrls.title.value}}
+    </h3>
+    <div class="text-quastion">
+        <input class="form-control" type="text" [formControl]="convertToFormControl(fCtrls.answer)"
+         [disabled]="isDisabled"   *ngIf="isTextArea == false else textAreaTemplate">
+        <ng-template #textAreaTemplate>
+            <textarea class="form-control" rows="5" [formControl]="convertToFormControl(fCtrls.answer)"
+            [disabled]="isDisabled" ></textarea>
+        </ng-template>
+    </div>

package/src/lib/components/question-text-template/question-text-template.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuestionTextTemplateComponent } from './question-text-template.component';
+
+describe('QuestionTextTemplateComponent', () => {
+  let component: QuestionTextTemplateComponent;
+  let fixture: ComponentFixture<QuestionTextTemplateComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [QuestionTextTemplateComponent]
+    });
+    fixture = TestBed.createComponent(QuestionTextTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/question-text-template/question-text-template.component.ts

@@ -0,0 +1,105 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, FormControl as FormControlStack, ValidatorsModel } from '@ng-stack/forms';
+import { SurveyQuestionDto } from '../../../shared/dtos/survey-question.dto';
+import { QuestionTypeEnum } from '../../../shared/enums/question-type.enum';
+import { QuestionTextTemplateFormInterface } from '../../../shared/form-interfaces/question-text-template.form-interface';
+import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs';
+import { QuestionAnswerModel } from '../../../shared/models/question-answer.model';
+import { DefaultQuestionAnswerDto } from '../../../shared/dtos/default-question-answers.dto';
+import { SurveyLibService } from '../../services/survey-lib.service';
+
+@Component({
+  selector: 'lib-question-text-template',
+  templateUrl: './question-text-template.component.html',
+  styleUrls: ['./question-text-template.component.scss']
+})
+export class QuestionTextTemplateComponent implements OnInit {
+
+  rForm: FormGroup<QuestionTextTemplateFormInterface>;
+
+  get fCtrls() {
+    return this.rForm.controls;
+  }
+
+  get questionTypeEnum() {
+    return QuestionTypeEnum;
+  }
+
+  @Output() emitter = new EventEmitter<QuestionAnswerModel>();
+
+  @Input() isShow: boolean = true;
+  @Input() isTextArea: boolean;
+  @Input() set setQuestion(value: SurveyQuestionDto) {
+    this.rForm.patchValue({
+      id: value.questionId,
+      name: value.questionName,
+      title: value.questionTitle,
+      typeId: value.questionTypeId,
+      description: value.questionDescription
+    });
+
+    if (value.surveyAnswers[0]?.answerId != null && value.surveyAnswers[0]?.answerId != undefined) {
+      this.fCtrls.surveyAnswerId.setValue(value.surveyAnswers[0].answerId);
+    }
+
+    if (value.isRequired == true) {
+      this.fCtrls.answer.addValidators([Validators.required]);
+      this.fCtrls.answer.updateValueAndValidity();
+    }
+
+    this.isShow = value.isVisable;
+    this.toggleEnableAnswer(value.isReadOnly);
+  }
+
+  @Input() set isDisabled(value: boolean) {
+    this.toggleEnableAnswer(value);
+  }
+
+
+  constructor(private _formBuilder: FormBuilder , private _surveyLibService:SurveyLibService) {
+    this.rForm = this._formBuilder.group<QuestionTextTemplateFormInterface>({
+      id: [null],
+      name: [null],
+      title: [null],
+      typeId: [null],
+      description: [null],
+      surveyAnswerId: [null],
+      answer: [null]
+    });
+  }
+
+  ngOnInit(): void {
+    this.fCtrls.answer.valueChanges.pipe().pipe(debounceTime(200)).subscribe(value => {
+      const formValue = this.rForm.value;
+      this.emitter.emit({
+        QuestionId: formValue.id,
+        IsValid: this.fCtrls.answer.valid,
+        Answer: value,
+        SurveyAnswerId: formValue.surveyAnswerId
+      })
+    });
+
+    this.fCtrls.answer.setValue(null);
+
+    this._surveyLibService.surveyAnswersObsrv.pipe(map(x=> x.defaultAnswers.filter(x=>x.QuestionId == this.fCtrls.id.value)))
+    .pipe(filter(x=>x.length  > 0)).pipe(map(x=> x.at(0)))
+    .subscribe(answer=>{
+      this.fCtrls.answer.setValue(answer.AnswerText);
+    });
+  }
+
+  convertToFormControl(element: any) {
+    return element as FormControl;
+  }
+
+  private toggleEnableAnswer(isReadOnly: boolean) {
+    if (isReadOnly == true) {
+      this.fCtrls.answer.disable()
+    } else {
+      this.fCtrls.answer.enable()
+    }
+    this.fCtrls.answer.updateValueAndValidity();
+  }
+
+}

package/src/lib/pipes/default-question-answer.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { DefaultQuestionAnswerPipe } from './default-question-answer.pipe';
+
+describe('DefaultQuestionAnswerPipe', () => {
+  it('create an instance', () => {
+    const pipe = new DefaultQuestionAnswerPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

package/src/lib/pipes/default-question-answer.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DefaultQuestionAnswerDto } from '../../shared/dtos/default-question-answers.dto';
+import { QuestionTypeEnum } from '../../shared/enums/question-type.enum';
+
+@Pipe({
+  name: 'defaultQuestionAnswer'
+})
+export class DefaultQuestionAnswerPipe implements PipeTransform {
+
+  transform(value: DefaultQuestionAnswerDto[], questionId: number , reloadId): DefaultQuestionAnswerDto {
+    if (value != null) {
+      return value.find(x => x.QuestionId == questionId);  
+    }
+
+    return null;
+  }
+
+}

package/src/lib/pipes/default-question-answers.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { DefaultQuestionAnswersPipe } from './default-question-answers.pipe';
+
+describe('DefaultQuestionAnswersPipe', () => {
+  it('create an instance', () => {
+    const pipe = new DefaultQuestionAnswersPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

package/src/lib/pipes/default-question-answers.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DefaultQuestionAnswerDto } from '../../shared/dtos/default-question-answers.dto';
+
+@Pipe({
+  name: 'defaultQuestionAnswers'
+})
+export class DefaultQuestionAnswersPipe implements PipeTransform {
+
+  transform(value: DefaultQuestionAnswerDto[], questionId: any , reloadId): DefaultQuestionAnswerDto[] {
+    if (value != null) {
+      return value.filter(x => x.ParentQuestionId == questionId);  
+    }
+
+    return [];
+  }
+
+}

package/src/lib/pipes/filter-question.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { FilterQuestionPipe } from './filter-question.pipe';
+
+describe('FilterQuestionPipe', () => {
+  it('create an instance', () => {
+    const pipe = new FilterQuestionPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

package/src/lib/pipes/filter-question.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { SurveyQuestionDto } from '../../shared/dtos/survey-question.dto';
+import { QuestionChildOfSurveryLibFormInterface } from '../../shared/form-interfaces/survery-lib.form-interface';
+
+@Pipe({
+  name: 'filterQuestion'
+})
+export class FilterQuestionPipe implements PipeTransform {
+
+  transform(value: SurveyQuestionDto, questionArr: QuestionChildOfSurveryLibFormInterface[]): QuestionChildOfSurveryLibFormInterface {
+    return questionArr.find(x=>x.questionId == value.questionId);
+  }
+
+}

package/src/lib/services/survey-lib.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SurveyLibService } from './survey-lib.service';
+
+describe('SurveyLibService', () => {
+  let service: SurveyLibService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SurveyLibService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/services/survey-lib.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { SurveyDto } from '../../shared/dtos/survey.dto';
+import { surveyAnswersSubjectDto } from '../../shared/dtos/survey-answers-subject.dto';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SurveyLibService {
+
+  private surveyDataSubject: Subject<SurveyDto> = new Subject<SurveyDto>();
+  private surveyAnswersSubject: Subject<surveyAnswersSubjectDto> = new Subject<surveyAnswersSubjectDto>();
+
+  get surveyDataObsrv() {
+    return this.surveyDataSubject.asObservable();
+  }
+
+  get surveyAnswersObsrv() {
+    return this.surveyAnswersSubject.asObservable();
+  }
+
+  constructor() { }
+
+  setSurveyData(survey: SurveyDto) {
+    this.surveyDataSubject.next(survey);
+  }
+
+  setsurveyAnswers(model: surveyAnswersSubjectDto) {
+    this.surveyAnswersSubject.next(model);
+  }
+}

package/src/lib/survery-lib.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SurveryLibComponent } from './survery-lib.component';
+
+describe('SurveryLibComponent', () => {
+  let component: SurveryLibComponent;
+  let fixture: ComponentFixture<SurveryLibComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SurveryLibComponent]
+    });
+    fixture = TestBed.createComponent(SurveryLibComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});