refactor(admin-ui): Create generic dialog() method

admin-ui/src/app/catalog/catalog.module.ts

@@ -12,7 +12,6 @@ import { AssetListComponent } from './components/asset-list/asset-list.component
 import { AssetPickerDialogComponent } from './components/asset-picker-dialog/asset-picker-dialog.component';
 import { CreateOptionGroupDialogComponent } from './components/create-option-group-dialog/create-option-group-dialog.component';
 import { CreateOptionGroupFormComponent } from './components/create-option-group-form/create-option-group-form.component';
-import { DeleteFacetValueDialogComponent } from './components/delete-facet-value-dialog/delete-facet-value-dialog.component';
 import { FacetDetailComponent } from './components/facet-detail/facet-detail.component';
 import { FacetListComponent } from './components/facet-list/facet-list.component';
 import { GenerateProductVariantsComponent } from './components/generate-product-variants/generate-product-variants.component';
@@ -58,14 +57,12 @@ import { ProductResolver } from './providers/routing/product-resolver';
         ProductCategoryDetailComponent,
         ProductCategoryTreeComponent,
         ProductCategoryTreeNodeComponent,
-        DeleteFacetValueDialogComponent,
     ],
     entryComponents: [
         AssetPickerDialogComponent,
         CreateOptionGroupDialogComponent,
         SelectOptionGroupDialogComponent,
         ApplyFacetDialogComponent,
-        DeleteFacetValueDialogComponent,
     ],
     providers: [ProductResolver, FacetResolver, ProductCategoryResolver],
 })

admin-ui/src/app/catalog/components/delete-facet-value-dialog/delete-facet-value-dialog.component.html

@@ -1,8 +0,0 @@
-<ng-template vdrDialogTitle>{{ 'catalog.delete-facet-value' | translate }}</ng-template>
-{{ message }}
-<ng-template vdrDialogButtons>
-    <button type="button" class="btn" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
-    <button type="submit" (click)="confirm()" class="btn btn-danger">
-        {{ 'common.delete' | translate }}
-    </button>
-</ng-template>

admin-ui/src/app/catalog/components/delete-facet-value-dialog/delete-facet-value-dialog.component.ts

