@rxap/schematic-angular 16.2.0-dev.9 → 16.3.0-dev.0

package/src/schematics/table/table-action/schema.json

@@ -3,45 +3,27 @@
   "$id": "table-action-schematic",
   "allOf": [
     {
+      "$ref": "#/definitions/angular"
+    },
+    {
+      "$ref": "#/definitions/tableAction"
+    },
+    {
+      "type": "object",
+      "properties": {
+        "tableName": {
+          "alias": "table",
+          "type": "string",
+          "description": "The name of the table action"
+        }
+      }
+    }
+  ],
+  "definitions": {
+    "angular": {
       "allOf": [
         {
-          "type": "object",
-          "properties": {
-            "project": {
-              "type": "string",
-              "description": "Project name where the files should be generated"
-            },
-            "feature": {
-              "type": "string",
-              "description": "Feature name where the files should be generated"
-            },
-            "overwrite": {
-              "anyOf": [
-                {
-                  "type": "boolean"
-                },
-                {
-                  "type": "array",
-                  "items": {
-                    "type": "string"
-                  }
-                }
-              ],
-              "description": "Overwrite existing files",
-              "default": false
-            },
-            "overwriteHtml": {
-              "type": "boolean",
-              "default": false
-            },
-            "replace": {
-              "type": "boolean",
-              "default": false
-            }
-          },
-          "required": [
-            "project"
-          ]
+          "$ref": "#/definitions/general"
         },
         {
           "type": "object",
@@ -64,15 +46,7 @@
               "type": "string"
             },
             "backend": {
-              "type": "string",
-              "description": "The backend that should be used to handel data",
-              "enum": [
-                "none",
-                "nestjs",
-                "open-api",
-                "local"
-              ],
-              "default": "none"
+              "$ref": "#/definitions/backend"
             },
             "directory": {
               "type": "string",
@@ -97,7 +71,87 @@
         }
       ]
     },
-    {
+    "backend": {
+      "type": "string",
+      "description": "The backend that should be used to handel data",
+      "enum": [
+        "none",
+        "nestjs",
+        "open-api",
+        "local",
+        "data-source"
+      ],
+      "default": "none"
+    },
+    "cssClass": {
+      "oneOf": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        {
+          "type": "object",
+          "properties": {
+            "name": {
+              "type": "string"
+            }
+          }
+        },
+        {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "name": {
+                "type": "string"
+              }
+            }
+          }
+        }
+      ]
+    },
+    "general": {
+      "type": "object",
+      "properties": {
+        "project": {
+          "type": "string",
+          "description": "Project name where the files should be generated"
+        },
+        "feature": {
+          "type": "string",
+          "description": "Feature name where the files should be generated"
+        },
+        "overwrite": {
+          "anyOf": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            }
+          ],
+          "description": "Overwrite existing files",
+          "default": false
+        },
+        "overwriteHtml": {
+          "type": "boolean",
+          "default": false
+        },
+        "replace": {
+          "type": "boolean",
+          "default": false
+        }
+      }
+    },
+    "tableAction": {
       "type": "object",
       "properties": {
         "type": {
@@ -144,8 +198,7 @@
           "description": "Value for the color input of the mat-button / mat-icon component"
         },
         "cssClass": {
-          "type": "string",
-          "description": "Additional CSS classes added to the button element"
+          "$ref": "#/definitions/cssClass"
         },
         "options": {
           "type": "object",
@@ -155,107 +208,6 @@
       "required": [
         "type"
       ]
-    },
-    {
-      "type": "object",
-      "properties": {
-        "tableName": {
-          "alias": "table",
-          "type": "string",
-          "description": "The name of the table action"
-        }
-      }
-    }
-  ],
-  "definitions": {
-    "type": {
-      "oneOf": [
-        {
-          "type": "string"
-        },
-        {
-          "type": "object",
-          "properties": {
-            "name": {
-              "type": "string"
-            },
-            "isTypeOnly": {
-              "type": "boolean"
-            },
-            "moduleSpecifier": {
-              "type": "string"
-            },
-            "namedImport": {
-              "type": "string"
-            },
-            "namespaceImport": {
-              "type": "string"
-            },
-            "defaultImport": {
-              "type": "string"
-            }
-          },
-          "required": [
-            "name"
-          ]
-        }
-      ]
-    },
-    "property": {
-      "oneOf": [
-        {
-          "type": "string"
-        },
-        {
-          "type": "object",
-          "properties": {
-            "name": {
-              "type": "string"
-            },
-            "type": {
-              "$ref": "#/definitions/type"
-            }
-          },
-          "required": [
-            "name"
-          ]
-        }
-      ],
-      "definitions": {
-        "type": {
-          "oneOf": [
-            {
-              "type": "string"
-            },
-            {
-              "type": "object",
-              "properties": {
-                "name": {
-                  "type": "string"
-                },
-                "isTypeOnly": {
-                  "type": "boolean"
-                },
-                "moduleSpecifier": {
-                  "type": "string"
-                },
-                "namedImport": {
-                  "type": "string"
-                },
-                "namespaceImport": {
-                  "type": "string"
-                },
-                "defaultImport": {
-                  "type": "string"
-                }
-              },
-              "required": [
-                "name"
-              ]
-            }
-          ]
-        }
-      }
     }
   }
 }

