Merge pull request #15441 from mtsymbarov-del/fix/outlined-inputs-additional-reworks

Moved missed inputs to outlined styles
2 months ago · 587e7d7c78
14 changed files with 68 additions and 63 deletions
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
@ -21,7 +21,7 @@
    <mat-select formControlName="type" required>
      @for (type of deviceProvisionTypes; track type) {
        <mat-option [value]="type">
-          {{ getDeviceProvisionType(type) | translate }}
+          {{deviceProvisionTypeTranslateMap.get(type) | translate}}
        </mat-option>
      }
    </mat-select>
@ -31,10 +31,10 @@
  </mat-form-field>
  @switch (provisionConfigurationFormGroup.get('type').value) {
    @case (deviceProvisionType.ALLOW_CREATE_NEW_DEVICES) {
-      <ng-container *ngTemplateOutlet="default"></ng-container>
+      <ng-container *ngTemplateOutlet="keySecretFields"></ng-container>
    }
    @case (deviceProvisionType.CHECK_PRE_PROVISIONED_DEVICES) {
-      <ng-container *ngTemplateOutlet="default"></ng-container>
+      <ng-container *ngTemplateOutlet="keySecretFields"></ng-container>
    }
    @case (deviceProvisionType.X509_CERTIFICATE_CHAIN) {
      <div class="tb-hint flex flex-1 items-center justify-start">
@ -71,38 +71,38 @@
      </mat-form-field>
    }
  }
+  <ng-template #keySecretFields>
+    <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
+        <mat-label translate>device-profile.provision-device-key</mat-label>
+        <input matInput formControlName="provisionDeviceKey" required/>
+        <button matSuffix mat-icon-button
+                ngxClipboard
+                [cbContent]="provisionConfigurationFormGroup.get('provisionDeviceKey').value"
+                (cbOnSuccess)="onProvisionCopied(true)"
+                matTooltip="{{ 'device-profile.copy-provision-key' | translate }}"
+                matTooltipPosition="above">
+          <mat-icon svgIcon="mdi:clipboard-arrow-left" style="font-size: 20px;"></mat-icon>
+        </button>
+        @if (provisionConfigurationFormGroup.get('provisionDeviceKey').hasError('required')) {
+          <mat-error>{{ 'device-profile.provision-device-key-required' | translate }}</mat-error>
+        }
+      </mat-form-field>
+      <mat-form-field class="mat-block flex-1" appearance="outline">
+        <mat-label translate>device-profile.provision-device-secret</mat-label>
+        <input matInput formControlName="provisionDeviceSecret" required/>
+        <button matSuffix mat-icon-button
+                ngxClipboard
+                [cbContent]="provisionConfigurationFormGroup.get('provisionDeviceSecret').value"
+                (cbOnSuccess)="onProvisionCopied(false)"
+                matTooltip="{{ 'device-profile.copy-provision-secret' | translate }}"
+                matTooltipPosition="above">
+          <mat-icon svgIcon="mdi:clipboard-arrow-left" style="font-size: 20px;"></mat-icon>
+        </button>
+        @if (provisionConfigurationFormGroup.get('provisionDeviceSecret').hasError('required')) {
+          <mat-error>{{ 'device-profile.provision-device-secret-required' | translate }}</mat-error>
+        }
+      </mat-form-field>
+    </section>
+  </ng-template>
 </div>
-<ng-template #default>
-  <section class="flex flex-row xs:flex-col gt-xs:gap-2">
-    <mat-form-field class="mat-block flex-1" appearance="outline">
-      <mat-label translate>device-profile.provision-device-key</mat-label>
-      <input matInput formControlName="provisionDeviceKey" required/>
-      <button matSuffix mat-icon-button
-              ngxClipboard
-              [cbContent]="provisionConfigurationFormGroup.get('provisionDeviceKey').value"
-              (cbOnSuccess)="onProvisionCopied(true)"
-              matTooltip="{{ 'device-profile.copy-provision-key' | translate }}"
-              matTooltipPosition="above">
-        <mat-icon svgIcon="mdi:clipboard-arrow-left" style="font-size: 20px;"></mat-icon>
-      </button>
-      @if (provisionConfigurationFormGroup.get('provisionDeviceKey').hasError('required')) {
-        <mat-error>{{ 'device-profile.provision-device-key-required' | translate }}</mat-error>
-      }
-    </mat-form-field>
-    <mat-form-field class="mat-block flex-1" appearance="outline">
-      <mat-label translate>device-profile.provision-device-secret</mat-label>
-      <input matInput formControlName="provisionDeviceSecret" required/>
-      <button matSuffix mat-icon-button
-              ngxClipboard
-              [cbContent]="provisionConfigurationFormGroup.get('provisionDeviceSecret').value"
-              (cbOnSuccess)="onProvisionCopied(false)"
-              matTooltip="{{ 'device-profile.copy-provision-secret' | translate }}"
-              matTooltipPosition="above">
-        <mat-icon svgIcon="mdi:clipboard-arrow-left" style="font-size: 20px;"></mat-icon>
-      </button>
-      @if (provisionConfigurationFormGroup.get('provisionDeviceSecret').hasError('required')) {
-        <mat-error>{{ 'device-profile.provision-device-secret-required' | translate }}</mat-error>
-      }
-    </mat-form-field>
-  </section>
-</ng-template>
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.ts
@ -62,7 +62,7 @@ export class DeviceProfileProvisionConfigurationComponent implements ControlValu
  provisionConfigurationFormGroup: UntypedFormGroup;

  deviceProvisionType = DeviceProvisionType;
