Skip to content

Commit

Permalink
Implement missing grid samples (#377)
Browse files Browse the repository at this point in the history
  • Loading branch information
@agoldenbaum
agoldenbaum authored Mar 3, 2023
1 parent 78bb5e5 commit ed2a0fd
Show file tree
Hide file tree
Showing 41 changed files with 17,681 additions and 0 deletions.
11 changes: 11 additions & 0 deletions samples/grids/grid/column-data-types/.prettierrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"printWidth": 250,
"tabWidth": 4,
"useTabs": false,
"semi": true,
"singleQuote": false,
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"fluid": false
}
134 changes: 134 additions & 0 deletions samples/grids/grid/column-data-types/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />

<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />

</head>

<body>
<div id="root">

<div class="container sample">



<div class="container fill">
<igc-grid
auto-generate="false"
id="grid"
locale="EN"
allow-filtering="true"
filter-mode="excelStyleFilter"
display-density="compact"
name="grid"
id ="grid">
<igc-column
field="ProductName"
header="Prod. Name"
sortable="true"
editable="true"
resizable="true"
has-summary="true"
width="120px"
data-type="string">
</igc-column>
<igc-column
field="UnitPrice"
header="Unit Price"
width="120px"
sortable="true"
has-summary="true"
editable="true"
resizable="true"
data-type="number"
name="column1"
id ="column1">
</igc-column>
<igc-column
field="OrderFullDate"
header="Order Full Date"
width="300px"
sortable="true"
has-summary="true"
editable="true"
resizable="true"
data-type="dateTime"
name="column2"
id ="column2">
</igc-column>
<igc-column
field="OrderDate"
header="Order Date"
width="160px"
sortable="true"
has-summary="true"
editable="true"
resizable="true"
data-type="date"
name="column3"
id ="column3">
</igc-column>
<igc-column
field="OrderDateDelay"
header="Order Time"
width="120px"
sortable="true"
has-summary="true"
editable="true"
resizable="true"
data-type="time"
name="column4"
id ="column4">
</igc-column>
<igc-column
field="UnitsInStock"
header="Stock Value"
width="120px"
sortable="true"
has-summary="true"
editable="true"
resizable="true"
data-type="currency"
name="column5"
id ="column5">
</igc-column>
<igc-column
field="UnitsOnOrder"
header="% Change"
width="120px"
sortable="true"
has-summary="true"
editable="true"
resizable="true"
data-type="percent"
name="column6"
id ="column6">
</igc-column>
<igc-column
field="Discontinued"
header="Discontinued"
width="160px"
sortable="true"
has-summary="true"
editable="true"
resizable="true"
data-type="boolean">
</igc-column>
</igc-grid>
</div>
</div>

</div>

<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
62 changes: 62 additions & 0 deletions samples/grids/grid/column-data-types/package.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
{
"name": "example-ignite-ui-web-components",
"description": "This project provides example of using Ignite UI for Web Components",
"author": "Infragistics",
"version": "1.0.0",
"license": "",
"private": true,
"homepage": ".",
"main": "src/index.ts",
"scripts": {
"build": "npm run build:prod",
"build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
"build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
"serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=false --mode development --config ./webpack.config.js --hot --inline --progress --watch --open",
"serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --inline --progress --watch --open --content-base dist/",
"start": "npm run serve:dev",
"build:legacy": "npm run build:prod:legacy",
"build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details",
"build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
"serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --inline --progress --watch --open",
"serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --inline --progress --watch --open --content-base dist/",
"start:legacy": "npm run serve:dev:legacy"
},
"dependencies": {
"igniteui-webcomponents-core": "4.0.4",
"igniteui-webcomponents-grids": "4.0.4",
"igniteui-webcomponents-inputs": "4.0.4",
"igniteui-webcomponents-layouts": "4.0.4",
"@webcomponents/custom-elements": "^1.4.1",
"@webcomponents/template": "^1.4.2",
"babel-runtime": "^6.26.0",
"core-js": "^3.6.5",
"lit-html": "^2.2.0",
"tslib": "^2.0.0"
},
"devDependencies": {
"@babel/cli": "^7.8.3",
"@babel/core": "^7.8.3",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.10.0",
"@babel/preset-env": "^7.8.3",
"@babel/preset-typescript": "^7.8.3",
"@types/source-map": "^0.5.7",
"babel-loader": "^8.1.0",
"babel-plugin-transform-custom-element-classes": "^0.1.0",
"fork-ts-checker-webpack-plugin": "^4.1.5",
"tsconfig-paths-webpack-plugin": "^4.0.0",
"html-webpack-plugin": "^4.3.0",
"source-map": "^0.7.3",
"typescript": "^4.4.4",
"webpack": "^5.74.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0",
"parcel-bundler": "^1.6.1",
"css-loader": "^1.0.0",
"csv-loader": "^3.0.2",
"file-loader": "^4.2.0",
"style-loader": "^0.22.1",
"xml-loader": "^1.2.1",
"worker-loader": "^3.0.8"
}
}
7 changes: 7 additions & 0 deletions samples/grids/grid/column-data-types/sandbox.config.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"infiniteLoopProtection": false,
"hardReloadOnChange": false,
"view": "browser",
"template": "parcel"
}

