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

Merge pull request #10215 from vvlladd28/improvement/upload-image/double-request

Browse Source 
Optimized updated image in Image Gallery
This commit is contained in:
Igor Kulikov 2024-02-27 09:59:08 +02:00 committed by GitHub
commit ec540faed2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 33 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui-ngx/src/app/shared/components/image/image-dialog.component.ts
View File

@ -14,8 +14,7 @@
/// limitations under the License. /// limitations under the License.
/// ///
import { Component, Inject, OnInit, SkipSelf } from '@angular/core'; import { Component, Inject, OnInit } from '@angular/core';
import { ErrorStateMatcher } from '@angular/material/core';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog'; import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state'; import { AppState } from '@core/core.state';
@ -23,7 +22,7 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms
import { DialogComponent } from '@shared/components/dialog.component'; import { DialogComponent } from '@shared/components/dialog.component';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { ImageService } from '@core/http/image.service'; import { ImageService } from '@core/http/image.service';
import { ImageResourceInfo, imageResourceType } from '@shared/models/resource.models'; import { ImageResource, ImageResourceInfo, imageResourceType } from '@shared/models/resource.models';
import { import {
UploadImageDialogComponent, UploadImageDialogComponent,
UploadImageDialogData UploadImageDialogData
@ -143,7 +142,7 @@ export class ImageDialogComponent extends
$event.stopPropagation(); $event.stopPropagation();
} }
this.dialog.open<UploadImageDialogComponent, UploadImageDialogData, this.dialog.open<UploadImageDialogComponent, UploadImageDialogData,
ImageResourceInfo>(UploadImageDialogComponent, { ImageResource>(UploadImageDialogComponent, {
disableClose: true, disableClose: true,
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
data: { data: {
@ -153,9 +152,15 @@ export class ImageDialogComponent extends
if (result) { if (result) {
this.imageChanged = true; this.imageChanged = true;
this.image = result; this.image = result;
this.imagePreviewData = { let url;
url: this.image.public ? `${this.image.publicLink}?ts=${new Date().getTime()}` : this.image.link if (result.base64) {
}; url = result.base64;
} else if (this.image.public) {
url = `${this.image.publicLink}?ts=${new Date().getTime()}`;
} else {
url = this.image.link;
}
this.imagePreviewData = {url};
} }
}); });
} }

30
ui-ngx/src/app/shared/components/image/upload-image-dialog.component.ts
View File

@ -30,8 +30,10 @@ import {
import { DialogComponent } from '@shared/components/dialog.component'; import { DialogComponent } from '@shared/components/dialog.component';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { ImageService } from '@core/http/image.service'; import { ImageService } from '@core/http/image.service';
import { ImageResourceInfo, imageResourceType } from '@shared/models/resource.models'; import { ImageResource, ImageResourceInfo, imageResourceType } from '@shared/models/resource.models';
import { getCurrentAuthState } from '@core/auth/auth.selectors'; import { getCurrentAuthState } from '@core/auth/auth.selectors';
import { forkJoin } from 'rxjs';
import { blobToBase64 } from '@core/utils';
export interface UploadImageDialogData { export interface UploadImageDialogData {
image?: ImageResourceInfo; image?: ImageResourceInfo;
@ -44,7 +46,7 @@ export interface UploadImageDialogData {
styleUrls: [] styleUrls: []
}) })
export class UploadImageDialogComponent extends export class UploadImageDialogComponent extends
DialogComponent<UploadImageDialogComponent, ImageResourceInfo> implements OnInit, ErrorStateMatcher { DialogComponent<UploadImageDialogComponent, ImageResource> implements OnInit, ErrorStateMatcher {
uploadImageFormGroup: UntypedFormGroup; uploadImageFormGroup: UntypedFormGroup;
@ -59,7 +61,7 @@ export class UploadImageDialogComponent extends
private imageService: ImageService, private imageService: ImageService,
@Inject(MAT_DIALOG_DATA) public data: UploadImageDialogData, @Inject(MAT_DIALOG_DATA) public data: UploadImageDialogData,
@SkipSelf() private errorStateMatcher: ErrorStateMatcher, @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
public dialogRef: MatDialogRef<UploadImageDialogComponent, ImageResourceInfo>, public dialogRef: MatDialogRef<UploadImageDialogComponent, ImageResource>,
public fb: UntypedFormBuilder) { public fb: UntypedFormBuilder) {
super(store, router, dialogRef); super(store, router, dialogRef);
} }
@ -98,18 +100,20 @@ export class UploadImageDialogComponent extends
const file: File = this.uploadImageFormGroup.get('file').value; const file: File = this.uploadImageFormGroup.get('file').value;
if (this.uploadImage) { if (this.uploadImage) {
const title: string = this.uploadImageFormGroup.get('title').value; const title: string = this.uploadImageFormGroup.get('title').value;
this.imageService.uploadImage(file, title).subscribe( forkJoin([
(res) => { this.imageService.uploadImage(file, title),
this.dialogRef.close(res); blobToBase64(file)
} ]).subscribe(([imageInfo, base64]) => {
); this.dialogRef.close(Object.assign(imageInfo, {base64}));
});
} else { } else {
const image = this.data.image; const image = this.data.image;
this.imageService.updateImage(imageResourceType(image), image.resourceKey, file).subscribe( forkJoin([
(res) => { this.imageService.updateImage(imageResourceType(image), image.resourceKey, file),
this.dialogRef.close(res); blobToBase64(file)
} ]).subscribe(([imageInfo, base64]) => {
); this.dialogRef.close(Object.assign(imageInfo, {base64}));
});
} }
} }
} }

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

@ -86,6 +86,10 @@ export interface ImageResourceInfo extends TbResourceInfo<ImageDescriptor> {
publicLink?: string; publicLink?: string;
} }
export interface ImageResource extends ImageResourceInfo {
base64?: string;
}
export interface ImageExportData { export interface ImageExportData {
mediaType: string; mediaType: string;
fileName: string; fileName: string;