PR fixes

Author: fcv-iteratorIt

src/app/applications/datatarget/datatarget-detail/datatarget-detail-tabs-common.ts

@@ -15,10 +15,7 @@ import { NavTab } from "@shared/types/nav-tabs.type";
 import { Subscription } from "rxjs";
 
 export abstract class DatatargetDetailTabsCommon implements DatatargetDetail {
-  protected abstract getDetailsLink(): string;
-
   faExclamationTriangle = faExclamationTriangle;
-
   logLink: "datatarget-log" = "datatarget-log";
   testConnectionLink: "datatarget-test-connection" = "datatarget-test-connection";
   navTabs: NavTab[] = [
@@ -33,17 +30,15 @@ export abstract class DatatargetDetailTabsCommon implements DatatargetDetail {
       index: 1,
     },
     {
-      label: "Test forbindelse",
+      label: "DATATARGET.TEST_CONNECTION.TEST-CONNECTION",
       link: this.testConnectionLink,
       index: 2,
     },
   ];
-
   datatarget: Datatarget;
   backButton: BackButton = { label: "", routerLink: undefined };
   dropdownButton: DropdownButton;
   canEdit: boolean;
-
   private subscriptions: Subscription[] = [];
   private deleteDialogSubscription: Subscription;
 
@@ -85,16 +80,6 @@ export abstract class DatatargetDetailTabsCommon implements DatatargetDetail {
     this.canEdit = meService.hasAccessToTargetOrganization(OrganizationAccessScope.ApplicationWrite, undefined, appId);
   }
 
-  protected onDestroy(): void {
-    this.subscriptions?.forEach(s => s?.unsubscribe());
-    this.deleteDialogSubscription?.unsubscribe();
-  }
-
-  private getDatatarget = (id: number) =>
-    this.datatargetService.get(id).subscribe((dataTarget: Datatarget) => {
-      this.datatarget = dataTarget;
-    });
-
   onDeleteDatatarget() {
     this.deleteDialogSubscription?.unsubscribe();
     this.deleteDialogSubscription = this.deleteDialogService.showSimpleDialog().subscribe(response => {
@@ -112,4 +97,16 @@ export abstract class DatatargetDetailTabsCommon implements DatatargetDetail {
       );
     });
   }
+
+  protected abstract getDetailsLink(): string;
+
+  protected onDestroy(): void {
+    this.subscriptions?.forEach(s => s?.unsubscribe());
+    this.deleteDialogSubscription?.unsubscribe();
+  }
+
+  private getDatatarget = (id: number) =>
+    this.datatargetService.get(id).subscribe((dataTarget: Datatarget) => {
+      this.datatarget = dataTarget;
+    });
 }

src/app/applications/datatarget/datatarget-test-connection/datatarget-test-connection.component.html

@@ -41,42 +41,44 @@ <h3>{{ "DATATARGET.TEST_CONNECTION.TEST-CONNECTION" | translate }}</h3>
         </p>
       </div>
     </div>
-    <div class="col-md-6 d-flex align-items-stretch">
+    <div class="col-md-6 d-flex align-items-stretch min-height-400">
       <div class="jumbotron jumbotron--full-width">
         <h3>{{ "DATATARGET.TEST_CONNECTION.CHOSEN-DATA-PACKAGE" | translate }}</h3>
         <ngx-monaco-editor
           [(ngModel)]="payloadData"
           [ngModelOptions]="{ standalone: true }"
           [options]="editorJsonOutpuOptions"
-          style="height: 85%"
+          class="height-85"
         >
         </ngx-monaco-editor>
       </div>
     </div>
-    <div class="col-md-6 d-flex align-items-stretch">
+    <div class="col-md-6 d-flex align-items-stretch min-height-400">
       <div class="jumbotron jumbotron--full-width">
         <h3>{{ "DATATARGET.TEST_CONNECTION.SENT-DECODED-REQUEST" | translate }}</h3>
         <ngx-monaco-editor
           [(ngModel)]="decodedData"
           [ngModelOptions]="{ standalone: true }"
           [options]="editorJsonOutpuOptions"
+          class="height-85"
         >
         </ngx-monaco-editor>
       </div>
     </div>
-    <div class="col-md-6 d-flex align-items-stretch">
+    <div class="col-md-6 d-flex align-items-stretch min-height-400">
       <div class="jumbotron jumbotron--full-width">
         <h3>{{ "DATATARGET.TEST_CONNECTION.RECEIVED-RESPONSE" | translate }}</h3>
-        <div *ngIf="loading">
-          <app-loading-spinner></app-loading-spinner>
-        </div>
         <ngx-monaco-editor
           [(ngModel)]="testResponse"
           [ngModelOptions]="{ standalone: true }"
           [options]="editorJsonOutpuOptions"
+          class="height-85"
         >
         </ngx-monaco-editor>
       </div>
     </div>
+    <div *ngIf="loading">
+      <app-loading-spinner></app-loading-spinner>
+    </div>
   </div>
 </div>

src/app/applications/datatarget/datatarget-test-connection/datatarget-test-connection.component.scss

