UI: Added new resource type JS module

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

@@ -61,11 +61,9 @@ export class ResourcesLibraryTableConfigResolver implements Resolve<EntityTableC
       new DateEntityTableColumn<ResourceInfo>('createdTime', 'common.created-time', this.datePipe, '150px'),
       new EntityTableColumn<ResourceInfo>('title', 'resource.title', '60%'),
       new EntityTableColumn<ResourceInfo>('resourceType', 'resource.resource-type', '40%',
-        entity => this.resourceTypesTranslationMap.get(entity.resourceType)),
+        entity => this.translate.instant(this.resourceTypesTranslationMap.get(entity.resourceType))),
       new EntityTableColumn<ResourceInfo>('tenantId', 'resource.system', '60px',
-        entity => {
-          return checkBoxCell(entity.tenantId.id === NULL_UUID);
-        }),
+        entity => checkBoxCell(entity.tenantId.id === NULL_UUID)),
     );
 
     this.config.cellActionDescriptors.push(
@@ -124,7 +122,7 @@ export class ResourcesLibraryTableConfigResolver implements Resolve<EntityTableC
       $event.stopPropagation();
     }
     const url = this.router.createUrlTree(['resources', 'resources-library', resourceInfo.id.id]);
-    this.router.navigateByUrl(url);
+    this.router.navigateByUrl(url).then(() => {});
   }
 
   downloadResource($event: Event, resource: ResourceInfo) {

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

@@ -52,7 +52,7 @@
         <mat-label translate>resource.resource-type</mat-label>
         <mat-select formControlName="resourceType" required>
           <mat-option *ngFor="let resourceType of resourceTypes" [value]="resourceType">
-            {{ resourceTypesTranslationMap.get(resourceType) }}
+            {{ resourceTypesTranslationMap.get(resourceType) | translate }}
           </mat-option>
         </mat-select>
       </mat-form-field>
@@ -66,7 +66,7 @@
           {{ 'resource.title-max-length' | translate }}
         </mat-error>
       </mat-form-field>
-      <tb-file-input *ngIf="isAdd"
+      <tb-file-input *ngIf="isAdd || (isEdit && entityForm.get('resourceType').value === resourceType.JS_MODULE)"
         formControlName="data"
         required
         [readAsBinary]="true"
@@ -78,7 +78,7 @@
         [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">
+      <div *ngIf="!isAdd && !(isEdit && entityForm.get('resourceType').value === resourceType.JS_MODULE)" 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">

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

@@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { TranslateService } from '@ngx-translate/core';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { EntityComponent } from '@home/components/entity/entity.component';
 import {
   Resource,
@@ -29,8 +29,9 @@ import {
   ResourceTypeMIMETypes,
   ResourceTypeTranslationMap
 } from '@shared/models/resource.models';
-import {filter, pairwise, startWith, takeUntil} from 'rxjs/operators';
+import { filter, startWith, takeUntil } from 'rxjs/operators';
 import { ActionNotificationShow } from '@core/notification/notification.actions';
+import { isDefinedAndNotNull } from '@core/utils';
 
 @Component({
   selector: 'tb-resources-library',
@@ -39,7 +40,7 @@ import { ActionNotificationShow } from '@core/notification/notification.actions'
 export class ResourcesLibraryComponent extends EntityComponent<Resource> implements OnInit, OnDestroy {
 
   readonly resourceType = ResourceType;
-  readonly resourceTypes = Object.values(this.resourceType);
+  readonly resourceTypes: ResourceType[] = Object.values(this.resourceType);
   readonly resourceTypesTranslationMap = ResourceTypeTranslationMap;
 
   private destroy$ = new Subject<void>();
@@ -48,7 +49,7 @@ export class ResourcesLibraryComponent extends EntityComponent<Resource> impleme
               protected translate: TranslateService,
               @Inject('entity') protected entityValue: Resource,
               @Inject('entitiesTableConfig') protected entitiesTableConfigValue: EntityTableConfig<Resource>,
-              public fb: UntypedFormBuilder,
+              public fb: FormBuilder,
               protected cd: ChangeDetectorRef) {
     super(store, fb, entityValue, entitiesTableConfigValue, cd);
   }
@@ -87,33 +88,39 @@ export class ResourcesLibraryComponent extends EntityComponent<Resource> impleme
     }
   }
 
-  buildForm(entity: Resource): UntypedFormGroup {
-    const form = this.fb.group(
-      {
+  buildForm(entity: Resource): FormGroup {
+    return this.fb.group({
       title: [entity ? entity.title : '', [Validators.required, Validators.maxLength(255)]],
-        resourceType: [entity?.resourceType ? entity.resourceType : ResourceType.LWM2M_MODEL, [Validators.required]],
-        fileName: [entity ? entity.fileName : null, [Validators.required]],
-      }
-    );
-    if (this.isAdd) {
-      form.addControl('data', this.fb.control(null, Validators.required));
-    }
-    return form;
+      resourceType: [entity?.resourceType ? entity.resourceType : ResourceType.LWM2M_MODEL, Validators.required],
+      fileName: [entity ? entity.fileName : null, Validators.required],
+      data: [entity ? entity.data : null, Validators.required]
+    });
   }
 
   updateForm(entity: Resource) {
     this.entity.name = entity.title;
     if (this.isEdit) {
       this.entityForm.get('resourceType').disable({emitEvent: false});
+      if (entity.resourceType !== ResourceType.JS_MODULE) {
         this.entityForm.get('fileName').disable({emitEvent: false});
+        this.entityForm.get('data').disable({emitEvent: false});
+      }
     }
     this.entityForm.patchValue({
       resourceType: entity.resourceType,
       fileName: entity.fileName,
-      title: entity.title
+      title: entity.title,
+      data: entity.data
     });
   }
 
+  prepareFormValue(formValue: Resource): Resource {
+    if (this.isEdit && !isDefinedAndNotNull(formValue.data)) {
+      delete formValue.data;
+    }
+    return super.prepareFormValue(formValue);
+  }
+
   getAllowedExtensions() {
     try {
       return ResourceTypeExtension.get(this.entityForm.get('resourceType').value);

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

@@ -21,14 +21,16 @@ import { TbResourceId } from '@shared/models/id/tb-resource-id';
 export enum ResourceType {
   LWM2M_MODEL = 'LWM2M_MODEL',
   PKCS_12 = 'PKCS_12',
-  JKS = 'JKS'
+  JKS = 'JKS',
+  JS_MODULE = 'JS_MODULE'
 }
 
 export const ResourceTypeMIMETypes = new Map<ResourceType, string>(
   [
     [ResourceType.LWM2M_MODEL, 'application/xml,text/xml'],
     [ResourceType.PKCS_12, 'application/x-pkcs12'],
-    [ResourceType.JKS, 'application/x-java-keystore']
+    [ResourceType.JKS, 'application/x-java-keystore'],
+    [ResourceType.JS_MODULE, 'text/javascript,application/javascript']
   ]
 );
 
@@ -36,15 +38,17 @@ export const ResourceTypeExtension = new Map<ResourceType, string>(
   [
     [ResourceType.LWM2M_MODEL, 'xml'],
     [ResourceType.PKCS_12, 'p12,pfx'],
-    [ResourceType.JKS, 'jks']
+    [ResourceType.JKS, 'jks'],
+    [ResourceType.JS_MODULE, 'js']
   ]
 );
 
 export const ResourceTypeTranslationMap = new Map<ResourceType, string>(
   [
-    [ResourceType.LWM2M_MODEL, 'LWM2M model'],
-    [ResourceType.PKCS_12, 'PKCS #12'],
-    [ResourceType.JKS, 'JKS']
+    [ResourceType.LWM2M_MODEL, 'resource.type.lwm2m-model'],
+    [ResourceType.PKCS_12, 'resource.type.pkcs-12'],
+    [ResourceType.JKS, 'resource.type.jks'],
+    [ResourceType.JS_MODULE, 'resource.type.js-module']
   ]
 );
 

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

@@ -3259,7 +3259,13 @@
         "system": "System",
         "title": "Title",
         "title-required": "Title is required.",
-        "title-max-length": "Title should be less than 256"
+        "title-max-length": "Title should be less than 256",
+        "type": {
+            "jks": "JKS",
+            "js-module": "JS module",
+            "lwm2m-model": "LWM2M model",
+            "pkcs-12": "PKCS #12"
+        }
     },
     "rulechain": {
         "rulechain": "Rule chain",