@rxap/schematic-angular 16.0.1-dev.0

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

@@ -0,0 +1,311 @@
+<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>
+  <% } %>
+
+  <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">
+      <% if (!hasNavigationBackHeader && !hasWithoutTitle) { %>
+      <mat-card-title i18n><%= title %></mat-card-title>
+      <% } %>
+      <% if (headerButton) { %>
+      <button
+        mat-card-avatar
+        mat-mini-fab
+        color="primary"
+        matTooltip="<%= headerButton.label %>"
+        i18n-matTooltip
+        [disabled]="tableDataSourceDirective.hasError$ | async"
+        <% if (headerButton.role === 'form') { %>[rxapTableCreate]="tableDataSourceDirective"<% } %>
+        <% if (headerButton.permission) { %>rxapHasEnablePermission="<%= headerButton.permission %>"<% } %>
+      >
+        <% 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><% } %>
+      </button>
+      <mat-card-subtitle i18n><%= headerButton.label %></mat-card-subtitle>
+      <% } %>
+      <rxap-table-column-menu matCard #rxapTableColumns="rxapTableColumns" [ngClass]="{ 'hidden': tableDataSourceDirective.hasError$ | async }">
+        <% if (selectColumn) { %>
+        <rxap-table-column-option hidden name="select">
+          <ng-container i18n>Select</ng-container>
+        </rxap-table-column-option>
+        <% } %>
+        <% for (const column of columnList) { %>
+        <rxap-table-column-option
+          name="<%= column.name %>"<% if (column.active) { %><%= ' active' %><% } %><% if (column.hidden) { %><%= ' hidden' %><% } %><% if (column.inactive) { %><%= ' inactive' %><% } %><% if (column.show) { %><%= ' show' %><% } %>>
+          <ng-container i18n><%= column.title %></ng-container>
+        </rxap-table-column-option>
+        <% } %>
+        <% if (actionList.length) { %>
+        <rxap-table-column-option hidden name="actions">
+          <ng-container i18n>Actions</ng-container>
+        </rxap-table-column-option>
+        <% } %>
+        <mat-divider></mat-divider>
+        <span mat-menu-item>
+          <rxap-table-show-archived-slide
+            [paginator]="paginator"
+          ></rxap-table-show-archived-slide>
+        </span>
+      </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-contain">
+        <table
+          [ngClass]="{ 'hidden': tableDataSourceDirective.hasError$ | async }"
+          [paginator]="paginator"
+          matSort
+          mat-table
+          #tableDataSourceDirective="rxapTableDataSource"
+          rxapTableDataSource
+          [parameters]="parameters"
+          id="<%= name %>"
+          <% if (hasColumnWithFilter) { %>rxap-filter-header-row<% } %>
+        >
+          <!-- region columns -->
+
+          <% if (selectColumn) { %>
+          <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>
+          <% } %>
+          <ng-container matColumnDef="removedAt">
+            <th mat-header-cell *matHeaderCellDef>
+              <ng-container i18n>Removed at</ng-container>
+            </th>
+            <td
+              mat-cell
+              [rxap-date-cell]="element.__removedAt"
+              *matCellDef="let element"
+            ></td>
+          </ng-container>
+          <ng-container matColumnDef="uuid">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>
+              <ng-container i18n>UUID</ng-container>
+            </th>
+
+            <td mat-cell *matCellDef="let element">{{ element?.uuid }}</td>
+          </ng-container>
+          <% if (actionList.length) { %>
+          <ng-container matColumnDef="actions" stickyEnd>
+            <th mat-header-cell *matHeaderCellDef>
+            <% if (selectColumn) { %>
+              <div class="flex flex-row" *rxapSelectedRows="let selected">
+              <% for (const action of actionList) { %>
+              <% if (action.inHeader) { %>
+                <button
+                  rxapTableRowHeaderAction="<%= action.type %>"
+                  mat-icon-button
+                  *ngIf="selected | rxapRowActionCheck:'<%= action.type %>'"
+                  <% if (action.permission) { %>rxapHasEnablePermission="<%= action.permission %>"<% } %>
+                  matTooltip="<%= action.type %>"
+                  i18n-matTooltip
+                >
+                  <% if (action.icon) { %><mat-icon><%= action.icon %></mat-icon><% } else if (action.svgIcon) { %><mat-icon svgIcon="<%= action.svgIcon %>"></mat-icon><% } else { %><mat-icon><%= action.type %></mat-icon><% } %>
+                  <mat-progress-bar
+                    *rxapTableRowActionExecuting
+                    mode="indeterminate"
+                  ></mat-progress-bar>
+                </button>
+              <% } %>
+              <% } %>
+              </div>
+            <% } %>
+            </th>
+
+            <td mat-cell *matCellDef="let element">
+              <div class="flex flex-row">
+                <% for (const action of actionList) { %>
+                <button
+                  rxapTableRowAction="<%= action.type %>"
+                  [element]="element"
+                  mat-icon-button
+                  *ngIf="element | rxapRowActionCheck:'<%= action.type %>'"
+                  <% if (action.permission) { %>rxapHasEnablePermission="<%= action.permission %>"<% } %>
+                  matTooltip="<%= action.type %>"
+                  i18n-matTooltip
+                >
+                  <% if (action.icon) { %><mat-icon><%= action.icon %></mat-icon><% } else if (action.svgIcon) { %><mat-icon svgIcon="<%= action.svgIcon %>"></mat-icon><% } else { %><mat-icon><%= action.type %></mat-icon><% } %>
+                  <mat-progress-bar
+                    *rxapTableRowActionExecuting
+                    mode="indeterminate"
+                  ></mat-progress-bar>
+                </button>
+                <% } %>
+              </div>
+            </td>
+          </ng-container>
+          <% } %>
+          <% for (const column of columnList) { %>
+          <% if (column.type === 'copy-to-clipboard') { %>
+          <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 [rxap-copy-to-clipboard-cell]="element?.<%= column.propertyPath %>"></td>
+          </ng-container>
+          <% } else if (column.type === 'link') { %>
+          <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 [rxap-link-cell]="element?.<%= column.propertyPath %>"></td>
+          </ng-container>
+          <% } else if (column.type === 'date') { %>
+          <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 [rxap-date-cell]="element?.<%= column.propertyPath %>" format="dd.MM.yyyy HH:mm:ss"></td>
+          </ng-container>
+          <% } else if (column.type === 'boolean') { %>
+          <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 [rxap-boolean-cell]="element?.<%= column.propertyPath %>"></td>
+          </ng-container>
+          <% } else if (column.type === 'icon') { %>
+          <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 [rxap-icon-cell]="element?.<%= column.propertyPath %>"></td>
+          </ng-container>
+          <% } else if (column.type === 'component') { %>
+          <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 rxap-<%= column.name %>-cell [element]="element" [value]="element?.<%= column.propertyPath %>"></td>
+          </ng-container>
+          <% } else { %>
+          <ng-container matColumnDef="<%= column.name %>">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>
+              <ng-container i18n><%= column.title %></ng-container>
+            </th>
+
+            <td mat-cell *matCellDef="let element">{{ element?.<%= column.propertyPath %> }}</td>
+          </ng-container>
+          <% } %>
+          <% } %>
+
+          <!-- endregion -->
+          <% if (hasColumnWithFilter) { %>
+          <!-- region filter columns -->
+          <% if (selectColumn) { %>
+          <ng-container matColumnDef="filter_select" sticky>
+            <th mat-header-cell *matHeaderCellDef></th>
+          </ng-container>
+          <% } %>
+          <ng-container matColumnDef="filter_removedAt">
+            <th mat-header-cell *matHeaderCellDef></th>
+          </ng-container>
+          <ng-container matColumnDef="filter_uuid">
+            <th mat-header-cell *matHeaderCellDef></th>
+          </ng-container>
+          <% if (actionList.length) { %>
+          <ng-container matColumnDef="filter_actions" stickyEnd>
+            <th mat-header-cell *matHeaderCellDef></th>
+          </ng-container>
+          <% } %>
+
+          <% for (const column of columnList) { %>
+          <ng-container matColumnDef="filter_<%= column.name %>">
+            <th mat-header-cell *matHeaderCellDef>
+              <% if (column.hasFilter) { %>
+              <% if (column.type === 'boolean') { %>
+              <mat-checkbox
+                indeterminate
+                parentControlContainer
+                formControlName="<%= camelize(column.name) %>"
+              >
+                <ng-container i18n><%= column.title %></ng-container>
+              </mat-checkbox>
+              <% } else { %>
+              <mat-form-field class="w-100 pt-3">
+                <mat-label i18n><%= column.title %></mat-label>
+                <input
+                  matInput
+                  i18n-placeholder
+                  placeholder="Enter Filter"
+                  parentControlContainer
+                  formControlName="<%= camelize(column.name) %>"
+                />
+                <button matSuffix rxapInputClearButton mat-icon-button>
+                  <mat-icon>clear</mat-icon>
+                </button>
+              </mat-form-field>
+              <% } %>
+              <% } %>
+            </th>
+          </ng-container>
+          <% } %>
+
+          <!-- endregion -->
+          <tr
+            class="rxap-filter-header"
+            mat-header-row
+            *matHeaderRowDef="
+              rxapTableColumns.displayColumns | toFilterColumnNames
+            "
+          ></tr>
+          <% } %>
+
+          <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-footer
+      ><mat-paginator
+        [ngClass]="{ 'hidden': tableDataSourceDirective.hasError$ | async }"
+        rxapPersistent
+        [pageSizeOptions]="[5,10,25,50,100]"
+        [pageSize]="10"
+        #paginator="matPaginator"
+      ></mat-paginator
+      ></mat-card-footer>
+    </mat-card>
+  </div>
+</div>

