feat(grid): adding image column data type (#12321)

* feat(image column): initial feature commit

* feat(image column): creating a demo #12255

* themes(grid): add td image class

* test(image column): adding initial test

* feat(image col): turning off filtering by default

* fix(grid): wrong filter mode defaults now #12237

* chore(*): changelog update

* chore(*): this should fix tests

* fix(pinning and moving): restoring logic

* test(*): no longer need safe dispose ID

* chore(*): moving the removeChild before destroy

* chore(*): removing unused import

* test(*): calling element.remove() afterEach

* chore(*): addressing comments

* test(grid): clearing grid subscriptions after test

Co-authored-by: Simeon Simeonoff <[email protected]>
Co-authored-by: Hristo <[email protected]>
Co-authored-by: Stamen Stoychev <[email protected]>

Author: 4 people

CHANGELOG.md

@@ -26,6 +26,9 @@ All notable changes for each version of this project will be documented in this
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Behavioral Change** - When editing a row, `rowChangesCount` and `hiddenColumnsCount`would be displayed.
 
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`, `IgxPivotGrid`
+    - Adding `Image` column data type
+
 - `IgxCalendar`
 
     Added support for shift key + mouse click interactions.

angular.json

@@ -110,7 +110,7 @@
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
-              "src/styles.css"
+              "src/styles/styles.scss"
             ],
             "scripts": [],
             "assets": [

package.json

@@ -21,7 +21,7 @@
     "test:lib:azure:hgrid": "ng test igniteui-angular --watch=false --no-progress --karma-config=./projects/igniteui-angular/karma.azure.hierarchical-grid.conf.js",
     "test:lib:azure:pgrid": "ng test igniteui-angular --watch=false --no-progress --karma-config=./projects/igniteui-angular/karma.azure.pivot-grid.conf.js",
     "test:lib:azure:others": "ng test igniteui-angular --watch=false --no-progress --karma-config=./projects/igniteui-angular/karma.azure.non-grid.conf.js",
-    "test:lib:watch": "ng test igniteui-angular --karma-config=./projects/igniteui-angular/karma.watch.conf.js",
+    "test:lib:watch": "gulp buildStyle && ng test igniteui-angular --karma-config=./projects/igniteui-angular/karma.watch.conf.js",
     "test:schematics": "ts-node --project projects/igniteui-angular/migrations/tsconfig.json ./node_modules/jasmine/bin/jasmine.js ./projects/igniteui-angular/migrations/**/*.spec.ts ./projects/igniteui-angular/schematics/**/*.spec.ts",
     "test:styles": "ts-node --skip-project ./node_modules/jasmine/bin/jasmine.js ./projects/igniteui-angular/src/lib/core/styles/spec/tests.ts",
     "test:i18n": "ts-node --skip-project ./projects/igniteui-angular/src/lib/core/i18n/tests/tests.ts",

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -241,13 +241,18 @@
         }
 
         @include e(td, $m: bool) {
+            @extend %igx-grid__td--centered !optional;
             @extend %igx-grid__td--bool !optional;
         }
 
         @include e(td, $m: bool-true) {
             @extend %igx-grid__td--bool-true !optional;
         }
 
+        @include e(td, $m: image) {
+            @extend %igx-grid__td--centered !optional;
+        }
+
         @include e(tr, $mods: (selected, filtered)) {
             @extend %grid-row--selected--filtered !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -1123,9 +1123,11 @@
         bottom: 0;
     }
 
-    %igx-grid__td--bool {
+    %igx-grid__td--centered {
         justify-content: center;
+    }
 
+    %igx-grid__td--bool {
         igx-icon {
             width: var(--igx-icon-size, #{rem(18px)});
             height: var(--igx-icon-size, #{rem(18px)});

projects/igniteui-angular/src/lib/data-operations/data-util.ts

@@ -34,7 +34,8 @@ import { DefaultDataCloneStrategy, IDataCloneStrategy } from '../data-operations
     DateTime: 'dateTime',
     Time: 'time',
     Currency: 'currency',
-    Percent: 'percent'
+    Percent: 'percent',
+    Image: 'image'
 });
 export type DataType = (typeof DataType)[keyof typeof DataType];
 

projects/igniteui-angular/src/lib/grids/cell.component.html

@@ -8,7 +8,7 @@
     >
 </ng-template>
 <ng-template #defaultCell>
-    <div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
+    <div *ngIf="column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)"
         igxTextHighlight
         class="igx-grid__td-text"
         style="pointer-events: none;"
@@ -48,8 +48,8 @@
     <igx-icon
         *ngIf="column.dataType === 'boolean' && !this.formatter"
         [ngClass]="{ 'igx-icon--success': value, 'igx-icon--error': !value }"
-        >{{ value ? "check" : "close" }}</igx-icon
-    >
+        >{{ value ? "check" : "close" }}</igx-icon>
+    <img *ngIf="column.dataType === 'image'" [src]="value" [alt]="value | igxCellImageAlt" />
 </ng-template>
 <ng-template #addRowCell let-cell="cell">
     <div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
@@ -70,7 +70,7 @@
     }}</div>
 </ng-template>
 <ng-template #inlineEditor let-cell="cell">
-    <ng-container *ngIf="column.dataType === 'string'" [formGroup]="formGroup">
+    <ng-container *ngIf="column.dataType === 'string' || column.dataType === 'image'" [formGroup]="formGroup">
         <igx-input-group displayDensity="compact" >
             <input
                 igxInput
@@ -92,7 +92,7 @@
                 [igxFocus]="true"
                 [step]="step"
                 type="number"
-                [formControl]="formControl" 
+                [formControl]="formControl"
             />
         </igx-input-group>
     </ng-container>
@@ -137,7 +137,7 @@
                 [attr.aria-invalid]="isInvalid"
                 [formControl]="formControl"
                 igxInput
-                [igxDateTimeEditor]="column.defaultDateTimeFormat" 
+                [igxDateTimeEditor]="column.defaultDateTimeFormat"
                 [igxFocus]="true"
             />
         </igx-input-group>

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -893,7 +893,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
         }
     }
 
-    
+
 
     /**
      * @hidden @internal

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -1810,10 +1810,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         }
         if (!this.summaries) {
             switch (this.dataType) {
-                case GridColumnDataType.String:
-                case GridColumnDataType.Boolean:
-                    this.summaries = IgxSummaryOperand;
-                    break;
                 case GridColumnDataType.Number:
                 case GridColumnDataType.Currency:
                 case GridColumnDataType.Percent:
@@ -1826,6 +1822,9 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
                 case GridColumnDataType.Time:
                     this.summaries = IgxTimeSummaryOperand;
                     break;
+
+                case GridColumnDataType.String:
+                case GridColumnDataType.Boolean:
                 default:
                     this.summaries = IgxSummaryOperand;
                     break;
@@ -1850,6 +1849,9 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
                 case GridColumnDataType.DateTime:
                     this.filters = IgxDateTimeFilteringOperand.instance();
                     break;
+                case GridColumnDataType.Image:
+                    this.filterable = false;
+                    break;
                 case GridColumnDataType.String:
                 default:
                     this.filters = IgxStringFilteringOperand.instance();

projects/igniteui-angular/src/lib/grids/common/grid-pipes.module.ts

@@ -18,6 +18,7 @@ import {
     IgxGridAddRowPipe,
     IgxGridRowClassesPipe,
     IgxGridRowStylesPipe,
+    IgxGridCellImageAltPipe,
 } from './pipes';
 export * from './pipes';
 
@@ -29,6 +30,7 @@ export * from './pipes';
         IgxGridTopLevelColumns,
         IgxGridCellStylesPipe,
         IgxGridCellStyleClassesPipe,
+        IgxGridCellImageAltPipe,
         IgxGridPaginatorOptionsPipe,
         IgxHasVisibleColumnsPipe,
         IgxGridRowPinningPipe,
@@ -48,6 +50,7 @@ export * from './pipes';
         IgxGridTopLevelColumns,
         IgxGridCellStylesPipe,
         IgxGridCellStyleClassesPipe,
+        IgxGridCellImageAltPipe,
         IgxGridPaginatorOptionsPipe,
         IgxHasVisibleColumnsPipe,
         IgxGridRowPinningPipe,