From e4e2817baecb24775181868b85705a48ce4cdc81 Mon Sep 17 00:00:00 2001
From: flange92 <91523547+flange92@users.noreply.github.com>
Date: Tue, 14 Nov 2023 17:10:43 +0100
Subject: [PATCH] - add export action button - create export component

---
 .../export-modal/export-modal.component.html  | 21 +++++++++++
 .../export-modal/export-modal.component.ts    | 35 +++++++++++++++++++
 .../tenant-option-management.component.html   | 13 ++++++-
 .../tenant-option-management.component.ts     |  9 +++++
 .../tenant-option-management.module.ts        |  2 ++
 5 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 tenant-option-management/export-modal/export-modal.component.html
 create mode 100644 tenant-option-management/export-modal/export-modal.component.ts

diff --git a/tenant-option-management/export-modal/export-modal.component.html b/tenant-option-management/export-modal/export-modal.component.html
new file mode 100644
index 0000000..4bcf33c
--- /dev/null
+++ b/tenant-option-management/export-modal/export-modal.component.html
@@ -0,0 +1,21 @@
+<c8y-modal [customFooter]="true" #modal>
+  <ng-container c8y-modal-title>
+    <h1><i class="c8y-icon c8y-icon-device"></i></h1>
+    <h3 id="modal-title">
+      {{ 'Export Tenant Option' | translate }}
+    </h3>
+  </ng-container>
+  <div class="modal-body">
+
+
+  </div>
+  <div class="modal-footer separator-top bg-level-0 sticky-bottom">
+    <button title="{{ 'Cancel' | translate }}" class="btn btn-default" type="button" (click)="close()">
+      {{ 'Cancel' | translate }}
+    </button>
+    <button title="{{ 'Export' | translate }}" class="btn btn-primary" type="button" (click)="export()"
+      [ngClass]="{ 'btn-pending': isLoading }">
+      {{ 'Export' | translate }}
+    </button>
+  </div>
+</c8y-modal>
\ No newline at end of file
diff --git a/tenant-option-management/export-modal/export-modal.component.ts b/tenant-option-management/export-modal/export-modal.component.ts
new file mode 100644
index 0000000..b665c4a
--- /dev/null
+++ b/tenant-option-management/export-modal/export-modal.component.ts
@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+import { ITenantOption } from '@c8y/client';
+import { AlertService } from '@c8y/ngx-components';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+import { Subject } from 'rxjs';
+import { TenantOptionManagementService } from '../tenant-option-management.service';
+import { TenantOptionRow } from '../../tenant-option-management/tenant-option-management.component';
+
+@Component({
+  templateUrl: './export-modal.component.html',
+})
+export class ExportModalComponent {
+  closeSubject: Subject<(ITenantOption & { encrypted: string }) | null> = new Subject();
+
+  rows: TenantOptionRow[];
+
+  isLoading = false;
+
+  constructor(
+    private tenantOptionMgmt: TenantOptionManagementService,
+    private alert: AlertService,
+    private modal: BsModalRef
+  ) { }
+
+  export() {
+    this.isLoading = true;
+    console.log(this.rows)
+    this.isLoading = false;
+  }
+
+  close() {
+    this.closeSubject.next(null);
+    this.modal.hide();
+  }
+}
diff --git a/tenant-option-management/tenant-option-management.component.html b/tenant-option-management/tenant-option-management.component.html
index 26e84cf..ebff4ad 100644
--- a/tenant-option-management/tenant-option-management.component.html
+++ b/tenant-option-management/tenant-option-management.component.html
@@ -1,4 +1,15 @@
-<c8y-title> {{ 'Tenant Option Management' | translate }} </c8y-title>
+<c8y-title> {{ 'Tenant Option Management ' | translate }} </c8y-title>
+
+<c8y-action-bar-item [placement]="'right'" [priority]="90">
+  <button
+    title="{{ 'Export' | translate }}"
+    type="button"
+    class="btn btn-link"
+    (click)="openExportModal()"
+  >
+    <i c8yIcon="upload"></i> {{ 'Export' | translate }}
+  </button>
+</c8y-action-bar-item>
 
 <c8y-action-bar-item [placement]="'right'" [priority]="100">
   <button
diff --git a/tenant-option-management/tenant-option-management.component.ts b/tenant-option-management/tenant-option-management.component.ts
index 136dc1b..f276dfa 100644
--- a/tenant-option-management/tenant-option-management.component.ts
+++ b/tenant-option-management/tenant-option-management.component.ts
@@ -17,6 +17,7 @@ import { AddOptionModalComponent } from './add-option/add-option-modal.component
 import { TenantOptionManagementService } from './tenant-option-management.service';
 import { TemplateComponent } from './template/template.component';
 import { ImportOptionModalComponent } from './import-option/import-option-modal.component';
+import { ExportModalComponent } from './export-modal/export-modal.component';
 
 export interface TenantOptionRow extends ITenantOption {
   id: string;
@@ -125,6 +126,14 @@ export class TenantOptionManagementComponent {
     });
   }
 
+  openExportModal() {
+    const modalRef = this.bsModalService.show(ExportModalComponent, {});
+    modalRef.content.rows = this.rows;
+    modalRef.content.closeSubject.pipe(take(1)).subscribe((o) => {
+      console.log(o)
+    });
+  }
+
   openTest() {
     this.bsModalService.show(TemplateComponent, {});
   }
diff --git a/tenant-option-management/tenant-option-management.module.ts b/tenant-option-management/tenant-option-management.module.ts
index 39b044e..3bb16b5 100644
--- a/tenant-option-management/tenant-option-management.module.ts
+++ b/tenant-option-management/tenant-option-management.module.ts
@@ -11,12 +11,14 @@ import { JsonEditorComponent } from './editor/jsoneditor.component';
 import { TemplateComponent } from './template/template.component';
 import { PanelWrapperComponent } from './template/panel-wrapper.component';
 import { ImportOptionModalComponent } from './import-option/import-option-modal.component';
+import { ExportModalComponent } from './export-modal/export-modal.component';
 
 @NgModule({
   declarations: [
     TenantOptionManagementComponent,
     AddOptionModalComponent,
     ImportOptionModalComponent,
+    ExportModalComponent,
     JsonEditorComponent,
     TemplateComponent,
     PanelWrapperComponent,