package/src/schematics/table/table-action/template.schema.json

@@ -3,10 +3,10 @@
   "$id": "table-action-schematic",
   "allOf": [
     {
-      "$ref": "../../angular.schema.json"
+      "$ref": "#/definitions/angular"
     },
     {
-      "$ref": "../../table-action.schema.json"
+      "$ref": "#/definitions/tableAction"
     },
     {
       "type": "object",
@@ -20,11 +20,11 @@
     }
   ],
   "definitions": {
-    "type": {
-      "$ref": "../../type.schema.json"
+    "angular": {
+      "$ref": "../../angular.schema.json"
     },
-    "property": {
-      "$ref": "../../property.schema.json"
+    "tableAction": {
+      "$ref": "../../table-action.schema.json"
     }
   }
 }

package/src/schematics/table/table-component/files/component/__componentName__.component.html.hbs

@@ -24,7 +24,9 @@
         matTooltip
         [disabled]="tableDataSourceDirective.hasError$ | async"
         [rxapTableHeaderButton]="tableDataSourceDirective"
-        {{#if headerButton.permission}}rxapHasEnablePermission="{{headerButton.permission}}"{{/if~}}
+        {{#if headerButton.permission}}
+        rxapHasEnablePermission="{{headerButton.permission}}"
+        {{/if}}
       >
         {{#if headerButton.icon}}
         <mat-icon>{{headerButton.icon}}</mat-icon>
@@ -48,10 +50,19 @@
         {{/if}}
         {{#each columnList}}
         <rxap-table-column-option name="{{this.name}}"
-          {{~#if this.active}} active{{/if~}}
-          {{~#if this.hidden}} hidden{{/if~}}
-          {{~#if this.inactive}} inactive{{/if~}}
-          {{~#if this.show}} show{{/if~}}>
+          {{#if this.active}}
+           active
+          {{/if}}
+          {{#if this.hidden}}
+           hidden
+          {{/if}}
+          {{#if this.inactive}}
+           inactive
+          {{/if}}
+          {{#if this.show}}
+           show
+          {{/if}}
+          >
           <ng-container i18n>{{this.title}}</ng-container>
         </rxap-table-column-option>
         {{/each}}
@@ -63,7 +74,7 @@
         {{#if hasShowArchivedSlide}}
         <mat-divider></mat-divider>
         <span mat-menu-item>
-          <rxap-table-show-archived-slide [paginator]="paginator"></rxap-table-show-archived-slide>
+          <rxap-table-show-archived-slide{{#if hasPaginator}} [paginator]="paginator"{{/if}}></rxap-table-show-archived-slide>
         </span>
         {{/if}}
       </rxap-table-column-menu>
@@ -71,31 +82,52 @@
 
       <mat-card-content>
         <rxap-data-source-error
-          [loading]="tableDataSourceDirective.loading$"
-          [error]="tableDataSourceDirective.dataSource?.error$"
           *ngIf="tableDataSourceDirective.hasError$ | async"
-          [refresh]="tableDataSourceDirective.retry">
+          [dataSourceLike]="tableDataSourceDirective">
         </rxap-data-source-error>
         <div class="table-scroll-container mt-4 overflow-x-auto overscroll-auto">
         <table
           [ngClass]="{ 'hidden': tableDataSourceDirective.hasError$ | async }"
-          [paginator]="paginator"
-          matSort
           mat-table
           #tableDataSourceDirective="rxapTableDataSource"
+          {{#ifeq backend "data-source"}}
+          [dataSource]="dataSource"
+          {{/ifeq}}
           rxapTableDataSource
           [parameters]="parameters"
           id="{{name}}"
-          {{#if hasColumnWithFilter}}rxap-filter-header-row{{/if~}}
+          {{#if cssClass}}
+          {{> cssClass cssClass=cssClass}}
+          {{/if}}
+          {{#if hasPaginator}}
+          [paginator]="paginator"
+          {{/if}}
+          {{#if hasColumnWithFilter}}
+          rxap-filter-header-row
+          {{/if}}
+          {{#if sortable.enabled}}
+          matSort
+          {{#if sortable.default}}
+          {{#if sortable.default.active}}
+          matSortActive="{{sortable.default.active}}"
+          {{/if}}
+          {{#if sortable.default.direction}}
+          matSortDirection="{{sortable.default.direction}}"
+          {{/if}}
+          {{/if}}
+          {{/if}}
         >
           <!-- region columns -->
           {{#if selectColumn}}
           <!-- region select column -->
-          <ng-container matColumnDef="select" sticky>
-            <th mat-header-cell rxap-checkbox-header-cell *matHeaderCellDef></th>
+          <ng-container matColumnDef="select" [sticky]="true">
+            {{#if withHeader}}
+            <th class="drop-shadow-2xl" mat-header-cell rxap-checkbox-header-cell *matHeaderCellDef></th>
+            {{/if}}
             <td
               mat-cell
               rxap-checkbox-cell
+              class="drop-shadow-2xl"
               [element]="element"
               *matCellDef="let element"
             ></td>
@@ -104,8 +136,9 @@
           {{/if}}
           {{#if actionList.length}}
           <!-- region actions column -->
-          <ng-container matColumnDef="actions" stickyEnd>
-            <th mat-header-cell *matHeaderCellDef>
+          <ng-container matColumnDef="actions" [stickyEnd]="true">
+            {{#if withHeader}}
+            <th class="drop-shadow-2xl" mat-header-cell *matHeaderCellDef>
             {{#if selectColumn}}
               <!-- region header actions -->
               <div class="flex flex-row" *rxapSelectedRows="let selected">
@@ -114,10 +147,16 @@
                 <button
                   rxapTableRowHeaderAction="{{this.type}}"
                   mat-icon-button
-                  {{#if this.color}}color="{{this.color}}"{{/if~}}
-                  {{#if this.cssClass}}class="{{this.cssClass}}"{{/if~}}
+                  {{#if this.color}}
+                  color="{{this.color}}"
+                  {{/if}}
+                  {{#if this.cssClass}}
+                  {{> cssClass cssClass=this.cssClass}}
+                  {{/if}}
                   *ngIf="selected | rxapRowActionCheck:'{{this.type}}'"
-                  {{#if this.permission}}rxapHasEnablePermission="{{this.permission}}"{{/if~}}
+                  {{#if this.permission}}
+                  rxapHasEnablePermission="{{this.permission}}"
+                  {{/if}}
                   matTooltip
                 >
                   {{#if this.icon}}
@@ -138,18 +177,25 @@
               <!-- endregion -->
             {{/if}}
             </th>
+            {{/if}}
 
-            <td mat-cell *matCellDef="let element">
+            <td class="drop-shadow-2xl" mat-cell *matCellDef="let element">
               <div class="flex flex-row">
                 {{#each actionList}}
                 <button
                   rxapTableRowAction="{{this.type}}"
                   [element]="element"
-                  {{#if this.color}}color="{{this.color}}"{{/if~}}
-                  {{#if this.cssClass}}class="{{this.cssClass}}"{{/if~}}
+                  {{#if this.color}}
+                  color="{{this.color}}"
+                  {{/if}}
+                  {{#if this.cssClass}}
+                  {{> cssClass cssClass=this.cssClass}}
+                  {{/if}}
                   mat-icon-button
                   *ngIf="element | rxapRowActionCheck:'{{this.type}}'"
-                  {{#if this.permission}}rxapHasEnablePermission="{{this.permission}}"{{/if~}}
+                  {{#if this.permission}}
+                  rxapHasEnablePermission="{{this.permission}}"
+                  {{/if}}
                   matTooltip
                 >
                   {{#if this.icon}}
@@ -172,30 +218,35 @@
 
           {{/if}}
           {{#each columnList}}
-          {{ indent (compile this.handlebars column=this) 10 }}
+          {{ indent (compile this.handlebars column=this table=../. prefix=../prefix) 10 }}
           {{/each}}
 
           <!-- endregion -->
           {{#if hasColumnWithFilter}}
           <!-- region filter columns -->
           {{#if selectColumn}}
-          <ng-container matColumnDef="filter_select" sticky>
-            <th mat-header-cell *matHeaderCellDef></th>
+          <ng-container matColumnDef="filter_select" [sticky]="true">
+            <th mat-header-cell *matHeaderCellDef class="drop-shadow-2xl"></th>
           </ng-container>
           {{/if}}
           {{#if actionList.length}}
-          <ng-container matColumnDef="filter_actions" stickyEnd>
-            <th mat-header-cell *matHeaderCellDef></th>
+          <ng-container matColumnDef="filter_actions" [stickyEnd]="true">
+            <th mat-header-cell *matHeaderCellDef class="drop-shadow-2xl"></th>
           </ng-container>
           {{/if}}
           {{#each columnList}}
-          <ng-container matColumnDef="filter_{{this.name}}">
-            <th mat-header-cell *matHeaderCellDef>
+          {{#> matColumnDef column=this columnName=this.filterName}}
+            <th mat-header-cell
+              *matHeaderCellDef
+              {{#if column.filterCssClass}}
+              {{> cssClass cssClass=column.filterCssClass}}
+              {{/if}}
+            >
               {{#if this.hasFilter}}
-              {{ indent (compile this.filterControl.handlebars column=this control=this.filterControl parentControlContainer=true) 14 }}
+              {{ indent (compile this.filterControl.handlebars column=this table=../. control=this.filterControl parentControlContainer=true) 14 }}
               {{/if}}
             </th>
-          </ng-container>
+          {{/matColumnDef}}
           {{/each}}
 
           <!-- endregion -->
@@ -206,10 +257,12 @@
           ></tr>
           {{/if}}
 
+          {{#if withHeader}}
           <tr
             mat-header-row
             *matHeaderRowDef="rxapTableColumns.displayColumns"
           ></tr>
+          {{/if}}
 
           <tr
             [@rowsAnimation]=""
@@ -226,7 +279,7 @@
         </table>
         </div>
       </mat-card-content>
-
+      {{#if hasPaginator}}
       <mat-card-footer>
         <mat-paginator
           [ngClass]="{ 'hidden': tableDataSourceDirective.hasError$ | async }"
@@ -236,6 +289,7 @@
           #paginator="matPaginator"
         ></mat-paginator>
       </mat-card-footer>
+      {{/if}}
     </mat-card>
   </div>
 </div>

package/src/schematics/table/table-component/index.d.ts

@@ -1,9 +1,6 @@
 import { Rule } from '@angular-devkit/schematics';
-import { FormDefinitionControl, GetPageOperationProperty } from '@rxap/schematics-ts-morph';
-import { NormalizedDataProperty } from '@rxap/ts-morph';
 import { Normalized } from '@rxap/utilities';
 import { NormalizedAngularOptions } from '../../../lib/angular-options';
-import { NormalizedTableColumn } from '../../../lib/table-column';
 import { NormalizedTableOptions } from '../../../lib/table-options';
 import { TableComponentOptions } from './schema';
 export interface NormalizedTableComponentOptions extends Readonly<Normalized<Omit<TableComponentOptions, keyof NormalizedTableOptions>> & NormalizedTableOptions & NormalizedAngularOptions> {
@@ -11,6 +8,4 @@ export interface NormalizedTableComponentOptions extends Readonly<Normalized<Omi
     readonly controllerName: string;
 }
 export declare function NormalizeTableComponentOptions(options: Readonly<TableComponentOptions>): NormalizedTableComponentOptions;
-export declare function TableColumnListAndPropertyListToGetPageOperationPropertyList(columnList: ReadonlyArray<Pick<NormalizedTableColumn, 'name' | 'type' | 'propertyPath'>>, propertyList?: ReadonlyArray<NormalizedDataProperty>): GetPageOperationProperty[];
-export declare function TableColumnToFormControl(column: NormalizedTableColumn): FormDefinitionControl;
 export default function (options: TableComponentOptions): () => Rule;

package/src/schematics/table/table-component/index.js

@@ -1,15 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableColumnToFormControl = exports.TableColumnListAndPropertyListToGetPageOperationPropertyList = exports.NormalizeTableComponentOptions = void 0;
+exports.NormalizeTableComponentOptions = void 0;
 const schematics_1 = require("@angular-devkit/schematics");
 const schematics_ts_morph_1 = require("@rxap/schematics-ts-morph");
 const schematics_utilities_1 = require("@rxap/schematics-utilities");
 const ts_morph_1 = require("@rxap/ts-morph");
 const utilities_1 = require("@rxap/utilities");
+const workspace_utilities_1 = require("@rxap/workspace-utilities");
 const ts_morph_2 = require("ts-morph");
 const angular_options_1 = require("../../../lib/angular-options");
 const backend_types_1 = require("../../../lib/backend-types");
 const coerce_minimum_table_component_1 = require("../../../lib/coerce-minimum-table-component");
+const load_handlebars_template_1 = require("../../../lib/load-handlebars-template");
 const minimum_table_component_options_1 = require("../../../lib/minimum-table-component-options");
 const table_options_1 = require("../../../lib/table-options");
 const table_filter_column_rule_1 = require("../../../lib/table/table-filter-column-rule");
@@ -27,35 +29,6 @@ function NormalizeTableComponentOptions(options) {
     return Object.freeze(Object.assign(Object.assign({}, normalizedMinimumTableComponentOptions), normalizedTableOptions));
 }
 exports.NormalizeTableComponentOptions = NormalizeTableComponentOptions;
-function TableColumnListAndPropertyListToGetPageOperationPropertyList(columnList, propertyList = []) {
-    const list = [];
-    for (const column of columnList) {
-        list.push({
-            name: column.name,
-            type: column.type,
-            source: column.propertyPath,
-        });
-    }
-    for (const property of propertyList) {
-        if (!list.find((p) => p.source === property.name) && !list.find(p => p.name === property.name)) {
-            list.push({
-                name: property.name,
-                type: property.type,
-                source: property.name,
-            });
-        }
-    }
-    return list;
-}
-exports.TableColumnListAndPropertyListToGetPageOperationPropertyList = TableColumnListAndPropertyListToGetPageOperationPropertyList;
-function TableColumnToFormControl(column) {
-    var _a, _b;
-    return {
-        name: column.name,
-        type: (_b = (_a = column.type) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : undefined,
-    };
-}
-exports.TableColumnToFormControl = TableColumnToFormControl;
 function printOptions(options) {
     (0, angular_options_1.PrintAngularOptions)('table-component', options);
     if (options.columnList.length) {
@@ -87,6 +60,14 @@ function componentRule(normalizedOptions) {
             template: {
                 options: templateOptions,
             },
+            handlebars: {
+                partials: {
+                    matFormField: (0, load_handlebars_template_1.LoadMatFormFieldHandlebarsTemplate)(),
+                    pipe: (0, load_handlebars_template_1.LoadPipeHandlebarsTemplate)(),
+                    cssClass: (0, load_handlebars_template_1.LoadCssClassHandlebarsTemplate)(),
+                    matColumnDef: (0, load_handlebars_template_1.LoadMatColumnDefHandlebarsTemplate)(),
+                }
+            },
             tsMorphTransform: (project, [componentSourceFile]) => {
                 if (tableMethod) {
                     (0, schematics_ts_morph_1.AddComponentProvider)(componentSourceFile, {
@@ -147,8 +128,11 @@ function openApiBackendRule(normalizedOptions) {
     ]);
 }
 function nestjsBackendRule(normalizedOptions) {
-    const { project, feature, shared, columnList, propertyList, context, nestModule, componentName, directory, overwrite, scope, controllerName, } = normalizedOptions;
-    const operationId = (0, schematics_ts_morph_1.buildOperationId)(normalizedOptions, 'get-page', controllerName);
+    const { project, feature, shared, propertyList, context, nestModule, componentName, directory, overwrite, scope, controllerName, upstream, identifier, rowId, } = normalizedOptions;
+    const operationId = (0, schematics_ts_morph_1.buildOperationId)(normalizedOptions, 'get-page', (0, workspace_utilities_1.BuildNestControllerName)({
+        controllerName,
+        nestModule
+    }));
     return (0, schematics_1.chain)([
         () => console.log(`Coerce the getPage operation for the table`),
         (0, schematics_ts_morph_1.CoerceGetPageOperation)({
@@ -157,8 +141,12 @@ function nestjsBackendRule(normalizedOptions) {
             project,
             feature,
             shared,
-            propertyList: TableColumnListAndPropertyListToGetPageOperationPropertyList(columnList, propertyList),
+            propertyList,
             context,
+            overwrite,
+            upstream,
+            idProperty: identifier === null || identifier === void 0 ? void 0 : identifier.property,
+            rowId,
         }),
         () => console.log('Add the open api methods to the table component providers'),
         (0, schematics_ts_morph_1.CoerceComponentRule)({