Minor improvements

Cumulocity-IoT · Jul 9, 2024 · 8d76736 · 8d76736
1 parent 4ed902a
commit 8d76736
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 17 deletions.
diff --git a/tenant-option-management/add-option/add-option-modal.component.html b/tenant-option-management/add-option/add-option-modal.component.html
@@ -6,7 +6,7 @@ <h3 id="modal-title">
  </h3>
  </ng-container>
  <div class="modal-body">
- <c8y-form-group class="m-b-16" [hasError]="showConflictError">
+ <c8y-form-group class="m-16" [hasError]="showConflictError">
  <label for="categoryInput" translate>Category</label>
  <input
  type="text"
@@ -24,7 +24,7 @@ <h3 id="modal-title">
  </c8y-messages>
  </c8y-form-group>
 
- <c8y-form-group class="m-b-16" [hasError]="showConflictError">
+ <c8y-form-group class="m-16" [hasError]="showConflictError">
  <label for="keyInput" translate>Key</label>
  <input
  type="text"
@@ -42,7 +42,7 @@ <h3 id="modal-title">
  </c8y-messages>
  </c8y-form-group>
 
- <div class="form-group m-t-16" *ngIf="option.key?.length && option.category?.length">
+ <div class="form-group m-16" *ngIf="option.key?.length && option.category?.length">
  <div class="tabContainer">
  <!-- tabs -->
  <ul class="nav nav-tabs nav-tabsc8y m-b-8">
@@ -85,7 +85,7 @@ <h3 id="modal-title">
  </div>
  </div>
 
- <c8y-form-group class="m-b-16" *ngIf="!isEditing">
+ <c8y-form-group class="m-16" *ngIf="!isEditing">
  <button
  type="button"
  class="btn"

diff --git a/tenant-option-management/editor/jsoneditor.component.less b/tenant-option-management/editor/jsoneditor.component.less
@@ -18,6 +18,11 @@
  *
  * @authors Christof Strack
  */
+
+ div.jsoneditor-mode-code {
+ height: 440px;
+ }
+
  .jsoneditor-menu a.jsoneditor-poweredBy {
  display: none;
  }

diff --git a/tenant-option-management/editor/jsoneditor.component.ts b/tenant-option-management/editor/jsoneditor.component.ts
@@ -86,16 +86,21 @@ export class JsonEditorComponent implements ControlValueAccessor, OnInit, OnDest
  this.ngOnInit();
  }
  }
+
  @Input() debug = false;
 
  @Output()
  change: EventEmitter<any> = new EventEmitter<any>();
+
  @Output()
  onInit: EventEmitter<any> = new EventEmitter<any>();
+
  @Output()
  jsonChange: EventEmitter<any> = new EventEmitter<any>();
+
  @Output()
  textChange = new EventEmitter<string>();
+
  @Output()
  onPathChanged: EventEmitter<string> = new EventEmitter<string>();
 
@@ -409,5 +414,4 @@ export class JsonEditorComponent implements ControlValueAccessor, OnInit, OnDest
  return levels;
  }
 }
-
 export { JsonEditorOptions, JsonEditorMode, JsonEditorTreeNode, IError };
diff --git a/tenant-option-management/file-import-modal/file-import-modal.component.html b/tenant-option-management/file-import-modal/file-import-modal.component.html
@@ -6,7 +6,7 @@ <h3 id="modal-title">
  </h3>
  </ng-container>
  <div class="modal-body">
- <input type="file" (change)="onFileSelected($event)" accept="application/json" />
+ <input class="m-16" type="file" (change)="onFileSelected($event)" accept="application/json" />
 
  <c8y-data-grid
  *ngIf="rows.length > 0"

diff --git a/tenant-option-management/file-import-modal/file-import-modal.component.ts b/tenant-option-management/file-import-modal/file-import-modal.component.ts
@@ -64,20 +64,21 @@ export class FileImportModalComponent {
  name: 'category',
  path: 'category',
  filterable: true,
- dataType: ColumnDataType.TextShort,
+ dataType: ColumnDataType.TextLong,
  },
  {
  header: 'Key',
  name: 'key',
  path: 'key',
  filterable: true,
- dataType: ColumnDataType.TextShort,
+ dataType: ColumnDataType.TextLong,
  },
  {
  header: 'Status',
  name: 'status',
  path: 'status',
  filterable: true,
+ gridTrackSize: '9em',
  dataType: ColumnDataType.TextShort,
  },
  ];

