🎨🔢 Set limit to number of characters and possible options on question and list block options

apps/conv-learning-manager/src/assets/i18n/en.json

@@ -188,5 +188,8 @@
       "SUCCESSFUL": "Delete operation was successful",
       "FAIL": "Delete operation was not successful"
     }
+  },
+  "OPTION-INPUT": {
+    "MAX-CHARACTERS": "maximum characters reached"
   }
 }

apps/conv-learning-manager/src/assets/i18n/fr.json

@@ -152,5 +152,8 @@
       "SUCCESSFUL": "l'opération de suppression a réussi",
       "FAIL": "l'opération de suppression n'a pas réussi"
     }
+  },
+  "OPTION-INPUT": {
+    "MAX-CHARACTERS": "maximum de caractères atteint"
   }
 }

libs/features/convs-mgr/stories/blocks/library/block-options/src/lib/components/option-input-field/option-input-field.component.html

@@ -4,7 +4,10 @@
       <div [formGroupName]="formGroupNameInput" class="option" fxFlex>
         <input [id]="inputUniqueId" [class]="optionClass" [readOnly]="isReadOnly"
         [ngClass]="isReadOnly? 'readonly' : ''" formControlName="message"
-          type="text" placeholder="Click here to edit" fxFlexFill>
+          type="text" placeholder="Click here to edit" [maxlength]="charMaxlength" [(ngModel)]="optionValue" fxFlexFill>
+        <span class="length-error" *ngIf="optionValue.length >= charMaxlength">
+          {{ 'OPTION-INPUT.MAX-CHARACTERS' | transloco }}
+        </span>
       </div>
     </div>
   </div>

libs/features/convs-mgr/stories/blocks/library/block-options/src/lib/components/option-input-field/option-input-field.component.scss

@@ -1,5 +1,8 @@
 .option {
   width: inherit;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
 }
 
 input {
@@ -29,4 +32,9 @@ input {
 .failed {
   background-color: firebrick;
   color: white;
+}
+
+.length-error {
+  color: red;
+  font-size: x-small;
 }

libs/features/convs-mgr/stories/blocks/library/block-options/src/lib/components/option-input-field/option-input-field.component.ts

@@ -10,19 +10,20 @@ import { _JsPlumbComponentDecorator } from '../../providers/jsplumb-decorator.fu
   templateUrl: './option-input-field.component.html',
   styleUrls: ['./option-input-field.component.scss'],
 })