-  deviceProvisionTypes = Object.keys(DeviceProvisionType);
+  deviceProvisionTypes = Object.values(DeviceProvisionType);
  deviceProvisionTypeTranslateMap = deviceProvisionTypeTranslationMap;

  private requiredValue: boolean;
@ -213,8 +213,4 @@ export class DeviceProfileProvisionConfigurationComponent implements ControlValu
      this.provisionConfigurationFormGroup.get('provisionDeviceKey').reset({value: null, disabled: true}, {emitEvent: false});
    }
  }
-
-  getDeviceProvisionType(type: string): string {
-    return this.deviceProvisionTypeTranslateMap.get(type as DeviceProvisionType);
-  }
 }
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html
@ -25,7 +25,7 @@
    <div class="map-list flex flex-col"
         [formGroup]="nameValueControl">
      <div class="flex flex-row items-center justify-start gap-2">
-        <mat-form-field class="max-w-40% flex-full">
+        <mat-form-field class="max-w-40% flex-full" appearance="outline">
          <mat-select formControlName="name" required>
            @for (attributeName of attributeNames; track attributeName) {
              <mat-option [value]="attributeName"
@ -40,7 +40,7 @@
            </mat-error>
          }
        </mat-form-field>
-        <mat-form-field class="max-w-60% flex-full">
+        <mat-form-field class="max-w-60% flex-full" appearance="outline">
          <input formControlName="value" matInput required type="number"
                 placeholder="{{ 'key-val.value' | translate }}">
          @if (nameValueControl.get('value').hasError('required')) {
@ -68,8 +68,7 @@
      </div>
    </div>
  }
