UI: Add new fields tag in ota package component

2021-07-22 18:36:29 +03:00 · 2021-07-22 18:36:29 +03:00 · 5a88034645
commit 5a88034645
parent 2af3be7827
7 changed files with 52 additions and 23 deletions
--- a/common/data/src/main/java/org/thingsboard/server/common/data/OtaPackageInfo.java
+++ b/common/data/src/main/java/org/thingsboard/server/common/data/OtaPackageInfo.java
@ -62,6 +62,7 @@ public class OtaPackageInfo extends SearchTextBasedWithAdditionalInfo<OtaPackage
        this.type = otaPackageInfo.getType();
        this.title = otaPackageInfo.getTitle();
        this.version = otaPackageInfo.getVersion();
+        this.tag = otaPackageInfo.getTag();
        this.url = otaPackageInfo.getUrl();
        this.hasData = otaPackageInfo.isHasData();
        this.fileName = otaPackageInfo.getFileName();
--- a/dao/src/main/java/org/thingsboard/server/dao/model/sql/OtaPackageInfoEntity.java
+++ b/dao/src/main/java/org/thingsboard/server/dao/model/sql/OtaPackageInfoEntity.java
@ -145,6 +145,7 @@ public class OtaPackageInfoEntity extends BaseSqlEntity<OtaPackageInfo> implemen
        this.type = type;
        this.title = title;
        this.version = version;
+        this.tag = tag;
        this.url = url;
        this.fileName = fileName;
        this.contentType = contentType;
