Skip to content

Commit

Permalink
fix(Table Authoring): Only allow positive number of rows and columns (#…
Browse files Browse the repository at this point in the history 
…1569)
  • Loading branch information
@geoffreykwan
geoffreykwan authored Jan 16, 2024
1 parent 64ae2cf commit 5b5351b
Show file tree
Hide file tree
Showing 3 changed files with 147 additions and 88 deletions.
52 changes: 31 additions & 21 deletions src/assets/wise5/components/table/table-authoring/table-authoring.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,35 @@
[prompt]="componentContent.prompt"
(promptChangedEvent)="promptChanged($event)"
></edit-component-prompt>
<div>
<mat-form-field class="size-input">
<mat-label i18n>Columns</mat-label>
<input
matInput
type="number"
min="1"
[(ngModel)]="componentContent.numColumns"
(ngModelChange)="numColumnsChange.next($event)"
/>
</mat-form-field>
<mat-form-field class="size-input">
<mat-label i18n>Rows</mat-label>
<input
matInput
type="number"
min="1"
[(ngModel)]="componentContent.numRows"
(ngModelChange)="numRowsChange.next($event)"
/>
</mat-form-field>
<div fxLayout="row wrap">
<form [formGroup]="dimensionsForm">
<mat-form-field class="size-input">
<mat-label i18n>Columns</mat-label>
<input
matInput
type="number"
min="1"
formControlName="numColumnsFormControl"
(keypress)="isNumberChar($event)"
/>
<mat-error *ngIf="dimensionsForm.controls['numColumnsFormControl'].hasError('invalid')" i18n
>Invalid Value</mat-error
>
</mat-form-field>
<mat-form-field class="size-input">
<mat-label i18n>Rows</mat-label>
<input
matInput
type="number"
min="1"
formControlName="numRowsFormControl"
(keypress)="isNumberChar($event)"
/>
<mat-error *ngIf="dimensionsForm.controls['numRowsFormControl'].hasError('invalid')" i18n
>Invalid Value</mat-error
>
</mat-form-field>
</form>
<mat-form-field class="size-input">
<mat-label i18n>Global Cell Size</mat-label>
<input
Expand Down Expand Up @@ -65,6 +73,7 @@
color="primary"
class="column-buttons"
(click)="deleteColumn(columnIndex)"
[disabled]="componentContent.numColumns === 1"
matTooltip="Delete Column"
matTooltipPosition="above"
i18n-matTooltip
Expand Down Expand Up @@ -111,6 +120,7 @@
color="primary"
class="row-buttons"
(click)="deleteRow(rowIndex)"
[disabled]="componentContent.numRows === 1"
matTooltip="Delete Row"
matTooltipPosition="above"
i18n-matTooltip
Expand Down
122 changes: 80 additions & 42 deletions src/assets/wise5/components/table/table-authoring/table-authoring.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,21 @@ import { AbstractComponentAuthoring } from '../../../authoringTool/components/Ab
import { ConfigService } from '../../../services/configService';
import { TeacherProjectService } from '../../../services/teacherProjectService';
import { TeacherNodeService } from '../../../services/teacherNodeService';
import { FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';

@Component({
selector: 'table-authoring',
templateUrl: 'table-authoring.component.html',
styleUrls: ['table-authoring.component.scss']
})
export class TableAuthoring extends AbstractComponentAuthoring {
columnCellSizes: any;
frozenColumns: any;
frozenColumnsLimitReached: boolean = false;

numColumnsChange: Subject<number> = new Subject<number>();
numRowsChange: Subject<number> = new Subject<number>();
globalCellSizeChange: Subject<number> = new Subject<number>();
protected columnCellSizes: any;
protected dimensionsForm: FormGroup;
protected frozenColumns: any;
protected frozenColumnsLimitReached: boolean = false;
protected globalCellSizeChange: Subject<number> = new Subject<number>();
private numColumnsFormControl: FormControl;
private numRowsFormControl: FormControl;

constructor(
protected ConfigService: ConfigService,
Expand All @@ -30,27 +31,67 @@ export class TableAuthoring extends AbstractComponentAuthoring {
protected ProjectService: TeacherProjectService
) {
super(ConfigService, NodeService, ProjectAssetService, ProjectService);
}

ngOnInit() {
super.ngOnInit();
this.initializeDimensionInputs();
this.subscriptions.add(
this.numColumnsChange.pipe(debounceTime(1000), distinctUntilChanged()).subscribe(() => {
this.tableNumColumnsChanged();
this.globalCellSizeChange.pipe(debounceTime(1000), distinctUntilChanged()).subscribe(() => {
this.componentChanged();
})
);
this.columnCellSizes = this.parseColumnCellSizes(this.componentContent);
this.frozenColumns = this.parseFrozenColumns(this.componentContent);
}

private initializeDimensionInputs(): void {
this.initializeColumnInput();
this.initializeRowInput();
this.dimensionsForm = new FormGroup({
numColumnsFormControl: this.numColumnsFormControl,
numRowsFormControl: this.numRowsFormControl
});
}

private initializeColumnInput(): void {
this.numColumnsFormControl = this.createDimensionFormControl(this.componentContent.numColumns);
this.subscriptions.add(
this.numRowsChange.pipe(debounceTime(1000), distinctUntilChanged()).subscribe(() => {
this.tableNumRowsChanged();
})
this.numColumnsFormControl.valueChanges
.pipe(debounceTime(1000), distinctUntilChanged())
.subscribe((value: number): void => {
if (this.numColumnsFormControl.valid) {
this.componentContent.numColumns = value;
this.tableNumColumnsChanged();
}
})
);
}

private initializeRowInput(): void {
this.numRowsFormControl = this.createDimensionFormControl(this.componentContent.numRows);
this.subscriptions.add(
this.globalCellSizeChange.pipe(debounceTime(1000), distinctUntilChanged()).subscribe(() => {
this.componentChanged();
})
this.numRowsFormControl.valueChanges
.pipe(debounceTime(1000), distinctUntilChanged())
.subscribe((value: number): void => {
if (this.numRowsFormControl.valid) {
this.componentContent.numRows = value;
this.tableNumRowsChanged();
}
})
);
}

ngOnInit() {
super.ngOnInit();
this.columnCellSizes = this.parseColumnCellSizes(this.componentContent);
this.frozenColumns = this.parseFrozenColumns(this.componentContent);
private createDimensionFormControl(initialValue: number): FormControl {
return new FormControl(initialValue, [Validators.required, this.positiveNumberValidator()]);
}

private positiveNumberValidator(): ValidatorFn {
return (control: FormControl) => {
if (control.value < 1) {
return { invalid: true };
}
};
}

tableNumRowsChanged(): void {
Expand Down Expand Up @@ -203,6 +244,7 @@ export class TableAuthoring extends AbstractComponentAuthoring {
}
tableData.splice(rowIndex, 0, newRow);
this.componentContent.numRows++;
this.numRowsFormControl.setValue(this.componentContent.numRows);
this.componentChanged();
}

Expand All @@ -213,6 +255,7 @@ export class TableAuthoring extends AbstractComponentAuthoring {
tableData.splice(rowIndex, 1);
this.componentContent.numRows--;
}
this.numRowsFormControl.setValue(this.componentContent.numRows);
this.componentChanged();
}
}
Expand All @@ -228,6 +271,7 @@ export class TableAuthoring extends AbstractComponentAuthoring {
this.componentContent.numColumns++;
this.parseColumnCellSizes(this.componentContent);
this.parseFrozenColumns(this.componentContent);
this.numColumnsFormControl.setValue(this.componentContent.numColumns);
this.componentChanged();
}

Expand All @@ -242,6 +286,7 @@ export class TableAuthoring extends AbstractComponentAuthoring {
this.componentContent.numColumns--;
this.parseColumnCellSizes(this.componentContent);
this.parseFrozenColumns(this.componentContent);
this.numColumnsFormControl.setValue(this.componentContent.numColumns);
this.componentChanged();
}
}
Expand Down Expand Up @@ -299,11 +344,9 @@ export class TableAuthoring extends AbstractComponentAuthoring {
const columnCellSizes = {};
const tableData = componentContent.tableData;
const firstRow = tableData[0];
if (firstRow != null) {
for (let x = 0; x < firstRow.length; x++) {
const cell = firstRow[x];
columnCellSizes[x] = cell.size;
}
for (let x = 0; x < firstRow.length; x++) {
const cell = firstRow[x];
columnCellSizes[x] = cell.size;
}
return columnCellSizes;
}
Expand All @@ -319,23 +362,19 @@ export class TableAuthoring extends AbstractComponentAuthoring {
private setColumnCellSize(column: number, size: number): void {
const tableData = this.componentContent.tableData;
const firstRow = tableData[0];
if (firstRow != null) {
const cell = firstRow[column];
if (cell != null) {
cell.size = size;
}
const cell = firstRow[column];
if (cell != null) {
cell.size = size;
}
this.componentChanged();
}

private parseFrozenColumns(componentContent: any): any {
const frozenColumns = {};
const firstRow = componentContent.tableData[0];
if (firstRow != null) {
for (const key in firstRow) {
const cell = firstRow[key];
frozenColumns[key] = cell.frozen;
}
for (const key in firstRow) {
const cell = firstRow[key];
frozenColumns[key] = cell.frozen;
}
this.frozenColumnsLimitReached = this.isfrozenColumnsLimitReached();
return frozenColumns;
Expand All @@ -344,21 +383,16 @@ export class TableAuthoring extends AbstractComponentAuthoring {
frozenColumnsChanged(index: number): void {
let frozen = this.frozenColumns[index];
const firstRow = this.componentContent.tableData[0];
if (firstRow != null) {
const cell = firstRow[index];
if (cell != null) {
cell.frozen = frozen;
}
const cell = firstRow[index];
if (cell != null) {
cell.frozen = frozen;
}
this.componentChanged();
this.frozenColumnsLimitReached = this.isfrozenColumnsLimitReached();
}

private isfrozenColumnsLimitReached(): boolean {
const firstRow = this.componentContent.tableData[0];
if (firstRow == null) {
return false;
}
let count = 0;
for (const key in firstRow) {
if (firstRow[key].frozen) {
Expand All @@ -381,4 +415,8 @@ export class TableAuthoring extends AbstractComponentAuthoring {
this.automaticallySetConnectedComponentFieldsIfPossible(connectedComponent);
this.componentChanged();
}

protected isNumberChar(event: any): boolean {
return event.charCode >= 48 && event.charCode <= 57;
}
}
Loading

0 comments on commit 5b5351b

Please sign in to comment.