IOT:1525: Angular changes primarily styling.

AugustHA-Iterator · AugustHA-Iterator · commit 2a428d1970fe · 2024-09-03T13:32:27.000+02:00
diff --git a/src/app/admin/permission/permission-edit/permission-edit.component.html b/src/app/admin/permission/permission-edit/permission-edit.component.html
@@ -58,7 +58,7 @@
   </div>
 
   <div class="form-group mt-3 col-12">
-    <mat-form-field>
+    <mat-form-field class="col-12">
       <label class="form-label" for="user">{{ "PERMISSION.EDIT.USERS" | translate }}</label>
       <mat-select
         [formControl]="userMultiCtrl"
@@ -103,7 +103,7 @@
   </div>
 
   <div class="form-group mt-3 col-12" *ngIf="isOrganizationApplicationPermission()">
-    <mat-form-field>
+    <mat-form-field class="col-12">
       <label class="form-label" for="name">{{ "PERMISSION.EDIT.APPS" | translate }}</label>
       <div class="col-12">
         <mat-select
diff --git a/src/app/admin/permission/permission-edit/permission-edit.component.scss b/src/app/admin/permission/permission-edit/permission-edit.component.scss
@@ -0,0 +1,14 @@
+// Manipulate initial background color
+::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) {
+  background-color: white !important;
+}
+
+// Manipulate background color on hover and focus
+::ng-deep .mat-mdc-form-field-focus-overlay {
+  background-color: transparent !important;
+}
+
+::ng-deep .mdc-text-field--no-label{
+  padding-left: 0 !important;
+}
+
diff --git a/src/app/admin/users/user-list/user-list.component.html b/src/app/admin/users/user-list/user-list.component.html
@@ -7,7 +7,7 @@
 <div class="container-fluid">
   <div class="row">
     <div class="col-12">
-      <nav mat-tab-nav-bar>
+      <nav mat-tab-nav-bar [tabPanel]="tabPanel">
         <a
           mat-tab-link
           *ngFor="let link of navTabs"
@@ -18,6 +18,7 @@
           >{{ link.label | translate }}</a
         >
       </nav>
+      <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
       <router-outlet></router-outlet>
     </div>
   </div>
diff --git a/src/app/applications/application-detail/application-detail.component.html b/src/app/applications/application-detail/application-detail.component.html
@@ -65,7 +65,7 @@ <h3>{{ "APPLICATION.DETAILS" | translate }}</h3>
         </div>
       </div>
     </div>
-    <nav mat-tab-nav-bar>
+    <nav mat-tab-nav-bar [tabPanel]="tabPanel">
       <a
         mat-tab-link
         *ngFor="let link of navTabs"
@@ -76,6 +76,7 @@ <h3>{{ "APPLICATION.DETAILS" | translate }}</h3>
         >{{ link.label | translate }}</a
       >
     </nav>
+    <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
     <router-outlet></router-outlet>
   </div>
 </div>
diff --git a/src/app/applications/datatarget/datatarget-new/datatarget-new.component.html b/src/app/applications/datatarget/datatarget-new/datatarget-new.component.html
@@ -25,7 +25,7 @@
         {{ dataTargetType.description | translate }}
       </mat-card-content>
 
-      <mat-divider inset></mat-divider>
+      <mat-divider></mat-divider>
       <mat-card-actions align="end">
         <button *ngIf="dataTargetType.readMoreUrl" (click)="showReadMe(dataTargetType)" mat-button>
           {{ "DATATARGET.READMORE" | translate }}
diff --git a/src/app/applications/datatarget/datatarget-new/datatarget-new.component.scss b/src/app/applications/datatarget/datatarget-new/datatarget-new.component.scss
@@ -5,7 +5,7 @@
   margin-left: 10px;
 }
 
