@mozaic-ds/angular 0.22.0 → 0.23.0-beta.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 
 
+# [0.23.0-beta.0](https://github.com/adeo/mozaic-angular/compare/0.22.0...0.23.0-beta.0) (2023-08-02)
+
+
+### Features
+
+* **datatable:** WIP datatable ([5547619](https://github.com/adeo/mozaic-angular/commit/5547619d16eb96e28ed321549d40307cf4350869))
+
 # 0.22.0 (2023-06-28)
 
 

package/README.md

@@ -58,9 +58,11 @@ This repository contains the following elements:
 To run the documentation locally, you can do the following:
 
 1. Clone this repository
-2. Run `npm install` to install the **Node.js** dependencies, including Storybook
-3. Run `npm run storybook` to launch **Storybook** and activate hot-reloads for development
-4. Open [http://localhost:6006/](http://localhost:6006/) in your browser and start explore! :rocket:
+2. install node v16.x.x
+3. Run `npm install` to install the **Node.js** dependencies, including Storybook
+4. Run `npm run build` to build the application
+5. Run `npm run storybook` to launch **Storybook** and activate hot-reloads for development
+6. Open [http://localhost:6006/](http://localhost:6006/) in your browser and start explore! :rocket:
 
 ### Bugs and feature requests
 

package/angular.json

@@ -60,14 +60,6 @@
           },
           "defaultConfiguration": "production"
         },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "projects/kit/src/test.ts",
-            "tsConfig": "projects/kit/tsconfig.spec.json",
-            "karmaConfig": "projects/kit/karma.conf.js"
-          }
-        },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
@@ -108,6 +100,7 @@
   },
   "defaultProject": "kit",
   "cli": {
-    "defaultCollection": "@angular-eslint/schematics"
+    "defaultCollection": "@angular-eslint/schematics",
+    "analytics": false
   }
 }

package/jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  preset: 'jest-preset-angular',
+  rootDir: 'projects/kit',
+  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
+  reporters: ['default'],
+};

package/package.json

