@rxap/schematic-angular 16.2.0-dev.2 → 16.2.0-dev.20

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

@@ -0,0 +1,20 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "table-component-schematic",
+  "allOf": [
+    {
+      "$ref": "#/definitions/angular"
+    },
+    {
+      "$ref": "#/definitions/table"
+    }
+  ],
+  "definitions": {
+    "angular": {
+      "$ref": "../../angular.schema.json"
+    },
+    "table": {
+      "$ref": "../../table.schema.json"
+    }
+  }
+}

package/src/schematics/table/table-header-button/schema.json

@@ -1,80 +1,162 @@
 {
   "$schema": "http://json-schema.org/schema",
-  "$id": "table-action",
-  "type": "object",
-  "properties": {
-    "tableName": {
-      "alias": "table",
-      "type": "string",
-      "description": "The name of the table action"
+  "$id": "table-header-button-schematic",
+  "allOf": [
+    {
+      "$ref": "#/definitions/angular"
     },
-    "project": {
-      "type": "string",
-      "description": "The target project where the table action should be added."
+    {
+      "$ref": "#/definitions/headerButton"
     },
-    "feature": {
-      "type": "string",
-      "description": "The feature name where the table action should be added.",
-      "x-prompt": "To which feature should the table action be added?"
+    {
+      "type": "object",
+      "properties": {
+        "tableName": {
+          "alias": "table",
+          "type": "string",
+          "description": "The name of the table action"
+        }
+      }
+    }
+  ],
+  "definitions": {
+    "angular": {
+      "allOf": [
+        {
+          "$ref": "#/definitions/general"
+        },
+        {
+          "type": "object",
+          "properties": {
+            "componentName": {
+              "type": "string"
+            },
+            "name": {
+              "type": "string"
+            },
+            "context": {
+              "type": "string",
+              "description": "The context use to generate proper names for class, files, etc"
+            },
+            "nestModule": {
+              "type": "string",
+              "description": "The module name for the table nest operations"
+            },
+            "controllerName": {
+              "type": "string"
+            },
+            "backend": {
+              "$ref": "#/definitions/backend"
+            },
+            "directory": {
+              "type": "string",
+              "description": "A directory name or absolute path where the files should be generated. Relative to the project and feature base path if a feature is defined"
+            },
+            "shared": {
+              "type": "boolean",
+              "description": "Whether the generated code is used across the project",
+              "default": false
+            },
+            "scope": {
+              "type": "string"
+            },
+            "prefix": {
+              "type": "string"
+            },
+            "openApi": {
+              "type": "object",
+              "additionalProperties": true
+            }
+          }
+        }
+      ]
+    },
+    "headerButton": {
+      "type": "object",
+      "properties": {
+        "permission": {
+          "type": "string"
+        },
+        "icon": {
+          "type": "string"
+        },
+        "svgIcon": {
+          "type": "string"
+        },
+        "refresh": {
+          "type": "boolean",
+          "description": "Whether the table action should refresh the table after execution",
+          "default": false
+        },
+        "confirm": {
+          "type": "boolean",
+          "description": "Whether the table action should confirm before execution",
+          "default": false
+        },
+        "tooltip": {
+          "type": "string",
+          "description": "The tooltip for the table action"
+        },
+        "errorMessage": {
+          "type": "string",
+          "description": "The error message for the table action"
+        },
+        "successMessage": {
+          "type": "string",
+          "description": "The success message for the table action"
+        },
+        "options": {
+          "type": "object",
+          "additionalProperties": true
+        }
+      }
     },
     "backend": {
       "type": "string",
       "description": "The backend that should be used to handel data",
       "enum": [
         "none",
-        "local",
         "nestjs",
-        "open-api"
+        "open-api",
+        "local"
       ],
       "default": "none"
     },
-    "shared": {
-      "type": "boolean",
-      "description": "Whether the table action is shared across applications",
-      "default": false
-    },
-    "refresh": {
-      "type": "boolean",
-      "description": "Whether the table action should refresh the table after execution",
-      "default": false
-    },
-    "confirm": {
-      "type": "boolean",
-      "description": "Whether the table action should confirm before execution",
-      "default": false
-    },
-    "tooltip": {
-      "type": "string",
-      "description": "The tooltip for the table action"
-    },
-    "errorMessage": {
-      "type": "string",
-      "description": "The error message for the table action"
-    },
-    "successMessage": {
-      "type": "string",
-      "description": "The success message for the table action"
-    },
-    "directory": {
-      "type": "string",
-      "description": "A directory name or absolute path for the table action. relative to the feature base path"
-    },
-    "permission": {
-      "type": "string"
-    },
-    "icon": {
-      "type": "string"
-    },
-    "svgIcon": {
-      "type": "string"
-    },
-    "options": {
+    "general": {
       "type": "object",
-      "additionalProperties": true
+      "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",
-    "feature"
-  ]
-}
+  }
+}

package/src/schematics/table/table-header-button/template.schema.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "table-header-button-schematic",
+  "allOf": [
+    {
+      "$ref": "#/definitions/angular"
+    },
+    {
+      "$ref": "#/definitions/headerButton"
+    },
+    {
+      "type": "object",
+      "properties": {
+        "tableName": {
+          "alias": "table",
+          "type": "string",
+          "description": "The name of the table action"
+        }
+      }
+    }
+  ],
+  "definitions": {
+    "angular": {
+      "$ref": "../../angular.schema.json"
+    },
+    "headerButton": {
+      "$ref": "../../header-button.schema.json"
+    }
+  }
+}

package/src/schematics/table/templates/boolean-table-column.hbs

@@ -0,0 +1,10 @@
+<ng-container matColumnDef="{{column.name}}">
+  <th mat-header-cell *matHeaderCellDef mat-sort-header>
+    <ng-container i18n>{{column.title}}</ng-container>
+  </th>
+  <td *matCellDef="let element"
+    mat-cell
+    {{#if column.cssClass}}class="{{column.cssClass}}"{{/if~}}
+    [rxap-boolean-cell]="element?.{{column.propertyPath}}{{> pipe pipeList=column.pipeList}}">
+  </td>
+</ng-container>

package/src/schematics/table/templates/component-table-column.hbs

@@ -0,0 +1,12 @@
+<ng-container matColumnDef="{{column.name}}">
+  <th mat-header-cell *matHeaderCellDef mat-sort-header>
+    <ng-container i18n>{{column.title}}</ng-container>
+  </th>
+  <td *matCellDef="let element"
+    mat-cell
+    {{#if column.cssClass}}class="{{column.cssClass}}"{{/if~}}
+    {{prefix}}-{{column.name}}-cell
+    [element]="element"
+    [value]="element?.{{column.propertyPath}}{{> pipe pipeList=column.pipeList}}">
+  </td>
+</ng-container>

package/src/schematics/table/templates/copy-to-clipboard-table-column.hbs

@@ -0,0 +1,10 @@
+<ng-container matColumnDef="{{column.name}}">
+  <th mat-header-cell *matHeaderCellDef mat-sort-header>
+    <ng-container i18n>{{column.title}}</ng-container>
+  </th>
+  <td *matCellDef="let element"
+    mat-cell
+    {{#if column.cssClass}}class="{{column.cssClass}}"{{/if~}}
+    [rxap-copy-to-clipboard-cell]="element?.{{column.propertyPath}}{{> pipe pipeList=column.pipeList}}">
+  </td>
+</ng-container>

package/src/schematics/table/templates/date-table-column.hbs

@@ -0,0 +1,11 @@
+<ng-container matColumnDef="{{column.name}}">
+  <th mat-header-cell *matHeaderCellDef mat-sort-header>
+    <ng-container i18n>{{column.title}}</ng-container>
+  </th>
+  <td *matCellDef="let element"
+    mat-cell
+    {{#if column.cssClass}}class="{{column.cssClass}}"{{/if~}}
+    format="{{column.format}}"
+    [rxap-date-cell]="element?.{{column.propertyPath}}{{> pipe pipeList=column.pipeList}}">
+  </td>
+</ng-container>

package/src/schematics/table/templates/default-table-column.hbs

@@ -0,0 +1,8 @@
+<ng-container matColumnDef="{{column.name}}">
+  <th mat-header-cell *matHeaderCellDef mat-sort-header>
+    <ng-container i18n>{{column.title}}</ng-container>
+  </th>
+  <td *matCellDef="let element" mat-cell{{#if column.cssClass}} class="{{column.cssClass}}"{{/if}}>
+  \{{ element?.{{column.propertyPath}}{{> pipe pipeList=column.pipeList}} }}
+  </td>
+</ng-container>

package/src/schematics/table/templates/icon-table-column.hbs

@@ -0,0 +1,10 @@
+<ng-container matColumnDef="{{column.name}}">
+  <th mat-header-cell *matHeaderCellDef mat-sort-header>
+    <ng-container i18n>{{column.title}}</ng-container>
+  </th>
+  <td *matCellDef="let element"
+    mat-cell
+    {{#if column.cssClass}}class="{{column.cssClass}}"{{/if~}}
+    [rxap-icon-cell]="element?.{{column.propertyPath}}{{> pipe pipeList=column.pipeList}}">
+  </td>
+</ng-container>

package/src/schematics/table/templates/link-table-column.hbs

@@ -0,0 +1,10 @@
+<ng-container matColumnDef="{{column.name}}">
+  <th mat-header-cell *matHeaderCellDef mat-sort-header>
+    <ng-container i18n>{{column.title}}</ng-container>
+  </th>
+  <td *matCellDef="let element"
+    mat-cell
+    {{#if column.cssClass}}class="{{column.cssClass}}"{{/if}}
+    [rxap-link-cell]="element?.{{column.propertyPath}}{{> pipe pipeList=column.pipeList}}">
+  </td>
+</ng-container>

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

@@ -0,0 +1,255 @@
+<div class="flex flex-col gap-y-4 m-4">
+  {{#if hasNavigationBackHeader}}
+  <rxap-navigate-back-button>
+    <h1 i18n>{{title}}</h1>
+  </rxap-navigate-back-button>
+  <mat-divider></mat-divider>
+  {{/if}}
+
+  <div class="table-card-container flex flex-col">
+    <mat-card>
+      <mat-progress-bar
+        rxapCardProgressBar
+        [loading$]="tableDataSourceDirective.loading$"
+      ></mat-progress-bar>
+      <mat-card-header class="min-h-full h-12{{#unless headerButton}}{{#if hasWithoutTitle}} justify-end {{/if}}{{/unless}}">
+      {{#unless hasWithoutTitle}}
+      <mat-card-title i18n>{{title}}</mat-card-title>
+      {{/unless}}
+      {{#if headerButton}}
+      <button
+        mat-card-avatar
+        mat-mini-fab
+        color="primary"
+        matTooltip
+        [disabled]="tableDataSourceDirective.hasError$ | async"
+        [rxapTableHeaderButton]="tableDataSourceDirective"
+        {{#if headerButton.permission}}rxapHasEnablePermission="{{headerButton.permission}}"{{/if~}}
+      >
+        {{#if headerButton.icon}}
+        <mat-icon>{{headerButton.icon}}</mat-icon>
+        {{else if headerButton.svgIcon}}
+        <mat-icon svgIcon="{{headerButton.svgIcon}}"></mat-icon>
+        {{else}}
+        <mat-icon>add</mat-icon>
+        {{/if}}
+      </button>
+      <mat-card-subtitle i18n>{{headerButton.label}}</mat-card-subtitle>
+      {{/if}}
+      <rxap-table-column-menu
+        matCard
+        #rxapTableColumns="rxapTableColumns"
+        {{#unless headerButton}}{{#if hasWithoutTitle}}inline{{/if}}{{/unless~}}
+      >
+        {{#if selectColumn}}
+        <rxap-table-column-option hidden name="select">
+          <ng-container i18n>Select</ng-container>
+        </rxap-table-column-option>
+        {{/if}}
+        <rxap-table-column-option name="tree" hidden></rxap-table-column-option>
+        <rxap-table-column-option name="__spinner__" hidden></rxap-table-column-option>
+        {{#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~}}>
+          <ng-container i18n>{{this.title}}</ng-container>
+        </rxap-table-column-option>
+        {{/each}}
+        {{#if actionList.length}}
+        <rxap-table-column-option hidden name="actions">
+          <ng-container i18n>Actions</ng-container>
+        </rxap-table-column-option>
+        {{/if}}
+        {{#if hasShowArchivedSlide}}
+        <mat-divider></mat-divider>
+        <span mat-menu-item>
+          <rxap-table-show-archived-slide></rxap-table-show-archived-slide>
+        </span>
+        {{/if}}
+      </rxap-table-column-menu>
+       </mat-card-header>
+
+      <mat-card-content>
+        <rxap-data-source-error
+          [loading]="tableDataSourceDirective.loading$"
+          [error]="tableDataSourceDirective.dataSource?.error$"
+          *ngIf="tableDataSourceDirective.hasError$ | async"
+          [refresh]="tableDataSourceDirective.retry">
+        </rxap-data-source-error>
+        <div class="table-scroll-container mt-4 overflow-x-auto overscroll-auto">
+        <table
+          [ngClass]="{ 'hidden': tableDataSourceDirective.hasError$ | async }"
+          matSort
+          mat-table
+          #tableDataSourceDirective="rxapTableDataSource"
+          rxapTableDataSource
+          [parameters]="parameters"
+          id="{{name}}"
+          {{#if hasColumnWithFilter}}rxap-filter-header-row{{/if~}}
+        >
+          <!-- region columns -->
+          <ng-container matColumnDef="tree" sticky>
+            <th *matHeaderCellDef mat-header-cell></th>
+            <td
+              *matCellDef="let element"
+              [rxap-tree-control-cell]="element"
+              mat-cell
+            ></td>
+          </ng-container>
+          <ng-container matColumnDef="__spinner__">
+            <th *matHeaderCellDef mat-header-cell></th>
+            <td *matCellDef="let element" mat-cell>
+              <mat-spinner
+                *ngIf="element.__metadata__?.loading$ | async"
+                diameter="15"
+              ></mat-spinner>
+            </td>
+          </ng-container>
+          {{#if selectColumn}}
+          <!-- region select column -->
+          <ng-container matColumnDef="select" sticky>
+            <th mat-header-cell rxap-checkbox-header-cell *matHeaderCellDef></th>
+            <td
+              mat-cell
+              rxap-checkbox-cell
+              [element]="element"
+              *matCellDef="let element"
+            ></td>
+          </ng-container>
+          <!-- endregion -->
+          {{/if}}
+          {{#if actionList.length}}
+          <!-- region actions column -->
+          <ng-container matColumnDef="actions" stickyEnd>
+            <th mat-header-cell *matHeaderCellDef>
+            {{#if selectColumn}}
+              <!-- region header actions -->
+              <div class="flex flex-row" *rxapSelectedRows="let selected">
+              {{#each actionList}}
+              {{#if this.inHeader}}
+                <button
+                  rxapTableRowHeaderAction="{{this.type}}"
+                  mat-icon-button
+                  {{#if this.color}}color="{{this.color}}"{{/if~}}
+                  {{#if this.cssClass}}class="{{this.cssClass}}"{{/if~}}
+                  *ngIf="selected | rxapRowActionCheck:'{{this.type}}'"
+                  {{#if this.permission}}rxapHasEnablePermission="{{this.permission}}"{{/if~}}
+                  matTooltip
+                >
+                  {{#if this.icon}}
+                  <mat-icon>{{this.icon}}</mat-icon>
+                  {{else if this.svgIcon}}
+                  <mat-icon svgIcon="{{this.svgIcon}}"></mat-icon>
+                  {{else}}
+                  <mat-icon>{{this.type}}</mat-icon>
+                  {{/if}}
+                  <mat-progress-bar
+                    *rxapTableRowActionExecuting
+                    mode="indeterminate"
+                  ></mat-progress-bar>
+                </button>
+              {{/if}}
+              {{/each}}
+              </div>
+              <!-- endregion -->
+            {{/if}}
+            </th>
+
+            <td 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~}}
+                  mat-icon-button
+                  *ngIf="element | rxapRowActionCheck:'{{this.type}}'"
+                  {{#if this.permission}}rxapHasEnablePermission="{{this.permission}}"{{/if~}}
+                  matTooltip
+                >
+                  {{#if this.icon}}
+                  <mat-icon>{{this.icon}}</mat-icon>
+                  {{else if this.svgIcon}}
+                  <mat-icon svgIcon="{{this.svgIcon}}"></mat-icon>
+                  {{else}}
+                  <mat-icon>{{this.type}}</mat-icon>
+                  {{/if}}
+                  <mat-progress-bar
+                    *rxapTableRowActionExecuting
+                    mode="indeterminate"
+                  ></mat-progress-bar>
+                </button>
+                {{/each}}
+              </div>
+            </td>
+          </ng-container>
+          <!-- endregion -->
+
+          {{/if}}
+          {{#each columnList}}
+          {{ indent (compile this.handlebars column=this) 10 }}
+          {{/each}}
+
+          <!-- endregion -->
+          {{#if hasColumnWithFilter}}
+          <!-- region filter columns -->
+          <ng-container matColumnDef="filter_tree" stickyEnd>
+            <th mat-header-cell *matHeaderCellDef></th>
+          </ng-container>
+          <ng-container matColumnDef="filter___spinner__" stickyEnd>
+            <th mat-header-cell *matHeaderCellDef></th>
+          </ng-container>
+          {{#if selectColumn}}
+          <ng-container matColumnDef="filter_select" sticky>
+            <th mat-header-cell *matHeaderCellDef></th>
+          </ng-container>
+          {{/if}}
+          {{#if actionList.length}}
+          <ng-container matColumnDef="filter_actions" stickyEnd>
+            <th mat-header-cell *matHeaderCellDef></th>
+          </ng-container>
+          {{/if}}
+          {{#each columnList}}
+          <ng-container matColumnDef="filter_{{this.name}}">
+            <th mat-header-cell *matHeaderCellDef>
+              {{#if this.hasFilter}}
+              {{ indent (compile this.filterControl.handlebars column=this control=this.filterControl parentControlContainer=true) 14 }}
+              {{/if}}
+            </th>
+          </ng-container>
+          {{/each}}
+
+          <!-- endregion -->
+          <tr
+            class="rxap-filter-header"
+            mat-header-row
+            *matHeaderRowDef="rxapTableColumns.displayColumns | toFilterColumnNames"
+          ></tr>
+          {{/if}}
+
+          <tr
+            mat-header-row
+            *matHeaderRowDef="rxapTableColumns.displayColumns"
+          ></tr>
+
+          <tr
+            [@rowsAnimation]=""
+            mat-row
+            [ngClass]="{ 'rxap-row-odd !bg-neutral-200 dark:!bg-neutral-600': odd, 'rxap-row-even': even }"
+            class="hover:!bg-neutral-400 dark:hover:!bg-neutral-800"
+            *matRowDef="
+              let element;
+              columns: rxapTableColumns.displayColumns;
+              let odd = odd;
+              let even = even
+            "
+          ></tr>
+        </table>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</div>

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

@@ -1,3 +1,4 @@
+import { BuildNestControllerNameOptions } from '@rxap/schematics-ts-morph';
 import { Normalized } from '@rxap/utilities';
 import { NormalizedAngularOptions } from '../../../lib/angular-options';
 import { NormalizedTreeTableOptions } from '../../../lib/tree-table-options';
@@ -7,4 +8,6 @@ export interface NormalizedTreeTableComponentOptions extends Readonly<Normalized
     controllerName: string;
 }
 export declare function NormalizedTreeTableComponentOptions(options: Readonly<TreeTableComponentOptions>): Readonly<NormalizedTreeTableComponentOptions>;
+export declare function BuildTreeTableGetRootOperationId(normalizedOptions: NormalizedAngularOptions & BuildNestControllerNameOptions): string;
+export declare function BuildTreeTableGeChildrenOperationId(normalizedOptions: NormalizedAngularOptions & BuildNestControllerNameOptions): string;
 export default function (options: TreeTableComponentOptions): () => import("@angular-devkit/schematics").Rule;