fix(ng-table-builder): table features and typings (#711)

Markiewic · splincode · web-flow · commit fb0f2f746743 · 2021-07-05T08:39:58.000Z
* fix(ng-table-builder): intersect explicit keys with model

&amp; table some features

* feat(common): support nullable types for excel builder &amp; table builder

* feat(@angular-ru/common): correct to-number signature

* fixup! feat(@angular-ru/common): correct to-number signature

Co-authored-by: Max Ivanov &lt;omaxphp@yandex.ru&gt;
diff --git a/packages/common/docs/number.md b/packages/common/docs/number.md
@@ -21,10 +21,8 @@ import { toNumber } from '@angular-ru/common/number';
 expect(toNumber(NaN)).toEqual(NaN);
 expect(toNumber(Infinity)).toEqual(Infinity);
 expect(toNumber('')).toEqual(NaN);
-expect(toNumber(null as any)).toEqual(NaN);
-expect(toNumber(undefined as any)).toEqual(NaN);
-expect(toNumber('')).toEqual(NaN);
-expect(toNumber(undefined as any)).toEqual(NaN);
+expect(toNumber(null)).toEqual(NaN);
+expect(toNumber(undefined)).toEqual(NaN);
 
 expect(toNumber(0)).toEqual(0);
 expect(toNumber('0.1')).toEqual(0.1);
diff --git a/packages/common/integration/tests/number/number.spec.ts b/packages/common/integration/tests/number/number.spec.ts
@@ -23,10 +23,8 @@ describe('[TEST]: Number', () => {
             expect(toNumber(NaN)).toEqual(NaN);
             expect(toNumber(Infinity)).toEqual(Infinity);
             expect(toNumber('')).toEqual(NaN);
-            expect(toNumber(null as any)).toEqual(NaN);
-            expect(toNumber(undefined as any)).toEqual(NaN);
-            expect(toNumber('')).toEqual(NaN);
-            expect(toNumber(undefined as any)).toEqual(NaN);
+            expect(toNumber(null)).toEqual(NaN);
+            expect(toNumber(undefined)).toEqual(NaN);
         });
 
         it('should be correct to number', () => {
diff --git a/packages/common/number/src/to-number.ts b/packages/common/number/src/to-number.ts
@@ -1,8 +1,11 @@
+import { Nullable } from '@angular-ru/common/typings';
+import { checkValueIsFilled } from '@angular-ru/common/utils';
+
 const formatToPartsValue: number = 12345.6;
 const intlFormatOrigin: number = 9876543210;
 
-export function toNumber(value: number | string, locale: string = 'ru-RU'): number {
-    let prepared: string = value?.toString().replace(/\s/g, '');
+export function toNumber(value: Nullable<number | string>, locale: string = 'ru-RU'): number {
+    let prepared: Nullable<string> = value?.toString().replace(/\s/g, '');
 
     const parts: Intl.NumberFormatPart[] = new Intl.NumberFormat(locale).formatToParts(formatToPartsValue);
 
@@ -26,5 +29,5 @@ export function toNumber(value: number | string, locale: string = 'ru-RU'): numb
 
     prepared = prepared?.trim().replace(group, '').replace(decimal, '.').replace(numeral, indexes);
 
-    return prepared ? +prepared : NaN;
+    return checkValueIsFilled(prepared) ? +prepared : NaN;
 }
diff --git a/packages/common/table-utils/src/interfaces/rules-descriptor.ts b/packages/common/table-utils/src/interfaces/rules-descriptor.ts
@@ -1,4 +1,6 @@
+import { Nullable } from '@angular-ru/common/typings';
+
 export interface RulesDescriptor {
-    includeKeys?: string[];
-    excludeKeys?: string[];
+    includeKeys?: Nullable<string[]>;
+    excludeKeys?: Nullable<string[]>;
 }
diff --git a/packages/ng-excel-builder/src/domain/column-parameters.ts b/packages/ng-excel-builder/src/domain/column-parameters.ts
@@ -1,5 +1,7 @@
+import { Nullable } from '@angular-ru/common/typings';
+
 import { ColumnWidth } from './column-width';
 
 export interface ColumnParameters {
-    width?: number | ColumnWidth;
+    width?: Nullable<number | ColumnWidth>;
 }
diff --git a/packages/ng-excel-builder/src/domain/excel-workbook.ts b/packages/ng-excel-builder/src/domain/excel-workbook.ts
@@ -1,9 +1,9 @@
-import { PlainObject } from '@angular-ru/common/typings';
+import { Nullable, PlainObject } from '@angular-ru/common/typings';
 
 import { ExcelWorksheet } from './excel-worksheet';
 
 export interface ExcelWorkbook<T> {
     filename: string;
-    translatedKeys?: PlainObject;
+    translatedKeys?: Nullable<PlainObject>;
     worksheets: ExcelWorksheet<T>[];
 }
diff --git a/packages/ng-excel-builder/src/domain/excel-worksheet.ts b/packages/ng-excel-builder/src/domain/excel-worksheet.ts
@@ -6,8 +6,8 @@ import { EntriesKeys } from './entries-keys';
 export interface ExcelWorksheet<T> {
     entries: Nullable<T[]>;
     worksheetName: string;
-    prefixKeyForTranslate?: string;
-    keys?: EntriesKeys<T>;
-    excludeKeys?: EntriesKeys<T>;
-    columnParameters?: PlainObjectOf<ColumnParameters>;
+    prefixKeyForTranslate?: Nullable<string>;
+    keys?: Nullable<EntriesKeys<T>>;
+    excludeKeys?: Nullable<EntriesKeys<T>>;
+    columnParameters?: Nullable<PlainObjectOf<ColumnParameters>>;
 }
diff --git a/packages/ng-excel-builder/src/excel-builder.service.ts b/packages/ng-excel-builder/src/excel-builder.service.ts
@@ -178,7 +178,7 @@ export class ExcelBuilderService {
                         return maxLength * this.sizes.fontWidth;
                     }
 
-                    private getTranslatedTitle(key: string, translatePrefix?: string): string {
+                    private getTranslatedTitle(key: string, translatePrefix?: Nullable<string>): string {
                         const translatePath: string = ExcelBuilder.isFilled(translatePrefix)
                             ? `${translatePrefix}.${key}`
                             : key;
diff --git a/packages/ng-table-builder/integration/app/src/samples/sample-fourteen/sample-fourteen.component.ts b/packages/ng-table-builder/integration/app/src/samples/sample-fourteen/sample-fourteen.component.ts
@@ -48,7 +48,7 @@ export class SampleFourteenComponent implements OnInit, AfterViewInit {
     constructor(public readonly dialog: MatDialog, private readonly cd: ChangeDetectorRef) {}
 
     public ngOnInit(): void {
-        const rows: number = 100;
+        const rows: number = 10000;
         const cols: number = 59;
         MocksGenerator.generator(rows, cols).then((data: PlainObject[]): void => {
             this.data = data;
diff --git a/packages/ng-table-builder/src/components/table-thead/table-thead.component.html b/packages/ng-table-builder/src/components/table-thead/table-thead.component.html
@@ -1,6 +1,7 @@
 <div
     [style.top.px]="headerTop"
     class="table-grid__cell table-grid__header-cell"
+    [class.table-grid__header-cell--is-clickable]="columnSchema?.sortable"
     [class.table-grid__cell--empty-head]="columnSchema?.th?.emptyHead"
     [class.table-grid__cell--custom-cell]="columnSchema?.customColumn"
     [class.table-grid__cell--is-model-cell]="columnSchema?.isModel"
@@ -16,7 +17,7 @@
     <div
         class="table-grid__cell--content table-grid__header-cell--content"
         [class.table-grid__cell--content-sortable-is-active]="sortableDefinition[columnSchema?.key!]"
-        [class.table-grid__cell--content-sortable]="columnSchema?.sortable!"
+        [class.table-grid__cell--content-sortable]="columnSchema?.sortable"
         [class.table-grid__cell--nowrap]="columnSchema?.th?.nowrap!"
     >
         <ng-template
diff --git a/packages/ng-table-builder/src/interfaces/table-builder.external.ts b/packages/ng-table-builder/src/interfaces/table-builder.external.ts
@@ -34,7 +34,7 @@ export interface ColumnsSchema<T = Any> {
     key: Nullable<string>;
     td: TableCellOptions<T>;
     th: TableCellOptions<T> & TableHeadCellOptions;
-    width?: Nullable<string | number>;
+    width?: Nullable<number>;
     cssStyle: string[];
     cssClass: string[];
     stickyLeft: boolean;
diff --git a/packages/ng-table-builder/src/services/template-parser/template-parser.service.ts b/packages/ng-table-builder/src/services/template-parser/template-parser.service.ts
@@ -1,6 +1,8 @@
 import { Injectable, QueryList } from '@angular/core';
+import { toNumber } from '@angular-ru/common/number';
+import { shallowMapObject } from '@angular-ru/common/object';
 import { Any, Nullable, PlainObjectOf } from '@angular-ru/common/typings';
-import { checkValueIsFilled, isNil, isNotNil, isTrue } from '@angular-ru/common/utils';
+import { checkValueIsFilled, fallbackIfEmpty, isNil, isNotNil, isTrue } from '@angular-ru/common/utils';
 
 import { NgxColumnComponent } from '../../components/ngx-column/ngx-column.component';
 import { ColumnOptionsDirective } from '../../directives/column-options.directive';
@@ -67,18 +69,29 @@ export class TemplateParserService<T> {
 
     public toggleColumnVisibility(key: string): void {
         if (isNotNil(this.schema)) {
-            this.schema.columns = this.schema.columns.map(
-                (column: ColumnsSchema): ColumnsSchema =>
-                    key === column.key
-                        ? {
-                              ...column,
-                              isVisible: !column.isVisible
-                          }
-                        : column
-            );
-
-            this.synchronizedReference();
+            this.schema.columns = this.schema.columns.map((column: ColumnsSchema): ColumnsSchema => {
+                if (key === column.key) {
+                    return { ...column, isVisible: !column.isVisible };
+                } else {
+                    return column;
+                }
+            });
+
+            this.updateComputedWithSchema();
+        }
+    }
+
+    public updateColumnsSchema(patch: PlainObjectOf<Partial<ColumnsSchema>>): void {
+        if (isNotNil(this.schema)) {
+            this.schema.columns = this.schema.columns.map((column: ColumnsSchema): ColumnsSchema => {
+                if (isNotNil(column.key)) {
+                    return { ...column, ...patch[column.key] };
+                } else {
+                    return column;
+                }
+            });
         }
+        this.updateComputedWithSchema();
     }
 
     public initialSchema(columnOptions: ColumnOptionsDirective): void {
@@ -149,7 +162,7 @@ export class TemplateParserService<T> {
             stickyLeft: getValidHtmlBooleanAttribute(column.stickyLeft),
             stickyRight: getValidHtmlBooleanAttribute(column.stickyRight),
             customColumn: isCustomKey,
-            width: getValidPredicate(column.width, this.columnOptions?.width),
+            width: fallbackIfEmpty(toNumber(column.width ?? this.columnOptions?.width), null),
             cssClass: getValidPredicate(column.cssClass, this.columnOptions?.cssClass) ?? [],
             cssStyle: getValidPredicate(column.cssStyle, this.columnOptions?.cssStyle) ?? [],
             resizable: getValidHtmlBooleanAttribute(
@@ -180,7 +193,19 @@ export class TemplateParserService<T> {
         };
     }
 
-    private synchronizedReference(): void {
+    public exportSchema(): PlainObjectOf<Partial<ColumnsSchema>> {
+        return shallowMapObject(
+            this.compiledTemplates,
+            (column: ColumnsSchema): Partial<ColumnsSchema> => ({
+                key: column.key,
+                width: column.width,
+                isVisible: column.isVisible,
+                isModel: column.isModel
+            })
+        );
+    }
+
+    private updateComputedWithSchema(): void {
         this.schema?.columns.forEach((column: ColumnsSchema): void => {
             this.compiledTemplates[column.key!] = column;
         });
diff --git a/packages/ng-table-builder/src/styles/cell.scss b/packages/ng-table-builder/src/styles/cell.scss
@@ -102,12 +102,11 @@
 
         &--content {
             overflow: hidden;
-            cursor: pointer;
             margin: auto 3px;
             word-break: keep-all;
         }
 
-        &:active {
+        &--is-clickable:active {
             background: var(--ngx-table-header-cell-active-background);
             fill: var(--ngx-table-header-cell-active-color);
             stroke: var(--ngx-table-header-cell-active-color);
diff --git a/packages/ng-table-builder/src/table-builder.component.ts b/packages/ng-table-builder/src/table-builder.component.ts
@@ -20,6 +20,7 @@ import {
     ViewEncapsulation
 } from '@angular/core';
 import { fadeInLinearAnimation } from '@angular-ru/common/animations';
+import { hasItems } from '@angular-ru/common/array';
 import { Any, DeepPartial, Nullable, PlainObjectOf, SortOrderType } from '@angular-ru/common/typings';
 import { checkValueIsFilled, detectChanges, isFalse, isFalsy, isNil, isNotNil } from '@angular-ru/common/utils';
 import { EMPTY, fromEvent, Observable, Subject } from 'rxjs';
@@ -307,6 +308,11 @@ export class TableBuilderComponent<T>
         }
     }
 
+    public updateColumnsSchema(patch: PlainObjectOf<Partial<ColumnsSchema>>): void {
+        this.templateParser.updateColumnsSchema(patch);
+        this.changeSchema();
+    }
+
     public resetSchema(): void {
         this.columnListWidth = 0;
         this.schemaColumns = null;
@@ -749,7 +755,11 @@ export class TableBuilderComponent<T>
      * because users can draw the wrong keys in the template (ngx-column key=invalid)
      */
     private parseTemplateKeys(): TemplateKeys {
-        this.templateParser.keyMap = this.generateColumnsKeyMap(this.keys.length ? this.keys : this.getModelKeys());
+        const modelKeys: string[] = this.getModelKeys();
+        const keys: string[] = hasItems(this.keys)
+            ? this.keys.filter((key: string): boolean => modelKeys.includes(key))
+            : modelKeys;
+        this.templateParser.keyMap = this.generateColumnsKeyMap(keys);
 
         this.templateParser.allowedKeyMap = this.keys.length
             ? this.generateColumnsKeyMap(this.customModelColumnsKeys)

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,6 @@`
	`1`	`+import { Nullable } from '@angular-ru/common/typings';`
	`2`	`+`
`1`	`3`	`export interface RulesDescriptor {`
`2`		`- includeKeys?: string[];`
`3`		`- excludeKeys?: string[];`
	`4`	`+ includeKeys?: Nullable<string[]>;`
	`5`	`+ excludeKeys?: Nullable<string[]>;`
`4`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,7 @@`
	`1`	`+import { Nullable } from '@angular-ru/common/typings';`
	`2`	`+`
`1`	`3`	`import { ColumnWidth } from './column-width';`
`2`	`4`
`3`	`5`	`export interface ColumnParameters {`
`4`		`- width?: number \| ColumnWidth;`
	`6`	`+ width?: Nullable<number \| ColumnWidth>;`
`5`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -178,7 +178,7 @@ export class ExcelBuilderService {`
`178`	`178`	`return maxLength * this.sizes.fontWidth;`
`179`	`179`	`}`
`180`	`180`
`181`		`- private getTranslatedTitle(key: string, translatePrefix?: string): string {`
	`181`	`+ private getTranslatedTitle(key: string, translatePrefix?: Nullable<string>): string {`
`182`	`182`	`const translatePath: string = ExcelBuilder.isFilled(translatePrefix)`
`183`	`183`	? `${translatePrefix}.${key}`
`184`	`184`	`: key;`