added confirmation dialogs

analytics-ui/src/analytics-extension.module.ts

@@ -12,7 +12,7 @@ import {
 import { BinaryFileDownloadModule } from "@c8y/ngx-components/binary-file-download";
 import { DefaultSubscriptionsModule } from "@c8y/ngx-components/default-subscriptions";
 import { BsDropdownModule } from "ngx-bootstrap/dropdown";
-import { AddExtensionWizardComponent } from "./wizard/add-extension-wizard.component";
+import { AddExtensionWizardComponent } from "./component/add-extension-wizard.component";
 import { AnalyticsExtensionCardComponent } from "./analytics/manage/extension-card.component";
 import { AnalyticsExtensionComponent } from "./analytics/manage/extension.component";
 import { AnalyticsService } from "./shared/analytics.service";
@@ -22,14 +22,15 @@ import { BlockGridComponent } from "./analytics/list/block.component";
 import { AnalyticsAddExtensionComponent } from "./analytics/manage/extension-add.component";
 import { SampleGridComponent } from "./sample/list/sample.component";
 import { HttpClientModule } from "@angular/common/http";
-import { CreateExtensionComponent } from "./wizard/create-extension-modal.component";
+import { CreateExtensionComponent } from "./component/create-extension-modal.component";
 import { EditorStepperComponent } from "./sample/editor/editor-stepper.component";
 import { EditorModalComponent } from "./sample/editor/editor-modal.component";
 import { RepositoriesModalComponent } from "./sample/editor/repositories-modal.component";
 import { RepositoryService } from "./shared/repository.service";
 import { FORMLY_CONFIG } from "@ngx-formly/core";
-import { C8YSwitchField } from "./shared/c8y-switch-field";
+import { C8YSwitchField } from "./component/c8y-switch-field";
 import { AnalyticsExtensionDetailsComponent } from "./analytics/manage/extension-details.component";
+import { ConfirmationModalComponent } from "./component/confirmation-modal.component";
 
 const routes: Route[] = [
   {
@@ -71,6 +72,7 @@ const routes: Route[] = [
     RepositoriesModalComponent,
     AnalyticsExtensionDetailsComponent,
     C8YSwitchField,
+    ConfirmationModalComponent
   ],
   entryComponents: [
     AnalyticsExtensionComponent,
@@ -82,7 +84,8 @@ const routes: Route[] = [
     EditorStepperComponent,
     EditorModalComponent,
     RepositoriesModalComponent,
-    AnalyticsExtensionDetailsComponent
+    AnalyticsExtensionDetailsComponent,
+    ConfirmationModalComponent
   ],
   providers: [
     AnalyticsService,

analytics-ui/src/analytics/manage/extension-card.component.html

@@ -44,12 +44,6 @@
         <i c8yIcon="ellipsis-v"></i>
       </button>
       <ul *dropdownMenu class="dropdown-menu dropdown-menu-right">
-        <li>
-          <button (click)="delete()" title="{{ 'Delete' }}">
-            <i c8yIcon="trash" class="m-r-4"></i>
-            {{ "Delete" | translate }}
-          </button>
-        </li>
         <li>
           <button (click)="detail()" title="{{ 'Details' }}">
             <i c8yIcon="info" class="m-r-4"></i>
@@ -62,6 +56,12 @@
             {{ "Download" | translate }}
           </button>
         </li>
+        <li>
+          <button (click)="delete()" title="{{ 'Delete' }}">
+            <i c8yIcon="trash" class="m-r-4"></i>
+            {{ "Delete" | translate }}
+          </button>
+        </li>
       </ul>
     </div>
   </div>

analytics-ui/src/analytics/manage/extension-card.component.ts

@@ -4,6 +4,8 @@ import { IManagedObject } from "@c8y/client";
 import { AlertService } from "@c8y/ngx-components";
 import { AnalyticsService } from "../../shared/analytics.service";
 import { saveAs } from "file-saver";
+import { ConfirmationModalComponent } from "../../component/confirmation-modal.component";
+import { BsModalRef, BsModalService } from "ngx-bootstrap/modal";
 
 @Component({
   selector: "extension-card",
@@ -17,7 +19,8 @@ export class AnalyticsExtensionCardComponent implements OnInit {
     private analyticsService: AnalyticsService,
     private alertService: AlertService,
     private router: Router,
-    private activatedRoute: ActivatedRoute
+    private activatedRoute: ActivatedRoute,
+    private bsModalService: BsModalService
   ) {}
 
   async ngOnInit() {}
@@ -31,15 +34,36 @@ export class AnalyticsExtensionCardComponent implements OnInit {
   }
 
   async delete() {
-    try {
-      await this.analyticsService.deleteExtension(this.app);
-      this.onAppDeleted.emit();
-    } catch (ex) {
-      if (ex) {
-        this.alertService.addServerFailure(ex);
+    const initialState = {
+      title: "Delete connector",
+      message: "You are about to delete a connector. Do you want to proceed?",
+      labels: {
+        ok: "Delete",
+        cancel: "Cancel",
+      },
+    };
+    const confirmDeletionModalRef: BsModalRef = this.bsModalService.show(
+      ConfirmationModalComponent,
+      { initialState }
+    );
+    confirmDeletionModalRef.content.closeSubject.subscribe(
+      async (result: boolean) => {
+        console.log("Confirmation delete result:", result);
+        if (!!result) {
+          try {
+            await this.analyticsService.deleteExtension(this.app);
+            this.onAppDeleted.emit();
+          } catch (ex) {
+            if (ex) {
+              this.alertService.addServerFailure(ex);
+            }
+          }
+        }
+        confirmDeletionModalRef.hide();
       }
-    }
+    );
   }
+
   async download() {
     try {
       let bin: ArrayBuffer = await this.analyticsService.downloadExtension(

analytics-ui/src/analytics/manage/extension.component.ts

@@ -16,14 +16,6 @@ export class AnalyticsExtensionComponent implements OnInit {
   reload$: BehaviorSubject<void> = new BehaviorSubject(null);
   subscription: any;
   extensions$: Observable<IManagedObject>;
-  // extensions$: Observable<IManagedObject> = this.reload$.pipe(
-  //   tap(() => (this.reloading = true)),
-  //   switchMap(() => this.analyticsService.getWebExtensions()),
-  //   tap(console.log),
-  //   tap(() => (this.reloading = false)),
-  //   shareReplay()
-  // );
-
   listClass: string;
 
   constructor(

analytics-ui/src/component/confirmation-modal.component.html

@@ -0,0 +1,29 @@
+<!--
+  ~ Copyright (c) 2022 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
+  ~ and/or its subsidiaries and/or its affiliates and/or their licensors.
+  ~
+  ~ SPDX-License-Identifier: Apache-2.0
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  ~
+  ~ @authors Christof Strack
+  -->
+
+<c8y-confirm-modal
+  [title]="title"
+  [status]="status"
+  [labels]="labels"
+  #modalRef
+>
+  <span>{{ messageTranslated }}</span>
+</c8y-confirm-modal>

analytics-ui/src/component/confirmation-modal.component.ts

@@ -0,0 +1,74 @@
+/*
+ * Copyright (c) 2022 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
+ * and/or its subsidiaries and/or its affiliates and/or their licensors.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @authors Christof Strack
+ */
+import { Component, Input, OnInit, ViewChild } from "@angular/core";
+import {
+  ConfirmModalComponent,
+  gettext,
+  ModalLabels,
+  Status,
+  StatusType,
+} from "@c8y/ngx-components";
+import { TranslateService } from "@ngx-translate/core";
+import { Subject } from "rxjs";
+
+@Component({
+  selector: "confirmation-modal",
+  templateUrl: "confirmation-modal.component.html",
+})
+export class ConfirmationModalComponent implements OnInit {
+  @Input() title: string;
+  @Input() message: string;
+  @ViewChild("modalRef", { static: false }) modalRef: ConfirmModalComponent;
+  messageTranslated: string;
+  closeSubject: Subject<boolean> = new Subject();
+  @Input() labels: ModalLabels = {
+    ok: gettext("Disconnect"),
+    cancel: gettext("Cancel"),
+  };
+  status: StatusType = Status.WARNING;
+
+  constructor(private translateService: TranslateService) {}
+
+  ngOnInit() {
+    this.messageTranslated = this.translateService.instant(
+      gettext(this.message)
+    );
+  }
+
+  async ngAfterViewInit() {
+    try {
+      await this.modalRef.result;
+      this.onClose();
+    } catch (error) {
+      this.onDismiss();
+    }
+  }
+
+  onClose() {
+    this.closeSubject.next(true);
+    this.closeSubject.complete();
+  }
+
+  onDismiss() {
+    this.closeSubject.next(false);
+    this.closeSubject.complete();
+  }
+}

analytics-ui/src/sample/list/sample.component.ts

@@ -31,7 +31,7 @@ import {
 import { AnalyticsService } from "../../shared/analytics.service";
 import { CEP_Block } from "../../shared/analytics.model";
 import { BsModalService } from "ngx-bootstrap/modal";
-import { CreateExtensionComponent } from "../../wizard/create-extension-modal.component";
+import { CreateExtensionComponent } from "../../component/create-extension-modal.component";
 import { EditorModalComponent } from "../editor/editor-modal.component";
 import { RepositoryService } from "../../shared/repository.service";
 import { BehaviorSubject, Observable, of } from "rxjs";