-  <div [class.!hidden]="attributesValueFormArray().length"
-  class="map-list flex items-center justify-center" translate>device-profile.lwm2m.no-attributes-set</div>
+  <div [class.!hidden]="attributesValueFormArray().length" class="map-list flex items-center justify-center" translate>device-profile.lwm2m.no-attributes-set</div>
  @if (!disabled && isAddEnabled) {
    <div style="margin-top: 9px;">
      <button mat-stroked-button color="primary"
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-list.component.html
@ -16,7 +16,7 @@

 -->
 <section [formGroup]="instancesListFormGroup" class="lwm2m-instances-list">
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
    <mat-label>{{ 'device-profile.lwm2m.instances-list' | translate }}</mat-label>
    <mat-chip-grid #chipList formControlName="instanceList" [required]="required" (focus)="onFocus()">
      @for (instanceId of instancesId; track instanceId) {
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-key-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-key-config.component.html
@ -22,7 +22,7 @@
      <div class="tb-form-panel">
        <div class="tb-form-panel-title" translate>datakey.general</div>
        @if (modelValue.type !== dataKeyTypes.function && !hideDataKeyName) {
-          <mat-form-field subscriptSizing="dynamic">
+          <mat-form-field subscriptSizing="dynamic" appearance="outline">
            <mat-label>{{ 'entity.key' | translate }}</mat-label>
            <input matInput type="text" placeholder="{{ 'entity.key-name' | translate }}"
                   #keyInput
@ -49,7 +49,7 @@
          </mat-form-field>
        }
        @if (!hideDataKeyLabel) {
-          <mat-form-field subscriptSizing="dynamic">
+          <mat-form-field subscriptSizing="dynamic" appearance="outline">
            <mat-label translate>datakey.label</mat-label>
            <input matInput formControlName="label" required>
          </mat-form-field>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/doc-links-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/doc-links-widget-settings.component.html
@ -16,7 +16,7 @@

 -->
 <section class="tb-widget-settings flex flex-col" [formGroup]="docLinksWidgetSettingsForm">
-  <mat-form-field class="mat-block flex-1">
+  <mat-form-field class="mat-block flex-1" appearance="outline">
    <mat-label translate>widgets.documentation.columns</mat-label>
    <input required matInput type="number" step="1" min="1" max="20" formControlName="columns">
  </mat-form-field>
--- a/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html
@ -36,6 +36,7 @@
    <fieldset [disabled]="isLoading$ | async">
      <span>{{ labelText | translate }}</span>
      <tb-entity-list
+        appearance="outline"
        formControlName="assignedCustomerIds"
        [required]="data.actionType !== 'manage'"
        [entityType]="entityType.CUSTOMER">
--- a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
+++ b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
@ -110,27 +110,24 @@
              </mat-panel-title>
            </mat-expansion-panel-header>
            <div translate class="tb-hint">entity-view.attributes-propagation-hint</div>
-            <label translate class="tb-title no-padding">entity-view.client-attributes</label>
            <tb-entity-keys-list
              [entityId]="selectedEntityId | async"
              formControlName="cs"
-              keysText="entity-view.client-attributes-placeholder"
+              label="entity-view.client-attributes"
              [dataKeyType]="dataKeyType.attribute"
              appearance="outline">
            </tb-entity-keys-list>
-            <label translate class="tb-title no-padding">entity-view.shared-attributes</label>
            <tb-entity-keys-list
              [entityId]="selectedEntityId | async"
              formControlName="sh"
-              keysText="entity-view.shared-attributes-placeholder"
+              label="entity-view.shared-attributes"
              [dataKeyType]="dataKeyType.attribute"
              appearance="outline">
            </tb-entity-keys-list>
-            <label translate class="tb-title no-padding">entity-view.server-attributes</label>
            <tb-entity-keys-list
              [entityId]="selectedEntityId | async"
              formControlName="ss"
-              keysText="entity-view.server-attributes-placeholder"
+              label="entity-view.server-attributes"
              [dataKeyType]="dataKeyType.attribute"
              appearance="outline">
            </tb-entity-keys-list>
@ -142,11 +139,10 @@
              </mat-panel-title>
            </mat-expansion-panel-header>
            <div translate class="tb-hint">entity-view.timeseries-data-hint</div>
-            <label translate class="tb-title no-padding">entity-view.timeseries</label>
            <tb-entity-keys-list
              [entityId]="selectedEntityId | async"
              formControlName="timeseries"
-              keysText="entity-view.timeseries-placeholder"
+              label="entity-view.timeseries"
              [dataKeyType]="dataKeyType.timeseries"
              appearance="outline">
            </tb-entity-keys-list>
--- a/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.html
@ -16,7 +16,10 @@

 -->
 <mat-form-field [formGroup]="keysListFormGroup" class="mat-block tb-chip-list" [appearance]="appearance">
-  <mat-chip-grid #chipList>
+  @if (label) {
+  <mat-label>{{ label | translate }}</mat-label>
+}
+  <mat-chip-grid #chipList [disabled]="disabled">
    @for (key of modelValue; track key) {
      <mat-chip-row
        [removable]="!disabled"
@ -39,6 +42,7 @@
           [matChipInputFor]="chipList"
           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           matChipInputAddOnBlur
+           [disabled]="disabled"
           (matChipInputTokenEnd)="add($event)">
  </mat-chip-grid>
  <mat-autocomplete #keyAutocomplete="matAutocomplete"
--- a/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.ts
+++ b/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.ts
@ -63,6 +63,9 @@ export class EntityKeysListComponent implements ControlValueAccessor, OnInit, Af
  @Input()
  keysText: string;

+  @Input()
+  label: string;
+
  @Input()
  dataKeyType: DataKeyType;

--- a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html
+++ b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html
@ -15,7 +15,7 @@
    limitations under the License.

 -->
-<mat-form-field class="tb-rule-select" subscriptSizing="dynamic" appearance="outline"
+<mat-form-field class="tb-rule-select" subscriptSizing="dynamic" appearance="fill"
                [class.cursor-pointer]="!disabled"
                (click)="openRuleChainSelectPanel($event)">
  <mat-icon matPrefix>settings_ethernet</mat-icon>
--- a/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
+++ b/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
@ -57,10 +57,10 @@
        </div>
      </mat-step>
      <mat-step [stepControl]="importParametersFormGroup">
-        <form [formGroup]="importParametersFormGroup">
+        <form [formGroup]="importParametersFormGroup" class="pt-1">
          <ng-template matStepLabel>{{ 'import.stepper-text.configuration' | translate }}</ng-template>
          <fieldset [disabled]="isLoading$ | async" class="flex flex-col">
-            <mat-form-field class="mat-block">
+            <mat-form-field class="mat-block" appearance="outline">
              <mat-label translate>import.csv-delimiter</mat-label>
              <mat-select required formControlName="delim">
                @for (delimiter of delimiters; track delimiter) {
--- a/ui-ngx/src/app/shared/import-export/table-columns-assignment.component.html
+++ b/ui-ngx/src/app/shared/import-export/table-columns-assignment.component.html
@ -53,7 +53,7 @@
    <mat-header-cell *matHeaderCellDef class="mat-column-key"> {{ 'import.column-key' | translate }} </mat-header-cell>
    <mat-cell *matCellDef="let column">
      @if (isColumnTypeDiffers(column.type)) {
-        <mat-form-field>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
          <input matInput [required]="isColumnTypeDiffers(column.type)"
                 [(ngModel)]="column.key" (ngModelChange)="columnsUpdated()"
                 placeholder="{{ 'import.column-value' | translate }}"/>
--- a/ui-ngx/src/app/shared/import-export/table-columns-assignment.component.scss
+++ b/ui-ngx/src/app/shared/import-export/table-columns-assignment.component.scss
@ -32,4 +32,10 @@
    flex: 0 0 120px;
    min-width: 120px;
  }
+  mat-row {
+    mat-cell {
+      padding-top: 4px;
+      padding-bottom: 4px;
+    }
+  }
 }