Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 7 commits into from
Feb 28, 2023

Conversation

royokite
Copy link
Contributor

@royokite royokite commented Feb 23, 2023

Description

This pull request is made in part to handle number of options and character limit on the question and list blocks.

For the list block:

  • A maximum of 10 options with a maximum of 24 characters each.

For the question block

  • A maximum of 3 options with a maximum of 20 characters each

Fixes #302

Type of change

Please delete options that are not relevant.

  • New feature (non-breaking change which adds functionality)

Screenshot (optional)

Screenshot (372)

How Has This Been Tested?

  • Type into option input and evaluate input size set to 20 for question block and 24 for list block.
  • Created a question block to test possible options and the limit works at 3.
  • Created a list block to test possible options and the limit works at 10.

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published in downstream modules

royokite and others added 5 commits February 23, 2023 12:03
Add maxlength variable to option component.
Add custom error message to display on invalid input
Limit the options a user can add to question blocks to 3.
Add limit to input size set to 20.
Limit input size to 24 characters
Limit possible options to 10
Set font color to red
Set font size to x-small
Set flex direction on container to flex column
Copy link
Member

@ReaganCn ReaganCn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job. Just some minor changes

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">
maximum characters reached
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use multi-lang. Have a look at the below from the login.component.html
image

The translations are added in the files en.json and fr.json

@@ -45,9 +45,9 @@ export class ListBlockComponent<T> implements OnInit, AfterViewInit {
}

addNewOption() {
this.listItems.push(this.addListOptions());
if (this.listItems.length < 10) this.listItems.push(this.addListOptions());
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Save this number to a const

@@ -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]=20></app-option-input-field>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here

@@ -49,7 +49,7 @@ export class QuestionsBlockComponent implements OnInit, AfterViewInit {
}

addNewOption() {
this.options.push(this.addQuestionOptions());
if (this.options.length < 3) this.options.push(this.addQuestionOptions());
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Made all the requested changes. @ReaganCn

Update the en and fr json files for translation purposes.
Move the input max length value to constant
Move the array limit size to constant.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

🎨 🔢 As a user I should be able to see the number of characters in question and list block options
2 participants