UI: Update firmware table config

Vladyslav_Prykhodko · Andrew Shvayka
1 parent 5f8a9e9f
Showing 6 changed files with 99 additions and 43 deletions
ui-ngx/src/app/modules/home/pages/firmware/firmware-table-config.resolve.ts
ui-ngx/src/app/modules/home/pages/firmware/firmwares.component.html
ui-ngx/src/app/modules/home/pages/firmware/firmwares.component.ts
ui-ngx/src/app/shared/models/firmware.models.ts
ui-ngx/src/app/shared/pipe/file-size.pipe.ts
ui-ngx/src/assets/locale/locale.constant-en_US.json
--- a/ui-ngx/src/app/modules/home/pages/firmware/firmware-table-config.resolve.ts
View file @c8488aa
+++ b/ui-ngx/src/app/modules/home/pages/firmware/firmware-table-config.resolve.ts
View file @c8488aa
@@ -29,7 +29,7 @@ import { FirmwareService } from '@core/http/firmware.service';
 import { PageLink } from '@shared/models/page/page-link';
 import { FirmwaresComponent } from '@home/pages/firmware/firmwares.component';
 import { EntityAction } from '@home/models/entity/entity-component.models';
-import { DeviceInfo } from '@shared/models/device.models';
+import { FileSizePipe } from '@shared/pipe/file-size.pipe';
 @Injectable()
 export class FirmwareTableConfigResolve implements Resolve<EntityTableConfig<Firmware, PageLink, FirmwareInfo>> {
@@ -38,7 +38,8 @@ export class FirmwareTableConfigResolve implements Resolve<EntityTableConfig<Fir
   constructor(private translate: TranslateService,
               private datePipe: DatePipe,
-              private firmwareService: FirmwareService) {
+              private firmwareService: FirmwareService,
+              private fileSize: FileSizePipe) {
     this.config.entityType = EntityType.FIRMWARE;
     this.config.entityComponent = FirmwaresComponent;
     this.config.entityTranslations = entityTypeTranslations.get(EntityType.FIRMWARE);
@@ -48,13 +49,20 @@ export class FirmwareTableConfigResolve implements Resolve<EntityTableConfig<Fir
     this.config.columns.push(
       new DateEntityTableColumn<FirmwareInfo>('createdTime', 'common.created-time', this.datePipe, '150px'),
-      new EntityTableColumn<FirmwareInfo>('title', 'firmware.title', '50%'),
-      new EntityTableColumn<FirmwareInfo>('version', 'firmware.version', '50%')
+      new EntityTableColumn<FirmwareInfo>('title', 'firmware.title', '33%'),
+      new EntityTableColumn<FirmwareInfo>('version', 'firmware.version', '33%'),
+      new EntityTableColumn<FirmwareInfo>('fileName', 'firmware.file-name', '33%'),
+      new EntityTableColumn<FirmwareInfo>('dataSize', 'firmware.file-size', '70px', entity => {
+        return this.fileSize.transform(entity.dataSize || 0);
+      }),
+      new EntityTableColumn<FirmwareInfo>('checksum', 'firmware.checksum', '540px', entity => {
+        return `${entity.checksumAlgorithm}: ${entity.checksum}`;
+      }, () => ({}), false)
     );
     this.config.cellActionDescriptors.push(
       {
-        name: this.translate.instant('firmware.export'),
+        name: this.translate.instant('firmware.download'),
         icon: 'file_download',
         isEnabled: (firmware) => firmware.hasData,
         onAction: ($event, entity) => this.exportFirmware($event, entity)
--- a/ui-ngx/src/app/modules/home/pages/firmware/firmwares.component.html
View file @c8488aa
+++ b/ui-ngx/src/app/modules/home/pages/firmware/firmwares.component.html
View file @c8488aa
@@ -20,23 +20,31 @@
           [disabled]="(isLoading$ | async) || !entity?.hasData"
           (click)="onEntityAction($event, 'uploadFirmware')"
           [fxShow]="!isEdit">
-    {{'firmware.export' | translate }}
+    {{ 'firmware.download' | translate }}
   </button>
   <button mat-raised-button color="primary" fxFlex.xs
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
           [fxShow]="!hideDelete() && !isEdit">
-    {{'resource.delete' | translate }}
+    {{ 'firmware.delete' | translate }}
   </button>
   <div fxLayout="row" fxLayout.xs="column">
     <button mat-raised-button
             ngxClipboard
-            (cbOnSuccess)="onFirmwareIdCopied($event)"
+            (cbOnSuccess)="onFirmwareIdCopied()"
             [cbContent]="entity?.id?.id"
             [fxShow]="!isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>firmware.copyId</span>
     </button>
+    <button mat-raised-button
+            ngxClipboard
+            (cbOnSuccess)="onFirmwareChecksumCopied()"
+            [cbContent]="entity?.checksum"
+            [fxShow]="!isEdit">
+      <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
+      <span translate>firmware.copy-checksum</span>
+    </button>
   </div>
 </div>
 <div class="mat-padding" fxLayout="column">
@@ -46,39 +54,40 @@
       <div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column">
         <mat-form-field class="mat-block" fxFlex="45">
           <mat-label translate>firmware.title</mat-label>
-          <input matInput formControlName="title" type="text" required>
+          <input matInput formControlName="title" type="text" required [readonly]="!isAdd">
           <mat-error *ngIf="entityForm.get('title').hasError('required')">
             {{ 'firmware.title-required' | translate }}
           </mat-error>
         </mat-form-field>
         <mat-form-field class="mat-block" fxFlex>
           <mat-label translate>firmware.version</mat-label>
-          <input matInput formControlName="version" type="text" required>
+          <input matInput formControlName="version" type="text" required [readonly]="!isAdd">
           <mat-error *ngIf="entityForm.get('version').hasError('required')">
             {{ 'firmware.version-required' | translate }}
           </mat-error>
         </mat-form-field>
       </div>
-      <section *ngIf="isAdd" style="padding-bottom: 8px">
-        <div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column">
-          <mat-form-field class="mat-block" fxFlex="45">
-            <mat-label translate>firmware.checksum-algorithm</mat-label>
-            <mat-select formControlName="checksumAlgorithm">
-              <mat-option [value]=null></mat-option>
-              <mat-option *ngFor="let checksumAlgorithm of checksumAlgorithms" [value]="checksumAlgorithm">
-                {{ checksumAlgorithmTranslationMap.get(checksumAlgorithm) }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-          <mat-form-field class="mat-block" fxFlex>
-            <mat-label translate>firmware.checksum</mat-label>
-            <input matInput formControlName="checksum" type="text"
-                   [required]="entityForm.get('checksumAlgorithm').value != null">
-            <mat-error *ngIf="entityForm.get('checksumAlgorithm').hasError('required')">
-              {{ 'firmware.checksum-required' | translate }}
-            </mat-error>
-          </mat-form-field>
-        </div>
+      <div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayoutGap.sm="8px" fxLayout.xs="column" fxLayout.md="column">
+        <mat-form-field class="mat-block" fxFlex="33">
+          <mat-label translate>firmware.checksum-algorithm</mat-label>
+          <input *ngIf="!isAdd" matInput formControlName="checksumAlgorithm" type="text" [readonly]="isEdit">
+          <mat-select formControlName="checksumAlgorithm" *ngIf="isAdd">
+            <mat-option [value]=null></mat-option>
+            <mat-option *ngFor="let checksumAlgorithm of checksumAlgorithms" [value]="checksumAlgorithm">
+              {{ checksumAlgorithmTranslationMap.get(checksumAlgorithm) }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field class="mat-block" fxFlex>
+          <mat-label translate>firmware.checksum</mat-label>
+          <input matInput formControlName="checksum" type="text" [readonly]="!isAdd"
+                 [required]="entityForm.get('checksumAlgorithm').value != null">
+          <mat-error *ngIf="entityForm.get('checksumAlgorithm').hasError('required')">
+            {{ 'firmware.checksum-required' | translate }}
+          </mat-error>
+        </mat-form-field>
+      </div>
+      <section *ngIf="isAdd" style="padding-top: 8px">
         <tb-file-input
           formControlName="file"
           workFromFileObj="true"
@@ -86,6 +95,22 @@
           dropLabel="{{'resource.drop-file' | translate}}">
         </tb-file-input>
       </section>
+      <section *ngIf="!isAdd">
+        <div fxLayout="row" fxLayoutGap.gt-md="8px" fxLayoutGap.sm="8px" fxLayout.xs="column" fxLayout.md="column">
+          <mat-form-field class="mat-block" fxFlex="33">
+            <mat-label translate>firmware.file-name</mat-label>
+            <input matInput formControlName="fileName" type="text" readonly>
+          </mat-form-field>
+          <mat-form-field class="mat-block" fxFlex>
+            <mat-label translate>firmware.file-size-bytes</mat-label>
+            <input matInput formControlName="dataSize" type="text" readonly>
+          </mat-form-field>
+          <mat-form-field class="mat-block" fxFlex>
+            <mat-label translate>firmware.content-type</mat-label>
+            <input matInput formControlName="contentType" type="text" readonly>
+          </mat-form-field>
+        </div>
+      </section>
       <div formGroupName="additionalInfo">
         <mat-form-field class="mat-block">
           <mat-label translate>firmware.description</mat-label>
--- a/ui-ngx/src/app/modules/home/pages/firmware/firmwares.component.ts
View file @c8488aa
+++ b/ui-ngx/src/app/modules/home/pages/firmware/firmwares.component.ts
View file @c8488aa
@@ -83,6 +83,8 @@ export class FirmwaresComponent extends EntityComponent<Firmware> implements OnI
     const form = this.fb.group({
       title: [entity ? entity.title : '', [Validators.required, Validators.maxLength(255)]],
       version: [entity ? entity.version : '', [Validators.required, Validators.maxLength(255)]],
+      checksumAlgorithm: [entity ? entity.checksumAlgorithm : null],
+      checksum: [entity ? entity.checksum : '', Validators.maxLength(1020)],
       additionalInfo: this.fb.group(
         {
           description: [entity && entity.additionalInfo ? entity.additionalInfo.description : ''],
@@ -90,28 +92,31 @@ export class FirmwaresComponent extends EntityComponent<Firmware> implements OnI
       )
     });
     if (this.isAdd) {
-      form.addControl('checksumAlgorithm', this.fb.control(null));
-      form.addControl('checksum', this.fb.control('', Validators.maxLength(1020)));
       form.addControl('file', this.fb.control(null, Validators.required));
+    } else {
+      form.addControl('fileName', this.fb.control(null));
+      form.addControl('dataSize', this.fb.control(null));
+      form.addControl('contentType', this.fb.control(null));
     }
     return form;
   }
   updateForm(entity: Firmware) {
-    if (this.isEdit) {
-      this.entityForm.get('title').disable({emitEvent: false});
-      this.entityForm.get('version').disable({emitEvent: false});
-    }
     this.entityForm.patchValue({
       title: entity.title,
       version: entity.version,
+      checksumAlgorithm: entity.checksumAlgorithm,
+      checksum: entity.checksum,
+      fileName: entity.fileName,
+      dataSize: entity.dataSize,
+      contentType: entity.contentType,
       additionalInfo: {
         description: entity.additionalInfo ? entity.additionalInfo.description : ''
       }
     });
   }
-  onFirmwareIdCopied($event) {
+  onFirmwareIdCopied() {
     this.store.dispatch(new ActionNotificationShow(
       {
         message: this.translate.instant('firmware.idCopiedMessage'),
@@ -121,4 +126,15 @@ export class FirmwaresComponent extends EntityComponent<Firmware> implements OnI
         horizontalPosition: 'right'
       }));
   }
+
+  onFirmwareChecksumCopied() {
+    this.store.dispatch(new ActionNotificationShow(
+      {
+        message: this.translate.instant('firmware.checksum-copied-message'),
+        type: 'success',
+        duration: 750,
+        verticalPosition: 'bottom',
+        horizontalPosition: 'right'
+      }));
+  }
 }
--- a/ui-ngx/src/app/shared/models/firmware.models.ts
View file @c8488aa
+++ b/ui-ngx/src/app/shared/models/firmware.models.ts
View file @c8488aa
@@ -37,14 +37,15 @@ export interface FirmwareInfo extends BaseData<FirmwareId> {
   title?: string;
   version?: string;
   hasData?: boolean;
+  fileName: string;
+  checksum?: ChecksumAlgorithm;
+  checksumAlgorithm?: string;
+  contentType: string;
+  dataSize?: number;
   additionalInfo?: any;
 }
 export interface Firmware extends FirmwareInfo {
   file?: File;
   data: string;
-  fileName: string;
-  checksum?: ChecksumAlgorithm;
-  checksumAlgorithm?: string;
-  contentType: string;
 }
--- a/ui-ngx/src/app/shared/pipe/file-size.pipe.ts
View file @c8488aa
+++ b/ui-ngx/src/app/shared/pipe/file-size.pipe.ts
View file @c8488aa
@@ -23,7 +23,7 @@ type unitPrecisionMap = {
 const defaultPrecisionMap: unitPrecisionMap = {
   bytes: 0,
-  KB: 0,
+  KB: 1,
   MB: 1,
   GB: 1,
   TB: 2,
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
View file @c8488aa
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
View file @c8488aa
@@ -1907,8 +1907,11 @@
     "firmware": {
         "add": "Add firmware",
         "checksum": "Checksum",
+        "checksum-copied-message": "Firmware checksum has been copied to clipboard",
         "checksum-required": "Checksum is required.",
         "checksum-algorithm": "Checksum algorithm",
+        "content-type": "Content type",
+        "copy-checksum": "Copy checksum",
         "copyId": "Copy firmware Id",
         "description": "Description",
         "delete": "Delete firmware",
@@ -1917,12 +1920,15 @@
         "delete-firmwares-action-title": "Delete { count, plural, 1 {1 firmware} other {# firmwares} }",
         "delete-firmwares-text": "Be careful, after the confirmation all selected resources will be removed.",
         "delete-firmwares-title": "Are you sure you want to delete { count, plural, 1 {1 firmware} other {# firmwares} }?",
+        "download": "Download firmware",
         "drop-file": "Drop a firmware file or click to select a file to upload.",
         "empty": "Firmware is empty",
-        "export": "Export firmware",
         "idCopiedMessage": "Firmware Id has been copied to clipboard",
         "no-firmware-matching": "No firmware matching '{{entity}}' were found.",
         "no-firmware-text": "No firmwares found",
+        "file-name": "File name",
+        "file-size": "File size",
+        "file-size-bytes": "File size in bytes",
         "firmware": "Firmware",
         "firmware-details": "Firmware details",
         "firmware-required": "Firmware is required.",