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

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

@@ -1,299 +0,0 @@
-<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 (!headerButton && hasWithoutTitle) { %> justify-end<% } %>">
-      <% if (!hasWithoutTitle) { %>
-      <mat-card-title i18n><%= title %></mat-card-title>
-      <% } %>
-      <% 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 (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" <% if (!headerButton && hasWithoutTitle) { %>inline<% } %>>
-        <% 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>
-        <% } %>
-        <% if (hasShowArchivedSlide) { %>
-        <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-auto">
-        <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>
-          <% } %>
-          <% 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
-                   <% if (action.color) { %>color="<%= action.color %>"<% } %>
-                   <% if (action.cssClass) { %>class="<%= action.cssClass %>"<% } %>
-                  *ngIf="selected | rxapRowActionCheck:'<%= action.type %>'"
-                  <% if (action.permission) { %>rxapHasEnablePermission="<%= action.permission %>"<% } %>
-                  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"
-                   <% if (action.color) { %>color="<%= action.color %>"<% } %>
-                   <% if (action.cssClass) { %>class="<%= action.cssClass %>"<% } %>
-                  mat-icon-button
-                  *ngIf="element | rxapRowActionCheck:'<%= action.type %>'"
-                  <% if (action.permission) { %>rxapHasEnablePermission="<%= action.permission %>"<% } %>
-                  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.role === '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 <% if (column.cssClass) { %>class="<%= column.cssClass %>"<% } %> [rxap-copy-to-clipboard-cell]="element?.<%= column.propertyPath %>"></td>
-          </ng-container>
-          <% } else if (column.role === '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 <% if (column.cssClass) { %>class="<%= column.cssClass %>"<% } %> [rxap-link-cell]="element?.<%= column.propertyPath %>"></td>
-          </ng-container>
-          <% } else if (column.role === '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 <% if (column.cssClass) { %>class="<%= column.cssClass %>"<% } %> [rxap-date-cell]="element?.<%= column.propertyPath %>" format="dd.MM.yyyy HH:mm:ss"></td>
-          </ng-container>
-          <% } else if (column.role === '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 <% if (column.cssClass) { %>class="<%= column.cssClass %>"<% } %> [rxap-boolean-cell]="element?.<%= column.propertyPath %>"></td>
-          </ng-container>
-          <% } else if (column.role === '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 <% if (column.cssClass) { %>class="<%= column.cssClass %>"<% } %> [rxap-icon-cell]="element?.<%= column.propertyPath %>"></td>
-          </ng-container>
-          <% } else if (column.role === '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 <% if (column.cssClass) { %>class="<%= column.cssClass %>"<% } %> <%= prefix %>-<%= 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 <% if (column.cssClass) { %>class="<%= column.cssClass %>"<% } %> *matCellDef="let element">
-            <% if (column.template) { %>
-            <%= column.template %>
-            <% } else if (column.pipeList.length) { %>
-            {{ element?.<%= column.propertyPath %><% for (const pipe of column.pipeList) { %> | <%= pipe.name %><% } %> }}
-            <% } else { %>
-            {{ 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>
-          <% } %>
-          <% 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-full 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/tree-table-component/files/component/__componentName__.component.html.template

@@ -1,213 +0,0 @@
-<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 (!headerButton && hasWithoutTitle) { %> justify-end<% } %>">
-      <% if (!hasWithoutTitle) { %>
-      <mat-card-title i18n><%= title %></mat-card-title>
-      <% } %>
-      <% 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 (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" <% if (!headerButton && hasWithoutTitle) { %>inline<% } %>>
-        <% 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></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-auto">
-        <table
-          [ngClass]="{ 'hidden': tableDataSourceDirective.hasError$ | async }"
-          matSort
-          mat-table
-          #tableDataSourceDirective="rxapTableDataSource"
-          rxapTableDataSource
-          [parameters]="parameters"
-          id="<%= name %>"
-        >
-          <!-- region columns -->
-
-          <% 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
-                   <% if (action.color) { %>color="<%= action.color %>"<% } %>
-                   <% if (action.cssClass) { %>class="<%= action.cssClass %>"<% } %>
-                  *ngIf="selected | rxapRowActionCheck:'<%= action.type %>'"
-                  <% if (action.permission) { %>rxapHasEnablePermission="<%= action.permission %>"<% } %>
-                  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"
-                   <% if (action.color) { %>color="<%= action.color %>"<% } %>
-                   <% if (action.cssClass) { %>class="<%= action.cssClass %>"<% } %>
-                  mat-icon-button
-                  *ngIf="element | rxapRowActionCheck:'<%= action.type %>'"
-                  <% if (action.permission) { %>rxapHasEnablePermission="<%= action.permission %>"<% } %>
-                  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.role === '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 <% if (column.cssClass) { %>class="<%= column.cssClass %>"<% } %> [rxap-copy-to-clipboard-cell]="element?.<%= column.propertyPath %>"></td>
-          </ng-container>
-          <% } else if (column.role === '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 <% if (column.cssClass) { %>class="<%= column.cssClass %>"<% } %> [rxap-link-cell]="element?.<%= column.propertyPath %>"></td>
-          </ng-container>
-          <% } else if (column.role === '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 <% if (column.cssClass) { %>class="<%= column.cssClass %>"<% } %> [rxap-date-cell]="element?.<%= column.propertyPath %>" format="dd.MM.yyyy HH:mm:ss"></td>
-          </ng-container>
-          <% } else if (column.role === '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 <% if (column.cssClass) { %>class="<%= column.cssClass %>"<% } %> [rxap-boolean-cell]="element?.<%= column.propertyPath %>"></td>
-          </ng-container>
-          <% } else if (column.role === '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 <% if (column.cssClass) { %>class="<%= column.cssClass %>"<% } %> [rxap-icon-cell]="element?.<%= column.propertyPath %>"></td>
-          </ng-container>
-          <% } else if (column.role === '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 <% if (column.cssClass) { %>class="<%= column.cssClass %>"<% } %> <%= prefix %>-<%= 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 <% if (column.cssClass) { %>class="<%= column.cssClass %>"<% } %> *matCellDef="let element">
-            <% if (column.template) { %>
-            <%= column.template %>
-            <% } else if (column.pipeList.length) { %>
-            {{ element?.<%= column.propertyPath %><% for (const pipe of column.pipeList) { %> | <%= pipe.name %><% } %> }}
-            <% } else { %>
-            {{ element?.<%= column.propertyPath %> }}
-            <% } %>
-            </td>
-          </ng-container>
-          <% } %>
-          <% } %>
-
-          <!-- endregion -->
-
-          <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>