v15.0.0, onpush strategy table, add error page (#26)

README.md

@@ -1,13 +1,23 @@
 # Angular Libraries
 
 -   [Core](/projects/ng-core)
+-   Configs
+    -   [Prettier Config](/projects/prettier-config)
+    -   [ESLint Config](/projects/eslint-config)
+    -   [CSpell Config](/projects/cspell-config)
 
 ## 💻 Development with locally built/runnable library
 
-1. Link the library
+1. [Link](https://docs.npmjs.com/cli/commands/npm-link) the library
 
     ```sh
-    npm link ../ng-libs/dist/ng-core
+    npm link ~/github/valitydev/ng-libs/projects/ng-core/dist
+    ```
+
+    [Alternative](https://www.npmjs.com/package/link):
+
+    ```sh
+    npx link ~/github/valitydev/ng-libs/projects/ng-core/dist
     ```
 
 1. Start Library

projects/ng-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vality/ng-core",
-  "version": "0.7.0",
+  "version": "15.0.0",
   "sideEffects": false,
   "exports": {
     ".": {

projects/ng-core/src/lib/components/date-range-field/date-range-field.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { NonNullableFormBuilder } from '@angular/forms';
+import { DateAdapter, MAT_DATE_LOCALE, NativeDateAdapter } from '@angular/material/core';
 import { coerceBoolean } from 'coerce-property';
 
 import { FormGroupSuperclass, createControlProviders } from '../../utils';
@@ -13,7 +14,10 @@ export interface DateRange {
     selector: 'v-date-range-field',
     templateUrl: './date-range-field.component.html',
     styleUrls: ['./date-range-field.component.scss'],
-    providers: createControlProviders(() => DateRangeFieldComponent),
+    providers: [
+        ...createControlProviders(() => DateRangeFieldComponent),
+        { provide: DateAdapter, useClass: NativeDateAdapter, deps: [MAT_DATE_LOCALE] },
+    ],
 })
 export class DateRangeFieldComponent extends FormGroupSuperclass<DateRange> {
     @Input() @coerceBoolean required: boolean | '' = false;

projects/ng-core/src/lib/components/error-page/error-page-routing.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { ErrorPageComponent } from './error-page.component';
+
+const ROUTES: Routes = [{ path: '', component: ErrorPageComponent }];
+
+@NgModule({
+    imports: [RouterModule.forChild(ROUTES)],
+    exports: [RouterModule],
+})
+export class ErrorPageRoutingModule {}

projects/ng-core/src/lib/components/error-page/error-page.component.html

@@ -0,0 +1,9 @@
+<div class="error">
+    <div class="mat-headline-3 title">
+        <mat-icon fontIcon="error"></mat-icon>
+        <div>Page not found</div>
+    </div>
+    <h2 class="mat-h1 mat-secondary-text">
+        This page doesn't exist<br />or you don't have enough rights to access it
+    </h2>
+</div>

projects/ng-core/src/lib/components/error-page/error-page.component.scss

@@ -0,0 +1,19 @@
+.error {
+    margin: 0 auto;
+    padding: 96px 24px;
+    text-align: center;
+
+    .title {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        gap: 16px;
+
+        mat-icon {
+            font-size: 40px;
+            width: auto;
+            height: auto;
+        }
+    }
+}

projects/ng-core/src/lib/components/error-page/error-page.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+    templateUrl: 'error-page.component.html',
+    styleUrls: ['error-page.component.scss'],
+})
+export class ErrorPageComponent {}

projects/ng-core/src/lib/components/error-page/error-page.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+
+import { ErrorPageRoutingModule } from './error-page-routing.module';
+import { ErrorPageComponent } from './error-page.component';
+
+@NgModule({
+    imports: [ErrorPageRoutingModule, MatIconModule],
+    declarations: [ErrorPageComponent],
+})
+export class ErrorPageModule {}

projects/ng-core/src/lib/components/error-page/index.ts

@@ -0,0 +1,2 @@
+export * from './error-page.module';
+export * from './error-page.component';

projects/ng-core/src/lib/components/filters/components/filters-dialog/filters-dialog.component.html

@@ -2,22 +2,16 @@
     <div
         [ngClass]="[
             'v-filters-dialog-cols-' +
-                (!dialogData.filters.otherFiltersTemplate.templateRef || dialogData.filters.merge
-                    ? (dialogData.filters.repeat$ | async)
-                    : 1),
+                (isShowMainFilters ? (dialogData.filters.repeat$ | async) : 1),
             'filters'
         ]"
     >
-        <ng-container
-            *ngIf="
-                !dialogData.filters.otherFiltersTemplate?.templateRef || dialogData.filters.merge
-            "
-        >
-            <ng-container *ngTemplateOutlet="dialogData.filters.filtersTemplate"></ng-container>
+        <ng-container *ngIf="isShowMainFilters">
+            <ng-container *ngTemplateOutlet="dialogData.filters.mainFiltersTemplate"></ng-container>
         </ng-container>
-        <ng-container *ngIf="dialogData.filters.otherFiltersTemplate?.templateRef">
+        <ng-container *ngIf="dialogData.filters.otherFiltersTemplate">
             <ng-container
-                *ngTemplateOutlet="dialogData.filters.otherFiltersTemplate.templateRef"
+                *ngTemplateOutlet="dialogData.filters.otherFiltersTemplate"
             ></ng-container>
         </ng-container>
     </div>

projects/ng-core/src/lib/components/filters/components/filters-dialog/filters-dialog.component.ts

@@ -11,4 +11,11 @@ import { FiltersComponent } from '../../filters.component';
 export class FiltersDialogComponent extends DialogSuperclass<
     FiltersDialogComponent,
     { filters: FiltersComponent }
-> {}
+> {
+    get isShowMainFilters() {
+        return (
+            !this.dialogData.filters.otherFiltersDirective?.templateRef ||
+            this.dialogData.filters.merge
+        );
+    }
+}

projects/ng-core/src/lib/components/filters/components/more-filters-button/more-filters-button.component.html

@@ -10,7 +10,7 @@
     </button>
     <button
         *ngIf="
-            filters.otherFiltersTemplate ||
+            filters.otherFiltersDirective ||
             ((filters.filtersCount$ | async) ?? 0) -
                 ((filters.displayedFiltersCount$ | async) ?? 0) >
                 0

projects/ng-core/src/lib/components/filters/filters.component.html

@@ -1,7 +1,5 @@
 <mat-card>
     <mat-card-content #content [ngClass]="['v-filters-cols-' + (repeat$ | async), 'filters']">
-        <ng-container
-            *ngTemplateOutlet="mainFiltersTemplate?.templateRef ?? filtersTemplate"
-        ></ng-container>
+        <ng-container *ngTemplateOutlet="mainFiltersTemplate"></ng-container>
     </mat-card-content>
 </mat-card>

projects/ng-core/src/lib/components/filters/filters.component.ts

@@ -30,14 +30,22 @@ export class FiltersComponent {
 
     @ContentChild(TemplateRef, { static: true }) filtersTemplate!: TemplateRef<unknown>;
     @ContentChild(OtherFiltersDirective, { static: true })
-    otherFiltersTemplate!: OtherFiltersDirective;
+    otherFiltersDirective!: OtherFiltersDirective;
     @ContentChild(MainFiltersDirective, { static: true })
-    mainFiltersTemplate!: OtherFiltersDirective;
+    mainFiltersDirective!: MainFiltersDirective;
 
     @ViewChild('content') set content(content: ElementRef<HTMLElement>) {
         this.filtersCount$.next(content?.nativeElement?.children?.length ?? 0);
     }
 
+    get mainFiltersTemplate() {
+        return this.mainFiltersDirective?.templateRef ?? this.filtersTemplate;
+    }
+
+    get otherFiltersTemplate() {
+        return this.otherFiltersDirective?.templateRef;
+    }
+
     repeat$ = this.breakpointObserver.observe(Object.values(Breakpoints)).pipe(
         map((b) => {
             if (b.breakpoints[Breakpoints.XLarge]) return 5;

projects/ng-core/src/lib/components/index.ts

@@ -7,3 +7,5 @@ export * from './date-range-field';
 export * from './number-range-field';
 export * from './list-field';
 export * from './input-field';
+export * from './tag';
+export * from './error-page';

projects/ng-core/src/lib/components/table/_table-theme.scss

@@ -3,22 +3,5 @@
 
 @mixin theme($theme) {
     .v-table-cell {
-        .tag {
-            &.color-pending {
-                background-color: get-color($theme, pending, darker);
-
-                * {
-                    color: #fff !important;
-                }
-            }
-
-            &.color-success {
-                background-color: get-color($theme, success, darker);
-
-                * {
-                    color: #fff !important;
-                }
-            }
-        }
     }
 }

projects/ng-core/src/lib/components/table/components/table-actions.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     selector: 'v-table-actions',
@@ -7,5 +7,6 @@ import { Component } from '@angular/core';
             <ng-content></ng-content>
         </v-actions>
     `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TableActionsComponent {}

projects/ng-core/src/lib/components/table/components/table-cell/table-cell.component.html

@@ -14,25 +14,23 @@
         class="value"
     >
         <ng-template [ngIf]="colDef.type === 'datetime'">
-            {{ value | date : 'dd.MM.yyyy HH:mm:ss' }}
+            {{ value | date : 'dd.MM.yyyy HH:mm:ss' : '+0000' }}
         </ng-template>
         <ng-template [ngIf]="colDef.type === 'tag'">
-            <ng-container
-                *ngIf="
-                    rowData | vSelect : colDef.typeParameters.value : value : [colDef] as tagValue
-                "
+            <v-tag *ngIf="colDef.typeParameters.tags[value] ?? {} as tag" [color]="tag.color">
+                {{
+                    tag.label ??
+                        (rowData | vSelect : colDef.typeParameters.label : value : [colDef])
+                }}
+            </v-tag>
+        </ng-template>
+        <ng-template [ngIf]="colDef.type === 'boolean'">
+            <v-tag
+                *ngIf="value === true || value === false"
+                [color]="value ? 'success' : 'neutral'"
             >
-                <mat-chip-option
-                    *ngIf="colDef.typeParameters.tags[tagValue] ?? {} as tag"
-                    [color]="tag.color"
-                    [highlighted]="!!tag.color"
-                    [ngClass]="['color-' + tag.color]"
-                    [selectable]="false"
-                    class="tag"
-                >
-                    {{ tag.label ?? value }}
-                </mat-chip-option>
-            </ng-container>
+                {{ value ? 'Yes' : 'No' }}
+            </v-tag>
         </ng-template>
         <ng-template [ngIf]="colDef.type === 'currency'">
             {{

projects/ng-core/src/lib/components/table/components/table-cell/table-cell.component.ts

@@ -1,11 +1,12 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
 
 import { ExtColumn } from '../../types/column';
 
 @Component({
     selector: 'v-table-cell',
     templateUrl: './table-cell.component.html',
     styleUrls: ['./table-cell.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TableCellComponent<T extends object> {
     @HostBinding('class.v-table-cell') hostClass: boolean = true;

projects/ng-core/src/lib/components/table/table.component.html

@@ -71,13 +71,13 @@
             [cellTemplate]="renderedCellTemplate"
             [columnHideable]="true"
             [columnPinnable]="true"
-            [columnResizable]="true"
             [columns]="renderedColumns"
             [columnSortable]="true"
             [data]="data || []"
             [disableRowClickSelection]="true"
             [emptyValuePlaceholder]="''"
             [loading]="!!progress"
+            [multiSelectionWithClick]="false"
             [pageIndex]="0"
             [pageSize]="size * displayedPages"
             [rowSelectable]="!!rowSelectable"
@@ -91,7 +91,6 @@
             [statusbarTemplate]="footerTpl"
             [toolbarTemplate]="summaryTpl"
             [trackBy]="trackByField ? trackByFieldFn : trackBy"
-            columnHideableChecked="hide"
             toolbarTitle="test"
             (rowSelectionChange)="select($event)"
             (sortChange)="sortChange.emit($event)"

projects/ng-core/src/lib/components/table/table.component.ts

@@ -1,4 +1,5 @@
 import {
+    ChangeDetectionStrategy,
     Component,
     ContentChild,
     EventEmitter,
@@ -9,7 +10,7 @@ import {
     ViewChild,
 } from '@angular/core';
 import { Sort, SortDirection } from '@angular/material/sort';
-import { MtxGridColumn, MtxGrid } from '@ng-matero/extensions/grid';
+import { MtxGrid, MtxGridColumn } from '@ng-matero/extensions/grid';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { coerceBoolean } from 'coerce-property';
 import { get } from 'lodash-es';
@@ -29,6 +30,7 @@ export type UpdateOptions = {
     selector: 'v-table',
     templateUrl: './table.component.html',
     styleUrls: ['./table.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TableComponent<T extends object> implements Progressable, OnChanges {
     @Input() data!: T[];

projects/ng-core/src/lib/components/table/table.module.ts

@@ -18,6 +18,7 @@ import { TableCellComponent } from './components/table-cell/table-cell.component
 import { TableComponent } from './table.component';
 import { PipesModule } from '../../pipes';
 import { ActionsModule } from '../actions';
+import { TagModule } from '../tag';
 
 @NgModule({
     imports: [
@@ -36,6 +37,7 @@ import { ActionsModule } from '../actions';
         MatChipsModule,
         PipesModule,
         NgLetModule,
+        TagModule,
     ],
     declarations: [TableComponent, TableActionsComponent, TableCellComponent],
     exports: [TableComponent, TableActionsComponent],