Merge pull request #4749 from vvlladd28/improvement/resources/table

UI: Refactoring resource: add help link; improvement text and view

ui-ngx/src/app/modules/home/pages/admin/resource/resources-library-table-config.resolve.ts

@@ -69,10 +69,10 @@ export class ResourcesLibraryTableConfigResolver implements Resolve<EntityTableC
 
     this.config.cellActionDescriptors.push(
       {
-        name: this.translate.instant('resource.export'),
+        name: this.translate.instant('resource.download'),
         icon: 'file_download',
         isEnabled: () => true,
-        onAction: ($event, entity) => this.exportResource($event, entity)
+        onAction: ($event, entity) => this.downloadResource($event, entity)
       }
     );
 
@@ -118,7 +118,7 @@ export class ResourcesLibraryTableConfigResolver implements Resolve<EntityTableC
     return this.config;
   }
 
-  exportResource($event: Event, resource: ResourceInfo) {
+  downloadResource($event: Event, resource: ResourceInfo) {
     if ($event) {
       $event.stopPropagation();
     }
@@ -127,8 +127,8 @@ export class ResourcesLibraryTableConfigResolver implements Resolve<EntityTableC
 
   onResourceAction(action: EntityAction<ResourceInfo>): boolean {
     switch (action.action) {
-      case 'uploadResource':
+      case 'downloadResource':
-        this.exportResource(action.event, action.entity);
+        this.downloadResource(action.event, action.entity);
         return true;
     }
     return false;

ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.html

@@ -18,9 +18,9 @@
 <div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary" fxFlex.xs
           [disabled]="(isLoading$ | async)"
-          (click)="onEntityAction($event, 'uploadResource')"
+          (click)="onEntityAction($event, 'downloadResource')"
           [fxShow]="!isEdit">
-    {{'resource.export' | translate }}
+    {{ 'resource.download' | translate }}
   </button>
   <button mat-raised-button color="primary" fxFlex.xs
           [disabled]="(isLoading$ | async)"
@@ -28,6 +28,16 @@
           [fxShow]="!hideDelete() && !isEdit">
     {{ 'resource.delete' | translate }}
   </button>
+  <div fxLayout="row" fxLayout.xs="column">
+    <button mat-raised-button
+            ngxClipboard
+            (cbOnSuccess)="onResourceIdCopied()"
+            [cbContent]="entity?.id?.id"
+            [fxShow]="!isEdit">
+      <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
+      <span translate>resource.copyId</span>
+    </button>
+  </div>
 </div>
 <div class="mat-padding" fxLayout="column">
   <form [formGroup]="entityForm">
@@ -47,7 +57,7 @@
           {{ 'resource.title-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <tb-file-input
+      <tb-file-input *ngIf="isAdd"
         formControlName="data"
         required
         [readAsBinary]="true"
@@ -59,6 +69,12 @@
         [existingFileName]="entityForm.get('fileName')?.value"
         (fileNameChanged)="entityForm?.get('fileName').patchValue($event)">
       </tb-file-input>
+      <div *ngIf="!isAdd" fxLayout="row" fxLayoutGap.gt-md="8px" fxLayoutGap.sm="8px" fxLayout.xs="column" fxLayout.md="column">
+        <mat-form-field fxFlex>
+          <mat-label translate>resource.file-name</mat-label>
+          <input matInput formControlName="fileName" type="text">
+        </mat-form-field>
+      </div>
     </fieldset>
   </form>
 </div>

ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.ts

@@ -30,6 +30,7 @@ import {
   ResourceTypeTranslationMap
 } from '@shared/models/resource.models';
 import { pairwise, startWith, takeUntil } from 'rxjs/operators';
+import { ActionNotificationShow } from "@core/notification/notification.actions";
 
 @Component({
   selector: 'tb-resources-library',
@@ -88,26 +89,29 @@ export class ResourcesLibraryComponent extends EntityComponent<Resource> impleme
   }
 
   buildForm(entity: Resource): FormGroup {
-    return this.fb.group(
+    const form = this.fb.group(
       {
+        title: [entity ? entity.title : '', []],
         resourceType: [{
           value: entity?.resourceType ? entity.resourceType : ResourceType.LWM2M_MODEL,
-          disabled: this.isEdit
+          disabled: !this.isAdd
         }, [Validators.required]],
-        data: [entity ? entity.data : null, [Validators.required]],
         fileName: [entity ? entity.fileName : null, [Validators.required]],
-        title: [entity ? entity.title : '', []]
       }
     );
+    if (this.isAdd) {
+      form.addControl('data', this.fb.control(null, Validators.required));
+    }
+    return form
   }
 
   updateForm(entity: Resource) {
-    this.entityForm.patchValue({resourceType: entity.resourceType});
     if (this.isEdit) {
       this.entityForm.get('resourceType').disable({emitEvent: false});
+      this.entityForm.get('fileName').disable({emitEvent: false});
     }
     this.entityForm.patchValue({
-      data: entity.data,
+      resourceType: entity.resourceType,
       fileName: entity.fileName,
       title: entity.title
     });
@@ -132,4 +136,15 @@ export class ResourcesLibraryComponent extends EntityComponent<Resource> impleme
   convertToBase64File(data: string): string {
     return window.btoa(data);
   }
+
+  onResourceIdCopied() {
+    this.store.dispatch(new ActionNotificationShow(
+      {
+        message: this.translate.instant('resource.idCopiedMessage'),
+        type: 'success',
+        duration: 750,
+        verticalPosition: 'bottom',
+        horizontalPosition: 'right'
+      }));
+  }
 }

ui-ngx/src/app/shared/models/constants.ts

@@ -120,6 +120,7 @@ export const HelpLinks = {
     entityViews: helpBaseUrl + '/docs/user-guide/ui/entity-views',
     entitiesImport: helpBaseUrl + '/docs/user-guide/bulk-provisioning',
     rulechains: helpBaseUrl + '/docs/user-guide/ui/rule-chains',
+    resources: helpBaseUrl + '/docs/user-guide/ui/resources',
     dashboards: helpBaseUrl + '/docs/user-guide/ui/dashboards',
     otaUpdates: helpBaseUrl + '/docs/user-guide/ui/ota-updates',
     widgetsBundles: helpBaseUrl + '/docs/user-guide/ui/widget-library#bundles',

ui-ngx/src/app/shared/models/resource.models.ts

@@ -61,6 +61,6 @@ export interface Resource extends ResourceInfo {
 }
 
 export interface Resources extends ResourceInfo {
-  data: string|string[];
+  data: Array<string>;
-  fileName: string|string[];
+  fileName: Array<string>;
 }

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -2309,20 +2309,23 @@
     },
     "resource": {
         "add": "Add Resource",
+        "copyId": "Copy resource Id",
         "delete": "Delete resource",
         "delete-resource-text": "Be careful, after the confirmation the resource will become unrecoverable.",
         "delete-resource-title": "Are you sure you want to delete the resource '{{resourceTitle}}'?",
         "delete-resources-action-title": "Delete { count, plural, 1 {1 resource} other {# resources} }",
         "delete-resources-text": "Be careful, after the confirmation all selected resources will be removed.",
         "delete-resources-title": "Are you sure you want to delete { count, plural, 1 {1 resource} other {# resources} }?",
+        "download": "Download resource",
         "drop-file": "Drop a resource file or click to select a file to upload.",
         "empty": "Resource is empty",
-        "export": "Export resource",
+        "file-name": "File name",
+        "idCopiedMessage": "Resource Id has been copied to clipboard",
         "no-resource-matching": "No resource matching '{{widgetsBundle}}' were found.",
         "no-resource-text": "No resources found",
         "open-widgets-bundle": "Open widgets bundle",
         "resource": "Resource",
-        "resource-library-details": "Resource library details",
+        "resource-library-details": "Resource details",
         "resource-type": "Resource type",
         "resources-library": "Resources library",
         "search": "Search resources",

ui-ngx/src/assets/locale/locale.constant-zh_CN.json

@@ -1994,7 +1994,6 @@
     "delete-resources-title": "确定要删除 { count, plural, 1 {# 个资源} other {# 个资源} }?",
     "drop-file": "拖拽资源文件或单击以选择要上传的文件。",
     "empty": "资源为空",
-    "export": "导出资源",
     "no-resource-matching": "找不到与 '{{widgetsBundle}}' 匹配的资源。",
     "no-resource-text": "找不到资源",
     "open-widgets-bundle": "打开部件库",