igniteui-cli 9.0.1 → 9.0.2

package/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/DataGridSharedData.ts

@@ -0,0 +1,296 @@
+export class DataGridSharedData {
+  public static getEmployees(count?: number): any[] {
+    if (count === undefined) {
+      count = 250;
+    }
+
+    const employees: any[] = [];
+    let maleCount: number = 0;
+    let femaleCount: number = 0;
+    for (let i = 0; i < count; i += 1) {
+      const age: number = Math.round(this.getRandomNumber(20, 40));
+      const gender: string = this.getRandomGender();
+      const firstName: string = this.getRandomNameFirst(gender);
+      const lastName: string = this.getRandomNameLast();
+      const street: string = this.getRandomStreet();
+      const country: string = this.getRandomItem(this.countries);
+      const city: string = this.getRandomCity(country);
+      const generation = `${Math.floor(age / 10) * 10}s`;
+      const email: string = `${firstName.toLowerCase()}@${this.getRandomItem(this.emails)}`;
+      const website: string = `${firstName.toLowerCase()}-${this.getRandomItem(this.websites)}`;
+      let photoPath: any;
+
+      if (gender === 'male') {
+        maleCount += 1;
+        if (maleCount > 26) {
+          maleCount = 1;
+        }
+        photoPath = this.getPhotoMale(maleCount);
+      } else {
+        femaleCount += 1;
+        if (femaleCount > 24) {
+          femaleCount = 1;
+        }
+        photoPath = this.getPhotoFemale(femaleCount);
+      }
+
+      const person: any = {};
+      person.Address = `${street},${city}`;
+      person.Age = age;
+      person.Birthday = this.getBirthday(age);
+      person.City = city;
+      person.Country = country;
+      person.CountryFlag = this.getCountryFlag(country);
+      person.Email = email;
+      person.FirstName = firstName;
+      person.Gender = this.getGenderPhoto(gender);
+      person.Generation = generation;
+      person.ID = this.pad(i + 1, 5);
+      person.LastName = lastName;
+      person.Name = `${firstName} ${lastName}`;
+      person.Phone = this.getRandomPhone();
+      person.Photo = photoPath;
+      person.Street = street;
+      person.Salary = this.getRandomNumber(40, 200) * 1000;
+      person.Sales = this.getRandomNumber(200, 980) * 1000;
+      person.Website = website;
+      person.Productivity = this.getProductivity();
+
+      if (person.Salary < 50000) {
+        person.Income = 'Low';
+      } else if (person.Salary < 100000) {
+        person.Income = 'Average';
+      } else {
+        person.Income = 'High';
+      }
+
+      employees.push(person);
+    }
+    return employees;
+  }
+
+  public static getProductivity(weekCount?: number): any[] {
+    if (weekCount === undefined) {
+      weekCount = 52;
+    }
+    const productivity: any[] = [];
+    for (let w = 0; w < weekCount; w += 1) {
+      const value = this.getRandomNumber(-50, 50);
+      productivity.push({ Value: value, Week: w });
+    }
+    return productivity;
+  }
+
+  public static getSales(count?: number): any[] {
+    if (count === undefined) {
+      count = 250;
+    }
+
+    const names: string[] = [
+      'Intel CPU', 'AMD CPU',
+      'NVIDIA GPU', 'GIGABYTE GPU', 'Asus GPU', 'AMD GPU', 'MSI GPU',
+      'Corsair Memory', 'Patriot Memory', 'Skill Memory',
+      'Samsung HDD', 'WD HDD', 'Seagate HDD', 'Intel HDD',
+      'Samsung SSD', 'WD SSD', 'Seagate SSD', 'Intel SSD',
+      'Samsung Monitor', 'Asus Monitor', 'LG Monitor', 'HP Monitor'];
+    const countries: string[] = ['USA', 'UK', 'France', 'Canada', 'Poland', 'Japan', 'Germany'];
+    const status: string[] = ['Packing', 'Shipped', 'Delivered'];
+    const sales: any[] = [];
+
+    for (let i = 0; i < count; i += 1) {
+      const price = this.getRandomNumber(100, 900);
+      const items = this.getRandomNumber(10, 80);
+      const value = price * items;
+      const margin = this.getRandomNumber(3, 10);
+      const profit = Math.round((price * margin / 100) * items);
+      const country = this.getRandomItem(countries);
+      sales.push({
+        BundlePrice: price,
+        ProductPrice: price,
+        Margin: margin,
+        OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()),
+        OrderItems: items,
+        OrderValue: value, //  Math.round(value / 1000) + ',' + Math.round(value % 1000),
+        ProductID: 1001 + i,
+        ProductName: this.getRandomItem(names),
+        Profit: profit,
+        Countries: country,
+        CountryFlag: this.getCountryFlag(country),
+        Status: this.getRandomItem(status),
+      });
+    }
+    return sales;
+  }
+
+  public static getHouses(count?: number): any[] {
+    if (count === undefined) {
+      count = 250;
+    }
+
+    const houses: any[] = [];
+    const property: string[] = ['Townhouse', 'Single', 'Condo', 'Villa'];
+    const emails: string[] = ['estates.com', 'remax.com', 'zillow.com', 'realtor.com', 'coldwell.com'];
+    const countries: string[] = ['USA', 'UK', 'France', 'Canada', 'Poland', 'Japan', 'Germany'];
+
+    for (let i = 0; i < count; i += 1) {
+      const year: number = this.getRandomNumber(1950, 2015);
+      const age: number = 2020 - year;
+
+      const gender: string = this.getRandomGender();
+      const firstName: string = this.getRandomNameFirst(gender);
+      const lastName: string = this.getRandomNameLast();
+      const initials = firstName.substr(0, 1).toLowerCase();
+      const email: string = `${initials + lastName.toLowerCase()}@${this.getRandomItem(emails)}`;
+
+      const street: string = this.getRandomStreet();
+      const country: string = this.getRandomItem(countries);
+      const city: string = this.getRandomCity(country);
+
+      houses.push({
+        Address: `${street},${city}`,
+        Age: age,
+        Agent: `${firstName} ${lastName}`,
+        Area: this.getRandomNumber(50, 300),
+        Baths: this.getRandomNumber(1, 3),
+        Built: year,
+        City: city,
+        Country: country,
+        CountryFlag: this.getCountryFlag(country),
+        Email: email,
+        ID: this.pad(i + 1, 5),
+        Phone: this.getRandomPhone(),
+        Price: this.getRandomNumber(210, 900) * 1000,
+        Property: this.getRandomItem(property),
+        Rooms: this.getRandomNumber(2, 5),
+        SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()),
+        Street: street,
+      });
+    }
+    return houses;
+  }
+
+  private static websites: string[] = ['.com', '.gov', '.edu', '.org'];
+
+  private static emails: string[] = ['gmail.com', 'yahoo.com', 'twitter.com'];
+
+  private static genders: string[] = ['male', 'female'];
+
+  private static maleNames: string[] = ['Kyle', 'Oscar', 'Ralph', 'Mike', 'Bill', 'Frank', 'Howard', 'Jack', 'Larry', 'Pete', 'Steve', 'Vince', 'Mark', 'Alex', 'Max', 'Brian', 'Chris', 'Andrew', 'Martin', 'Mike', 'Steve', 'Glenn', 'Bruce'];
+
+  private static femaleNames: string[] = ['Gina', 'Irene', 'Katie', 'Brenda', 'Casey', 'Fiona', 'Holly', 'Kate', 'Liz', 'Pamela', 'Nelly', 'Marisa', 'Monica', 'Anna', 'Jessica', 'Sofia', 'Isabella', 'Margo', 'Jane', 'Audrey', 'Sally', 'Melanie', 'Greta', 'Aurora', 'Sally'];
+
+  private static lastNames: string[] = ['Adams', 'Crowley', 'Ellis', 'Martinez', 'Irvine', 'Maxwell', 'Clark', 'Owens', 'Rooney', 'Lincoln', 'Thomas', 'Spacey', 'MOrgan', 'King', 'Newton', 'Fitzgerald', 'Holmes', 'Jefferson', 'Landry', 'Berry', 'Perez', 'Spencer', 'Starr', 'Carter', 'Edwards', 'Stark', 'Johnson', 'Fitz', 'Chief', 'Blanc', 'Perry', 'Stone', 'Williams', 'Lane', 'Jobs', 'Adams', 'Power', 'Tesla'];
+
+  private static countries: string[] = ['USA', 'UK', 'France', 'Canada', 'Poland'];
+
+  private static citiesUS: string[] = ['New York', 'Los Angeles', 'Miami', 'San Francisco', 'San Diego', 'Las Vegas'];
+
+  private static citiesUK: string[] = ['London', 'Liverpool', 'Manchester'];
+
+  private static citiesFR: string[] = ['Paris', 'Marseille', 'Lyon'];
+
+  private static citiesCA: string[] = ['Toronto', 'Vancouver', 'Montreal'];
+
+  private static citiesPL: string[] = ['Krakow', 'Warsaw', 'Wroclaw', 'Gdansk'];
+
+  private static citiesJP: string[] = ['Tokyo', 'Osaka', 'Kyoto', 'Yokohama'];
+
+  private static citiesGR: string[] = ['Berlin', 'Bonn', 'Cologne', 'Munich', 'Hamburg'];
+
+  private static roadSuffixes: string[] = ['Road', 'Street', 'Way'];
+
+  private static roadNames: string[] = ['Main', 'Garden', 'Broad', 'Oak', 'Cedar', 'Park', 'Pine', 'Elm', 'Market', 'Hill'];
+
+  private static getRandomNumber(min: number, max: number): number {
+    return Math.round(min + Math.random() * (max - min));
+  }
+
+  private static getRandomItem(array: any[]): any {
+    const index = Math.round(this.getRandomNumber(0, array.length - 1));
+    return array[index];
+  }
+
+  private static getRandomDate(start: Date, end: Date) {
+    return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
+  }
+
+  private static getRandomPhone(): string {
+    const phoneCode = this.getRandomNumber(100, 900);
+    const phoneNum1 = this.getRandomNumber(100, 900);
+    const phoneNum2 = this.getRandomNumber(1000, 9000);
+    const phone = `${phoneCode}-${phoneNum1}-${phoneNum2}`;
+    return phone;
+  }
+
+  private static getRandomGender(): string {
+    return this.getRandomItem(this.genders);
+  }
+
+  private static getRandomNameLast(): string {
+    return this.getRandomItem(this.lastNames);
+  }
+
+  private static getRandomNameFirst(gender: string): string {
+    if (gender === 'male') {
+      return this.getRandomItem(this.maleNames);
+    }
+
+    return this.getRandomItem(this.femaleNames);
+  }
+
+  private static getRandomCity(country: string): string {
+    if (country === 'Canada') {
+      return this.getRandomItem(this.citiesCA);
+    } if (country === 'France') {
+      return this.getRandomItem(this.citiesFR);
+    } if (country === 'Poland') {
+      return this.getRandomItem(this.citiesPL);
+    } if (country === 'USA') {
+      return this.getRandomItem(this.citiesUS);
+    } if (country === 'Japan') {
+      return this.getRandomItem(this.citiesJP);
+    } if (country === 'Germany') {
+      return this.getRandomItem(this.citiesGR);
+    } // if (country === 'United Kingdom')
+    return this.getRandomItem(this.citiesUK);
+  }
+
+  private static getRandomStreet(): string {
+    const num = Math.round(this.getRandomNumber(100, 300)).toString();
+    const road = this.getRandomItem(this.roadNames);
+    const suffix = this.getRandomItem(this.roadSuffixes);
+    return `${num} ${road} ${suffix}`;
+  }
+
+  private static getBirthday(age: number): Date {
+    const today: Date = new Date();
+    const year: number = today.getFullYear() - age;
+    const month: number = this.getRandomNumber(0, 8);
+    const day: number = this.getRandomNumber(10, 27);
+    return new Date(year, month, day);
+  }
+
+  private static getPhotoMale(id: number): string {
+    return `https://static.infragistics.com/xplatform/images/people//GUY${this.pad(id, 2)}.png`;
+  }
+
+  private static getPhotoFemale(id: number): string {
+    return `https://static.infragistics.com/xplatform/images/people/GIRL${this.pad(id, 2)}.png`;
+  }
+
+  private static getGenderPhoto(gender: string): string {
+    return `https://static.infragistics.com/xplatform/images/genders/${gender}.png`;
+  }
+
+  private static getCountryFlag(country: string): string {
+    return `https://static.infragistics.com/xplatform/images/flags/${country}.png`;
+  }
+
+  private static pad(num: number, size: number) {
+    let s = `${num}`;
+    while (s.length < size) {
+      s = `0${s}`;
+    }
+    return s;
+  }
+}