-export class OptionInputFieldComponent implements OnInit, AfterViewInit 
-{
+export class OptionInputFieldComponent implements OnInit, AfterViewInit {
 
   @Input() blockFormGroup: FormGroup;
   @Input() formGroupNameInput: number | string;
   @Input() jsPlumb: BrowserJsPlumbInstance;
   @Input() optionClass: string;
   @Input() isNotEndpoint: boolean;
   @Input() isReadOnly: boolean;
+  @Input() charMaxlength: number;
 
   inputUniqueId: string;
+  optionValue: string = "";
 
-  constructor() {}
+  constructor() { }
 
   ngOnInit(): void 
   {
@@ -31,13 +32,11 @@ export class OptionInputFieldComponent implements OnInit, AfterViewInit
     }
   }
 
-  ngAfterViewInit(): void 
-  {
+  ngAfterViewInit(): void {
     this._decorateInput();
   }
 
-  private _decorateInput() 
-  {
+  private _decorateInput() {
     let input = document.getElementById(this.inputUniqueId) as Element;
     if (this.jsPlumb) {
       input = _JsPlumbComponentDecorator(input, this.jsPlumb);

libs/features/convs-mgr/stories/blocks/library/block-options/src/lib/convs-mgr-block-options.module.ts

@@ -7,6 +7,8 @@ import {
   MaterialDesignModule,
 } from '@iote/bricks-angular';
 
+import { MultiLangModule } from '@ngfi/multi-lang';
+
 import { OptionInputFieldComponent } from './components/option-input-field/option-input-field.component';
 import { DefaultOptionFieldComponent } from './components/default-option-field/default-option-field.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -21,6 +23,7 @@ import { ListOptionComponent } from './components/list-option/list-option.compon
     MaterialBricksModule,
     FormsModule,
     ReactiveFormsModule,
+    MultiLangModule
   ],
 
   declarations: [
@@ -35,4 +38,4 @@ import { ListOptionComponent } from './components/list-option/list-option.compon
     ListOptionComponent,
   ],
 })
-export class ConvsMgrBlockOptionsModule {}
+export class ConvsMgrBlockOptionsModule { }

libs/features/convs-mgr/stories/blocks/library/list-message-block/src/lib/components/list-block/list-block.component.html

@@ -10,7 +10,7 @@
         <div [formGroupName]="i" class="inputList" fxLayout="row" fxLayoutALign="start center" fxFlex="100">
           <button (click)="deleteInput(i)" class="listgone"><i class="far fa-trash-alt"></i></button>
           <app-option-input-field [jsPlumb]="jsPlumb" [blockFormGroup]="listMessageBlock" [formGroupNameInput]="i"
-            class="input"></app-option-input-field>
+            class="input" [charMaxlength]="listOptionInputLimit"></app-option-input-field>
         </div>
       </div>
     </div>

libs/features/convs-mgr/stories/blocks/library/list-message-block/src/lib/components/list-block/list-block.component.ts

@@ -7,6 +7,9 @@ import { StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main';
 import { ListMessageBlock } from '@app/model/convs-mgr/stories/blocks/messaging';
 import { ButtonsBlockButton } from '@app/model/convs-mgr/stories/blocks/scenario';
 
+const listOptionInputLimit: number = 24;
+const listOptionsArrayLimit: number = 10;
+
 @Component({
   selector: 'app-list-block',
   templateUrl: './list-block.component.html',
@@ -20,23 +23,25 @@ export class ListBlockComponent<T> implements OnInit, AfterViewInit {
   @Input() jsPlumb: BrowserJsPlumbInstance;
 
   type: StoryBlockTypes;
-  listType= StoryBlockTypes.List;
+  listType = StoryBlockTypes.List;
+
+  readonly listOptionInputLimit = listOptionInputLimit;
 
-  constructor(private _fb: FormBuilder) {}
+  constructor(private _fb: FormBuilder) { }
 
-  ngOnInit(): void {}
+  ngOnInit(): void { }
 
   ngAfterViewInit(): void {
     this.block.options?.forEach((listItem) => {
       this.listItems.push(this.addListOptions(listItem));
     })
   }
 
-  get listItems () : FormArray {
+  get listItems(): FormArray {
     return this.listMessageBlock.controls['options'] as FormArray;
   }
 
-  addListOptions (listItem? : ButtonsBlockButton<T>) {
+  addListOptions(listItem?: ButtonsBlockButton<T>) {
     return this._fb.group({
       id: [listItem?.id ?? `${this.id}-${this.listItems.length + 1}`],
       message: [listItem?.message ?? ''],
@@ -45,9 +50,9 @@ export class ListBlockComponent<T> implements OnInit, AfterViewInit {
   }
 
   addNewOption() {
-    this.listItems.push(this.addListOptions());
+    if (this.listItems.length < listOptionsArrayLimit) this.listItems.push(this.addListOptions());
   }
-  deleteInput(i:number) {
+  deleteInput(i: number) {
     this.listItems.removeAt(i);
   }
 }

libs/features/convs-mgr/stories/blocks/library/question-message-block/src/lib/components/questions-block/questions-block.component.html

@@ -10,7 +10,7 @@
         <div [formGroupName]="i" class="inputList" fxLayout="row" fxLayoutALign="start center" fxFlex="100">
           <button (click)="deleteInput(i)" class="listgone"><i class="far fa-trash-alt"></i></button>
           <app-option-input-field [jsPlumb]="jsPlumb" [blockFormGroup]="questionMessageBlock" [formGroupNameInput]="i"
-            class="input"></app-option-input-field>
+            class="input" [charMaxlength]=questionOptionInputLimit></app-option-input-field>
         </div>
       </div>
     </div>

libs/features/convs-mgr/stories/blocks/library/question-message-block/src/lib/components/questions-block/questions-block.component.ts

@@ -7,12 +7,15 @@ import { StoryBlock, StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks
 import { QuestionMessageBlock } from '@app/model/convs-mgr/stories/blocks/messaging';
 import { ButtonsBlockButton } from '@app/model/convs-mgr/stories/blocks/scenario';
 
+const questionOptionInputLimit: number = 20;
+const questionOptionsArrayLimit: number = 3;
+
 @Component({
   selector: 'app-questions-block',
   templateUrl: './questions-block.component.html',
   styleUrls: ['./questions-block.component.scss'],
 })
-export class QuestionsBlockComponent implements OnInit, AfterViewInit {  
+export class QuestionsBlockComponent implements OnInit, AfterViewInit {
   @ViewChild('inputOtion') inputOtion: ElementRef;
 
   @Input() id: string;
@@ -26,21 +29,23 @@ export class QuestionsBlockComponent implements OnInit, AfterViewInit {
   questiontype = StoryBlockTypes.QuestionBlock;
   blockFormGroup: FormGroup;
 
-  constructor(private _fb: FormBuilder) {}
+  readonly questionOptionInputLimit = questionOptionInputLimit;
+
+  constructor(private _fb: FormBuilder) { }
 
   ngOnInit(): void {
     this.block.options?.forEach((option) => {
       this.options.push(this.addQuestionOptions(option));
     })
   }
 
-  ngAfterViewInit(): void {}
+  ngAfterViewInit(): void { }
 
-  get options () : FormArray {
+  get options(): FormArray {
     return this.questionMessageBlock.controls['options'] as FormArray;
   }
 
-  addQuestionOptions (option? : ButtonsBlockButton<any>) {
+  addQuestionOptions(option?: ButtonsBlockButton<any>) {
     return this._fb.group({
       id: [option?.id ?? `${this.id}-${this.options.length + 1}`],
       message: [option?.message ?? ''],
@@ -49,7 +54,7 @@ export class QuestionsBlockComponent implements OnInit, AfterViewInit {
   }
 
   addNewOption() {
-    this.options.push(this.addQuestionOptions());
+    if (this.options.length < questionOptionsArrayLimit) this.options.push(this.addQuestionOptions());
   }
   deleteInput(i: number) {
     this.options.removeAt(i);