@@ -1,22 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-
-import { Dialog } from '../../../shared/providers/modal/modal.service';
-
-@Component({
-    selector: 'vdr-delete-facet-value-dialog',
-    templateUrl: './delete-facet-value-dialog.component.html',
-    styleUrls: ['./delete-facet-value-dialog.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DeleteFacetValueDialogComponent implements Dialog<boolean> {
-    resolveWith: (result?: boolean) => void;
-    message: string;
-
-    confirm() {
-        this.resolveWith(true);
-    }
-
-    cancel() {
-        this.resolveWith();
-    }
-}

admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.ts

@@ -21,7 +21,6 @@ import { NotificationService } from '../../../core/providers/notification/notifi
 import { DataService } from '../../../data/providers/data.service';
 import { ServerConfigService } from '../../../data/server-config';
 import { ModalService } from '../../../shared/providers/modal/modal.service';
-import { DeleteFacetValueDialogComponent } from '../delete-facet-value-dialog/delete-facet-value-dialog.component';
 
 @Component({
     selector: 'vdr-facet-detail',
@@ -227,10 +226,13 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
 
     private showDeleteFacetValueModalAndDelete(facetValueId: string, message?: string) {
         return this.modalService
-            .fromComponent(DeleteFacetValueDialogComponent, {
-                locals: {
-                    message,
-                },
+            .dialog({
+                title: _('catalog.confirm-delete-facet-value'),
+                body: message,
+                buttons: [
+                    { type: 'seconday', label: _('common.cancel') },
+                    { type: 'danger', label: _('common.delete'), returnValue: true },
+                ],
             })
             .pipe(
                 switchMap(result => {

admin-ui/src/app/shared/components/confirm-navigation-dialog/confirm-navigation-dialog.component.html

@@ -1,12 +0,0 @@
-<ng-template vdrDialogTitle>{{ 'common.confirm-navigation' | translate }}</ng-template>
-
-{{ 'common.there-are-unsaved-changes' | translate }}
-
-<ng-template vdrDialogButtons>
-    <button type="button" (click)="confirm()" class="btn btn-warning">
-        {{ 'common.discard-changes' | translate }}
-    </button>
-    <button type="button" class="btn btn-primary" (click)="cancel()">
-        {{ 'common.cancel-navigation' | translate }}
-    </button>
-</ng-template>

admin-ui/src/app/shared/components/confirm-navigation-dialog/confirm-navigation-dialog.component.ts

@@ -1,21 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-
-import { Dialog } from '../../providers/modal/modal.service';
-
-@Component({
-    selector: 'vdr-confirm-navigation-dialog',
-    templateUrl: './confirm-navigation-dialog.component.html',
-    styleUrls: ['./confirm-navigation-dialog.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ConfirmNavigationDialogComponent implements Dialog<boolean> {
-    resolveWith: (result?: boolean) => void;
-
-    confirm() {
-        this.resolveWith(true);
-    }
-
-    cancel() {
-        this.resolveWith(false);
-    }
-}

admin-ui/src/app/shared/components/simple-dialog/simple-dialog.component.html

@@ -0,0 +1,14 @@
+<ng-template vdrDialogTitle>{{ title | translate }}</ng-template>
+{{ body | translate }}
+<ng-template vdrDialogButtons>
+    <ng-container *ngFor="let button of buttons">
+        <button
+            class="btn"
+            [class.btn-primary]="button.type === 'primary'"
+            [class.btn-danger]="button.type === 'danger'"
+            (click)="resolveWith(button.returnValue)"
+        >
+            {{ button.label | translate }}
+        </button>
+    </ng-container>
+</ng-template>

admin-ui/src/app/shared/components/simple-dialog/simple-dialog.component.ts

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+
+import { Dialog, DialogButtonConfig } from '../../providers/modal/modal.service';
+
+/**
+ * Used by ModalService.dialog() to host a generic configurable modal dialog.
+ */
+@Component({
+    selector: 'vdr-simple-dialog',
+    templateUrl: './simple-dialog.component.html',
+    styleUrls: ['./simple-dialog.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SimpleDialogComponent implements Dialog<any> {
+    resolveWith: (result?: any) => void;
+    title = '';
+    message = '';
+    buttons: Array<DialogButtonConfig<any>> = [];
+}

admin-ui/src/app/shared/providers/modal/modal.service.ts

@@ -5,6 +5,7 @@ import { map, mergeMap } from 'rxjs/operators';
 
 import { OverlayHostService } from '../../../core/providers/overlay-host/overlay-host.service';
 import { ModalDialogComponent } from '../../components/modal-dialog/modal-dialog.component';
+import { SimpleDialogComponent } from '../../components/simple-dialog/simple-dialog.component';
 
 /**
  * Any component intended to be used with the ModalService.fromComponent() method must implement
@@ -19,6 +20,21 @@ export interface Dialog<R = any> {
     resolveWith: (result?: R) => void;
 }
 
+export interface DialogButtonConfig<T> {
+    label: string;
+    type: 'seconday' | 'primary' | 'danger';
+    returnValue?: T;
+}
+
+/**
+ * Configures a generic modal dialog.
+ */
+export interface DialogConfig<T> {
+    title: string;
+    body?: string;
+    buttons: Array<DialogButtonConfig<T>>;
+}
+
 /**
  * Options to configure the behaviour of the modal.
  */
@@ -109,4 +125,13 @@ export class ModalService {
             }),
         );
     }
+
+    /**
+     * Displays a modal dialog with the provided title, body and buttons.
+     */
+    dialog<T>(config: DialogConfig<T>): Observable<T | undefined> {
+        return this.fromComponent(SimpleDialogComponent, {
+            locals: config,
+        });
+    }
 }

admin-ui/src/app/shared/providers/routing/can-deactivate-detail-guard.ts

@@ -2,9 +2,9 @@ import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { _ } from 'src/app/core/providers/i18n/mark-for-extraction';
 
 import { BaseDetailComponent } from '../../../common/base-detail.component';
-import { ConfirmNavigationDialogComponent } from '../../components/confirm-navigation-dialog/confirm-navigation-dialog.component';
 import { ModalService } from '../modal/modal.service';
 
 @Injectable()
@@ -19,7 +19,14 @@ export class CanDeactivateDetailGuard implements CanDeactivate<BaseDetailCompone
     ): boolean | Observable<boolean> {
         if (component.detailForm && component.detailForm.dirty) {
             return this.modalService
-                .fromComponent(ConfirmNavigationDialogComponent)
+                .dialog({
+                    title: _('common.confirm-navigation'),
+                    body: _('common.there-are-unsaved-changes'),
+                    buttons: [
+                        { type: 'danger', label: _('common.discard-changes'), returnValue: true },
+                        { type: 'primary', label: _('common.cancel-navigation'), returnValue: false },
+                    ],
+                })
                 .pipe(map(result => !!result));
         } else {
             return true;

admin-ui/src/app/shared/shared.module.ts

@@ -16,7 +16,6 @@ import { AdjustmentOperationInputComponent } from './components/adjustment-opera
 import { AffixedInputComponent } from './components/affixed-input/affixed-input.component';
 import { PercentageSuffixInputComponent } from './components/affixed-input/percentage-suffix-input.component';
 import { ChipComponent } from './components/chip/chip.component';
-import { ConfirmNavigationDialogComponent } from './components/confirm-navigation-dialog/confirm-navigation-dialog.component';
 import { CurrencyInputComponent } from './components/currency-input/currency-input.component';
 import { CustomFieldControlComponent } from './components/custom-field-control/custom-field-control.component';
 import { CustomerLabelComponent } from './components/customer-label/customer-label.component';
@@ -36,6 +35,7 @@ import { ModalDialogComponent } from './components/modal-dialog/modal-dialog.com
 import { PaginationControlsComponent } from './components/pagination-controls/pagination-controls.component';
 import { RichTextEditorComponent } from './components/rich-text-editor/rich-text-editor.component';
 import { SelectToggleComponent } from './components/select-toggle/select-toggle.component';
+import { SimpleDialogComponent } from './components/simple-dialog/simple-dialog.component';
 import { TableRowActionComponent } from './components/table-row-action/table-row-action.component';
 import { BackgroundColorFromDirective } from './directives/background-color-from.directive';
 import { CurrencyNamePipe } from './pipes/currency-name.pipe';
@@ -62,7 +62,6 @@ const DECLARATIONS = [
     AffixedInputComponent,
     BackgroundColorFromDirective,
     ChipComponent,
-    ConfirmNavigationDialogComponent,
     CurrencyInputComponent,
     CurrencyNamePipe,
     CustomerLabelComponent,
@@ -86,6 +85,7 @@ const DECLARATIONS = [
     SelectToggleComponent,
     LanguageSelectorComponent,
     RichTextEditorComponent,
+    SimpleDialogComponent,
 ];
 
 @NgModule({
@@ -100,7 +100,7 @@ const DECLARATIONS = [
         ModalService,
         CanDeactivateDetailGuard,
     ],
-    entryComponents: [ModalDialogComponent, ConfirmNavigationDialogComponent],
+    entryComponents: [ModalDialogComponent, SimpleDialogComponent],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class SharedModule {}

admin-ui/src/i18n-messages/en.json

@@ -28,13 +28,13 @@
     "add-facet-value": "Add facet value",
     "add-facets": "Add facets",
     "assets-selected-count": "{ count } assets selected",
+    "confirm-delete-facet-value": "Delete facet value?",
     "confirm-generate-product-variants": "Click 'Finish' to generate {count} product variants.",
     "create-group": "Create option group",
     "create-new-facet": "Create new facet",
     "create-new-option-group": "Create new option group",
     "create-new-product": "Create new product",
     "create-new-product-category": "Create new product category",
-    "delete-facet-value": "Delete FacetValue",
     "drop-files-to-upload": "Drop files to upload",
     "facet": "Facet",
     "facet-values": "Facet values",