package/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,216 @@
+import {
+  IgcDataGridModule,
+  IgcGridColumnOptionsModule,
+  IgcDataGridComponent,
+  IgcGridCellValueChangingEventArgs,
+  IgcTemplateCellUpdatingEventArgs,
+  IgcTemplateColumnComponent,
+  GridActivationMode,
+  GridSelectionMode,
+  EditModeType,
+} from 'igniteui-webcomponents-grids';
+import { ModuleManager } from 'igniteui-webcomponents-core';
+import { DataGridSharedData } from './DataGridSharedData';
+
+ModuleManager.register(
+  IgcDataGridModule,
+  IgcGridColumnOptionsModule,
+);
+
+export default class $(ClassName) extends HTMLElement {
+  data: any[] = DataGridSharedData.getEmployees();
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot!.innerHTML = `
+    <style>
+      :host {
+        height: 100%;
+        margin: 0px;
+        padding-left: 275px;
+        padding-right: 20px;
+        width: calc(100% - 300px);
+      }
+    </style>
+    <div class="container sample">
+    <div class="options horizontal">
+      <button id="commitClick" disabled="true">Commit</button>
+      <button id="undoClick" disabled="true">Undo</button>
+      <button id="redoClick" disabled="true">Redo</button>
+        <span class="options-label">Edit Mode: </span>
+        <select id="editModeDropBox" class="options-label">
+          <option>Cell</option>
+          <option>CellBatch</option>
+          <option>Row</option>
+          <option>None</option>
+        </select>
+      <label id="excel-style-editing" >Excel Style</label>
+      <span class="options-label">Edit Mode: </span>
+        <select id="editModeClickActionDropBox" class="options-label">
+          <option>SingleClick</option>
+          <option>DoubleClick</option>
+        </select>
+    </div>
+
+    <igc-data-grid
+        id="grid"
+        height="calc(100% - 3.5rem)"
+        width="100%"
+        activation-mode="Cell"
+        selection-mode="SingleCell"
+        default-column-min-width="125"
+        is-column-options-enabled="true"
+        auto-generate-columns="false"
+        edit-mode-click-action="SingleClick"
+        edit-mode="Cell">
+
+        <igc-text-column field="Name" width="*>150"></igc-text-column>
+        <igc-text-column field="Street" header-text="Street" width="*>155"></igc-text-column>
+        <igc-text-column field="City" header-text="City" width="*>125"></igc-text-column>
+        <igc-numeric-column field="Salary" header-text="Salary" positive-prefix="$" show-grouping-separator="true"></igc-numeric-column>
+
+        <igc-image-column field="Photo" header-text="Photo" content-opacity="1"
+        horizontal-alignment="center"  width="*>90"></igc-image-column>
+        <igc-date-time-column field="Birthday" header-text="Date of Birth" width="*>140"></igc-date-time-column>
+        <igc-template-column id="deleteRowColumn" field="Delete Row" header-text="Delete Row" width="*>140" is-column-options-enabled="false" ></igc-date-time-column>
+      </igc-data-grid>
+    </div>
+  `;
+  }
+
+  connectedCallback() {
+    const onCommitClick = () => {
+      grid.commitEdits();
+      commitButton.disabled = true;
+      undoButton.disabled = !grid.canUndo;
+    };
+
+    const onUndoClick = () => {
+      grid.undo();
+      undoButton.disabled = !grid.canUndo;
+      if (!grid.canUndo) {
+        commitButton.disabled = grid.canCommit;
+      } else {
+        commitButton.disabled = !grid.canCommit;
+      }
+
+      redoButton.disabled = !grid.canRedo;
+    };
+
+    const onRedoClick = () => {
+      grid.redo();
+
+      if (grid.editMode === EditModeType.Cell || grid.editMode === EditModeType.None) {
+        commitButton.disabled = !grid.canCommit;
+      }
+      if (grid.editMode === EditModeType.CellBatch || grid.editMode === EditModeType.Row) {
+        redoButton.disabled = !grid.canRedo;
+        undoButton.disabled = !grid.canUndo;
+        if (!grid.canUndo) {
+          commitButton.disabled = grid.canCommit;
+        } else {
+          commitButton.disabled = !grid.canCommit;
+        }
+      }
+    };
+
+    const onDeleteCellUpdating = (s: IgcTemplateColumnComponent, e: IgcTemplateCellUpdatingEventArgs) => {
+      const content = e.content as HTMLDivElement;
+      if (content.childElementCount === 0) {
+        const button = document.createElement('button') as HTMLButtonElement;
+        button.innerText = 'Delete';
+        button.onclick = onDeleteRowClick;
+        content.appendChild(button);
+      }
+
+      const button = content.children[0] as HTMLButtonElement;
+      button.disabled = e.cellInfo.isDeleted;
+      button.id = e.cellInfo.dataRow.toString();
+    };
+
+    const editModeChanged = (event: any) => {
+      grid.cancelEdits();
+      grid.editMode = event.target.value;
+      if (grid.editMode === EditModeType.None || grid.editMode === EditModeType.Cell) {
+        commitButton.disabled = true;
+        undoButton.disabled = !grid.canUndo;
+        redoButton.disabled = !grid.canRedo;
+      }
+    };
+
+    const editModeClickActionChanged = (event: any) => {
+      grid.editModeClickAction = event.target.value;
+    };
+
+    const onDeleteRowClick = (e: MouseEvent) => {
+      const button = e.srcElement as HTMLButtonElement;
+      const viewIndex = parseInt(button.id);
+      const rowItem = grid.actualDataSource.getItemAtIndex(viewIndex);
+
+      if (grid.editMode === EditModeType.CellBatch || grid.editMode === EditModeType.Row) {
+        grid.removeItem(rowItem);
+        commitButton.disabled = !grid.canCommit;
+        redoButton.disabled = !grid.canRedo;
+        undoButton.disabled = !grid.canUndo;
+      } else if (grid.editMode === EditModeType.Cell) {
+        //delete grid row immediately
+        grid.removeItem(rowItem);
+      }
+    };
+
+    const onCellValueChanging = (s: IgcDataGridComponent, e: IgcGridCellValueChangingEventArgs) => {
+      if (s.editMode === EditModeType.CellBatch || grid.editMode === EditModeType.Row) {
+        commitButton.disabled = !grid.canCommit;
+        undoButton.disabled = false;
+      } else if (grid.editMode === EditModeType.Cell || grid.editMode === EditModeType.None) {
+        commitButton.disabled = grid.canCommit;
+      }
+      if (e.newValue === '') {
+        commitButton.disabled = true;
+        s.setEditError(e.editID, 'Error, cell is empty');
+      }
+  };
+
+    const grid = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('grid') as IgcDataGridComponent;
+    if (grid !== null) {
+      grid.dataSource = this.data;
+      grid.activationMode = GridActivationMode.Cell;
+      grid.selectionMode = GridSelectionMode.SingleCell;
+      grid.editMode = EditModeType.Cell;
+      grid.cellValueChanging = onCellValueChanging;
+    }
+
+    const dropDown = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('editModeDropBox');
+    if (dropDown !== null) {
+      dropDown.onchange = editModeChanged;
+    }
+
+    const dropDown2 = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('editModeClickActionDropBox');
+    if (dropDown2 !== null) {
+      dropDown2.onchange = editModeClickActionChanged;
+    }
+
+    let commitButton = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('commitClick') as HTMLButtonElement;
+    if (commitButton !== null) {
+      commitButton.onclick = onCommitClick;
+    }
+
+    let undoButton = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('undoClick') as HTMLButtonElement;
+    if (undoButton !== null) {
+      undoButton.onclick = onUndoClick;
+    }
+
+    let redoButton = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('redoClick') as HTMLButtonElement;
+    if (redoButton !== null) {
+      redoButton.onclick = onRedoClick;
+    }
+
+    const deleteRowColumn = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('deleteRowColumn') as IgcTemplateColumnComponent;
+    if (deleteRowColumn !== null) {
+      deleteRowColumn.cellUpdating = onDeleteCellUpdating;
+    }
+  }
+}
+
+customElements.define('app-$(path)', $(ClassName));

package/templates/webcomponents/igc-ts/grid/grid-editing/index.d.ts

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

package/templates/webcomponents/igc-ts/grid/grid-editing/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForWebComponentsTemplate_1 = require("../../../../../lib/templates/IgniteUIForWebComponentsTemplate");
+class IgcGridEditingTemplate extends IgniteUIForWebComponentsTemplate_1.IgniteUIForWebComponentsTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Grid"];
+        this.controlGroup = "Grids & Lists";
+        this.listInComponentTemplates = true;
+        this.id = "grid-editing";
+        this.projectType = "igc-ts";
+        this.name = "Grid Editing";
+        this.description = "IgcGrid with editing enabled";
+    }
+    addClassDeclaration(mainModule, projPath, name, modulePath) {
+        // not applicable with custom module
+    }
+}
+module.exports = new IgcGridEditingTemplate();