package/src/schematics/table/table-component/files/component/__componentName__.component.ts.template

@@ -0,0 +1,100 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit, INJECTOR, Injector, Inject } from '@angular/core';
+import { Observable, from } from 'rxjs';
+import {
+  RowAnimation,
+  TableShowArchivedSlideComponent,
+  RXAP_TABLE_METHOD,
+} from '@rxap/material-table-system';
+import { GetFromObjectPipe } from '@rxap/pipes';
+import {
+  BooleanCellComponent,
+  CopyToClipboardCellComponent, DateCellComponent,
+  IconCellComponent,
+  LinkCellComponent, PersistentPaginatorDirective,
+  TableColumnMenuModule, TableCreateButtonDirective,
+  TableDataSourceDirective,
+  TableFilterModule, TableRowActionsModule,
+  TableRowControlsModule,
+} from '@rxap/material-table-system';
+import { MatCardModule } from '@angular/material/card';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { CardProgressBarDirective } from '@rxap/material-directives/card';
+import { MatTableModule } from '@angular/material/table';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { RxapFormsModule } from '@rxap/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { MatDividerModule } from '@angular/material/divider';
+<% if (hasNavigationBackHeader) { %>
+import { NavigateBackButtonComponent } from '@rxap/components';
+<% } %>
+import { ConfirmModule } from '@rxap/components';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { InputClearButtonDirective } from '@rxap/material-form-system';
+import { HasPermissionModule } from '@rxap/authorization';
+import { CommonModule } from '@angular/common';
+import { DataSourceErrorComponent } from '@rxap/data-source';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+
+@Component({
+  selector:        '<%= prefix %>-<%= name %>-table',
+  templateUrl:     './<%= name %>-table.component.html',
+  styleUrls:       [ './<%= name %>-table.component.scss' ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [ RowAnimation ],
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatCardModule,
+    MatProgressBarModule,
+    CardProgressBarDirective,
+    MatTableModule,
+    FlexLayoutModule,
+    TableDataSourceDirective,
+    TableFilterModule,
+    RxapFormsModule,
+    MatCheckboxModule,
+    ReactiveFormsModule,
+    RouterModule,
+    MatDividerModule,
+    <% if (hasNavigationBackHeader) { %>
+    NavigateBackButtonComponent,
+    <% } %>
+    TableRowControlsModule,
+    TableColumnMenuModule,
+    DateCellComponent,
+
+    MatPaginatorModule,
+    MatSortModule,
+    MatIconModule,
+    MatInputModule,
+    MatButtonModule,
+    InputClearButtonDirective,
+    TableCreateButtonDirective,
+    TableShowArchivedSlideComponent,
+    PersistentPaginatorDirective,
+    ConfirmModule,
+    HasPermissionModule,
+    TableRowActionsModule,
+    GetFromObjectPipe,
+    CopyToClipboardCellComponent,
+    LinkCellComponent,
+    IconCellComponent,
+    BooleanCellComponent,
+    DataSourceErrorComponent,
+    MatSnackBarModule,
+  ],
+})
+export class <%= classify(componentName) %>Component {
+
+  @Input()
+  public parameters?: Observable<Record<string, unknown>>;
+
+}
+
+export default <%= classify(name) %>TableComponent;

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

@@ -0,0 +1,17 @@
+import { Rule } from '@angular-devkit/schematics';
+import { FormDefinitionControl, GetPageOperationColumn } from '@rxap/schematics-ts-morph';
+import { Normalized } from '@rxap/utilities';
+import { NormalizedAngularOptions } from '../../../lib/angular-options';
+import { NormalizedTableAction } from '../../../lib/table-action';
+import { NormalizedTableColumn } from '../../../lib/table-column';
+import { NormalizedTableOptions } from '../../../lib/table-options';
+import { TableComponentOptions } from './schema';
+export interface NormalizedTableComponentOptions extends Readonly<Normalized<TableComponentOptions> & NormalizedTableOptions & NormalizedAngularOptions> {
+    name: string;
+    columnList: NormalizedTableColumn[];
+    actionList: NormalizedTableAction[];
+}
+export declare function NormalizeTableComponentOptions(options: Readonly<TableComponentOptions>): NormalizedTableComponentOptions;
+export declare function TableColumnToGetPageOperationColumn(column: NormalizedTableColumn): GetPageOperationColumn;
+export declare function TableColumnToFormControl(column: NormalizedTableColumn): FormDefinitionControl;
+export default function (options: TableComponentOptions): () => Rule;