-.mat-card {
+.mdc-card {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
@@ -14,16 +14,20 @@
   max-width: 400px;
   height: 320px;
   margin: 10px;
+  padding: 16px;
 }
 
-.mat-card-header {
+.mat-mdc-card-header {
   flex-shrink: 1;
+  margin-left: 10px;
+  margin-bottom: 18px;
+  padding: 0 16px 16px 8px
 }
 
-.mat-card-content {
+.mat-mdc-card-content {
   flex-grow: 1;
   overflow: auto;
-  margin-left: 10px;
+  font-size: 14px;
 }
 
 mat-card img {
diff --git a/src/app/applications/datatarget/datatarget-table/datatarget-table.component.html b/src/app/applications/datatarget/datatarget-table/datatarget-table.component.html
@@ -17,7 +17,7 @@
 
     <!-- Type Column -->
     <ng-container matColumnDef="type">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>
         {{ "DATATARGET-TABLE.TYPE" | translate }}
       </th>
       <td mat-cell *matCellDef="let element">
diff --git a/src/app/applications/datatarget/fiware/fiware-edit/fiware-edit.component.html b/src/app/applications/datatarget/fiware/fiware-edit/fiware-edit.component.html
@@ -208,7 +208,7 @@ <h6>{{ "QUESTION.DATATARGET.RELATIONS" | translate }}</h6>
             <tr *ngFor="let element of payloadDeviceDatatarget; let i = index" [attr.data-index]="i">
               <td>
                 <div class="row">
-                  <mat-form-field appearance="fill">
+                  <mat-form-field appearance="outline">
                     <mat-label>{{ "QUESTION.DATATARGET.SELECT-DEVICES" | translate }}</mat-label>
                     <mat-select multiple name="devices" [compareWith]="compare" [(value)]="element.iotDeviceIds">
                       <mat-option disabled="disabled" class="filter-option">
@@ -226,7 +226,7 @@ <h6>{{ "QUESTION.DATATARGET.RELATIONS" | translate }}</h6>
               </td>
               <td>
                 <div class="row">
-                  <mat-form-field appearance="fill">
+                  <mat-form-field appearance="outline">
                     <mat-label>{{ "QUESTION.DATATARGET.SELECT-PAYLOADDECODER" | translate }}</mat-label>
                     <mat-select matNativeControl name="payloadDecoderId" [(value)]="element.payloadDecoderId">
                       <mat-option [value]="0">
diff --git a/src/app/applications/datatarget/httppush/httppush-edit/httppush-edit.component.html b/src/app/applications/datatarget/httppush/httppush-edit/httppush-edit.component.html
@@ -104,14 +104,12 @@ <h6>{{ "QUESTION.DATATARGET.RELATIONS" | translate }}</h6>
                 <mat-form-field appearance="fill">
                   <mat-label>{{ "QUESTION.DATATARGET.SELECT-DEVICES" | translate }}</mat-label>
                   <mat-select multiple name="devices" [compareWith]="compare" [(value)]="element.iotDeviceIds">
-                    <mat-option disabled="disabled" class="filter-option">
                       <button mat-raised-button class="mat-primary fill text-sm" (click)="selectAllDevices(i)">
                         {{ "QUESTION.DATATARGET.SELECTALLDEVICES" | translate }}
                       </button>
                       <button mat-raised-button class="mat-primary fill text-sm" (click)="deSelectAllDevices(i)">
                         {{ "QUESTION.DATATARGET.DESELECTALLDEVICES" | translate }}
                       </button>
-                    </mat-option>
                     <mat-option *ngFor="let device of devices" [value]="device.id">{{ device.name }}</mat-option>
                   </mat-select>
                 </mat-form-field>
diff --git a/src/app/applications/datatarget/httppush/httppush-edit/httppush-edit.component.scss b/src/app/applications/datatarget/httppush/httppush-edit/httppush-edit.component.scss
@@ -0,0 +1,3 @@
+.mat-mdc-text-field-wrapper .mdc-text-field{
+  background-color: white !important;
+}
diff --git a/src/app/applications/datatarget/opendatadk/opendatadk-edit/opendatadk-edit.component.scss b/src/app/applications/datatarget/opendatadk/opendatadk-edit/opendatadk-edit.component.scss
@@ -12,11 +12,14 @@
     margin-left: 5px;
     cursor: pointer;
   }
-  mat-expansion-panel ol {
-    padding-left: 20px;
-    li {
-      font-family: $font-name, system;
-      display: list-item;
+  mat-expansion-panel {
+    box-shadow: none !important;
+    ol {
+      padding-left: 20px;
+      li {
+        font-family: $font-name, system;
+        display: list-item;
+      }
     }
   }
 }
diff --git a/src/app/applications/iot-devices/iot-device-detail/data-package/data-package.component.scss b/src/app/applications/iot-devices/iot-device-detail/data-package/data-package.component.scss
@@ -0,0 +1,3 @@
+mat-expansion-panel{
+  box-shadow: none !important;
+}
diff --git a/src/app/applications/iot-devices/iot-device-detail/data-packages-timestamp/data-packages-timestamp.component.scss b/src/app/applications/iot-devices/iot-device-detail/data-packages-timestamp/data-packages-timestamp.component.scss
@@ -1,3 +1,7 @@
 .timestamps-container {
   display: flex;
 }
+
+mat-expansion-panel {
+  box-shadow: none !important;
+}
diff --git a/src/app/applications/iot-devices/iot-device-detail/iot-device-detail.component.html b/src/app/applications/iot-devices/iot-device-detail/iot-device-detail.component.html
@@ -10,7 +10,7 @@
     [canEdit]="canEdit"
   >
   </app-top-bar>
-  <nav mat-tab-nav-bar>
+  <nav mat-tab-nav-bar [tabPanel]="tabPanel">
     <a
       mat-tab-link
       *ngFor="let link of navTabs"
@@ -21,5 +21,6 @@
       >{{ link.label | translate }}</a
     >
   </nav>
+  <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
   <router-outlet></router-outlet>
 </div>
diff --git a/src/app/applications/multicast/multicast-edit/multicast-edit.component.html b/src/app/applications/multicast/multicast-edit/multicast-edit.component.html
@@ -194,7 +194,7 @@
     <label class="form-label" for="groupType">{{ "QUESTION.GIVE-MULTICAST-IOTDEVICES" | translate }}</label>
 
     <div class="row">
-      <mat-form-field appearance="fill">
+      <mat-form-field appearance="outline">
         <mat-label>{{ "QUESTION.MULTICAST.SELECT-DEVICES" | translate }}</mat-label>
         <mat-select
           multiple
@@ -205,15 +205,14 @@
         >
           <app-mat-select-search [formControl]="deviceFilterCtrl"></app-mat-select-search>
 
-          <mat-option disabled="disabled" class="filter-option">
-            <button mat-raised-button class="mat-primary fill text-sm" (click)="selectAll()">
-              {{ "QUESTION.MULTICAST.SELECTALLDEVICES" | translate }}
-            </button>
-            <button mat-raised-button class="mat-primary fill text-sm" (click)="unSelectAll()">
-              {{ "QUESTION.MULTICAST.DESELECTALLDEVICES" | translate }}
-            </button>
-            <label class="onlyLorawan">{{ "QUESTION.MULTICAST.ONLY-LORAWAN" | translate }}</label>
-          </mat-option>
+          <button mat-raised-button class="mat-primary fill text-sm choose-all" (click)="selectAll()">
+            {{ "QUESTION.MULTICAST.SELECTALLDEVICES" | translate }}
+          </button>
+          <button mat-raised-button class="mat-primary fill text-sm deselect-all" (click)="unSelectAll()">
+            {{ "QUESTION.MULTICAST.DESELECTALLDEVICES" | translate }}
+          </button>
+          <label class="onlyLorawan">{{ "QUESTION.MULTICAST.ONLY-LORAWAN" | translate }}</label>
+
           <mat-option *ngFor="let device of filteredDevicesMulti | async | filterDevices" [value]="device">{{
             device.name
           }}</mat-option>
diff --git a/src/app/applications/multicast/multicast-edit/multicast-edit.component.scss b/src/app/applications/multicast/multicast-edit/multicast-edit.component.scss
@@ -1,5 +1,18 @@
+$deselectSelectButtonBottomMargin: 5px;
+
 .onlyLorawan {
   font-weight: bold;
   font-size: 13px;
   margin-left: 10px;
+  color: #00000061
+}
+
+.choose-all {
+  margin-left: 5px;
+  margin-bottom: $deselectSelectButtonBottomMargin;
+}
+
+.deselect-all {
+  margin-left: 5px;
+  margin-bottom: $deselectSelectButtonBottomMargin;
 }
diff --git a/src/app/applications/multicast/multicast-table/multicast-table.component.html b/src/app/applications/multicast/multicast-table/multicast-table.component.html
@@ -24,7 +24,7 @@
 
     <!-- Type Column -->
     <ng-container matColumnDef="groupType">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>
         {{ "MULTICAST-TABLE.TYPE" | translate }}
       </th>
       <td mat-cell *matCellDef="let element">
diff --git a/src/app/device-model/device-model-edit/device-model-edit.component.html b/src/app/device-model/device-model-edit/device-model-edit.component.html
@@ -13,6 +13,7 @@
       <label class="form-label" for="name">{{ "QUESTION.DEVICE-MODEL.GIVE-NAME" | translate }}</label
       >*
       <input
+        (change)="handleNameNull()"
         type="text"
         class="form-control"
         id="name"
diff --git a/src/app/device-model/device-model-edit/device-model-edit.component.ts b/src/app/device-model/device-model-edit/device-model-edit.component.ts
@@ -85,6 +85,13 @@ export class DeviceModelEditComponent implements OnInit {
     );
   }
 
+  handleNameNull() {
+    //Apparently, if field is filled out, and then removed, it will still success even though it's mandatory.
+    if (this.deviceModel.body.name === "") {
+      this.deviceModel.body.name = undefined;
+    }
+  }
+
   handleError(err: HttpErrorResponse) {
     const errorResponse = this.errorMessageService.handleErrorMessageWithFields(err);
     this.errorMessages = errorResponse.errorMessages;
diff --git a/src/app/gateway/gateway-overview/gateway-overview.component.html b/src/app/gateway/gateway-overview/gateway-overview.component.html
@@ -17,7 +17,7 @@
       [dropdownDefaultOption]="'GATEWAY.DROPDOWNDEFAULT' | translate"
     >
     </app-top-bar-table>
-    <nav mat-tab-nav-bar>
+    <nav mat-tab-nav-bar [tabPanel]="tabPanel">
       <a
         mat-tab-link
         *ngFor="let link of navTabs"
@@ -28,6 +28,7 @@
         >{{ link.label | translate }}</a
       >
     </nav>
+    <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
     <router-outlet></router-outlet>
   </div>
 </div>
diff --git a/src/app/navbar/global-admin/global-admin.component.scss b/src/app/navbar/global-admin/global-admin.component.scss
@@ -0,0 +1,3 @@
+mat-expansion-panel {
+  box-shadow: none !important;
+}
diff --git a/src/app/payload-decoder/payload-decoder-edit/payload-decoder-edit.component.html b/src/app/payload-decoder/payload-decoder-edit/payload-decoder-edit.component.html
@@ -31,9 +31,9 @@
         </div>
       </div>
       <div class="col-6">
-        <label class="form-label" for="metadata">Test din payload decoder</label>
+        <label class="form-label" for="metadata">{{ "PAYLOAD-DECODER.TEST-YOUR-DECODER" | translate }}</label>
         <div class="form-group">
-          <mat-form-field appearance="fill">
+          <mat-form-field appearance="outline">
             <mat-label>{{ "QUESTION.GIVE-PAYLOADDECODER-CHOOSE-APPLICATION" | translate }}</mat-label>
             <mat-select (selectionChange)="getDevices($event)">
               <mat-option *ngFor="let applicationEl of applications" [value]="applicationEl.id">
@@ -42,7 +42,7 @@
             </mat-select>
           </mat-form-field>
           <div class="form-group">
-            <mat-form-field appearance="fill">
+            <mat-form-field appearance="outline">
               <mat-label>{{ "QUESTION.GIVE-PAYLOADDECODER-CHOOSE-DEVICE" | translate }}</mat-label>
               <mat-select (selectionChange)="getDevice($event)" [disabled]="!iotDevices">
                 <mat-option *ngFor="let iotDeviceEl of iotDevices" [value]="iotDeviceEl.id">
diff --git a/src/app/payload-decoder/payload-decoder-edit/payload-decoder-edit.component.scss b/src/app/payload-decoder/payload-decoder-edit/payload-decoder-edit.component.scss
@@ -0,0 +1,3 @@
+mat-form-field {
+  width: 100% !important;
+}
diff --git a/src/app/profiles/device-profiles/device-profiles-edit/device-profiles-edit.component.html b/src/app/profiles/device-profiles/device-profiles-edit/device-profiles-edit.component.html
@@ -27,7 +27,7 @@ <h3>{{ "PROFILES.DEVICE_PROFILE.DETAILS" | translate }}</h3>
   </div>
   <mat-tab-group animationDuration="0ms">
     <mat-tab label="Generelt">
-      <div class="col-xs-12 form-group">
+      <div class="input-container col-xs-12 form-group">
         <label for="name" class="form-label asterisk-if-mandatory">{{
           "PROFILES.DEVICE_PROFILE.NAME" | translate
         }}</label>
@@ -44,7 +44,7 @@ <h3>{{ "PROFILES.DEVICE_PROFILE.DETAILS" | translate }}</h3>
         />
       </div>
 
-      <div class="col-xs-12 form-group" *ngIf="deviceProfile.id">
+      <div class="input-container col-xs-12 form-group" *ngIf="deviceProfile.id">
         <label for="id" class="form-label asterisk-if-mandatory">{{ "PROFILES.DEVICE_PROFILE.ID" | translate }}</label>
         <input
           type="text"
@@ -60,7 +60,7 @@ <h3>{{ "PROFILES.DEVICE_PROFILE.DETAILS" | translate }}</h3>
         />
       </div>
 
-      <div class="col-xs-12 form-group">
+      <div class="input-container col-xs-12 form-group">
         <label for="macVersion" class="form-label asterisk-if-mandatory">{{
           "PROFILES.DEVICE_PROFILE.MACVERSION" | translate
         }}</label>
@@ -86,7 +86,7 @@ <h3>{{ "PROFILES.DEVICE_PROFILE.DETAILS" | translate }}</h3>
           </mat-select>
         </mat-form-field>
       </div>
-      <div class="col-xs-12 form-group">
+      <div class="input-container col-xs-12 form-group">
         <label class="form-label asterisk-if-mandatory">{{
           "PROFILES.DEVICE_PROFILE.REGPARAMSREVISION" | translate
         }}</label>
@@ -106,7 +106,7 @@ <h3>{{ "PROFILES.DEVICE_PROFILE.DETAILS" | translate }}</h3>
         </mat-form-field>
       </div>
 
-      <div class="col-xs-12 form-group">
+      <div class="input-container col-xs-12 form-group">
         <label class="form-label asterisk-if-mandatory">{{ "PROFILES.DEVICE_PROFILE.ADRALGORITHM" | translate }}</label>
         <mat-form-field appearance="outline">
           <mat-select
@@ -122,7 +122,7 @@ <h3>{{ "PROFILES.DEVICE_PROFILE.DETAILS" | translate }}</h3>
         </mat-form-field>
       </div>
 
-      <div class="col-xs-12 form-group">
+      <div class="input-container col-xs-12 form-group">
         <label for="devStatusReqFreq" class="form-label">{{
           "PROFILES.DEVICE_PROFILE.DEVSTATUSREQFREQ" | translate
         }}</label>
@@ -251,7 +251,7 @@ <h3>{{ "PROFILES.DEVICE_PROFILE.DETAILS" | translate }}</h3>
           />
         </div>
 
-        <div class="col-xs-12 form-group mt-3">
+        <div class="input-container col-xs-12 form-group mt-3">
           <label for="pingSlotPeriod" class="form-label asterisk-if-mandatory">{{
             "PROFILES.DEVICE_PROFILE.PINGSLOTPERIOD" | translate
           }}</label>
diff --git a/src/app/profiles/device-profiles/device-profiles-edit/device-profiles-edit.component.scss b/src/app/profiles/device-profiles/device-profiles-edit/device-profiles-edit.component.scss
diff --git a/src/app/shared/components/mat-select-search/mat-select-search/mat-select-search.component.html b/src/app/shared/components/mat-select-search/mat-select-search/mat-select-search.component.html
diff --git a/src/app/shared/components/top-bar-table/top-bar-table.component.html b/src/app/shared/components/top-bar-table/top-bar-table.component.html
diff --git a/src/app/shared/error-message.service.ts b/src/app/shared/error-message.service.ts
diff --git a/src/assets/i18n/da.json b/src/assets/i18n/da.json

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.mat-mdc-text-field-wrapper .mdc-text-field{`
	`2`	`+ background-color: white !important;`
	`3`	`+}`