delete alert text

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 {

src/modules/applications/components/dialogs/dialog-delete-application/dialog-delete-application.component.html

@@ -1,8 +1,9 @@
-
-<div class="dialog__content dialog__content--question dialog__content--center">
-    <span>Remove the application?</span>
+<div class="dialog__content dialog__content--center">
+    <span class=" dialog__content--question ">Remove the application?</span>
+    <p class="dialog__text dialog__text--is-alert">{{ name }}</p>
+    <div class="buttons-group">
+        <button class="button button--flat button--large dialog__button" (click)="dialog.closeDialog()" type="button">cancel</button>
+        <button class="button button--primary button--primary-remove button--large dialog__button" (click)="onDelete()">Remove</button>
+    </div>
 </div>
-<div class="buttons-group">
-    <button class="button button--flat button--large dialog__button" (click)="dialog.closeDialog()" type="button">cancel</button>
-    <button class="button button--primary button--primary-remove button--large dialog__button" (click)="onDelete()">Remove</button>
-</div>
+

src/modules/applications/components/dialogs/dialog-delete-application/dialog-delete-application.component.ts

@@ -1,24 +1,36 @@
-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<Observable<IApplication>>('selectedApplication');
 
 @Component({
     templateUrl: './dialog-delete-application.component.html',
 })
 export class DialogDeleteApplicationComponent {
     private application: IApplication;
 
+    get name(): string {
+        return this.application.name;
+    }
+
     constructor(
         public dialog: DialogService,
-        private store: Store<HydroServingState>
+        private store: Store<HydroServingState>,
+        @Inject(SELECTED_DEL_APPLICATION$) private application$: Observable<IApplication>
     ) {
-        this.store.select(fromApplication.getSelectedApplication)
-            .subscribe(app => this.application = app);
+        this.application$.pipe(
+            take(1),
+            tap(application => {
+                this.application = application;
+            })
+        ).subscribe();
     }
 
     public onDelete() {

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;
         }
     }
 

src/modules/models/components/dialogs/dialog-delete-model/dialog-delete-model.component.html

@@ -1,7 +1,8 @@
-<div class="dialog__content dialog__content--question">
-    <span class="">Remove the model?</span>
+<div class="dialog__content">
+    <span class="dialog__content--question">Remove the model?</span>
+    <p class="dialog__text dialog__text--is-alert">{{ name }}</p>
+    <div class="dialog__buttons">
+        <button class="button button--flat button--large dialog__button" (click)="onClose()" type="button">cancel</button>
+        <button class="button button--primary button--primary-remove button--large dialog__button" (click)="onDelete()">Remove</button>
+    </div>
 </div>
-<div class="dialog__buttons">
-    <button class="button button--flat button--large dialog__button" (click)="onClose()" type="button">cancel</button>
-    <button class="button button--primary button--primary-remove button--large dialog__button" (click)="onDelete()">Remove</button>
-</div>

src/modules/models/components/dialogs/dialog-delete-model/dialog-delete-model.component.ts

@@ -1,32 +1,43 @@
-import { Component } from '@angular/core';
+import { Component, InjectionToken, Inject } from '@angular/core';
 
 import { HydroServingState } from '@core/reducers';
 import { DeleteModelAction } from '@models/actions';
 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<Observable<IModel>>('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<HydroServingState>
+        private store: Store<HydroServingState>,
+        @Inject(SELECTED_MODEL$) private model$: Observable<IModel>
     ) {
-        this.store.select(fromModel.getSelectedModelId)
-            .subscribe(id => this.modelId = id);
+        this.model$.pipe(
+            take(1),
+            tap( model => this.model = model)
+        ).subscribe();
     }
 
     public onClose(): void {
         this.dialog.closeDialog();
     }
 
     public onDelete(): void {
-        this.store.dispatch(new DeleteModelAction(this.modelId));
+        this.store.dispatch(new DeleteModelAction(this.model.id));
         this.onClose();
     }
 }

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$} ],
         });
     }
 }