dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Added new resource type JS module

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2023-05-19 19:23:21 +03:00
parent 7e7b5b17e7
commit b41fa03d24
5 changed files with 48 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

16
ui-ngx/src/app/shared/models/resource.models.ts
View File

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

8
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -3259,7 +3259,13 @@
"system": "System", "system": "System",
"title": "Title", "title": "Title",
"title-required": "Title is required.", "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": {
"rulechain": "Rule chain", "rulechain": "Rule chain",