-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #279 from Service-Soft/fix-unsaved-changes-guard-w…
…ith-dialogs fixed unsaved changes guard, refactored table and form
- Loading branch information
Showing
78 changed files
with
1,547 additions
and
1,186 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 1 addition & 3 deletions
4
projects/ngx-material-entity/src/components/confirm-dialog/confirm-dialog.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,8 @@ | ||
| .checkbox-wrapper { | ||
| min-height: 50px; | ||
| display: flex; | ||
|
|
||
| >mat-checkbox{ | ||
| align-self: center; | ||
| } | ||
| } | ||
| mat-dialog-actions { | ||
| justify-content: space-between; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
91 changes: 91 additions & 0 deletions
91
projects/ngx-material-entity/src/components/custom-table/custom-table-configuration.model.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import { defaultDynamicStyleClasses } from '../../functions/default-style-classes.function'; | ||
| import { defaultTrue } from '../../functions/default-true.function'; | ||
| import { getConfigValue } from '../../functions/get-config-value.function'; | ||
| import { NgxGlobalDefaultValues } from '../../global-configuration-values'; | ||
| import { DisplayColumn, DynamicStyleClasses } from '../table/table-data'; | ||
| import { defaultSearchFunction } from '../table/table-data.builder'; | ||
|
|
||
| /** | ||
| * Configuration for the custom table. | ||
| */ | ||
| export interface CustomTableConfiguration<T = unknown> { | ||
| /** | ||
| * Configuration for css classes that should be applied to table rows based on a condition. | ||
| * This could be used to eg. Set the background color to green when an item has the status completed etc. | ||
| * INFO: You need to use ng-deep or apply the styling in the styles.scss. | ||
| * @default () => [] | ||
| */ | ||
| dynamicRowStyleClasses?: DynamicStyleClasses<T>, | ||
| /** | ||
| * The columns to display inside the custom table. | ||
| */ | ||
| displayColumns: DisplayColumn<T>[], | ||
| /** | ||
| * Whether or not a loading spinner should be shown. | ||
| * Only works when you provide the "loading" input to the custom table. | ||
| * @default true | ||
| */ | ||
| displayLoadingSpinner?: boolean, | ||
| /** | ||
| * Whether or not the select column should be enabled. | ||
| * @default true | ||
| */ | ||
| withSelection: boolean, | ||
| /** | ||
| * A function that resolves a row value to a string that can be searched for. | ||
| * By default this uses a built in search filter. | ||
| */ | ||
| searchStringForRow?: (value: T) => string, | ||
| /** | ||
| * Whether or not the user is allowed to click on entries in the custom table. | ||
| * @default () => true | ||
| */ | ||
| allowClick?: (value: T) => boolean, | ||
| /** | ||
| * An error message to show when the table contains no entries. | ||
| * Also applies styling to the table. | ||
| */ | ||
| emptyErrorMessage?: string, | ||
| /** | ||
| * Resolves the given id for an entity. | ||
| * This is used for the referencesMany input, | ||
| * where you want to show values of the entity in the table rows and not the id. | ||
| */ | ||
| resolveToReferencedEntity?: (id: unknown) => unknown | ||
| } | ||
|
|
||
| /** | ||
| * Internal configuration for the custom table. | ||
| * Provides default values. | ||
| */ | ||
| export class InternalCustomTableConfiguration< | ||
| T = unknown | ||
| >implements CustomTableConfiguration<T> { | ||
| // eslint-disable-next-line jsdoc/require-jsdoc | ||
| dynamicRowStyleClasses: DynamicStyleClasses<T>; | ||
| // eslint-disable-next-line jsdoc/require-jsdoc | ||
| displayColumns: DisplayColumn<T>[]; | ||
| // eslint-disable-next-line jsdoc/require-jsdoc | ||
| displayLoadingSpinner: boolean; | ||
| // eslint-disable-next-line jsdoc/require-jsdoc | ||
| withSelection: boolean; | ||
| // eslint-disable-next-line jsdoc/require-jsdoc | ||
| searchStringForRow: (value: T) => string; | ||
| // eslint-disable-next-line jsdoc/require-jsdoc | ||
| allowClick: (value: T) => boolean; | ||
| // eslint-disable-next-line jsdoc/require-jsdoc | ||
| emptyErrorMessage: string; | ||
| // eslint-disable-next-line jsdoc/require-jsdoc | ||
| resolveToReferencedEntity?: (id: unknown) => unknown; | ||
|
|
||
| constructor(globalConfig: NgxGlobalDefaultValues, configuration: CustomTableConfiguration<T>) { | ||
| this.dynamicRowStyleClasses = configuration.dynamicRowStyleClasses ?? defaultDynamicStyleClasses; | ||
| this.displayColumns = configuration.displayColumns; | ||
| this.displayLoadingSpinner = configuration.displayLoadingSpinner ?? true; | ||
| this.withSelection = configuration.withSelection; | ||
| this.searchStringForRow = configuration.searchStringForRow ?? defaultSearchFunction; | ||
| this.allowClick = configuration.allowClick ?? defaultTrue; | ||
| this.emptyErrorMessage = getConfigValue(globalConfig.emptyArrayErrorMessage, configuration.emptyErrorMessage); | ||
| this.resolveToReferencedEntity = configuration.resolveToReferencedEntity; | ||
| } | ||
| } |
50 changes: 50 additions & 0 deletions
50
projects/ngx-material-entity/src/components/custom-table/custom-table.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| <!-- eslint-disable angular/no-call-expression --> | ||
| <mat-table matSort [dataSource]="dataSource" [class.table-with-error-slot]="shouldShowMissingError"> | ||
| <!-- select Column --> | ||
| <ng-container matColumnDef="select"> | ||
| <mat-header-cell *matHeaderCellDef> | ||
| <mat-checkbox [checked]="selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)" | ||
| [indeterminate]="selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)" | ||
| (change)="masterToggle($event)"> | ||
| </mat-checkbox> | ||
| </mat-header-cell> | ||
| <mat-cell *matCellDef="let value" [dynamicStyleClasses]="internalConfiguration.dynamicRowStyleClasses" [value]="value"> | ||
| <mat-checkbox [checked]="selection.isSelected(value)" | ||
| (click)="$event.stopPropagation()" | ||
| (change)="toggle(value, $event)"> | ||
| </mat-checkbox> | ||
| </mat-cell> | ||
| </ng-container> | ||
|
|
||
| @for (dCol of internalConfiguration.displayColumns; track $index) { | ||
| <ng-container [matColumnDef]="dCol.displayName"> | ||
| <mat-header-cell *matHeaderCellDef mat-sort-header> | ||
| {{dCol.displayName}} | ||
| </mat-header-cell> | ||
| <mat-cell *matCellDef="let value" [class.enabled]="!dCol.disableClick && internalConfiguration.allowClick(value)" | ||
| [dynamicStyleClasses]="internalConfiguration.dynamicRowStyleClasses" [value]="value" | ||
| (click)="clickCell(value, dCol)" | ||
| > | ||
| @if (dCol.Component) { | ||
| <display-column-value [entity]="value" [ComponentClass]="dCol.Component"></display-column-value> | ||
| } | ||
| @else { | ||
| {{getDisplayColumnValue(value, dCol)}} | ||
| } | ||
| </mat-cell> | ||
| </ng-container> | ||
| } | ||
|
|
||
| <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> | ||
| <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row> | ||
| </mat-table> | ||
|
|
||
| @if (internalConfiguration.displayLoadingSpinner && isLoading) { | ||
| <mat-spinner> | ||
| </mat-spinner> | ||
| } | ||
| @else if (shouldShowMissingError && !dataSource.data.length) { | ||
| <div class="table-error">{{internalConfiguration.emptyErrorMessage}}</div> | ||
| } | ||
|
|
||
| <mat-paginator [length]="dataSource.filteredData.length" [pageIndex]="0" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 50]"></mat-paginator> |
Oops, something went wrong.