@@ -1,8 +1,21 @@
 {
   "name": "@mozaic-ds/angular",
-  "version": "0.22.0",
+  "version": "0.23.0-beta.0",
   "description": "Mozaic-angular is the AngularJS Mozaic DS implementation",
   "license": "MIT",
+  "exports": {
+    ".": {
+      "sass": "./_index.scss"
+    },
+    "./adeo": {
+      "types": "./adeo/index.d.ts",
+      "esm2020": "./adeo/esm2020/mozaic-ds-angular.mjs",
+      "es2020": "./adeo/fesm2020/mozaic-ds-angular.mjs",
+      "es2015": "./adeo/fesm2015/mozaic-ds-angular.mjs",
+      "node": "./adeo/fesm2015/mozaic-ds-angular.mjs",
+      "default": "./adeo/fesm2020/mozaic-ds-angular.mjs"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/adeo/mozaic-angular.git"
@@ -10,13 +23,13 @@
   "scripts": {
     "ng": "ng",
     "start": "ng run kit:storybook",
-    "build": "MOZAIC_PRESET='' npm run copy-icons && ng build && npm run remove-icons",
-    "build:adeo": "MOZAIC_PRESET=adeo ng run kit:build-adeo",
-    "create-icons-folder": "mkdir -p projects/kit/assets/moz-icons",
-    "copy-icons": "npm run create-icons-folder && cp node_modules/@mozaic-ds/icons/svg/** projects/kit/assets/moz-icons && cp node_modules/@mozaic-ds/icons/svg-color/** projects/kit/assets/moz-icons",
-    "remove-icons": "rm -rf projects/kit/assets/moz-icons",
+    "build": "cross-env MOZAIC_PRESET='' npm run copy-icons && ng build && npm run remove-icons",
+    "build:adeo": "cross-env MOZAIC_PRESET=adeo ng run kit:build-adeo",
+    "copy-icons": "npm run create-icons-folder && shx cp -R node_modules/@mozaic-ds/icons/svg/** projects/kit/assets/moz-icons && shx cp -R node_modules/@mozaic-ds/icons/svg-color/** projects/kit/assets/moz-icons",
+    "remove-icons": "shx rm -rf projects/kit/assets/moz-icons",
+    "create-icons-folder": "shx mkdir -p projects/kit/assets/moz-icons",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test",
+    "test": "jest",
     "prepare": "husky install",
     "pre-commit": "lint-staged",
     "lint": "ng lint",
@@ -25,7 +38,6 @@
     "build:storybook": "ng run kit:build-storybook",
     "release": "release-it",
     "release:beta": "release-it --preRelease=beta",
-    "prepublishOnly": "npm run build && npm run build:adeo ",
     "npm:publish": "npm publish --access public",
     "npm:publishBeta": "npm publish --tag beta --access public",
     "tokens:build": "mozaic-tokens-build"
@@ -48,7 +60,7 @@
     "@mozaic-ds/web-fonts": "^1.22.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.5.0",
-    "zone.js": "~0.11.8"
+    "zone.js": "^0.13.1"
   },
   "devDependencies": {
     "@angular-eslint/builder": "15.2.0",
@@ -56,25 +68,26 @@
     "@angular-eslint/eslint-plugin-template": "15.2.0",
     "@angular-eslint/schematics": "15.2.0",
     "@angular-eslint/template-parser": "15.2.0",
-    "@angular/cli": "~15.1.4",
+    "@angular/cli": "^15.2.9",
     "@angular/compiler-cli": "~15.2.9",
     "@angular/elements": "^15.2.9",
     "@babel/core": "^7.20.12",
     "@compodoc/compodoc": "^1.1.19",
-    "@release-it/conventional-changelog": "^5.1.1",
+    "@release-it/conventional-changelog": "^7.0.0",
     "@storybook/addon-actions": "^7.0.18",
     "@storybook/addon-essentials": "^7.0.18",
     "@storybook/addon-links": "^7.0.18",
     "@storybook/addon-styling": "^1.3.0",
     "@storybook/angular": "^7.0.18",
     "@storybook/cli": "7.1.0-alpha.32",
-    "@types/jasmine": "~4.3.1",
+    "@types/jest": "^29.5.2",
     "@types/node": "^18.13.0",
     "@typescript-eslint/eslint-plugin": "5.51.0",
     "@typescript-eslint/parser": "5.51.0",
     "@webcomponents/custom-elements": "^1.5.1",
     "babel-loader": "^9.1.2",
     "copyfiles": "^2.4.1",
+    "cross-env": "^7.0.3",
     "css-loader": "^6.8.1",
     "eslint": "^8.33.0",
     "eslint-config-airbnb-base": "^15.0.0",
@@ -84,12 +97,8 @@
     "eslint-plugin-rxjs": "^5.0.2",
     "eslint-plugin-storybook": "^0.6.12",
     "husky": "^8.0.3",
-    "jasmine-core": "~4.5.0",
-    "karma": "~6.4.1",
-    "karma-chrome-launcher": "~3.1.1",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.0.0",
+    "jest": "^29.6.0",
+    "jest-preset-angular": "^13.1.1",
     "lint-staged": "^13.1.1",
     "ng-packagr": "^15.1.1",
     "postcss": "^8.3.6",
@@ -98,10 +107,12 @@
     "prettier": "^2.8.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "release-it": "^15.11.0",
+    "release-it": "^16.1.3",
     "sass": "^1.63.4",
     "sass-loader": "^13.3.2",
+    "shx": "^0.3.4",
     "storybook": "^7.0.18",
+    "ts-jest": "^29.1.1",
     "typescript": "~4.9.5"
   }
 }

package/projects/kit/components/datatable/components/caption/moz-datatable-caption.component.html

@@ -0,0 +1,13 @@
+<div class="mc-datatable__header">
+  <div class="mc-datatable__topbar">
+    <div class="mc-datatable__topbar-edition">
+      <ng-content select="[edition]"></ng-content>
+    </div>
+    <div class="mc-datatable__topbar-actions">
+      <ng-content select="[actions]"></ng-content>
+    </div>
+  </div>
+  <div class="mc-datatable__filters" #parentRef *ngIf="showParent">
+    <ng-content select="[filters]"></ng-content>
+  </div>
+</div>

package/projects/kit/components/datatable/components/caption/moz-datatable-caption.component.ts

@@ -0,0 +1,31 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  ViewChild,
+} from '@angular/core';
+
+@Component({
+  selector: 'moz-datatable-caption',
+  templateUrl: './moz-datatable-caption.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MozDatatableCaptionComponent implements AfterViewInit {
+  @ViewChild('parentRef') parentRef?: ElementRef;
+
+  showParent: boolean = true;
+
+  constructor(private cdRef: ChangeDetectorRef) {}
+
+  ngAfterViewInit() {
+    if (
+      this.parentRef?.nativeElement.children &&
+      this.parentRef?.nativeElement.children.length === 0
+    ) {
+      this.showParent = false;
+    }
+    this.cdRef.detectChanges();
+  }
+}

package/projects/kit/components/datatable/components/content/moz-datatable-content-cell.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/projects/kit/components/datatable/components/content/moz-datatable-content-cell.component.ts

@@ -0,0 +1,17 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  Input,
+  TemplateRef,
+} from '@angular/core';
+
+@Component({
+  selector: 'moz-datatable-content-cell',
+  templateUrl: './moz-datatable-content-cell.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MozDatatableContentCellComponent {
+  @Input() public field?: string;
+  @ContentChild(TemplateRef) public templateRef!: TemplateRef<unknown>;
+}

package/projects/kit/components/datatable/components/footer/moz-datatable-footer.component.html

@@ -0,0 +1,34 @@
+<div class="mc-datatable__footer">
+  <div class="mc-datatable__select">
+    <label for="selectRows" class="mc-datatable__select-label">{{
+      footerSettings?.labels?.rowPerPage || 'Rows per page'
+    }}</label>
+    <select
+      moz-select
+      [(ngModel)]="selectedRowPerPage"
+      (change)="rowPerPageChangeEmitter.emit(selectedRowPerPage)"
+    >
+      <option
+        *ngFor="let value of footerSettings?.pagination?.rowPerPage?.options"
+        [ngValue]="value"
+      >
+        {{ value }}
+      </option>
+    </select>
+  </div>
+  <div class="mc-datatable__count">
+    <strong>{{ calculateCountStart() }}-{{ calculateCountEnd() }}</strong> /
+    <strong
+      >{{ footerSettings?.pagination?.totalItems }}
+      {{ footerSettings?.labels?.items || 'Items' }}</strong
+    >
+  </div>
+  <div class="mc-datatable__pagination">
+    <moz-pagination
+      [numberOfPages]="calculateNumberOfPage()"
+      [(ngModel)]="currentPage"
+      (ngModelChange)="pageChangeEmitter.emit(currentPage)"
+    >
+    </moz-pagination>
+  </div>
+</div>

package/projects/kit/components/datatable/components/footer/moz-datatable-footer.component.ts

@@ -0,0 +1,46 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { FooterSettings } from '../../model/footer-settings';
+
+@Component({
+  selector: 'moz-datatable-footer',
+  templateUrl: './moz-datatable-footer.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MozDatatableFooterComponent implements OnInit {
+  @Input() public footerSettings?: FooterSettings;
+  @Output() public rowPerPageChangeEmitter = new EventEmitter<number>();
+  @Output() public pageChangeEmitter = new EventEmitter<number>();
+
+  public selectedRowPerPage?: number;
+  public currentPage?: number;
+
+  ngOnInit(): void {
+    this.selectedRowPerPage = this.footerSettings?.pagination.rowPerPage.selected;
+    this.currentPage = this.footerSettings?.pagination.currentPage;
+  }
+
+  public calculateNumberOfPage(): number {
+    return Math.round(
+      (this.footerSettings?.pagination?.totalItems || 0) / (this.selectedRowPerPage || 0)
+    );
+  }
+
+  public calculateCountEnd(): number {
+    const count = (this.selectedRowPerPage || 0) * (this.currentPage || 0);
+    if (count > (this.footerSettings?.pagination.totalItems || 0)) {
+      return this.footerSettings?.pagination.totalItems || 0;
+    }
+    return count;
+  }
+
+  public calculateCountStart(): number {
+    return this.calculateCountEnd() - ((this.selectedRowPerPage || 0) - 1);
+  }
+}

package/projects/kit/components/datatable/components/header/moz-datatable-header-cell.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/projects/kit/components/datatable/components/header/moz-datatable-header-cell.component.ts

@@ -0,0 +1,17 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  Input,
+  TemplateRef,
+} from '@angular/core';
+
+@Component({
+  selector: 'moz-datatable-header-cell',
+  templateUrl: './moz-datatable-header-cell.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MozDatatableHeaderCellComponent {
+  @Input() public field?: string;
+  @ContentChild(TemplateRef) public templateRef!: TemplateRef<unknown>;
+}

package/projects/kit/components/datatable/index.ts

@@ -0,0 +1,6 @@
+export * from './moz-datatable.component';
+export * from './components/header/moz-datatable-header-cell.component';
+export * from './components/footer/moz-datatable-footer.component';
+export * from './components/content/moz-datatable-content-cell.component';
+export * from './components/caption/moz-datatable-caption.component';
+export * from './moz-datatable.module';

package/projects/kit/components/datatable/model/column-def.ts

@@ -0,0 +1,5 @@
+export interface ColumnDef {
+  field: string;
+  headerName: string;
+  sort?: string;
+}

package/projects/kit/components/datatable/model/datatable-settings.ts

@@ -0,0 +1,11 @@
+import { ColumnDef } from './column-def';
+import { RowData } from './row-data';
+
+export interface DatatableSettings {
+  activatePagination?: boolean;
+  activateCaption?: boolean;
+  columnDefs: ColumnDef[];
+  rowData: RowData[];
+  fixHeaderRow?: boolean;
+  datatableMaxHeight?: string;
+}

package/projects/kit/components/datatable/model/footer-settings.ts

@@ -0,0 +1,14 @@
+export interface FooterSettings {
+  pagination: {
+    totalItems: number;
+    itemsPerPage: number;
+    currentPage: number;
+    rowPerPage: { options: number[]; selected: number };
+  };
+  labels: {
+    rowPerPage?: string;
+    items?: string;
+    page?: string;
+    of?: string;
+  };
+}

package/projects/kit/components/datatable/model/row-data.ts

@@ -0,0 +1,3 @@
+export interface RowData {
+  [key: string]: Object;
+}

package/projects/kit/components/datatable/moz-datatable.component.html

@@ -0,0 +1,75 @@
+<div class="mc-datatable">
+  <ng-content select="moz-datatable-caption"></ng-content>
+
+  <div class="mc-datatable__container">
+    <div
+      class="mc-datatable__main"
+      [ngStyle]="{
+        'max-height': datatableSettings?.fixHeaderRow && datatableSettings?.datatableMaxHeight
+      }"
+    >
+      <table class="mc-datatable__table">
+        <thead [ngClass]="{ 'fix-header-row': datatableSettings?.fixHeaderRow }">
+          <tr>
+            <th *ngFor="let columnDef of datatableSettings?.columnDefs" class="moz-datatable__th">
+              <ng-container
+                *ngIf="getCustomHeader(columnDef.field) as customHeader; else defaultHeaderCell"
+              >
+                <ng-container
+                  *ngTemplateOutlet="
+                    customHeader;
+                    context: {
+                      $implicit: {
+                        content: columnDef
+                      }
+                    }
+                  "
+                ></ng-container>
+              </ng-container>
+              <ng-template #defaultHeaderCell>
+                {{ columnDef.headerName | uppercase }}
+              </ng-template>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            *ngFor="let row of datatableSettings?.rowData; index as i"
+            class="mc-datatable__row-parent"
+            (click)="rowClickEvent(row)"
+          >
+            <td *ngFor="let columnDef of datatableSettings?.columnDefs">
+              <ng-container
+                *ngIf="getCustomContent(columnDef.field) as customContent; else defaultContentCell"
+              >
+                <ng-container
+                  *ngTemplateOutlet="
+                    customContent;
+                    context: {
+                      $implicit: {
+                        row: row,
+                        index: i,
+                        columnDefs: datatableSettings?.columnDefs,
+                        content: row[columnDef.field]
+                      }
+                    }
+                  "
+                ></ng-container>
+              </ng-container>
+              <ng-template #defaultContentCell>
+                {{ row[columnDef.field] }}
+              </ng-template>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <moz-datatable-footer
+    *ngIf="datatableSettings?.activatePagination"
+    [footerSettings]="footerSettings"
+    (rowPerPageChangeEmitter)="rowPerPageChangeEvent($event)"
+    (pageChangeEmitter)="pageChangeEvent($event)"
+  ></moz-datatable-footer>
+</div>

package/projects/kit/components/datatable/moz-datatable.component.scss

@@ -0,0 +1,13 @@
+@import 'settings-tools/all-settings';
+@import '_c.datatable'; // mandatory
+@import '_c.datatable-tools'; // mandatory
+@import '_c.datatable-header'; // optional - import when using the DataTable with a header
+@import '_c.datatable-footer'; // optional -  import when using the DataTable with a footer
+@import '_c.datatable-subtable'; // optional - import when using the Expanded DataTable
+
+.fix-header-row {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  box-shadow: 0px 1px 5px 0px rgba(34, 32, 32, 0.2);
+}

package/projects/kit/components/datatable/moz-datatable.component.spec.ts

@@ -0,0 +1,123 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MozDatatableComponent } from './moz-datatable.component';
+import { MozDatatableContentCellComponent } from './components/content/moz-datatable-content-cell.component';
+import { MozDatatableFooterComponent } from './components/footer/moz-datatable-footer.component';
+import { MozDatatableCaptionComponent } from './components/caption/moz-datatable-caption.component';
+import { MozDatatableHeaderCellComponent } from './components/header/moz-datatable-header-cell.component';
+import { QueryList, TemplateRef } from '@angular/core';
+
+describe('MozDatatableComponent', () => {
+  let component: MozDatatableComponent;
+  let fixture: ComponentFixture<MozDatatableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        MozDatatableComponent,
+        MozDatatableContentCellComponent,
+        MozDatatableFooterComponent,
+        MozDatatableCaptionComponent,
+        MozDatatableHeaderCellComponent,
+      ],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MozDatatableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create the MozDatatableComponent', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should build custom header cells map on ngAfterContentInit', () => {
+    const headerCell1 = new MozDatatableHeaderCellComponent();
+    headerCell1.field = 'field1';
+    headerCell1.templateRef = {} as TemplateRef<any>;
+    const headerCell2 = new MozDatatableHeaderCellComponent();
+    headerCell2.field = 'field2';
+    headerCell2.templateRef = {} as TemplateRef<any>;
+
+    component.headerCellComponents = new QueryList<MozDatatableHeaderCellComponent>();
+    component.headerCellComponents.reset([headerCell1, headerCell2]);
+
+    component.ngAfterContentInit();
+
+    expect(component.customHeaderCellsMap.get('field1')).toBe(headerCell1.templateRef);
+    expect(component.customHeaderCellsMap.get('field2')).toBe(headerCell2.templateRef);
+  });
+
+  it('should build custom content cells map on ngAfterContentInit', () => {
+    const contentCell1 = new MozDatatableContentCellComponent();
+    contentCell1.field = 'field1';
+    contentCell1.templateRef = {} as TemplateRef<any>;
+    const contentCell2 = new MozDatatableContentCellComponent();
+    contentCell2.field = 'field2';
+    contentCell2.templateRef = {} as TemplateRef<any>;
+
+    component.contentCellComponents = new QueryList<MozDatatableContentCellComponent>();
+    component.contentCellComponents.reset([contentCell1, contentCell2]);
+
+    component.ngAfterContentInit();
+
+    expect(component.customContentCellsMap.get('field1')).toBe(contentCell1.templateRef);
+    expect(component.customContentCellsMap.get('field2')).toBe(contentCell2.templateRef);
+  });
+
+  it('should return custom header templateRef', () => {
+    const headerCell = new MozDatatableHeaderCellComponent();
+    headerCell.field = 'field1';
+    headerCell.templateRef = {} as TemplateRef<any>;
+    component.customHeaderCellsMap.set('field1', headerCell.templateRef);
+
+    const result = component.getCustomHeader('field1');
+
+    expect(result).toBe(headerCell.templateRef);
+  });
+
+  it('should return custom content templateRef', () => {
+    const contentCell = new MozDatatableContentCellComponent();
+    contentCell.field = 'field1';
+    contentCell.templateRef = {} as TemplateRef<any>;
+    component.customContentCellsMap.set('field1', contentCell.templateRef);
+
+    const result = component.getCustomContent('field1');
+
+    expect(result).toBe(contentCell.templateRef);
+  });
+
+  it('should emit rowClicked event onRowClick', () => {
+    const rowData = [
+      {
+        productName: 'Perceuse-visseuse à Percussion',
+        productId: '#123456789',
+        discount: 0,
+        status: { label: 'Waiting for approval', type: 'warning' },
+        productLink: { label: 'Page link', link: '#' },
+      },
+    ];
+    jest.spyOn(component.rowClicked, 'emit');
+    component.rowClickEvent(rowData[0]);
+    expect(component.rowClicked.emit).toHaveBeenCalledWith(rowData[0]);
+  });
+
+  it('should build custom header cells map', () => {
+    const headerCell1 = new MozDatatableHeaderCellComponent();
+    headerCell1.field = 'field1';
+    headerCell1.templateRef = {} as TemplateRef<any>;
+    const headerCell2 = new MozDatatableHeaderCellComponent();
+    headerCell2.field = 'field2';
+    headerCell2.templateRef = {} as TemplateRef<any>;
+
+    component.headerCellComponents = new QueryList<MozDatatableHeaderCellComponent>();
+    component.headerCellComponents.reset([headerCell1, headerCell2]);
+
+    component.buildCustomHeaderMap();
+
+    expect(component.customHeaderCellsMap.size).toBe(2);
+    expect(component.customHeaderCellsMap.get('field1')).toBe(headerCell1.templateRef);
+    expect(component.customHeaderCellsMap.get('field2')).toBe(headerCell2.templateRef);
+  });
+});