--- a/ui-ngx/src/app/modules/home/pages/ota-update/ota-update-table-config.resolve.ts
+++ b/ui-ngx/src/app/modules/home/pages/ota-update/ota-update-table-config.resolve.ts
@ -59,9 +59,10 @@ export class OtaUpdateTableConfigResolve implements Resolve<EntityTableConfig<Ot

    this.config.columns.push(
      new DateEntityTableColumn<OtaPackageInfo>('createdTime', 'common.created-time', this.datePipe, '150px'),
-      new EntityTableColumn<OtaPackageInfo>('title', 'ota-update.title', '20%'),
-      new EntityTableColumn<OtaPackageInfo>('version', 'ota-update.version', '20%'),
-      new EntityTableColumn<OtaPackageInfo>('type', 'ota-update.package-type', '20%', entity => {
+      new EntityTableColumn<OtaPackageInfo>('title', 'ota-update.title', '15%'),
+      new EntityTableColumn<OtaPackageInfo>('version', 'ota-update.version', '15%'),
+      new EntityTableColumn<OtaPackageInfo>('tag', 'ota-update.version-tag', '15%'),
+      new EntityTableColumn<OtaPackageInfo>('type', 'ota-update.package-type', '15%', entity => {
        return this.translate.instant(OtaUpdateTypeTranslationMap.get(entity.type));
      }),
      new EntityTableColumn<OtaPackageInfo>('url', 'ota-update.direct-url', '20%', entity => {
--- a/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.html
+++ b/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.html
@ -74,6 +74,11 @@
          </mat-error>
        </mat-form-field>
      </div>
+      <mat-form-field class="mat-block" fxFlex style="margin-bottom: 8px">
+        <mat-label translate>ota-update.version-tag</mat-label>
+        <input matInput formControlName="tag" type="text" [readonly]="!isAdd">
+        <mat-hint *ngIf="isAdd" translate>ota-update.version-tag-hint</mat-hint>
+      </mat-form-field>
      <tb-device-profile-autocomplete
        formControlName="deviceProfileId"
        required
@ -94,8 +99,8 @@
      <section *ngIf="isAdd">
        <div class="mat-caption" style="margin: -8px 0 8px;" translate>ota-update.warning-after-save-no-edit</div>
        <mat-radio-group formControlName="isURL" fxLayoutGap="16px">
-          <mat-radio-button [value]="false">Upload binary file</mat-radio-button>
-          <mat-radio-button [value]="true">Use external URL</mat-radio-button>
+          <mat-radio-button [value]="false">{{ "ota-update.upload-binary-file" | translate }}</mat-radio-button>
+          <mat-radio-button [value]="true">{{ "ota-update.use-external-url" | translate }}</mat-radio-button>
        </mat-radio-group>
      </section>
      <section *ngIf="!entityForm.get('isURL').value">
--- a/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.ts
@ -15,7 +15,7 @@
 ///

 import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
-import { Subject } from 'rxjs';
+import { combineLatest, Subject } from 'rxjs';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { TranslateService } from '@ngx-translate/core';
@ -30,7 +30,7 @@ import {
  OtaUpdateTypeTranslationMap
 } from '@shared/models/ota-package.models';
 import { ActionNotificationShow } from '@core/notification/notification.actions';
-import { filter, takeUntil } from 'rxjs/operators';
+import { filter, startWith, takeUntil } from 'rxjs/operators';
 import { isNotEmptyStr } from '@core/utils';

@Component({
@ -56,22 +56,36 @@ export class OtaUpdateComponent extends EntityComponent<OtaPackage> implements O

  ngOnInit() {
    super.ngOnInit();
-    this.entityForm.get('isURL').valueChanges.pipe(
-      filter(() => this.isAdd),
-      takeUntil(this.destroy$)
-    ).subscribe((isURL) => {
-      if (isURL === false) {
-        this.entityForm.get('url').clearValidators();
-        this.entityForm.get('file').setValidators(Validators.required);
-        this.entityForm.get('url').updateValueAndValidity({emitEvent: false});
-        this.entityForm.get('file').updateValueAndValidity({emitEvent: false});
-      } else {
-        this.entityForm.get('file').clearValidators();
-        this.entityForm.get('url').setValidators([Validators.required, Validators.pattern('(.|\\s)*\\S(.|\\s)*')]);
-        this.entityForm.get('file').updateValueAndValidity({emitEvent: false});
-        this.entityForm.get('url').updateValueAndValidity({emitEvent: false});
-      }
-    });
+    if (this.isAdd) {
+      this.entityForm.get('isURL').valueChanges.pipe(
+        takeUntil(this.destroy$)
+      ).subscribe((isURL) => {
+        if (isURL === false) {
+          this.entityForm.get('url').clearValidators();
+          this.entityForm.get('file').setValidators(Validators.required);
+          this.entityForm.get('url').updateValueAndValidity({emitEvent: false});
+          this.entityForm.get('file').updateValueAndValidity({emitEvent: false});
+        } else {
+          this.entityForm.get('file').clearValidators();
+          this.entityForm.get('url').setValidators([Validators.required, Validators.pattern('(.|\\s)*\\S(.|\\s)*')]);
+          this.entityForm.get('file').updateValueAndValidity({emitEvent: false});
+          this.entityForm.get('url').updateValueAndValidity({emitEvent: false});
+        }
+      });
+      combineLatest([
+        this.entityForm.get('title').valueChanges.pipe(startWith(''), takeUntil(this.destroy$)),
+        this.entityForm.get('version').valueChanges.pipe(startWith(''), takeUntil(this.destroy$))
+      ]).pipe(
+        filter(() => this.entityForm.get('tag').pristine),
+        takeUntil(this.destroy$)
+      ).subscribe(([title, version]) => {
+        let tag = `${title} ${version}`.trim();
+        if (tag === '') {
+          tag = '';
+        }
+        this.entityForm.get('tag').patchValue(tag);
+      });
+    }
  }

  ngOnDestroy() {
@ -92,6 +106,7 @@ export class OtaUpdateComponent extends EntityComponent<OtaPackage> implements O
    const form = this.fb.group({
      title: [entity ? entity.title : '', [Validators.required, Validators.maxLength(255)]],
      version: [entity ? entity.version : '', [Validators.required, Validators.maxLength(255)]],
+      tag: [entity ? entity.tag : '', [Validators.maxLength(255)]],
      type: [entity?.type ? entity.type : OtaUpdateType.FIRMWARE, Validators.required],
      deviceProfileId: [entity ? entity.deviceProfileId : null, Validators.required],
      checksumAlgorithm: [entity && entity.checksumAlgorithm ? entity.checksumAlgorithm : ChecksumAlgorithm.SHA256],
@ -119,6 +134,7 @@ export class OtaUpdateComponent extends EntityComponent<OtaPackage> implements O
    this.entityForm.patchValue({
      title: entity.title,
      version: entity.version,
+      tag: entity.tag,
      type: entity.type,
      deviceProfileId: entity.deviceProfileId,
      checksumAlgorithm: entity.checksumAlgorithm,
--- a/ui-ngx/src/app/shared/models/ota-package.models.ts
+++ b/ui-ngx/src/app/shared/models/ota-package.models.ts
@ -91,6 +91,7 @@ export interface OtaPackageInfo extends BaseData<OtaPackageId> {
  deviceProfileId?: DeviceProfileId;
  title?: string;
  version?: string;
+  tag?: string;
  hasData?: boolean;
  url?: string;
  fileName: string;
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@ -2342,8 +2342,12 @@
        "firmware": "Firmware",
        "software": "Software"
      },
+      "upload-binary-file": "Upload binary file",
+      "use-external-url": "Use external URL",
      "version": "Version",
      "version-required": "Version is required.",
+      "version-tag": "Version Tag",
+      "version-tag-hint": "Custom tag should match the package version reported by your device.",
      "warning-after-save-no-edit": "Once the package is uploaded, you will not be able to modify title, version, device profile and package type."
    },
    "position": {