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

UI: Apply special prefix to gallery image inputs.

Browse Source
This commit is contained in:
Igor Kulikov 2023-11-28 18:26:04 +02:00
parent 344a7afb47
commit 5f98e654cd
4 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui-ngx/src/app/core/http/image.service.ts
View File

@ -25,7 +25,7 @@ import {
ImageResourceInfo,
imageResourceType,
ImageResourceType,
IMAGES_URL_PREFIX, isImageResourceUrl, ImageExportData
IMAGES_URL_PREFIX, isImageResourceUrl, ImageExportData, removeTbImagePrefix
} from '@shared/models/resource.models';
import { catchError, map, switchMap } from 'rxjs/operators';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
@ -97,6 +97,7 @@ export class ImageService {
}
public resolveImageUrl(imageUrl: string, preview = false, asString = false, emptyUrl = NO_IMAGE_DATA_URI): Observable<SafeUrl | string> {
imageUrl = removeTbImagePrefix(imageUrl);
if (isImageResourceUrl(imageUrl)) {
return this.getImageDataUrl(imageUrl, preview, asString, emptyUrl);
} else {

7
ui-ngx/src/app/shared/components/image/gallery-image-input.component.ts
View File

@ -33,7 +33,7 @@ import {
extractParamsFromImageResourceUrl,
ImageResourceInfo,
isBase64DataImageUrl,
isImageResourceUrl
isImageResourceUrl, prependTbImagePrefix, removeTbImagePrefix
} from '@shared/models/resource.models';
import { ImageService } from '@core/http/image.service';
import { MatButton } from '@angular/material/button';
@ -123,12 +123,13 @@ export class GalleryImageInputComponent extends PageComponent implements OnInit,
}
writeValue(value: string): void {
value = removeTbImagePrefix(value);
if (this.imageUrl !== value) {
this.reset();
this.imageUrl = value;
this.detectLinkType();
if (this.linkType === ImageLinkType.resource) {
const params = extractParamsFromImageResourceUrl(value);
const params = extractParamsFromImageResourceUrl(this.imageUrl);
this.loadingImageResource = true;
this.imageService.getImageInfo(params.type, params.key, {ignoreLoading: true, ignoreErrors: true}).subscribe(
{
@ -171,7 +172,7 @@ export class GalleryImageInputComponent extends PageComponent implements OnInit,
this.cd.markForCheck();
if (this.imageUrl !== value) {
this.imageUrl = value;
this.propagateChange(this.imageUrl);
this.propagateChange(prependTbImagePrefix(this.imageUrl));
}
}

5
ui-ngx/src/app/shared/components/image/multiple-gallery-image-input.component.ts
View File

@ -27,6 +27,7 @@ import { ImageLinkType } from '@shared/components/image/gallery-image-input.comp
import { TbPopoverService } from '@shared/components/popover.service';
import { MatButton } from '@angular/material/button';
import { ImageGalleryComponent } from '@shared/components/image/image-gallery.component';
import { prependTbImagePrefixToUrls, removeTbImagePrefixFromUrls } from '@shared/models/resource.models';
@Component({
selector: 'tb-multiple-gallery-image-input',
@ -88,12 +89,12 @@ export class MultipleGalleryImageInputComponent extends PageComponent implements
writeValue(value: string[]): void {
this.reset();
this.imageUrls = value || [];
this.imageUrls = removeTbImagePrefixFromUrls(value);
}
private updateModel() {
this.cd.markForCheck();
this.propagateChange(this.imageUrls);
this.propagateChange(prependTbImagePrefixToUrls(this.imageUrls));
}
private reset() {

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

@ -127,11 +127,27 @@ export const toImageDeleteResult = (image: ImageResourceInfo, e?: any): ImageDel
export const imageResourceType = (imageInfo: ImageResourceInfo): ImageResourceType =>
(!imageInfo.tenantId || imageInfo.tenantId?.id === NULL_UUID) ? 'system' : 'tenant';
export const TB_IMAGE_PREFIX = 'tb-image;';
export const IMAGES_URL_REGEXP = /\/api\/images\/(tenant|system)\/(.*)/;
export const IMAGES_URL_PREFIX = '/api/images';
export const IMAGE_BASE64_URL_PREFIX = 'data:image/';
export const removeTbImagePrefix = (url: string): string => url ? url.replace(TB_IMAGE_PREFIX, '') : url;
export const removeTbImagePrefixFromUrls = (urls: string[]): string[] => urls ? urls.map(url => removeTbImagePrefix(url)) : [];
export const prependTbImagePrefix = (url: string): string => {
if (url && !url.startsWith(TB_IMAGE_PREFIX)) {
url = TB_IMAGE_PREFIX + url;
}
return url;
};
export const prependTbImagePrefixToUrls = (urls: string[]): string[] => urls ? urls.map(url => prependTbImagePrefix(url)) : [];
export const isImageResourceUrl = (url: string): boolean => url && IMAGES_URL_REGEXP.test(url);
export const extractParamsFromImageResourceUrl = (url: string): {type: ImageResourceType; key: string} => {