-
-
Notifications
You must be signed in to change notification settings - Fork 120
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(editor): add new Dual Input Editor & extract all Editor Validato…
…rs (#446) Co-authored-by: Ghislain Beaulac <ghislain.beaulac@se.com>
- Loading branch information
1 parent
96e2973
commit 06f5dc9
Showing
27 changed files
with
1,722 additions
and
281 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,41 +1,42 @@ | ||
| <div class="container-fluid"> | ||
| <h2>{{title}}</h2> | ||
| <div class="subtitle" [innerHTML]="subTitle"></div> | ||
| <h2>{{title}}</h2> | ||
| <div class="subtitle" [innerHTML]="subTitle"></div> | ||
|
|
||
| <br> | ||
| <br> | ||
|
|
||
| <div class="row col-sm-12"> | ||
| <span> | ||
| <label for="">Pinned Rows: </label> | ||
| <input type="number" [(ngModel)]="frozenRowCount"> | ||
| <button class="btn btn-default btn-xs" (click)="changeFrozenRowCount()"> | ||
| Set | ||
| </button> | ||
| </span> | ||
| <span style="margin-left: 10px"> | ||
| <label for="">Pinned Columns: </label> | ||
| <input type="number" [(ngModel)]="frozenColumnCount"> | ||
| <button class="btn btn-default btn-xs" (click)="changeFrozenColumnCount()"> | ||
| Set | ||
| </button> | ||
| </span> | ||
| <span style="margin-left: 15px"> | ||
| <button class="btn btn-default btn-sm" (click)="toggleFrozenBottomRows()"> | ||
| <i class="fa fa-random fa-lg"></i> Toggle Pinned Rows | ||
| </button> | ||
| <span style="font-weight: bold;">: {{ isFrozenBottom ? 'Bottom' : 'Top' }}</span> | ||
| </span> | ||
| </div> | ||
| <div class="row col-sm-12"> | ||
| <span> | ||
| <label for="">Pinned Rows: </label> | ||
| <input type="number" [(ngModel)]="frozenRowCount"> | ||
| <button class="btn btn-default btn-xs" (click)="changeFrozenRowCount()"> | ||
| Set | ||
| </button> | ||
| </span> | ||
| <span style="margin-left: 10px"> | ||
| <label for="">Pinned Columns: </label> | ||
| <input type="number" [(ngModel)]="frozenColumnCount"> | ||
| <button class="btn btn-default btn-xs" (click)="changeFrozenColumnCount()"> | ||
| Set | ||
| </button> | ||
| </span> | ||
| <span style="margin-left: 15px"> | ||
| <button class="btn btn-default btn-sm" (click)="toggleFrozenBottomRows()"> | ||
| <i class="fa fa-random fa-lg"></i> Toggle Pinned Rows | ||
| </button> | ||
| <span style="font-weight: bold;">: {{ isFrozenBottom ? 'Bottom' : 'Top' }}</span> | ||
| </span> | ||
| </div> | ||
|
|
||
| <div class="col-sm-12"> | ||
| <hr> | ||
| </div> | ||
| <div class="col-sm-12"> | ||
| <hr> | ||
| </div> | ||
|
|
||
| <angular-slickgrid gridId="grid20" | ||
| gridWidth="875" | ||
| [columnDefinitions]="columnDefinitions" | ||
| [gridOptions]="gridOptions" | ||
| [dataset]="dataset" | ||
| (onAngularGridCreated)="angularGridReady($event)"> | ||
| </angular-slickgrid> | ||
| <angular-slickgrid gridId="grid20" | ||
| gridWidth="875" | ||
| [columnDefinitions]="columnDefinitions" | ||
| [gridOptions]="gridOptions" | ||
| [dataset]="dataset" | ||
| (sgOnValidationError)="onValidationError($event.detail.eventData, $event.detail.args)" | ||
| (onAngularGridCreated)="angularGridReady($event)"> | ||
| </angular-slickgrid> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
68 changes: 68 additions & 0 deletions
68
src/app/modules/angular-slickgrid/editorValidators/floatValidator.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import { Constants } from '../constants'; | ||
| import { EditorValidatorOutput } from '../models/editorValidatorOutput.interface'; | ||
| import { EditorValidator } from '../models/editorValidator.interface'; | ||
|
|
||
| interface FloatValidatorOptions { | ||
| editorArgs: any; | ||
| decimal?: number; | ||
| errorMessage?: string; | ||
| minValue?: string | number; | ||
| maxValue?: string | number; | ||
| operatorConditionalType?: 'inclusive' | 'exclusive'; | ||
| required?: boolean; | ||
| validator?: EditorValidator; | ||
| } | ||
|
|
||
| export function floatValidator(inputValue: any, options: FloatValidatorOptions): EditorValidatorOutput { | ||
| const floatNumber = !isNaN(inputValue as number) ? parseFloat(inputValue) : null; | ||
| const decPlaces = options.decimal || 0; | ||
| const isRequired = options.required; | ||
| const minValue = options.minValue; | ||
| const maxValue = options.maxValue; | ||
| const operatorConditionalType = options.operatorConditionalType || 'inclusive'; | ||
| const errorMsg = options.errorMessage; | ||
| const mapValidation = { | ||
| '{{minValue}}': minValue, | ||
| '{{maxValue}}': maxValue, | ||
| '{{minDecimal}}': 0, | ||
| '{{maxDecimal}}': decPlaces | ||
| }; | ||
| let isValid = true; | ||
| let outputMsg = ''; | ||
|
|
||
| if (typeof options.validator === 'function') { | ||
| return options.validator(inputValue, options.editorArgs); | ||
| } else if (isRequired && inputValue === '') { | ||
| isValid = false; | ||
| outputMsg = errorMsg || Constants.VALIDATION_REQUIRED_FIELD; | ||
| } else if (inputValue !== '' && (isNaN(inputValue as number) || (decPlaces === 0 && !/^[-+]?(\d+(\.)?(\d)*)$/.test(inputValue)))) { | ||
| // when decimal value is 0 (which is the default), we accept 0 or more decimal values | ||
| isValid = false; | ||
| outputMsg = errorMsg || Constants.VALIDATION_EDITOR_VALID_NUMBER; | ||
| } else if (minValue !== undefined && maxValue !== undefined && floatNumber !== null && ((operatorConditionalType === 'exclusive' && (floatNumber <= minValue || floatNumber >= maxValue)) || (operatorConditionalType === 'inclusive' && (floatNumber < minValue || floatNumber > maxValue)))) { | ||
| // MIN & MAX Values provided | ||
| // when decimal value is bigger than 0, we only accept the decimal values as that value set | ||
| // for example if we set decimalPlaces to 2, we will only accept numbers between 0 and 2 decimals | ||
| isValid = false; | ||
| outputMsg = errorMsg || Constants.VALIDATION_EDITOR_NUMBER_BETWEEN.replace(/{{minValue}}|{{maxValue}}/gi, (matched) => mapValidation[matched]); | ||
| } else if (minValue !== undefined && floatNumber !== null && ((operatorConditionalType === 'exclusive' && floatNumber <= minValue) || (operatorConditionalType === 'inclusive' && floatNumber < minValue))) { | ||
| // MIN VALUE ONLY | ||
| // when decimal value is bigger than 0, we only accept the decimal values as that value set | ||
| // for example if we set decimalPlaces to 2, we will only accept numbers between 0 and 2 decimals | ||
| isValid = false; | ||
| outputMsg = errorMsg || Constants.VALIDATION_EDITOR_NUMBER_MIN.replace(/{{minValue}}/gi, (matched) => mapValidation[matched]); | ||
| } else if (maxValue !== undefined && floatNumber !== null && ((operatorConditionalType === 'exclusive' && floatNumber >= maxValue) || (operatorConditionalType === 'inclusive' && floatNumber > maxValue))) { | ||
| // MAX VALUE ONLY | ||
| // when decimal value is bigger than 0, we only accept the decimal values as that value set | ||
| // for example if we set decimalPlaces to 2, we will only accept numbers between 0 and 2 decimals | ||
| isValid = false; | ||
| outputMsg = errorMsg || Constants.VALIDATION_EDITOR_NUMBER_MAX.replace(/{{maxValue}}/gi, (matched) => mapValidation[matched]); | ||
| } else if ((decPlaces > 0 && !new RegExp(`^[-+]?(\\d*(\\.)?(\\d){0,${decPlaces}})$`).test(inputValue))) { | ||
| // when decimal value is bigger than 0, we only accept the decimal values as that value set | ||
| // for example if we set decimalPlaces to 2, we will only accept numbers between 0 and 2 decimals | ||
| isValid = false; | ||
| outputMsg = errorMsg || Constants.VALIDATION_EDITOR_DECIMAL_BETWEEN.replace(/{{minDecimal}}|{{maxDecimal}}/gi, (matched) => mapValidation[matched]); | ||
| } | ||
|
|
||
| return { valid: isValid, msg: outputMsg }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| export * from './floatValidator'; | ||
| export * from './integerValidator'; | ||
| export * from './sliderValidator'; | ||
| export * from './textValidator'; |
Oops, something went wrong.