diff --git a/analytics-ui/src/analytics-extension.module.ts b/analytics-ui/src/analytics-extension.module.ts index 8ff2d42..65d1083 100644 --- a/analytics-ui/src/analytics-extension.module.ts +++ b/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, diff --git a/analytics-ui/src/analytics/manage/extension-card.component.html b/analytics-ui/src/analytics/manage/extension-card.component.html index 0dcd589..acc0900 100644 --- a/analytics-ui/src/analytics/manage/extension-card.component.html +++ b/analytics-ui/src/analytics/manage/extension-card.component.html @@ -44,12 +44,6 @@ diff --git a/analytics-ui/src/analytics/manage/extension-card.component.ts b/analytics-ui/src/analytics/manage/extension-card.component.ts index 7291d14..27b6a72 100644 --- a/analytics-ui/src/analytics/manage/extension-card.component.ts +++ b/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( diff --git a/analytics-ui/src/analytics/manage/extension.component.ts b/analytics-ui/src/analytics/manage/extension.component.ts index 75045cd..ab42f74 100644 --- a/analytics-ui/src/analytics/manage/extension.component.ts +++ b/analytics-ui/src/analytics/manage/extension.component.ts @@ -16,14 +16,6 @@ export class AnalyticsExtensionComponent implements OnInit { reload$: BehaviorSubject = new BehaviorSubject(null); subscription: any; extensions$: Observable; - // extensions$: Observable = this.reload$.pipe( - // tap(() => (this.reloading = true)), - // switchMap(() => this.analyticsService.getWebExtensions()), - // tap(console.log), - // tap(() => (this.reloading = false)), - // shareReplay() - // ); - listClass: string; constructor( diff --git a/analytics-ui/src/wizard/add-extension-wizard.component.ts b/analytics-ui/src/component/add-extension-wizard.component.ts similarity index 100% rename from analytics-ui/src/wizard/add-extension-wizard.component.ts rename to analytics-ui/src/component/add-extension-wizard.component.ts diff --git a/analytics-ui/src/shared/c8y-switch-field.ts b/analytics-ui/src/component/c8y-switch-field.ts similarity index 100% rename from analytics-ui/src/shared/c8y-switch-field.ts rename to analytics-ui/src/component/c8y-switch-field.ts diff --git a/analytics-ui/src/component/confirmation-modal.component.html b/analytics-ui/src/component/confirmation-modal.component.html new file mode 100644 index 0000000..14f4cf6 --- /dev/null +++ b/analytics-ui/src/component/confirmation-modal.component.html @@ -0,0 +1,29 @@ + + + + {{ messageTranslated }} + diff --git a/analytics-ui/src/component/confirmation-modal.component.ts b/analytics-ui/src/component/confirmation-modal.component.ts new file mode 100644 index 0000000..a78f371 --- /dev/null +++ b/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 = 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(); + } +} diff --git a/analytics-ui/src/wizard/create-extension-modal.component.ts b/analytics-ui/src/component/create-extension-modal.component.ts similarity index 100% rename from analytics-ui/src/wizard/create-extension-modal.component.ts rename to analytics-ui/src/component/create-extension-modal.component.ts diff --git a/analytics-ui/src/sample/list/sample.component.ts b/analytics-ui/src/sample/list/sample.component.ts index f88f528..ce49154 100644 --- a/analytics-ui/src/sample/list/sample.component.ts +++ b/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";