- add export action button

- create export component

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>

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();
+ }
+}

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

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

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,