diff --git a/src/modules/applications/components/applications-item-detail/applications-item-detail.component.ts b/src/modules/applications/components/applications-item-detail/applications-item-detail.component.ts index 0da6acde..240415fb 100644 --- a/src/modules/applications/components/applications-item-detail/applications-item-detail.component.ts +++ b/src/modules/applications/components/applications-item-detail/applications-item-detail.component.ts @@ -19,6 +19,7 @@ import { DialogTestComponent, SELECTED_APPLICATION$, LATEST_MODEL_VERSION_ID, + SELECTED_DEL_APPLICATION$, } from '@applications/components/dialogs'; import { tap } from 'rxjs/operators'; @@ -118,7 +119,10 @@ export class ApplicationsItemDetailComponent implements OnInit, OnDestroy { } public removeApplication() { - this.dialog.createDialog({component: DialogDeleteApplicationComponent}); + this.dialog.createDialog({ + component: DialogDeleteApplicationComponent, + providers: [{ provide: SELECTED_DEL_APPLICATION$, useValue: this.application$}], + }); } public isReady(status: string): boolean { diff --git a/src/modules/applications/components/dialogs/dialog-delete-application/dialog-delete-application.component.html b/src/modules/applications/components/dialogs/dialog-delete-application/dialog-delete-application.component.html index 39f9d652..e96941b3 100644 --- a/src/modules/applications/components/dialogs/dialog-delete-application/dialog-delete-application.component.html +++ b/src/modules/applications/components/dialogs/dialog-delete-application/dialog-delete-application.component.html @@ -1,8 +1,9 @@ - -
- Remove the application? +
+ Remove the application? +

{{ name }}

+
+ + +
-
- - -
\ No newline at end of file + diff --git a/src/modules/applications/components/dialogs/dialog-delete-application/dialog-delete-application.component.ts b/src/modules/applications/components/dialogs/dialog-delete-application/dialog-delete-application.component.ts index 66acc2a2..3dfedad9 100644 --- a/src/modules/applications/components/dialogs/dialog-delete-application/dialog-delete-application.component.ts +++ b/src/modules/applications/components/dialogs/dialog-delete-application/dialog-delete-application.component.ts @@ -1,11 +1,14 @@ -import { Component } from '@angular/core'; +import { Component, InjectionToken, Inject } from '@angular/core'; import { DeleteApplicationAction } from '@applications/actions/applications.actions'; -import * as fromApplication from '@applications/reducers'; import { HydroServingState } from '@core/reducers'; import { Store } from '@ngrx/store'; import { DialogService } from '@dialog/dialog.service'; import { IApplication } from '@shared/_index'; +import { Observable } from 'rxjs'; +import { take, tap } from 'rxjs/operators'; + +export const SELECTED_DEL_APPLICATION$ = new InjectionToken>('selectedApplication'); @Component({ templateUrl: './dialog-delete-application.component.html', @@ -13,12 +16,21 @@ import { IApplication } from '@shared/_index'; export class DialogDeleteApplicationComponent { private application: IApplication; + get name(): string { + return this.application.name; + } + constructor( public dialog: DialogService, - private store: Store + private store: Store, + @Inject(SELECTED_DEL_APPLICATION$) private application$: Observable ) { - this.store.select(fromApplication.getSelectedApplication) - .subscribe(app => this.application = app); + this.application$.pipe( + take(1), + tap(application => { + this.application = application; + }) + ).subscribe(); } public onDelete() { diff --git a/src/modules/dialog/component/dialog.component.scss b/src/modules/dialog/component/dialog.component.scss index 05c25466..29e7ad1f 100644 --- a/src/modules/dialog/component/dialog.component.scss +++ b/src/modules/dialog/component/dialog.component.scss @@ -41,9 +41,19 @@ display: inline-block; font-size: 24px; line-height: 32px; - margin-bottom: 46px; max-width: 300px; text-align: center; + margin-bottom: 4px; + } + } + + &__text { + &--is-alert { + font-weight: 900; + font-size: 20px; + color: #f3755e; + text-transform: uppercase; + text-align: center; } } diff --git a/src/modules/models/components/dialogs/dialog-delete-model/dialog-delete-model.component.html b/src/modules/models/components/dialogs/dialog-delete-model/dialog-delete-model.component.html index 607b5c5b..eac9448d 100644 --- a/src/modules/models/components/dialogs/dialog-delete-model/dialog-delete-model.component.html +++ b/src/modules/models/components/dialogs/dialog-delete-model/dialog-delete-model.component.html @@ -1,7 +1,8 @@ -
- Remove the model? +
+ Remove the model? +

{{ name }}

+
+ + +
-
- - -
\ No newline at end of file diff --git a/src/modules/models/components/dialogs/dialog-delete-model/dialog-delete-model.component.ts b/src/modules/models/components/dialogs/dialog-delete-model/dialog-delete-model.component.ts index 0a90727f..d6d07d71 100644 --- a/src/modules/models/components/dialogs/dialog-delete-model/dialog-delete-model.component.ts +++ b/src/modules/models/components/dialogs/dialog-delete-model/dialog-delete-model.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, InjectionToken, Inject } from '@angular/core'; import { HydroServingState } from '@core/reducers'; import { DeleteModelAction } from '@models/actions'; @@ -6,19 +6,30 @@ import * as fromModel from '@models/reducers'; import { Store } from '@ngrx/store'; import { DialogService } from '@dialog/dialog.service'; +import { IModel } from '@shared/_index'; +import { Observable } from 'rxjs'; +import { take, tap } from 'rxjs/operators'; + +export const SELECTED_MODEL$ = new InjectionToken>('selected model'); @Component({ selector: 'hydro-dialog-delete-model', templateUrl: './dialog-delete-model.component.html', }) export class DialogDeleteModelComponent { - private modelId: number; + private model: IModel; + get name(): string { + return this.model.name; + } constructor( public dialog: DialogService, - private store: Store + private store: Store, + @Inject(SELECTED_MODEL$) private model$: Observable ) { - this.store.select(fromModel.getSelectedModelId) - .subscribe(id => this.modelId = id); + this.model$.pipe( + take(1), + tap( model => this.model = model) + ).subscribe(); } public onClose(): void { @@ -26,7 +37,7 @@ export class DialogDeleteModelComponent { } public onDelete(): void { - this.store.dispatch(new DeleteModelAction(this.modelId)); + this.store.dispatch(new DeleteModelAction(this.model.id)); this.onClose(); } } diff --git a/src/modules/models/components/model-details/model-details.component.ts b/src/modules/models/components/model-details/model-details.component.ts index aab191ca..b4e2f7c4 100644 --- a/src/modules/models/components/model-details/model-details.component.ts +++ b/src/modules/models/components/model-details/model-details.component.ts @@ -8,7 +8,7 @@ import * as fromModels from '@models/reducers'; import { Observable } from 'rxjs'; import { DialogService } from '@dialog/dialog.service'; -import { DialogDeleteModelComponent } from '@models/components/dialogs'; +import { DialogDeleteModelComponent, SELECTED_MODEL$ } from '@models/components/dialogs'; import { switchMap, filter } from 'rxjs/operators'; @Component({ selector: 'hs-model-details', @@ -35,6 +35,7 @@ export class ModelDetailsComponent { public removeModel() { this.dialog.createDialog({ component: DialogDeleteModelComponent, + providers: [{ provide: SELECTED_MODEL$, useValue: this.model$} ], }); } }