From b41fa03d24fcdfc5e807a7d048d4f738f4510375 Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Fri, 19 May 2023 19:23:21 +0300 Subject: [PATCH] UI: Added new resource type JS module --- .../resources-library-table-config.resolve.ts | 8 ++-- .../resource/resources-library.component.html | 6 +-- .../resource/resources-library.component.ts | 43 +++++++++++-------- .../src/app/shared/models/resource.models.ts | 16 ++++--- .../assets/locale/locale.constant-en_US.json | 8 +++- 5 files changed, 48 insertions(+), 33 deletions(-) diff --git a/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library-table-config.resolve.ts b/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library-table-config.resolve.ts index a488bd3807..b3126c781b 100644 --- a/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library-table-config.resolve.ts +++ b/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library-table-config.resolve.ts @@ -61,11 +61,9 @@ export class ResourcesLibraryTableConfigResolver implements Resolve('createdTime', 'common.created-time', this.datePipe, '150px'), new EntityTableColumn('title', 'resource.title', '60%'), new EntityTableColumn('resourceType', 'resource.resource-type', '40%', - entity => this.resourceTypesTranslationMap.get(entity.resourceType)), + entity => this.translate.instant(this.resourceTypesTranslationMap.get(entity.resourceType))), new EntityTableColumn('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 {}); } downloadResource($event: Event, resource: ResourceInfo) { diff --git a/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.html b/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.html index c4208d1fcd..f955d26f0d 100644 --- a/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.html +++ b/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.html @@ -52,7 +52,7 @@ resource.resource-type - {{ resourceTypesTranslationMap.get(resourceType) }} + {{ resourceTypesTranslationMap.get(resourceType) | translate }} @@ -66,7 +66,7 @@ {{ 'resource.title-max-length' | translate }} - -
+
resource.file-name diff --git a/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.ts b/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.ts index 078f87b5ef..90f7847e10 100644 --- a/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.ts +++ b/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 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(); @@ -48,7 +49,7 @@ export class ResourcesLibraryComponent extends EntityComponent impleme protected translate: TranslateService, @Inject('entity') protected entityValue: Resource, @Inject('entitiesTableConfig') protected entitiesTableConfigValue: EntityTableConfig, - public fb: UntypedFormBuilder, + public fb: FormBuilder, protected cd: ChangeDetectorRef) { super(store, fb, entityValue, entitiesTableConfigValue, cd); } @@ -87,33 +88,39 @@ export class ResourcesLibraryComponent extends EntityComponent impleme } } - buildForm(entity: Resource): UntypedFormGroup { - const form = 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; + 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], + 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}); - this.entityForm.get('fileName').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); diff --git a/ui-ngx/src/app/shared/models/resource.models.ts b/ui-ngx/src/app/shared/models/resource.models.ts index 871bf147ea..8d7121c5e5 100644 --- a/ui-ngx/src/app/shared/models/resource.models.ts +++ b/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.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.LWM2M_MODEL, 'xml'], [ResourceType.PKCS_12, 'p12,pfx'], - [ResourceType.JKS, 'jks'] + [ResourceType.JKS, 'jks'], + [ResourceType.JS_MODULE, 'js'] ] ); export const ResourceTypeTranslationMap = new Map( [ - [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'] ] ); diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index ee081d9727..533afa474b 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/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",