@igniteui/angular-templates 17.0.1302 → 17.0.1310-beta.2

package/igx-ts-legacy/hierarchical-grid/default/index.d.ts

@@ -0,0 +1 @@
+export {};

package/igx-ts-legacy/hierarchical-grid/default/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxHierarchicalGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Hierarchical Grid"];
+        this.controlGroup = "Grids & Lists";
+        this.listInComponentTemplates = true;
+        this.id = "hierarchical-grid";
+        this.projectType = "igx-ts";
+        this.name = "Hierarchical Grid";
+        this.description = "basic IgxHierarchicalGrid";
+        this.dependencies = [
+            { import: ["IgxGridModule", "IgxHierarchicalGridModule"], from: "<%=igxPackage%>" }
+        ];
+    }
+}
+module.exports = new IgxHierarchicalGridTemplate();

package/igx-ts-legacy/hierarchical-grid/hierarchical-grid-batch-editing/files/src/app/__path__/__filePrefix__.component.html

@@ -0,0 +1,94 @@
+<p>IgxHierarchicalGrid with enabled batch editing. You can edit parent as well as child layout records. You can also add a record on root level using Add singer button.  <br />
+  You can read more about configuring the igx-hierarchical-grid component in the
+  <a href="https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/grids/hierarchical-grid/README.md"
+    target="_blank">README</a> or the
+  <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/batch-editing"
+    target="_blank">official documentation</a>.</p>
+<br />
+<button igxButton="raised" (click)="dialogAddSinger.open()" class="addSingerBtn">Add Singer</button>
+
+<igx-hierarchical-grid igxPreventDocumentScroll  #hierarchicalGrid class="hgrid" [batchEditing]="true" [data]="localdata" primaryKey="Artist"
+  [rowEditable]="true" height="580px" width="100%">
+  <igx-column field="Artist" header="Artist" [editable]="false" dataType="string"></igx-column>
+  <igx-column field="HasGrammyAward" header="Has Grammy Award?" [editable]="true" dataType="boolean">
+  </igx-column>
+  <igx-column field="Debut" header="Debut" [editable]="true" dataType="number" [formatter]="formatter">
+  </igx-column>
+  <igx-column field="GrammyNominations" header="Grammy Nominations" [editable]="true" dataType="number">
+  </igx-column>
+  <igx-column field="GrammyAwards" header="Grammy Awards" [editable]="true" dataType="number"></igx-column>
+  <igx-column width="150px" [editable]="false">
+    <ng-template igxCell let-cell="cell" let-val>
+      <button igxButton (click)="removeRow(cell.id ? cell.id.rowIndex : -1)"
+        [disabled]="cell.row.deleted">Delete</button>
+    </ng-template>
+  </igx-column>
+
+  <igx-row-island key="Albums" #layout1 primaryKey="Album" [rowEditable]="true">
+  <igx-grid-toolbar [grid]="grid" *igxGridToolbar="let grid">
+      <button igxButton [disabled]="!grid.transactions.canUndo" (click)="undo(grid)">Undo</button>
+      <button igxButton [disabled]="!grid.transactions.canRedo" (click)="redo(grid)">Redo</button>
+  </igx-grid-toolbar>
+
+    <igx-column field="Album" [editable]="false" dataType="string"></igx-column>
+    <igx-column field="LaunchDate" header="Launch Date" [editable]="true" dataType="date"></igx-column>
+    <igx-column field="BillboardReview" header="BillboardReview" [editable]="true" dataType="number">
+    </igx-column>
+    <igx-column field="USBillboard200" header="USBillboard200" [editable]="true" dataType="number">
+    </igx-column>
+
+  </igx-row-island>
+</igx-hierarchical-grid>
+
+<div class="buttons-row">
+  <div class="buttons-wrapper">
+    <button igxButton [disabled]="!hasTransactions" (click)="openCommitDialog()">Commit</button>
+    <button igxButton [disabled]="!undoEnabledParent" (click)="undo(hierarchicalGrid)">Undo Parent</button>
+    <button igxButton [disabled]="!redoEnabledParent" (click)="redo(hierarchicalGrid)">Redo Parent</button>
+  </div>
+</div>
+
+<igx-dialog #dialogAddSinger title="New Singer" rightButtonLabel="Add" leftButtonLabel="Cancel"
+  (leftButtonSelect)="cancel()" (rightButtonSelect)="addSinger()">
+  <div class="dialogNewSinger">
+    <igx-input-group>
+      <label igxLabel for="artist">Artist</label>
+      <input igxInput id="artist" type="text" [(ngModel)]="singer.Artist" />
+    </igx-input-group>
+    <igx-checkbox id="hasGrammyAward" [(ngModel)]="singer.HasGrammyAward">Has Grammy Award</igx-checkbox>
+    <igx-input-group>
+      <label igxLabel for="debut">Debut</label>
+      <input igxInput id="debut" type="number" [(ngModel)]="singer.Debut" />
+    </igx-input-group>
+    <igx-input-group>
+      <label igxLabel for="grammyNominations">Grammy Nominations</label>
+      <input igxInput id="grammyNominations" type="number" [(ngModel)]="singer.GrammyNominations" />
+    </igx-input-group>
+    <igx-input-group>
+      <label igxLabel for="grammyAwards">Grammy Awards</label>
+      <input igxInput id="grammyAwards" type="number" [(ngModel)]="singer.GrammyAwards" />
+    </igx-input-group>
+  </div>
+</igx-dialog>
+
+<igx-dialog #dialogChanges title="Submit the following transactions?">
+  <igx-grid igxPreventDocumentScroll #dialogGrid [data]="transactionsDataAll" [rowHeight]="64" primaryKey="id" width="650px" height="300px"
+    emptyGridMessage="No available transactions">
+    <igx-column field="id" header="ID" dataType="string" width="150px"></igx-column>
+    <igx-column field="type" header="Type" width="150px" [sortable]="true">
+      <ng-template igxCell let-cell="cell" let-val>
+        <span [class]="classFromType(val)">{{ typeFormatter(val) }}</span>
+      </ng-template>
+    </igx-column>
+    <igx-column field="newValue" header="Value" width="900px">
+      <ng-template igxCell let-cell="cell" let-val>
+        <span class="transaction-log">{{ stateFormatter(val) }}</span>
+      </ng-template>
+    </igx-column>
+  </igx-grid>
+  <div class="buttons-wrapper">
+    <button igxButton (click)="commit()">Commit</button>
+    <button igxButton (click)="discard()">Discard</button>
+    <button igxButton (click)="cancel()">Cancel</button>
+  </div>
+</igx-dialog>

