Open-Harbor/ngx-data-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix bugs & mostly completed confirm command

Browse Source
This commit is contained in:
Mathias Beaulieu-Duncan
2024-09-03 04:27:07 -04:00
parent 79d474f9f5
commit 8fefc1a6df
13 changed files with 130 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
projects/core/ng-package.json
+2 -2
View File
@@ -1,7 +1,7 @@
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/core",
"dest": "../../dist/openharbor/core",
"lib": {
"entryFile": "src/public-api.ts"
}
}
}
projects/core/package.json
+3 -1
View File
@@ -1,6 +1,8 @@
{
"name": "@openharbor/ngx-data-ui-core",
"version": "18.0.0-alpha.1",
"version": "18.0.0-alpha.7",
"repository": "https://git.openharbor.io/Open-Harbor/ngx-data-ui",
"license": "MIT",
"peerDependencies": {
"@angular/common": "^18.2.0",
"@angular/core": "^18.2.0",
projects/core/src/lib/command/abstractions/command-directive-service.abstraction.ts
+8 -2
View File
@@ -7,6 +7,12 @@ export interface IConfirmOptions {
cancelText?: string;
}
export abstract class ICommandDirectiveService<TConfirmOptions extends IConfirmOptions = IConfirmOptions> {
abstract confirm(options: TConfirmOptions): Observable<boolean>;
export interface IConfirmEvents {
success: Observable<any>;
failure: Observable<any>;
loading: Observable<boolean>;
}
export interface ICommandDirectiveService<TConfirmOptions extends IConfirmOptions = IConfirmOptions> {
confirm(options?: TConfirmOptions & IConfirmEvents): Observable<boolean>;
}
projects/core/src/lib/command/directives/command.directive.ts
+23 -10
View File
@@ -1,28 +1,32 @@
import {Directive, EventEmitter, HostListener, Inject, Input, Optional, Output} from '@angular/core';
import {IDataSource} from '@poweredsoft/data';
import {Directive, EventEmitter, HostListener, Input, Output} from '@angular/core';
import {IDataSource} from '@openharbor/data';
import {finalize} from "rxjs";
import {ICommandDirectiveService, IConfirmOptions} from "../abstractions/command-directive-service.abstraction";
import {
ICommandDirectiveService,
IConfirmEvents,
IConfirmOptions
} from "../abstractions/command-directive-service.abstraction";
@Directive({
selector: '[duiCommand]',
standalone: true
})
export class CommandDirective<TModel extends {}, TConfirmOptions extends IConfirmOptions> {
@Input() confirm: boolean = false;
@Input() confirmOptions?: TConfirmOptions;
@Input() refreshOnSuccess: boolean = false;
@Input() refresh: boolean = true;
@Input() params: any;
@Input() dataSource!: IDataSource<TModel>;
@Input() command!: string;
@Input() model!: TModel;
@Input() model!: object;
@Input() service?: ICommandDirectiveService;
@Output() success: EventEmitter<any> = new EventEmitter<any>();
@Output() failure: EventEmitter<any> = new EventEmitter<any>();
@Output() loading: EventEmitter<boolean> = new EventEmitter<boolean>();
constructor(@Optional() private service?: ICommandDirectiveService<TConfirmOptions>) {
constructor() {
}
@@ -30,12 +34,21 @@ export class CommandDirective<TModel extends {}, TConfirmOptions extends IConfir
handleClick() {
if (this.confirm) {
if (!this.service) {
const error = new Error(`NullInjectorError: No implementation provider for CommandDirectiveService Abstraction!`);
const error = new Error(`No service provided to directive for CommandDirectiveService!`);
error.name = 'NullInjectorError';
throw error;
}
this.service.confirm(this.confirmOptions)
const options = {
...this.confirmOptions,
...{
success: this.success.asObservable(),
failure: this.failure.asObservable(),
loading: this.loading.asObservable()
}
} as TConfirmOptions & IConfirmEvents;
this.service.confirm(options)
.subscribe(result => {
if (result)
this.executeCommand();
@@ -61,7 +74,7 @@ export class CommandDirective<TModel extends {}, TConfirmOptions extends IConfir
.subscribe({
next: commandResult =>
{
if (this.refreshOnSuccess)
if (this.refresh)
this.dataSource.refresh();
this.success.emit(commandResult);
projects/md-ui/ng-package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/md-ui",
"dest": "../../dist/openharbor/md-ui",
"lib": {
"entryFile": "src/public-api.ts"
}
projects/md-ui/package.json
+3 -1
View File
@@ -1,6 +1,8 @@
{
"name": "@openharbor/ngx-data-ui-md",
"version": "18.0.0-alpha.1",
"version": "18.0.0-alpha.8",
"repository": "https://git.openharbor.io/Open-Harbor/ngx-data-ui",
"license": "MIT",
"peerDependencies": {
"@angular/common": "^18.0.0",
"@angular/core": "^18.0.0",
projects/md-ui/src/lib/command/services/command-directive.service.ts
+17 -8
View File
@@ -1,5 +1,5 @@
import {inject, Injectable} from '@angular/core';
import {ICommandDirectiveService, IConfirmOptions} from "@openharbor/ngx-data-ui-core";
import {ICommandDirectiveService, IConfirmEvents, IConfirmOptions} from "@openharbor/ngx-data-ui-core";
import {Observable} from 'rxjs';
import {MatDialog, MatDialogConfig} from "@angular/material/dialog";
import {
@@ -12,14 +12,13 @@ export interface IMDCommandDirectiveServiceOptions extends IConfirmOptions {
}
@Injectable({
providedIn: 'root',
useExisting: ICommandDirectiveService
providedIn: 'root'
})
export class CommandDirectiveService extends ICommandDirectiveService<IMDCommandDirectiveServiceOptions> {
export class CommandDirectiveService implements ICommandDirectiveService<IMDCommandDirectiveServiceOptions> {
readonly dialog = inject(MatDialog);
confirm(options: IMDCommandDirectiveServiceOptions): Observable<boolean> {
const defaultOptions: Partial<IConfirmOptions> = {
confirm(options: IMDCommandDirectiveServiceOptions & IConfirmEvents): Observable<boolean> {
const defaultOptions: Partial<IMDCommandDirectiveServiceOptions> = {
confirmText: 'Confirm',
cancelText: 'Cancel'
};
@@ -38,13 +37,23 @@ export class CommandDirectiveService extends ICommandDirectiveService<IMDCommand
message: finalOptions.message,
confirmText: finalOptions.confirmText,
cancelText: finalOptions.cancelText,
success: options.success,
loading: options.loading,
failure: options.failure
}
}
};
this.dialog.open<ConfirmDialogDefaultComponent, IConfirmDialogDefaultOptions>(ConfirmDialogDefaultComponent, dialogOptions);
const dialogRef = this.dialog.open<ConfirmDialogDefaultComponent, IConfirmDialogDefaultOptions>(ConfirmDialogDefaultComponent, dialogOptions);
const onConfirmSub = dialogRef.componentInstance.onConfirm
.subscribe(_ => {
subscriber.next(true);
});
subscriber.next(true);
dialogRef.afterClosed()
.subscribe(_ => {
onConfirmSub.unsubscribe();
});
});
}
}
projects/md-ui/src/lib/confirm-dialog/confirm-dialog-default/confirm-dialog-default.component.html
+8 -2
View File
@@ -3,6 +3,12 @@
{{ message }}
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button mat-dialog-close>{{ cancelText ?? 'Cancel' }}</button>
<button mat-button mat-dialog-close cdkFocusInitial>{{ confirmText ?? 'Confirm' }}</button>
<button mat-button mat-dialog-close cdkFocusInitial [disabled]="isLoading">{{ cancelText ?? 'Cancel' }}</button>
<button mat-button (click)="onConfirmed()" [disabled]="isLoading">
@if(isLoading) {
<mat-spinner diameter="18"></mat-spinner>
} @else {
{{ confirmText ?? 'Confirm' }}
}
</button>
</mat-dialog-actions>
projects/md-ui/src/lib/confirm-dialog/confirm-dialog-default/confirm-dialog-default.component.ts
+47 -5
View File
@@ -1,18 +1,24 @@
import {Component, inject, Input} from '@angular/core';
import {Component, EventEmitter, inject, OnDestroy, OnInit} from '@angular/core';
import {
MAT_DIALOG_DATA,
MatDialogActions,
MatDialogClose,
MatDialogContent,
MatDialogContent, MatDialogRef,
MatDialogTitle
} from "@angular/material/dialog";
import {MatButton} from "@angular/material/button";
import {AsyncPipe} from "@angular/common";
import {MatProgressSpinner} from "@angular/material/progress-spinner";
import {Observable, Subscription} from "rxjs";
export interface IConfirmDialogDefaultOptions {
title: string;
message: string;
confirmText?: string;
cancelText?: string;
success: Observable<any>;
failure: Observable<any>;
loading: Observable<boolean>;
}
@Component({
@@ -23,16 +29,52 @@ export interface IConfirmDialogDefaultOptions {
MatDialogActions,
MatButton,
MatDialogClose,
MatDialogTitle
MatDialogTitle,
AsyncPipe,
MatProgressSpinner
],
templateUrl: './confirm-dialog-default.component.html',
styleUrl: './confirm-dialog-default.component.css'
})
export class ConfirmDialogDefaultComponent {
readonly data = inject<IConfirmDialogDefaultOptions>(MAT_DIALOG_DATA)
export class ConfirmDialogDefaultComponent implements OnInit, OnDestroy {
readonly data = inject<IConfirmDialogDefaultOptions>(MAT_DIALOG_DATA);
readonly ref = inject(MatDialogRef<ConfirmDialogDefaultComponent>);
readonly title: string = this.data.title;
readonly message: string = this.data.message;
readonly confirmText?: string = this.data.confirmText;
readonly cancelText?: string = this.data.cancelText;
readonly $loading: Observable<boolean> = this.data.loading;
readonly success: Observable<any> = this.data.success;
isLoading = false;
// todo: error messaging?
private subscriptions: Subscription[] = [];
private _onConfirm = new EventEmitter<void>;
private _disableCloseOriginalValue?: boolean;
get onConfirm() {
return this._onConfirm.asObservable();
}
ngOnInit(): void {
this._disableCloseOriginalValue = this.ref.disableClose;
this.subscriptions.push(this.$loading.subscribe(isLoading => {
this.isLoading = isLoading;
this.ref.disableClose = isLoading ? true : this._disableCloseOriginalValue;
}));
this.subscriptions.push(this.success.subscribe(_ => {
this.ref.close();
}));
}
ngOnDestroy() {
for (let subscription of this.subscriptions)
subscription.unsubscribe();
}
onConfirmed() {
this._onConfirm.emit();
}
}
projects/md-ui/tsconfig.lib.json
+1 -6
View File
@@ -11,10 +11,5 @@
},
"exclude": [
"**/*.spec.ts"
],
/*"paths": {
"@openharbor/ngx-data-ui-core": [
"../core/src/public-api",
]
}*/
]
}