173 changes: 173 additions & 0 deletions samples/grids/grid/column-data-types/src/InvoicesDataExtendedDates.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
//begin data
export class InvoicesDataExtendedDates extends Array<Invoice>
{
public constructor() {
super();
this.push(new Invoice(
{
ProductID : 1,
ProductName : "Chai",
SupplierID : 1,
CategoryID : 1,
QuantityPerUnit : "10 boxes x 20 bags",
UnitPrice: 18.0000,
UnitsInStock: 39,
UnitsOnOrder: 0.030,
ReorderLevel: 10,
Discontinued: false,
OrderDate: new Date("2012-02-12"),
OrderDateDelay: new Date("2012-02-12"),
OrderFullDate: new Date("2012-02-12")
}));
this.push(new Invoice(
{
ProductID: 2,
ProductName: "Chang",
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: "24 - 12 oz bottles",
UnitPrice: 19.0000,
UnitsInStock: 17,
UnitsOnOrder: 0.040,
ReorderLevel: 25,
Discontinued: true,
OrderDate: new Date("2003-03-17"),
OrderDateDelay: new Date("2003-03-17"),
OrderFullDate: new Date("2003-03-17")
}));
this.push(new Invoice(
{
ProductID: 3,
ProductName: "Aniseed Syrup",
SupplierID: 1,
CategoryID: 2,
QuantityPerUnit: "12 - 550 ml bottles",
UnitPrice: 10.0000,
UnitsInStock: 13,
UnitsOnOrder: 0.070,
ReorderLevel: 25,
Discontinued: false,
OrderDate: new Date("2006-03-17"),
OrderDateDelay: new Date("2006-03-17"),
OrderFullDate: new Date("2006-03-17")
}));
this.push(new Invoice(
{
ProductID: 4,
ProductName: "Chef Antons Cajun Seasoning",
SupplierID: 2,
CategoryID: 2,
QuantityPerUnit: "48 - 6 oz jars",
UnitPrice: 22.0000,
UnitsInStock: 53,
UnitsOnOrder: 0.030,
ReorderLevel: 0,
Discontinued: false,
OrderDate: new Date("2016-03-17"),
OrderDateDelay: new Date("2016-03-17"),
OrderFullDate: new Date("2016-03-17")
}));
this.push(new Invoice(
{
ProductID: 5,
ProductName: "Chef Antons Gumbo Mix",
SupplierID: 2,
CategoryID: 2,
QuantityPerUnit: "36 boxes",
UnitPrice: 21.3500,
UnitsInStock: 0,
UnitsOnOrder: 0.030,
ReorderLevel: 0,
Discontinued: true,
OrderDate: new Date("2011-11-11"),
OrderDateDelay: new Date("2011-11-11"),
OrderFullDate: new Date("2011-11-11")
}));
this.push(new Invoice(
{
ProductID: 6,
ProductName: "Grandmas Boysenberry Spread",
SupplierID: 3,
CategoryID: 2,
QuantityPerUnit: "12 - 8 oz jars",
UnitPrice: 25.0000,
UnitsInStock: 0,
UnitsOnOrder: 0.030,
ReorderLevel: 25,
Discontinued: false,
OrderDate: new Date("2017-12-17"),
OrderDateDelay: new Date("2017-12-17"),
OrderFullDate: new Date("2017-12-17")
}));
this.push(new Invoice(
{
ProductID: 7,
ProductName: "Uncle Bobs Organic Dried Pears",
SupplierID: 3,
CategoryID: 7,
QuantityPerUnit: "12 - 1 lb pkgs.",
UnitPrice: 30.0000,
UnitsInStock: 150,
UnitsOnOrder: 0.030,
ReorderLevel: 10,
Discontinued: false,
OrderDate: new Date("2016-07-17"),
OrderDateDelay: new Date("2016-07-17"),
OrderFullDate: new Date("2016-07-17")
}));
this.push(new Invoice(
{
ProductID: 8,
ProductName: "Northwoods Cranberry Sauce",
SupplierID: 3,
CategoryID: 2,
QuantityPerUnit: "12 - 12 oz jars",
UnitPrice: 40.0000,
UnitsInStock: 6,
UnitsOnOrder: 0.030,
ReorderLevel: 0,
Discontinued: false,
OrderDate: new Date("2018-01-17"),
OrderDateDelay: new Date("2018-01-17"),
OrderFullDate: new Date("2018-01-17")
}));
this.push(new Invoice(
{
ProductID: 9,
ProductName: "Mishi Kobe Niku",
SupplierID: 4,
CategoryID: 6,
QuantityPerUnit: "18 - 500 g pkgs.",
UnitPrice: 97.0000,
UnitsInStock: 29,
UnitsOnOrder: 0.030,
ReorderLevel: 0,
Discontinued: true,
OrderDate: new Date("2010-02-17"),
OrderDateDelay: new Date("2010-02-17"),
OrderFullDate: new Date("2010-02-17")
}));
}

}

export class Invoice
{
public constructor(init: Partial<Invoice>) {
Object.assign(this, init);
}
public ProductID: number;
public ProductName: string;
public SupplierID: number;
public CategoryID: number;
public QuantityPerUnit: string;
public UnitPrice: number;
public UnitsInStock: number;
public UnitsOnOrder: number;
public ReorderLevel: number;
public Discontinued: boolean;
public OrderDate: Date;
public OrderDateDelay: Date;
public OrderFullDate: Date;
}
//end data
Loading

0 comments on commit ed2a0fd

Please sign in to comment.