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
Signed by: mathias
GPG Key ID: 1C16CF05BAF9162D
13 changed files with 130 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package.json
View File

@ -3,8 +3,10 @@
"version": "0.1.0",
"scripts": {
"up-md": "ng serve md-demo",
"build-core": "ng build core --configuration production",
"publish-core": "npm publish dist/openharbor/core --access public --tag next",
"build-md": "ng build md-ui --configuration production",
"publish-md": "npm publish md-ui --access-public"
"publish-md": "npm publish dist/openharbor/md-ui --access public --tag next"
},
"private": true,
"dependencies": {
@ -18,7 +20,8 @@
"@angular/platform-browser": "^18.0.0",
"@angular/platform-browser-dynamic": "^18.0.0",
"@angular/router": "^18.0.0",
"@openharbor/data": "^1.0.0-alpha.1",
"@openharbor/data": "1.0.0-alpha.4",
"@openharbor/ngx-data-ui-core": "^18.0.0-alpha.1",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"

2
projects/core/ng-package.json
View File

@ -1,6 +1,6 @@
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/core",
"dest": "../../dist/openharbor/core",
"lib": {
"entryFile": "src/public-api.ts"
}

4
projects/core/package.json
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",

10
projects/core/src/lib/command/abstractions/command-directive-service.abstraction.ts
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>;
}

33
projects/core/src/lib/command/directives/command.directive.ts
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);

2
projects/md-ui/ng-package.json
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"
}

4
projects/md-ui/package.json
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",

25
projects/md-ui/src/lib/command/services/command-directive.service.ts
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();
});
});
}
}

10
projects/md-ui/src/lib/confirm-dialog/confirm-dialog-default/confirm-dialog-default.component.html
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>

52
projects/md-ui/src/lib/confirm-dialog/confirm-dialog-default/confirm-dialog-default.component.ts
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();
}
}

7
projects/md-ui/tsconfig.lib.json
View File

@ -11,10 +11,5 @@
},
"exclude": [
"**/*.spec.ts"
],
/*"paths": {
"@openharbor/ngx-data-ui-core": [
"../core/src/public-api",
]
}*/
]
}

2
tsconfig.json
View File

@ -12,7 +12,7 @@
"skipLibCheck": true,
"paths": {
"@openharbor/ngx-data-ui-core": [
"./projects/core/src/public-api"
"./dist/openharbor/core"
],
"@openharbor/ngx-data-ui-md": [
"./projects/md-ui/src/public-api"

15
yarn.lock
View File

@ -1996,10 +1996,17 @@
proc-log "^4.0.0"
which "^4.0.0"
"@openharbor/data@^1.0.0-alpha.1":
version "1.0.0-alpha.1"
resolved "https://registry.yarnpkg.com/@openharbor/data/-/data-1.0.0-alpha.1.tgz#69c2bf7a0e1bac6e54459d0123fd006dce86553a"
integrity sha512-MLcfYd8ZFLxcFi13z8PnRiKLnt2Hn1FbHiXts9KBix/R8FIOSeIRZwrOFIBSrYRqk+muBvif9IGYx+uxHQlk8Q==
"@openharbor/data@1.0.0-alpha.4":
version "1.0.0-alpha.4"
resolved "https://registry.yarnpkg.com/@openharbor/data/-/data-1.0.0-alpha.4.tgz#6ae6161c6fe3b504f32d7c65ab0899164560abaa"
integrity sha512-WdlCmHETvwId3HmsGAeCNEcsJ4Rtydq5x/poM62wdAgBZJgu/I2XQ33Q5rFbctZeii2Cx5KHxsq+n9BrgA2/8A==
dependencies:
tslib "^2.3.0"
"@openharbor/ngx-data-ui-core@^18.0.0-alpha.1":
version "18.0.0-alpha.1"
resolved "https://registry.yarnpkg.com/@openharbor/ngx-data-ui-core/-/ngx-data-ui-core-18.0.0-alpha.1.tgz#a75ca3e98d4a4081736091706efa94c358de3e58"
integrity sha512-b8ullfXgOqWKHFh8+XZxihg7cT6NMZx7it1Zfpa1LHeU1VJh6lXWhi+lXzOmZPxm856ZJ+yWRTOQaxwmIqRoUw==
dependencies:
tslib "^2.3.0"