Merge pull request #3576 from vvlladd28/improvement/device-profile-edit

UI: Added device profile show settings

ui-ngx/src/app/modules/home/components/profile/device-profile.component.html

@@ -68,6 +68,65 @@
         <mat-label translate>device-profile.description</mat-label>
         <textarea matInput formControlName="description" rows="2"></textarea>
       </mat-form-field>
+      <mat-form-field *ngIf="standalone" class="mat-block">
+        <mat-label translate>device-profile.transport-type</mat-label>
+        <mat-select formControlName="transportType" required>
+          <mat-option *ngFor="let type of deviceTransportTypes" [value]="type">
+            {{deviceTransportTypeTranslations.get(type) | translate}}
+          </mat-option>
+        </mat-select>
+        <mat-error *ngIf="entityForm.get('transportType').hasError('required')">
+          {{ 'device-profile.transport-type-required' | translate }}
+        </mat-error>
+      </mat-form-field>
+      <div formGroupName="profileData" *ngIf="standalone" style="padding-bottom: 16px;">
+        <mat-accordion multi="true">
+          <mat-expansion-panel *ngIf="displayProfileConfiguration" [expanded]="true">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                <div translate>device-profile.profile-configuration</div>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <tb-device-profile-configuration
+              formControlName="configuration"
+              required>
+            </tb-device-profile-configuration>
+          </mat-expansion-panel>
+          <mat-expansion-panel *ngIf="displayTransportConfiguration" [expanded]="true">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                <div translate>device-profile.transport-configuration</div>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <tb-device-profile-transport-configuration
+              formControlName="transportConfiguration"
+              required>
+            </tb-device-profile-transport-configuration>
+          </mat-expansion-panel>
+          <mat-expansion-panel [expanded]="false">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                <div>{{'device-profile.alarm-rules-with-count' | translate:
+                  {count: entityForm.get('profileData.alarms').value ?
+                      entityForm.get('profileData.alarms').value.length : 0} }}</div>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <tb-device-profile-alarms
+              formControlName="alarms">
+            </tb-device-profile-alarms>
+          </mat-expansion-panel>
+          <mat-expansion-panel [expanded]="true">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                <div translate>device-profile.device-provisioning</div>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <tb-device-profile-provision-configuration
+              formControlName="provisionConfiguration">
+            </tb-device-profile-provision-configuration>
+          </mat-expansion-panel>
+        </mat-accordion>
+      </div>
     </fieldset>
   </form>
 </div>

ui-ngx/src/app/modules/home/components/profile/device-profile.component.ts

@@ -28,10 +28,12 @@ import {
   DeviceProfile,
   DeviceProfileData,
   DeviceProfileType,
+  deviceProfileTypeConfigurationInfoMap,
   deviceProfileTypeTranslationMap,
   DeviceProvisionConfiguration,
   DeviceProvisionType,
   DeviceTransportType,
+  deviceTransportTypeConfigurationInfoMap,
   deviceTransportTypeTranslationMap
 } from '@shared/models/device.models';
 import { EntityType } from '@shared/models/entity-type.models';
@@ -57,6 +59,10 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> {
 
   deviceTransportTypeTranslations = deviceTransportTypeTranslationMap;
 
+  displayProfileConfiguration: boolean;
+
+  displayTransportConfiguration: boolean;
+
   constructor(protected store: Store<AppState>,
               protected translate: TranslateService,
               @Optional() @Inject('entity') protected entityValue: DeviceProfile,
@@ -74,6 +80,10 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> {
   }
 
   buildForm(entity: DeviceProfile): FormGroup {
+    this.displayProfileConfiguration = entity && entity.type &&
+      deviceProfileTypeConfigurationInfoMap.get(entity.type).hasProfileConfiguration;
+    this.displayTransportConfiguration = entity && entity.transportType &&
+      deviceTransportTypeConfigurationInfoMap.get(entity.transportType).hasProfileConfiguration;
     const deviceProvisionConfiguration: DeviceProvisionConfiguration = {
       type: entity?.provisionType ? entity?.provisionType : DeviceProvisionType.DISABLED,
       provisionDeviceKey: entity?.provisionDeviceKey,
@@ -116,6 +126,8 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> {
 
   private deviceProfileTypeChanged(form: FormGroup) {
     const deviceProfileType: DeviceProfileType = form.get('type').value;
+    this.displayProfileConfiguration = deviceProfileType &&
+      deviceProfileTypeConfigurationInfoMap.get(deviceProfileType).hasProfileConfiguration;
     let profileData: DeviceProfileData = form.getRawValue().profileData;
     if (!profileData) {
       profileData = {
@@ -129,6 +141,8 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> {
 
   private deviceProfileTransportTypeChanged(form: FormGroup) {
     const deviceTransportType: DeviceTransportType = form.get('transportType').value;
+    this.displayTransportConfiguration = deviceTransportType &&
+      deviceTransportTypeConfigurationInfoMap.get(deviceTransportType).hasProfileConfiguration;
     let profileData: DeviceProfileData = form.getRawValue().profileData;
     if (!profileData) {
       profileData = {
@@ -141,6 +155,10 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> {
   }
 
   updateForm(entity: DeviceProfile) {
+    this.displayProfileConfiguration = entity.type &&
+      deviceProfileTypeConfigurationInfoMap.get(entity.type).hasProfileConfiguration;
+    this.displayTransportConfiguration = entity.transportType &&
+      deviceTransportTypeConfigurationInfoMap.get(entity.transportType).hasProfileConfiguration;
     const deviceProvisionConfiguration: DeviceProvisionConfiguration = {
       type: entity?.provisionType ? entity?.provisionType : DeviceProvisionType.DISABLED,
       provisionDeviceKey: entity?.provisionDeviceKey,