breaking: rename sortable, filterable, draggable, resizable attrs

splincode · splincode · commit 6f01bfd113ea · 2020-04-22T11:43:32.000+03:00
diff --git a/projects/table-builder/package.json b/projects/table-builder/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@angular-ru/ng-table-builder",
-    "version": "0.42.0",
+    "version": "1.0.0",
     "license": "MIT",
     "bugs": {
         "url": "https://github.com/Angular-RU/ng-table-builder/issues"
diff --git a/projects/table-builder/src/lib/table/components/common/column-options.ts b/projects/table-builder/src/lib/table/components/common/column-options.ts
@@ -10,15 +10,15 @@ export class ColumnOptions {
     /**
      * preserve track global value for overflowTooltip if selected
      */
-    @Input('overflow-tooltip') public overflowTooltip: boolean = null;
-    @Input('filter-type') public filterType: TableFilterType = null;
-    @Input() public nowrap: boolean = null;
+    @Input('overflow-tooltip') public overflowTooltip: boolean | null = null;
+    @Input('filter-type') public filterType: TableFilterType | null = null;
+    @Input() public nowrap: boolean | null = null;
     @Input() public width: number = null;
-    @Input() public resizable: boolean = null;
-    @Input() public sortable: boolean = null;
-    @Input() public filterable: boolean = null;
-    @Input() public draggable: boolean = null;
+    @Input('is-resizable') public isResizable: boolean | null = null;
+    @Input('is-sortable') public isSortable: boolean | null = null;
+    @Input('is-filterable') public isFilterable: boolean | null = null;
+    @Input('is-draggable') public isDraggable: boolean | null = null;
     @Input('css-class') public cssClass: string[];
     @Input('css-style') public cssStyle: string[];
-    @Input() public stub: string = null;
+    @Input() public stub: string | null = null;
 }
diff --git a/projects/table-builder/src/lib/table/operators/get-valid-html-boolean-attribute.ts b/projects/table-builder/src/lib/table/operators/get-valid-html-boolean-attribute.ts
@@ -0,0 +1,3 @@
+export function getValidHtmlBooleanAttribute(attribute: boolean): boolean {
+    return typeof attribute === 'string' ? true : !!attribute;
+}
diff --git a/projects/table-builder/src/lib/table/operators/get-valid-predicate.ts b/projects/table-builder/src/lib/table/operators/get-valid-predicate.ts
@@ -0,0 +1,3 @@
+export function getValidPredicate<T>(leftPredicate: T, rightPredicate: T): T {
+    return leftPredicate === null ? rightPredicate : leftPredicate;
+}
diff --git a/projects/table-builder/src/lib/table/services/template-parser/template-parser.service.ts b/projects/table-builder/src/lib/table/services/template-parser/template-parser.service.ts
@@ -7,6 +7,8 @@ import { TemplateCellCommon } from '../../directives/rows/template-cell.common';
 import { TemplateHeadThDirective } from '../../directives/rows/template-head-th.directive';
 import { ColumnsSchema, ImplicitContext, TableCellOptions } from '../../interfaces/table-builder.external';
 import { KeyMap, QueryListRef } from '../../interfaces/table-builder.internal';
+import { getValidHtmlBooleanAttribute } from '../../operators/get-valid-html-boolean-attribute';
+import { getValidPredicate } from '../../operators/get-valid-predicate';
 import { SchemaBuilder } from './schema-builder.class';
 
 @Injectable()
@@ -53,21 +55,11 @@ export class TemplateParserService {
             onClick: cell.onClick,
             dblClick: cell.dblClick,
             useDeepPath: key.includes('.'),
-            context: TemplateParserService.getValidHtmlBooleanAttribute(cell.row)
-                ? ImplicitContext.ROW
-                : ImplicitContext.CELL,
-            nowrap: TemplateParserService.getValidPredicate(options.nowrap, cell.nowrap)
+            context: getValidHtmlBooleanAttribute(cell.row) ? ImplicitContext.ROW : ImplicitContext.CELL,
+            nowrap: getValidHtmlBooleanAttribute(getValidPredicate(options.nowrap, cell.nowrap))
         };
     }
 