package/igx-ts-legacy/hierarchical-grid/hierarchical-grid-batch-editing/files/src/app/__path__/__filePrefix__.component.scss

@@ -0,0 +1,56 @@
+h4 {
+  text-align: center;
+  padding-top: 2%;
+  padding-bottom: 2%;
+}
+.buttons-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 5px;
+}
+.buttons-wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding: 10px 0;
+}
+
+.addSingerBtn.igx-button--raised {
+  margin-bottom: 10px;
+}
+
+.dialogNewSinger,
+.dialogNewAlbum {
+  margin: 10px;
+  padding: 10px;
+}
+
+.igx-input-group {
+  margin-bottom: 10px;
+  padding: 5px;
+}
+.igx-checkbox {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  padding-top: 8px;
+  padding-bottom: 5px;
+}
+
+.transaction--update,
+.transaction--delete,
+.transaction--add {
+  font-weight: 600;
+}
+.transaction--add {
+  color: #6b3;
+}
+.transaction--update {
+  color: #4a71b9;
+}
+.transaction--delete {
+  color: #ee4920;
+}
+.transaction-log {
+  word-wrap: none;
+}

package/igx-ts-legacy/hierarchical-grid/hierarchical-grid-batch-editing/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -0,0 +1,38 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  IgxGridModule, IgxDatePickerModule, IgxCheckboxModule, IgxDialogModule, IgxHierarchicalGridModule
+} from '<%=igxPackage%>';
+import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
+
+describe('<%=ClassName%>Component', () => {
+  let component: <%=ClassName%>Component;
+  let fixture: ComponentFixture<<%=ClassName%>Component>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [<%=ClassName%>Component],
+      imports: [
+        FormsModule,
+        NoopAnimationsModule,
+        IgxGridModule,
+        IgxHierarchicalGridModule,
+        IgxDatePickerModule,
+        IgxCheckboxModule,
+        IgxDialogModule
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/igx-ts-legacy/hierarchical-grid/hierarchical-grid-batch-editing/files/src/app/__path__/__filePrefix__.component.ts

@@ -0,0 +1,132 @@
+import { Component, ViewChild } from '@angular/core';
+import { IgxDialogComponent, IgxGridComponent, IgxHierarchicalGridComponent,
+  IgxRowIslandComponent, Transaction } from '<%=igxPackage%>';
+import { GridType } from '<%=igxPackage%>/lib/grids/common/grid.interface';
+import { SINGERS } from './data';
+import { Singer } from './singer';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.component.html',
+  styleUrls: ['./<%=filePrefix%>.component.scss']
+})
+export class <%=ClassName%>Component {
+  public get undoEnabledParent(): boolean {
+    return this.hierarchicalGrid.transactions.canUndo;
+  }
+
+  public get redoEnabledParent(): boolean {
+    return this.hierarchicalGrid.transactions.canRedo;
+  }
+
+  public get hasTransactions(): boolean {
+    return this.hierarchicalGrid.transactions.getAggregatedChanges(false).length > 0 || this.hasChildTransactions;
+  }
+
+  public get hasChildTransactions(): boolean {
+    return this.layout1.gridAPI.getChildGrids()
+      .find(c => c.transactions.getAggregatedChanges(false).length > 0) !== undefined;
+  }
+
+  public localdata: Singer[] = SINGERS;
+  public transactionsDataAll: Transaction[] = [];
+  private id = 14;
+  public singer: Singer = {
+    ID: this.id,
+    Artist: 'Mock Jagger',
+    Debut: 2005,
+    GrammyAwards: 4,
+    GrammyNominations: 7,
+    HasGrammyAward: false
+  };
+
+  @ViewChild('dialogChanges', { read: IgxDialogComponent, static: true })
+  public dialogChanges!: IgxDialogComponent;
+
+  @ViewChild('dialogGrid', { read: IgxGridComponent, static: true })
+  public dialogGrid!: IgxGridComponent;
+
+  @ViewChild('layout1', { static: true })
+  private layout1!: IgxRowIslandComponent;
+
+  @ViewChild('hierarchicalGrid', { static: true })
+  private hierarchicalGrid!: IgxHierarchicalGridComponent;
+
+  @ViewChild('dialogAddSinger', { read: IgxDialogComponent, static: true })
+  private dialogSinger!: IgxDialogComponent;
+
+  public formatter = (a: number): number => a;
+
+  public undo(grid: GridType): void {
+    /* exit edit mode */
+    grid.crudService.endEdit(/* commit the edit transaction */ false);
+    grid.transactions.undo();
+  }
+
+  public redo(grid: GridType): void {
+    grid.transactions.redo();
+  }
+
+  public commit(): void {
+    this.hierarchicalGrid.transactions.commit(this.localdata);
+    this.layout1.gridAPI.getChildGrids().forEach((grid) => {
+      grid.transactions.commit(grid.data as any[]);
+    });
+    this.dialogChanges.close();
+  }
+
+  public discard(): void {
+    this.hierarchicalGrid.transactions.clear();
+    this.layout1.gridAPI.getChildGrids().forEach((grid) => {
+      grid.transactions.clear();
+    });
+    this.dialogChanges.close();
+  }
+
+  public openCommitDialog(): void {
+    this.transactionsDataAll = [...this.hierarchicalGrid.transactions.getAggregatedChanges(true)];
+    this.layout1.gridAPI.getChildGrids().forEach((grid) => {
+      this.transactionsDataAll = this.transactionsDataAll.concat(grid.transactions.getAggregatedChanges(true));
+    });
+    this.dialogChanges.open();
+    this.dialogGrid.reflow();
+  }
+
+  public addSinger(): void {
+    this.hierarchicalGrid.addRow(this.singer);
+    ++this.id;
+    this.cancel();
+  }
+
+  public removeRow(rowIndex: number): void {
+    const row = this.hierarchicalGrid.getRowByIndex(rowIndex);
+    if (row && row.delete) {
+      row.delete();
+    }
+  }
+
+  public stateFormatter(value: string): string {
+    return JSON.stringify(value);
+  }
+
+  public typeFormatter(value: string): string {
+    return value.toUpperCase();
+  }
+
+  public classFromType(type: string): string {
+    return `transaction--${type.toLowerCase()}`;
+  }
+
+  public cancel(): void {
+    this.dialogChanges.close();
+    this.dialogSinger.close();
+    this.singer = {
+      ID: this.id,
+      Artist: 'Mock Jagger',
+      Debut: 2005,
+      GrammyAwards: 4,
+      GrammyNominations: 7,
+      HasGrammyAward: false
+    };
+  }
+}