feat: add a schematic to generate a component with table

ui-particles-angular/projects/ui-schematics/schematics/collection.json

@@ -12,6 +12,12 @@
       "factory": "./components/component-with-form/index#createComponentWithForm",
       "schema": "./components/component-with-form/schema.json",
       "aliases": ["cwf"]
+    },
+    "component-with-table": {
+      "description": "Generate a component with a table in the project.",
+      "factory": "./components/component-with-table/index#createComponentWithTable",
+      "schema": "./components/component-with-table/schema.json",
+      "aliases": ["cwt"]
     }
   }
 }

ui-particles-angular/projects/ui-schematics/schematics/components/component-with-table/files/__name@dasherize__.component.html.template

@@ -0,0 +1,64 @@
+<!--
+
+    Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<table mat-table [dataSource]="dataSource" class="gio-table-light <%= dasherize(name) %>" aria-label="<%= name %> list">
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef id="name">Name</th>
+    <td mat-cell *matCellDef="let element">
+      {{ element.name }}
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="actions">
+    <th mat-header-cell *matHeaderCellDef id="actions">Action</th>
+    <td mat-cell *matCellDef="let element">
+      <div class="notifications__actions">
+        <button
+          mat-icon-button
+          aria-label="Edit"
+          matTooltip="Edit"
+          (click)="edit.emit(element.id)"
+        >
+          <mat-icon svgIcon="gio:edit-pencil"></mat-icon>
+        </button>
+
+        <button
+          mat-icon-button
+          aria-label="Delete"
+          matTooltip="Delete"
+          (click)="delete.emit(element)"
+        >
+          <mat-icon svgIcon="gio:trash"></mat-icon>
+        </button>
+      </div>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+
+  <!-- Row shown when there is no data -->
+  <tr class="mat-mdc-row mdc-data-table__row" *matNoDataRow>
+    <td *ngIf="!loading" class="mat-mdc-cell mdc-data-table__cell" [attr.colspan]="displayedColumns.length">
+      No data to display.
+    </td>
+    <td *ngIf="loading" class="mat-mdc-cell mdc-data-table__cell" [attr.colspan]="displayedColumns.length">
+      <gio-loader></gio-loader>
+    </td>
+  </tr>
+</table>
+

ui-particles-angular/projects/ui-schematics/schematics/components/component-with-table/files/__name@dasherize__.component.scss.template

