Sunbird Discussion UI Documentation
  1. Components
  2. PostReplyComponent

File

src/lib/elements/post-reply/post-reply.component.ts

Implements

OnInit

Metadata

selector lib-post-reply
styleUrls ./post-reply.component.css
templateUrl ./post-reply.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(formBuilder: UntypedFormBuilder)
Defined in src/lib/elements/post-reply/post-reply.component.ts:18
Parameters :
Name Type Optional
formBuilder UntypedFormBuilder No

Inputs

content
Type : string
Defined in src/lib/elements/post-reply/post-reply.component.ts:12
mode
Type : string
Default value : 'add'
Defined in src/lib/elements/post-reply/post-reply.component.ts:11
showCancel
Type : boolean
Default value : true
Defined in src/lib/elements/post-reply/post-reply.component.ts:10

Outputs

actionEvent
Type : EventEmitter
Defined in src/lib/elements/post-reply/post-reply.component.ts:14

Methods

initializeFormFields
initializeFormFields()
Defined in src/lib/elements/post-reply/post-reply.component.ts:29
Returns : void
isFieldValid
isFieldValid(field)
Defined in src/lib/elements/post-reply/post-reply.component.ts:46
Parameters :
Name Optional
field No
Returns : any
ngOnInit
ngOnInit()
Defined in src/lib/elements/post-reply/post-reply.component.ts:24
Returns : void
onCancelClick
onCancelClick()
Defined in src/lib/elements/post-reply/post-reply.component.ts:64
Returns : void
onReplyClick
onReplyClick(mode: string)
Defined in src/lib/elements/post-reply/post-reply.component.ts:59
Parameters :
Name Type Optional
mode string No
Returns : void
validateForm
validateForm()
Defined in src/lib/elements/post-reply/post-reply.component.ts:38
Returns : boolean

Properties

isButtonEnabled
Default value : false
Defined in src/lib/elements/post-reply/post-reply.component.ts:18
replyForm
Type : UntypedFormGroup
Defined in src/lib/elements/post-reply/post-reply.component.ts:16
 
import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'lib-post-reply',
  templateUrl: './post-reply.component.html',
  styleUrls: ['./post-reply.component.css']
})
export class PostReplyComponent implements OnInit {
  @Input() showCancel = true;
  @Input() mode = 'add';
  @Input() content: string;

  @Output() actionEvent = new EventEmitter();

  replyForm!: UntypedFormGroup;

  isButtonEnabled = false;

  constructor(
    private formBuilder: UntypedFormBuilder
  ) { }

  ngOnInit() {
    console.log('conent came', this.content);
    this.initializeFormFields();
  }

  initializeFormFields() {
    this.replyForm = this.formBuilder.group({
      replyContent: ['', Validators.required]
    });
    this.replyForm.valueChanges.subscribe(val => {
      this.isButtonEnabled = this.validateForm();
    });
  }

  validateForm() {
    if (this.replyForm.status === 'VALID') {
      return true;
    } else {
      return false;
    }
  }

  isFieldValid(field) {
    let valueNoWhiteSpace = this.replyForm.get(field).value;
    if (valueNoWhiteSpace) {
      const length = valueNoWhiteSpace.length;
      if (length >= 2 && valueNoWhiteSpace.charAt(length - 2) === " ") {
        this.replyForm.patchValue({ replyContent: this.replyForm.get(field).value.trim() });
      } else {
        this.replyForm.patchValue({ replyContent: this.replyForm.get(field).value.trimStart() })
      }
  }
    return !this.replyForm.get(field).valid && this.replyForm.get(field).dirty;
  }

  onReplyClick(mode: string) {
    // tslint:disable-next-line:no-string-literal
    this.actionEvent.emit({action: mode, content: this.replyForm.controls['replyContent'].value.trim()});
  }

  onCancelClick() {
    this.actionEvent.emit({action: 'cancel'});
  }

}

<form [formGroup]="replyForm">
  <div appearance="outline" class="text-form-field">
    <label class="text-form-label">Your answer here</label>
    <textarea placeholder="Type here (minimum 10 characters)" 
      minlength="10" aria-label="Type your message here"
      formControlName="replyContent" 
      class="text-content"
      [ngModel]="content"
      [ngClass]="{'is-invalid' : isFieldValid('replyContent')}">
  </textarea>
  </div>
</form>
<div class="updatePostActions">
    <button class="df-btn df-btn-normal df-cancel-btn"
      *ngIf="showCancel"
      (click)="onCancelClick()" 
      id="cancel-update-post" 
      type="button">
      <span class="text-white">Cancel</span>
    </button>
    <button [ngClass]="{'df-btn-disabled': !isButtonEnabled }" 
      *ngIf="mode === 'edit'"
      [disabled]="!isButtonEnabled" 
      class="df-btn df-btn-normal df-btn-primary" 
      (click)="onReplyClick('edit')" 
      id="update-post"
      type="button">
      <span class="text-white">Update</span>
    </button>
    <button [ngClass]="{'df-btn-disabled': !replyForm.valid }" 
      *ngIf="mode !== 'edit'"
      [disabled]="!isButtonEnabled" 
      class="df-btn df-btn-normal df-btn-primary" 
      (click)="onReplyClick('reply')" 
      id="update-post"
      type="button">
      <span class="text-white">Post Reply</span>
    </button>
</div>

./post-reply.component.css 

.text-form-field{
    display: flex;
    flex-direction: column;
    /* width: 97.6%;   */
}

.text-form-label{
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.text-content{
    min-height: 6.75rem;
    max-height: 33.75rem;
    margin-bottom: 0.875rem;
    background-color: var(--df-field-control-bg);
    border: 0.0625rem solid var(--gray-200);
    border-radius: 0.1875rem;
    color: var(--df-text);
    display: block;
    font-size: .8125rem;
    font-family: sans-serif;
    position: relative;
    cursor: pointer;
    outline: 0;
    padding: 0.5rem 0.875rem;
}

.updatePostActions {
    display: flex;
    justify-content: flex-end;
    margin-bottom:1rem;
}

.df-update-btn,.df-post-reply-btn{
    margin: 0.5rem 0;
}

.cancel-update-post {
    margin-right: 20px;
}

.df-btn-disabled {
    background-color: var(--gray-100);
    border: solid var(--gray-100);
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""