diff --git a/tenant-option-management/import-option/import-option-modal.component.html b/tenant-option-management/import-option/import-option-modal.component.html
@@ -6,7 +6,7 @@ <h3 id="modal-title">
  </h3>
  </ng-container>
  <div class="modal-body">
- <c8y-form-group class="m-b-16">
+ <c8y-form-group class="m-16">
  <label for="categoryInput" translate>Category</label>
  <input
  type="text"
@@ -18,7 +18,7 @@ <h3 id="modal-title">
  <c8y-messages> </c8y-messages>
  </c8y-form-group>
 
- <c8y-form-group class="m-b-16">
+ <c8y-form-group class="m-16">
  <label for="keyInput" translate>Key</label>
  <input type="text" class="form-control" id="keyInput" [(ngModel)]="option.key" required />
  <c8y-messages> </c8y-messages>

diff --git a/tenant-option-management/tenant-option-management.component.html b/tenant-option-management/tenant-option-management.component.html
@@ -1,13 +1,14 @@
-<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()"
+ [disabled]="!rows?.length"
  >
- <i c8yIcon="download"></i> {{ 'Export' | translate }}
+ <i c8yIcon="upload"></i> {{ 'Export' | translate }}
  </button>
 </c8y-action-bar-item>
 
@@ -18,7 +19,7 @@
  class="btn btn-link"
  (click)="openImportFromFileModal()"
  >
- <i c8yIcon="upload"></i> {{ 'Import' | translate }}
+ <i c8yIcon="download"></i> {{ 'Import' | translate }}
  </button>
 </c8y-action-bar-item>
 
@@ -60,4 +61,13 @@
  }}</span>
  </ng-container>
  </c8y-column>
+
+ <c8y-ui-empty-state
+ [title]="'No Tenant Option created or imported yet.'"
+ [subtitle]="
+ 'You can add existing Tenant Options, import a JSON file from a previous export, or create a new Tenant Option.'
+ "
+ [horizontal]="true"
+ >
+ </c8y-ui-empty-state>
 </c8y-data-grid>
diff --git a/tenant-option-management/tenant-option-management.component.ts b/tenant-option-management/tenant-option-management.component.ts
@@ -106,7 +106,7 @@ export class TenantOptionManagementComponent {
  }
 
  openAddModal(row?: TenantOptionRow) {
- const modalRef = this.bsModalService.show(AddOptionModalComponent, {});
+ const modalRef = this.bsModalService.show(AddOptionModalComponent, { class: 'modal-lg' });
  modalRef.content.ids = this.rows.map((r) => r.id);
  if (row) {
  modalRef.content.setOption(row);
@@ -126,14 +126,14 @@ export class TenantOptionManagementComponent {
  }
 
  openImportFromFileModal() {
- const modalRef = this.bsModalService.show(FileImportModalComponent, {});
+ const modalRef = this.bsModalService.show(FileImportModalComponent, { class: 'modal-lg' });
  modalRef.content.closeSubject.pipe(take(1)).subscribe(() => {
  this.reload();
  });
  }
 
  openImportModal() {
- const modalRef = this.bsModalService.show(ImportOptionModalComponent, {});
+ const modalRef = this.bsModalService.show(ImportOptionModalComponent, { class: 'modal-lg' });
  modalRef.content.closeSubject.pipe(take(1)).subscribe((o) => {
  if (o) {
  this.rows.push({ id: `${o.category}-${o.key}`, ...o });
@@ -143,7 +143,7 @@ export class TenantOptionManagementComponent {
  }
 
  openExportModal() {
- const modalRef = this.bsModalService.show(ExportModalComponent, {});
+ const modalRef = this.bsModalService.show(ExportModalComponent, { class: 'modal-lg' });
  modalRef.content.closeSubject.pipe(take(1)).subscribe();
  }