@@ -0,0 +1,20 @@
+/*
+ * Copyright (C) 2021 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.<%= dasherize(name) %> {
+  .mat-column-actions {
+    width: 20%;
+  }
+}

ui-particles-angular/projects/ui-schematics/schematics/components/component-with-table/files/__name@dasherize__.component.spec.ts.template

@@ -0,0 +1,67 @@
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component';
+import { <%= classify(name) %>Harness } from './<%= dasherize(name) %>.harness';
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+import { Component } from "@angular/core";
+import { HarnessLoader } from "@angular/cdk/testing";
+import { MatIconTestingModule } from "@angular/material/icon/testing";
+
+@Component({
+  selector: 'test-component',
+  template: ` <<%= dasherize(name) %> [dataSource]="dataSource" [loading]="loading"></<%= dasherize(name) %>>`,
+})
+class TestComponent {
+  loading = false;
+  dataSource = [{ name: 'foo' }];
+}
+
+describe('<%= classify(name) %>Component', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let loader: HarnessLoader;
+  let componentHarness: <%= classify(name) %>Harness;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TestComponent],
+      imports: [MatIconTestingModule, NoopAnimationsModule, <%= classify(name) %>Component]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TestComponent);
+    loader = TestbedHarnessEnvironment.loader(fixture);
+    componentHarness = await loader.getHarness(<%= classify(name) %>Harness);
+    fixture.detectChanges();
+  });
+
+  it('should display table', async () => {
+    const { headerCells, rowCells } = await componentHarness.computeTableCells();
+    expect(headerCells).toStrictEqual([{ name: 'Name', actions: 'Action' }]);
+    expect(rowCells).toEqual([['foo', '']]);
+  });
+
+  it('should edit row', async () => {
+    await componentHarness.editRow(0);
+    // add some tests
+  });
+
+  it('should delete row', async () => {
+    await componentHarness.deleteRow(0);
+    // add some tests
+  });
+});

ui-particles-angular/projects/ui-schematics/schematics/components/component-with-table/files/__name@dasherize__.component.ts.template

@@ -0,0 +1,40 @@
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { MatButtonModule } from '@angular/material/button';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { GioIconsModule, GioLoaderModule } from "@gravitee/ui-particles-angular";
+
+@Component({
+  selector: '<%= dasherize(name) %>',
+  templateUrl: './<%= dasherize(name) %>.component.html',
+  styleUrls: ['./<%= dasherize(name) %>.component.scss'],
+  imports: [CommonModule, GioIconsModule, GioLoaderModule, MatButtonModule, MatTableModule, MatTooltipModule],
+  standalone: true,
+})
+export class <%= classify(name) %>Component {
+  public displayedColumns = ['name', 'actions'];
+  @Input()
+  public dataSource: any[];
+  @Input()
+  public loading = true;
+  @Output()
+  public delete = new EventEmitter();
+  @Output()
+  public edit = new EventEmitter<string>();
+}

ui-particles-angular/projects/ui-schematics/schematics/components/component-with-table/files/__name@dasherize__.harness.ts.template

@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ComponentHarness, parallel } from "@angular/cdk/testing";
+import { MatButtonHarness } from "@angular/material/button/testing";
+import { MatTableHarness } from "@angular/material/table/testing";
+
+export class <%= classify(name) %>Harness extends ComponentHarness {
+  static readonly hostSelector = '<%= dasherize(name) %>';
+
+  async computeTableCells() {
+    const table = await this.getTable();
+
+    const headerRows = await table.getHeaderRows();
+    const headerCells = await parallel(() => headerRows.map((row) => row.getCellTextByColumnName()));
+
+    const rows = await table.getRows();
+    const rowCells = await parallel(() => rows.map((row) => row.getCellTextByIndex()));
+    return { headerCells, rowCells };
+  }
+
+  public async getDeleteButton(index: number) {
+    const table = await this.getTable();
+    const rows = await table.getRows();
+
+    return await rows[index]
+      .getCells({ columnName: 'actions' })
+      .then((cells) => cells[0].getHarnessOrNull(MatButtonHarness.with({ selector: '[aria-label="Delete"]' })));
+  }
+
+  public async deleteRow(index: number) {
+    const deleteButton = await this.getDeleteButton(index);
+    await deleteButton.click();
+  }
+
+  public async getEditButton(index: number) {
+    const table = await this.getTable();
+    const rows = await table.getRows();
+
+    return await rows[index]
+      .getCells({ columnName: 'actions' })
+      .then((cells) => cells[0].getHarnessOrNull(MatButtonHarness.with({ selector: '[aria-label="Edit"]' })));
+  }
+
+  public async editRow(index: number) {
+    const editButton = await this.getEditButton(index);
+    await editButton.click();
+  }
+
+  private getTable = this.locatorFor(MatTableHarness.with({ selector: '[aria-label="<%= name %> list"]' }));
+}

ui-particles-angular/projects/ui-schematics/schematics/components/component-with-table/files/__name@dasherize__.stories.ts.template

@@ -0,0 +1,49 @@
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Meta, StoryObj } from '@storybook/angular';
+import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component';
+
+export default {
+  title: '<%= classify(name) %>Component story',
+  component: <%= classify(name) %>Component,
+  argTypes: {},
+  render: (args) => ({
+    template: `
+      <div style="width: 800px">
+        <<%= dasherize(name) %>  [dataSource]="dataSource" [loading]="loading"></<%= dasherize(name) %>>
+      </div>
+    `,
+    props: args,
+  }),
+} as Meta;
+
+export const Empty: StoryObj = {};
+Empty.args = {
+  loading: false,
+  dataSource: [],
+};
+
+export const Loading: StoryObj = {};
+Loading.args = {
+  loading: true,
+  dataSource: [],
+};
+
+export const WithData: StoryObj = {};
+WithData.args = {
+  loading: false,
+  dataSource: [{ name: 'foo' }, { name: 'bar' }, { name: 'baz' }],
+};

ui-particles-angular/projects/ui-schematics/schematics/components/component-with-table/index.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) 2024 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Rule } from '@angular-devkit/schematics';
+
+import { createComponent } from '../utils';
+import { Schema } from '../schema';
+
+export function createComponentWithTable(options: Schema): Rule {
+  return createComponent(options);
+}