-    private static getValidHtmlBooleanAttribute(attribute: boolean): boolean {
-        return typeof attribute === 'string' ? true : attribute;
-    }
-
-    private static getValidPredicate<T>(leftPredicate: T, rightPredicate: T): T {
-        return leftPredicate === null ? rightPredicate : leftPredicate;
-    }
-
     public toggleColumnVisibility(key: string): void {
         this.schema.columns = this.schema.columns.map(
             (column: ColumnsSchema): ColumnsSchema =>
@@ -128,10 +120,10 @@ export class TemplateParserService {
         const { key, th, td, emptyHead, headTitle }: NgxColumnComponent = column;
         const thTemplate: TemplateCellCommon = th || new TemplateHeadThDirective(null);
         const tdTemplate: TemplateCellCommon = td || new TemplateBodyTdDirective(null);
-        const isEmptyHead: boolean = TemplateParserService.getValidHtmlBooleanAttribute(emptyHead);
+        const isEmptyHead: boolean = getValidHtmlBooleanAttribute(emptyHead);
         const thOptions: TableCellOptions = TemplateParserService.templateContext(key, thTemplate, this.columnOptions);
-        const stickyLeft: boolean = TemplateParserService.getValidHtmlBooleanAttribute(column.stickyLeft);
-        const stickyRight: boolean = TemplateParserService.getValidHtmlBooleanAttribute(column.stickyRight);
+        const stickyLeft: boolean = getValidHtmlBooleanAttribute(column.stickyLeft);
+        const stickyRight: boolean = getValidHtmlBooleanAttribute(column.stickyRight);
         const canBeAddDraggable: boolean = !(stickyLeft || stickyRight);
         const isModel: boolean = this.keyMap[key];
 
@@ -140,26 +132,29 @@ export class TemplateParserService {
             isModel,
             isVisible: true,
             excluded: !this.allowedKeyMap[key],
-            verticalLine: TemplateParserService.getValidHtmlBooleanAttribute(column.verticalLine),
+            verticalLine: getValidHtmlBooleanAttribute(column.verticalLine),
             td: TemplateParserService.templateContext(key, tdTemplate, this.columnOptions),
-            stickyLeft: TemplateParserService.getValidHtmlBooleanAttribute(column.stickyLeft),
-            stickyRight: TemplateParserService.getValidHtmlBooleanAttribute(column.stickyRight),
-            customColumn: TemplateParserService.getValidHtmlBooleanAttribute(column.customKey),
-            width: TemplateParserService.getValidPredicate(column.width, this.columnOptions.width),
-            cssClass: TemplateParserService.getValidPredicate(column.cssClass, this.columnOptions.cssClass) || [],
-            cssStyle: TemplateParserService.getValidPredicate(column.cssStyle, this.columnOptions.cssStyle) || [],
-            resizable: TemplateParserService.getValidPredicate(column.resizable, this.columnOptions.resizable),
-            stub: TemplateParserService.getValidPredicate(this.columnOptions.stub, column.stub),
-            filterable: TemplateParserService.getValidPredicate(column.filterable, this.columnOptions.filterable),
+            stickyLeft: getValidHtmlBooleanAttribute(column.stickyLeft),
+            stickyRight: getValidHtmlBooleanAttribute(column.stickyRight),
+            customColumn: getValidHtmlBooleanAttribute(column.customKey),
+            width: getValidPredicate(column.width, this.columnOptions.width),
+            cssClass: getValidPredicate(column.cssClass, this.columnOptions.cssClass) || [],
+            cssStyle: getValidPredicate(column.cssStyle, this.columnOptions.cssStyle) || [],
+            resizable: getValidHtmlBooleanAttribute(
+                getValidPredicate(column.isDraggable, this.columnOptions.isDraggable)
+            ),
+            stub: getValidPredicate(this.columnOptions.stub, column.stub),
+            filterable: getValidHtmlBooleanAttribute(
+                getValidPredicate(column.isFilterable, this.columnOptions.isFilterable)
+            ),
             sortable: isModel
-                ? TemplateParserService.getValidPredicate(column.sortable, this.columnOptions.sortable)
+                ? getValidHtmlBooleanAttribute(getValidPredicate(column.isSortable, this.columnOptions.isSortable))
                 : false,
             draggable: canBeAddDraggable
-                ? TemplateParserService.getValidPredicate(column.draggable, this.columnOptions.draggable)
+                ? getValidHtmlBooleanAttribute(getValidPredicate(column.isDraggable, this.columnOptions.isDraggable))
                 : false,
-            overflowTooltip: TemplateParserService.getValidPredicate(
-                this.columnOptions.overflowTooltip,
-                column.overflowTooltip
+            overflowTooltip: getValidHtmlBooleanAttribute(
+                getValidPredicate(this.columnOptions.overflowTooltip, column.overflowTooltip)
             ),
             th: {
                 ...thOptions,
diff --git a/projects/table-builder/src/lib/table/table-builder.api.ts b/projects/table-builder/src/lib/table/table-builder.api.ts
@@ -234,6 +234,10 @@ export abstract class TableBuilderApiImpl
         return this.skipSort !== false;
     }
 
+    public get isEnableAutoWidthColumn(): boolean {
+        return this.autoWidth !== false;
+    }
+
     public get isEnableSelection(): boolean {
         return this.enableSelection !== false;
     }
diff --git a/projects/table-builder/src/lib/table/table-builder.component.html b/projects/table-builder/src/lib/table/table-builder.component.html
@@ -64,41 +64,41 @@
                     : null
             "
         >
-            <ng-container *ngFor="let option of columnSchema; let index = index">
+            <ng-container *ngFor="let schema of columnSchema; let index = index">
                 <div
                     #column
                     cdkDrag
                     observerView
                     [cdkDragBoundary]="area"
                     class="table-grid__column"
-                    *ngIf="option.isVisible"
-                    [ngStyle]="option?.cssStyle"
-                    [ngClass]="option?.cssClass"
-                    [attr.column-id]="option.key"
+                    *ngIf="schema.isVisible"
+                    [ngStyle]="schema?.cssStyle"
+                    [ngClass]="schema?.cssClass"
+                    [attr.column-id]="schema.key"
+                    [style.width.px]="schema?.width"
                     [cdkDragDisabled]="!accessDragging"
+                    [style.max-width.px]="schema?.width"
+                    [style.min-width.px]="schema?.width"
                     (cdkDragMoved)="cdkDragMoved($event, root)"
-                    [style.max-width.px]="option?.width"
-                    [style.width.px]="option?.width"
-                    [style.min-width.px]="option?.width"
-                    [class.table-grid__column--with-footer-content]="footerTemplate"
-                    [class.table-grid__column--vertical-line]="verticalBorder || option?.verticalLine"
-                    [class.table-grid__column--custom-column]="option?.customColumn"
-                    [class.table-grid__column--selected-all]="selection.selectionModel.isAll"
-                    [class.table-grid__column--sticky-left]="option?.stickyLeft"
-                    [class.table-grid__column--sticky-right]="option?.stickyRight"
-                    [class.table-grid__column--default-width]="!option?.width"
-                    [class.table-grid__column--auto-width-reset-default-with]="autoWidth !== false"
+                    [class.table-grid__column--sticky-left]="schema?.stickyLeft"
+                    [class.table-grid__column--default-width]="!schema?.width"
                     [class.table-grid__column--is-visible]="column['visible']"
                     [class.table-grid__column--is-invisible]="!column['visible']"
-                    [class.table-grid__column--is-draggable]="option?.isModel && option?.draggable"
-                    [class.table-grid__column--is-dragging]="isDragging[option.key]"
                     [class.table-grid__column--filter-enable]="filterTemplate"
+                    [class.table-grid__column--sticky-right]="schema?.stickyRight"
+                    [class.table-grid__column--custom-column]="schema?.customColumn"
+                    [class.table-grid__column--is-dragging]="isDragging[schema.key]"
+                    [class.table-grid__column--with-footer-content]="footerTemplate"
+                    [class.table-grid__column--selected-all]="selection.selectionModel.isAll"
+                    [class.table-grid__column--vertical-line]="verticalBorder || schema?.verticalLine"
+                    [class.table-grid__column--auto-width-reset-default-with]="isEnableAutoWidthColumn"
+                    [class.table-grid__column--is-draggable]="schema?.isModel && schema?.draggable"
                     (observeVisible)="markVisibleColumn(column, $event)"
                 >
                     <div *ngIf="column['visible']" [@fadeAnimation]>
                         <table-thead
                             cdkDragHandle
-                            [column-schema]="option"
+                            [column-schema]="schema"
                             (mouseleave)="disableDragging()"
                             [column-width]="column.offsetWidth"
                             [header-top]="headerRef?.nativeElement.offsetHeight || 0"
@@ -110,7 +110,7 @@
                             [head-height]="headLineHeight"
                             (resize)="resizeColumn($event, column)"
                             (sortByKey)="sortByKey($event)"
-                            (mouseenter)="enableDragging(option.key)"
+                            (mouseenter)="enableDragging(schema.key)"
                         >
                         </table-thead>
 
@@ -120,7 +120,7 @@
                             [primary-key]="primaryKey"
                             [isRendered]="isRendered"
                             [recalculated]="recalculated"
-                            [column-schema]="option"
+                            [column-schema]="schema"
                             [head-height]="headLineHeight"
                             [viewport-info]="viewPortInfo"
                             [table-viewport]="tableViewport"
diff --git a/src/app/samples/sample-eleven/sample-eleven.component.html b/src/app/samples/sample-eleven/sample-eleven.component.html
@@ -169,9 +169,9 @@
                         enable-selection
                         (schemaChanges)="updatedSchema($event)"
                     >
-                        <ngx-options [resizable]="true" [draggable]="true" [sortable]="true"></ngx-options>
+                        <ngx-options is-draggable is-sortable></ngx-options>
 
-                        <ngx-column key="action" custom-key sticky [resizable]="false" [width]="50">
+                        <ngx-column key="action" custom-key sticky [is-draggable]="false" width="50">
                             <ng-template ngx-th></ng-template>
                             <ng-template ngx-td row let-row>
                                 {{ table2.selectionModel.get($any(row).id) ? 'x' : '-' }}
diff --git a/src/app/samples/sample-fifteen/sample-fifteen.component.html b/src/app/samples/sample-fifteen/sample-fifteen.component.html
@@ -4,5 +4,5 @@
 </mat-toolbar>
 
 <ngx-table-builder [source]="data" (schemaChanges)="updatedSchema($event)" [row-height]="40">
-    <ngx-options [draggable]="true"></ngx-options>
+    <ngx-options is-draggable></ngx-options>
 </ngx-table-builder>
diff --git a/src/app/samples/sample-five/sample-five.component.html b/src/app/samples/sample-five/sample-five.component.html
@@ -24,7 +24,7 @@
        Also you can customize your columns manually
        <ngx-column key="myKey" [resizable]="true">...</ngx-column>
     -->
-    <ngx-options [resizable]="true" [nowrap]="false"></ngx-options>
+    <ngx-options is-draggable [nowrap]="false"></ngx-options>
 
     <ngx-column key="id" width="80" important-template sticky></ngx-column>
 </ngx-table-builder>
diff --git a/src/app/samples/sample-five/sample-five.component.ts b/src/app/samples/sample-five/sample-five.component.ts
@@ -45,7 +45,7 @@ export class SampleFiveComponent implements OnInit, AfterViewInit {
        Also you can customize your columns manually
        <ngx-column key="myKey" [resizable]="true">...</ngx-column>
     -->
-    <ngx-options [resizable]="true"></ngx-options>
+    <ngx-options is-draggable></ngx-options>
 </ngx-table-builder>
 
                 `
diff --git a/src/app/samples/sample-fourteen/sample-fourteen.component.html b/src/app/samples/sample-fourteen/sample-fourteen.component.html
@@ -7,7 +7,7 @@
 </mat-toolbar>
 
 <ngx-table-builder #table [source]="data" [row-height]="40" class="filter-example" enable-filtering enable-selection>
-    <ngx-options [sortable]="true" [filterable]="true" [resizable]="true" [draggable]="true"></ngx-options>
+    <ngx-options is-sortable is-filterable is-draggable is-resizable></ngx-options>
     <ngx-source-null>Loading...</ngx-source-null>
     <ngx-empty>Not found</ngx-empty>
 
diff --git a/src/app/samples/sample-night/sample-night.component.html b/src/app/samples/sample-night/sample-night.component.html
@@ -40,7 +40,7 @@
                 </div>
             </ngx-header>
 
-            <ngx-options [draggable]="true"></ngx-options>
+            <ngx-options is-draggable></ngx-options>
             <ngx-column *ngFor="let key of table1.modelColumnKeys">
                 <ng-template ngx-th>{{ key }}</ng-template>
                 <ng-template ngx-td let-cell>{{ cell }}</ng-template>
@@ -75,7 +75,7 @@
                 </div>
             </ngx-header>
 
-            <ngx-options [draggable]="true"></ngx-options>
+            <ngx-options is-draggable></ngx-options>
             <ngx-column *ngFor="let key of table2.modelColumnKeys">
                 <ng-template ngx-th>{{ key }}</ng-template>
                 <ng-template ngx-td let-cell>{{ cell }}</ng-template>
diff --git a/src/app/samples/sample-six/sample-six.component.html b/src/app/samples/sample-six/sample-six.component.html
@@ -12,18 +12,11 @@
 
 <ngx-table-builder
     [source]="data"
-    [sort-types]="{ id: 'desc' }"
     [skip-sort]="skipSort"
+    [sort-types]="{ id: 'desc' }"
     (sortChanges)="sortChanges($event)"
 >
     <ngx-empty>No data</ngx-empty>
     <ngx-source-null>Loading</ngx-source-null>
-
-    <!--
-       <ngx-options /> - declaration common options for columns
-
-       Also you can customize your columns manually
-       <ngx-column key="myKey" [sortable]="true">...</ngx-column>
-    -->
-    <ngx-options [sortable]="true"></ngx-options>
+    <ngx-options is-sortable></ngx-options>
 </ngx-table-builder>
diff --git a/src/app/samples/sample-six/sample-six.component.ts b/src/app/samples/sample-six/sample-six.component.ts
@@ -43,18 +43,7 @@ export class SampleSixComponent implements OnInit, AfterViewInit {
             data: {
                 title: 'Overview sortable table',
                 description: '',
-                code: `
-<ngx-table-builder [source]="data">
-    <!--
-       <ngx-options /> - declaration common options for columns
-
-       Also you can customize your columns manually
-       <ngx-column key="myKey" [sortable]="'desc'">...</ngx-column>
-    -->
-    <ngx-options [sortable]="'asc'"></ngx-options>
-</ngx-table-builder>
-
-                `
+                code: `<ngx-table-builder [source]="data"  [sort-types]="{ myKey: 'asc' }"></ngx-table-builder>`
             },
             height: '350px',
             width: '700px'
diff --git a/src/app/samples/sample-sixteen/sample-sixteen.component.html b/src/app/samples/sample-sixteen/sample-sixteen.component.html
@@ -11,7 +11,7 @@
     [vertical-border]="false"
     [exclude-keys]="['reverseId']"
 >
-    <ngx-options [draggable]="true" [sortable]="true" [resizable]="true"></ngx-options>
+    <ngx-options is-draggable is-filterable is-sortable></ngx-options>
 
     <ngx-context-menu>
         <ngx-context-menu-item contextTitle divider>
@@ -40,12 +40,12 @@
 
     <ngx-column
         key="id"
+        sticky
         custom-key
         width="100"
         vertical-line
-        [resizable]="false"
         important-template
-        sticky
+        [is-draggable]="false"
     ></ngx-column>
 
     <ngx-column key="reverseId" custom-key width="150" vertical-line important-template></ngx-column>
diff --git a/src/app/samples/sample-twelve/sample-twelve.component.html b/src/app/samples/sample-twelve/sample-twelve.component.html
@@ -127,7 +127,7 @@ <h3>Header and footer are always sticky position</h3>
 <br />
 
 <ngx-table-builder [source]="data" [height]="500">
-    <ngx-options [draggable]="true"></ngx-options>
+    <ngx-options is-draggable is-sortable></ngx-options>
     <ngx-header content-cell align-center bold>Header 1</ngx-header>
     <ngx-footer content-cell align-center bold>Footer 1</ngx-footer>
 </ngx-table-builder>
diff --git a/yarn.lock b/yarn.lock
@@ -1387,9 +1387,9 @@
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
 "@types/node@*":
-  version "13.13.1"
-  resolved "https://registry.npmjs.org/@types/node/-/node-13.13.1.tgz#1ba94c5a177a1692518bfc7b41aec0aa1a14354e"
-  integrity sha512-uysqysLJ+As9jqI5yqjwP3QJrhOcUwBjHUlUxPxjbplwKoILvXVsmYWEhfmAQlrPfbRZmhJB007o4L9sKqtHqQ==
+  version "13.13.2"
+  resolved "https://registry.npmjs.org/@types/node/-/node-13.13.2.tgz#160d82623610db590a64e8ca81784e11117e5a54"
+  integrity sha512-LB2R1Oyhpg8gu4SON/mfforE525+Hi/M1ineICEDftqNVTyFg1aRIeGuTvXAoWHc4nbrFncWtJgMmoyRvuGh7A==
 
 "@types/node@12.7.5":
   version "12.7.5"

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@angular-ru/ng-table-builder",`
`3`		`- "version": "0.42.0",`
	`3`	`+ "version": "1.0.0",`
`4`	`4`	`"license": "MIT",`
`5`	`5`	`"bugs": {`
`6`	`6`	`"url": "https://github.com/Angular-RU/ng-table-builder/issues"`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export function getValidHtmlBooleanAttribute(attribute: boolean): boolean {`
	`2`	`+ return typeof attribute === 'string' ? true : !!attribute;`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export function getValidPredicate<T>(leftPredicate: T, rightPredicate: T): T {`
	`2`	`+ return leftPredicate === null ? rightPredicate : leftPredicate;`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -234,6 +234,10 @@ export abstract class TableBuilderApiImpl`
`234`	`234`	`return this.skipSort !== false;`
`235`	`235`	`}`
`236`	`236`
	`237`	`+ public get isEnableAutoWidthColumn(): boolean {`
	`238`	`+ return this.autoWidth !== false;`
	`239`	`+ }`
	`240`	`+`
`237`	`241`	`public get isEnableSelection(): boolean {`
`238`	`242`	`return this.enableSelection !== false;`
`239`	`243`	`}`