@@ -1,3 +1,7 @@
-.marginTop5 {
-  margin-top: 5px !important
+.height-85 {
+  height: 85%;
+}
+
+.min-height-400 {
+  min-height: 400px;
 }

src/app/applications/datatarget/datatarget-test-connection/datatarget-test-connection.component.ts

@@ -8,7 +8,7 @@ import { MatSelectChange } from "@angular/material/select";
 import { DatatargetService } from "@applications/datatarget/datatarget.service";
 import { Datatarget } from "@applications/datatarget/datatarget.model";
 import { DataTargetType } from "@shared/enums/datatarget-type";
-import { PayloadDecoder } from "@payload-decoder/payload-decoder.model";
+import { PayloadDecoderMinimal } from "@payload-decoder/payload-decoder.model";
 import { PayloadDecoderService } from "@payload-decoder/payload-decoder.service";
 import { PayloadDeviceDatatargetService } from "@payload-decoder/payload-device-datatarget.service";
 
@@ -28,7 +28,7 @@ export class DatatargetTestConnectionComponent implements OnInit, OnDestroy {
   };
 
   public iotDevices: IotDevice[];
-  public payloadDecoders: PayloadDecoder[];
+  public payloadDecoders: PayloadDecoderMinimal[];
   public payloadData = "";
   public testResponse = "";
   public decodedData = "";
@@ -120,8 +120,8 @@ export class DatatargetTestConnectionComponent implements OnInit, OnDestroy {
   }
 
   private getPayloadDecoders() {
-    const sub = this.payloadDecoderService.getMultiple(100, 0, "asc", "name").subscribe(({ data }) => {
-      this.payloadDecoders = data;
+    const sub = this.payloadDecoderService.getMinimal().subscribe(result => {
+      this.payloadDecoders = result.data;
     });
 
     this.subscriptions.push(sub);

src/app/applications/datatarget/fiware/fiware-detail-tabs/fiware-detail-tabs.component.scss

@@ -1,6 +1,54 @@
+@import "src/assets/scss/setup/variables";
+
 :host {
   .fa-error {
     color: red !important;
     margin-left: 5px;
   }
 }
+
+a {
+  color: $color-link;
+  border-bottom: 0px transparent !important;
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover,
+  &.link-hover,
+  &:visited:hover {
+    color: $color-link-hover;
+    border-bottom: 0px $color-link-hover-bg !important;
+
+    &:disabled,
+    .disabled {
+      background-color: transparent !important;
+    }
+  }
+
+  &:active,
+  &.link-active {
+    background-color: inherit;
+    color: $color-active;
+    border-bottom: 0px $color-link-active-bg !important;
+  }
+
+  &:focus,
+  &.link-focus {
+    color: $color-link-focus;
+    background-color: transparent;
+    border-bottom: 0px $color-link-focus-bg !important;
+  }
+
+  &:disabled,
+  &.disabled {
+    box-shadow: none !important;
+    cursor: not-allowed !important;
+    //color: #000 !important; // FIXME: Hvad skal der der være her?
+    outline-offset: inherit !important;
+
+    &:focus {
+      outline: none;
+      background-color: transparent;
+    }
+  }
+}

src/app/applications/datatarget/mqtt/mqtt-detail-tabs/mqtt-detail-tabs.component.scss

@@ -1,6 +1,54 @@
+@import "src/assets/scss/setup/variables";
+
 :host {
   .fa-error {
     color: red !important;
     margin-left: 5px;
   }
 }
+
+a {
+  color: $color-link;
+  border-bottom: 0px transparent !important;
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover,
+  &.link-hover,
+  &:visited:hover {
+    color: $color-link-hover;
+    border-bottom: 0px $color-link-hover-bg !important;
+
+    &:disabled,
+    .disabled {
+      background-color: transparent !important;
+    }
+  }
+
+  &:active,
+  &.link-active {
+    background-color: inherit;
+    color: $color-active;
+    border-bottom: 0px $color-link-active-bg !important;
+  }
+
+  &:focus,
+  &.link-focus {
+    color: $color-link-focus;
+    background-color: transparent;
+    border-bottom: 0px $color-link-focus-bg !important;
+  }
+
+  &:disabled,
+  &.disabled {
+    box-shadow: none !important;
+    cursor: not-allowed !important;
+    //color: #000 !important; // FIXME: Hvad skal der der være her?
+    outline-offset: inherit !important;
+
+    &:focus {
+      outline: none;
+      background-color: transparent;
+    }
+  }
+}

src/app/payload-decoder/payload-decoder.model.ts

@@ -71,3 +71,13 @@ export interface GetPayloadDecoderParameters {
   orderOn: string;
   organizationId?: number;
 }
+
+export class PayloadDecoderMinimal {
+  name: string;
+  id: number;
+}
+
+export interface PayloadDecoderMinimalResponse {
+  data: PayloadDecoderMinimal[];
+  count: number;
+}

src/app/payload-decoder/payload-decoder.service.ts

@@ -2,11 +2,12 @@ import { Injectable } from "@angular/core";
 import { RestService } from "../shared/services/rest.service";
 import { Observable } from "rxjs";
 import {
-  PayloadDecoderResponse,
+  GetPayloadDecoderParameters,
   PayloadDecoder,
   PayloadDecoderBodyResponse,
   PayloadDecoderMappedResponse,
-  GetPayloadDecoderParameters,
+  PayloadDecoderMinimalResponse,
+  PayloadDecoderResponse,
 } from "src/app/payload-decoder/payload-decoder.model";
 import { SharedVariableService } from "@shared/shared-variable/shared-variable.service";
 import { map } from "rxjs/operators";
@@ -101,6 +102,10 @@ export class PayloadDecoderService {
     );
   }
 
+  getMinimal(): Observable<PayloadDecoderMinimalResponse> {
+    return this.restService.get(this.URL + "/minimal");
+  }
+
   delete(id: number) {
     return this.restService.delete(this.URL, id);
   }