From bda319c3e86e1f1f48aae906021a8d786dbf54ec Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Fri, 24 Nov 2023 18:47:46 +0200 Subject: [PATCH] UI: Implement gallery image input component. --- ui-ngx/src/app/core/http/image.service.ts | 8 +- .../home/components/home-components.module.ts | 7 +- .../image/gallery-image-input.component.html | 93 ++++++++ .../image/gallery-image-input.component.scss | 180 ++++++++++++++ .../image/gallery-image-input.component.ts | 224 ++++++++++++++++++ .../image/image-gallery.component.html | 27 ++- .../image/image-gallery.component.scss | 33 +++ .../image/image-gallery.component.ts | 60 +++-- .../image/images-in-use-dialog.component.html | 4 +- .../image/images-in-use-dialog.component.ts | 14 +- .../widget/widgets-bundle.component.html | 8 +- .../shared/components/popover.component.ts | 4 +- .../src/app/shared/models/resource.models.ts | 12 +- ui-ngx/src/app/shared/pipe/image.pipe.ts | 16 +- .../assets/locale/locale.constant-en_US.json | 10 +- 15 files changed, 654 insertions(+), 46 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/image/gallery-image-input.component.html create mode 100644 ui-ngx/src/app/modules/home/components/image/gallery-image-input.component.scss create mode 100644 ui-ngx/src/app/modules/home/components/image/gallery-image-input.component.ts diff --git a/ui-ngx/src/app/core/http/image.service.ts b/ui-ngx/src/app/core/http/image.service.ts index abce29d9e3..4366d6edda 100644 --- a/ui-ngx/src/app/core/http/image.service.ts +++ b/ui-ngx/src/app/core/http/image.service.ts @@ -80,7 +80,7 @@ export class ImageService { defaultHttpOptionsFromConfig(config)); } - public getImageDataUrl(imageUrl: string, preview = false, asString = false): Observable { + public getImageDataUrl(imageUrl: string, preview = false, asString = false, emptyUrl = NO_IMAGE_DATA_URI): Observable { const parts = imageUrl.split('/'); const key = parts[parts.length - 1]; parts[parts.length - 1] = encodeURIComponent(key); @@ -92,13 +92,13 @@ export class ImageService { switchMap(val => blobToBase64(val).pipe( map((dataUrl) => asString ? dataUrl : this.sanitizer.bypassSecurityTrustUrl(dataUrl)) )), - catchError(() => of(asString ? NO_IMAGE_DATA_URI : this.sanitizer.bypassSecurityTrustUrl(NO_IMAGE_DATA_URI))) + catchError(() => of(asString ? emptyUrl : this.sanitizer.bypassSecurityTrustUrl(emptyUrl))) ); } - public resolveImageUrl(imageUrl: string, preview = false, asString = false): Observable { + public resolveImageUrl(imageUrl: string, preview = false, asString = false, emptyUrl = NO_IMAGE_DATA_URI): Observable { if (isImageResourceUrl(imageUrl)) { - return this.getImageDataUrl(imageUrl, preview, asString); + return this.getImageDataUrl(imageUrl, preview, asString, emptyUrl); } else { return of(asString ? imageUrl : this.sanitizer.bypassSecurityTrustUrl(imageUrl)); } diff --git a/ui-ngx/src/app/modules/home/components/home-components.module.ts b/ui-ngx/src/app/modules/home/components/home-components.module.ts index 75f124f2b9..14fcb6bddc 100644 --- a/ui-ngx/src/app/modules/home/components/home-components.module.ts +++ b/ui-ngx/src/app/modules/home/components/home-components.module.ts @@ -187,6 +187,7 @@ import { UploadImageDialogComponent } from '@home/components/image/upload-image- import { ImageDialogComponent } from '@home/components/image/image-dialog.component'; import { ImagesInUseDialogComponent } from '@home/components/image/images-in-use-dialog.component'; import { ImageReferencesComponent } from '@home/components/image/image-references.component'; +import { GalleryImageInputComponent } from '@home/components/image/gallery-image-input.component'; @NgModule({ declarations: @@ -337,7 +338,8 @@ import { ImageReferencesComponent } from '@home/components/image/image-reference UploadImageDialogComponent, ImageDialogComponent, ImageReferencesComponent, - ImagesInUseDialogComponent + ImagesInUseDialogComponent, + GalleryImageInputComponent ], imports: [ CommonModule, @@ -481,7 +483,8 @@ import { ImageReferencesComponent } from '@home/components/image/image-reference UploadImageDialogComponent, ImageDialogComponent, ImageReferencesComponent, - ImagesInUseDialogComponent + ImagesInUseDialogComponent, + GalleryImageInputComponent ], providers: [ WidgetComponentService, diff --git a/ui-ngx/src/app/modules/home/components/image/gallery-image-input.component.html b/ui-ngx/src/app/modules/home/components/image/gallery-image-input.component.html new file mode 100644 index 0000000000..ce81ce4a1b --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/image/gallery-image-input.component.html @@ -0,0 +1,93 @@ + +
+ +
+
+ +
+
+
+
+
+ +
+ {{ imageResource.title }} +
+
+
{{ imageResource.descriptor.width }}x{{ imageResource.descriptor.height }}
+ +
{{ imageResource.descriptor.size | fileSize }}
+
+ +
+
+
+ {{ 'image.image-link' | translate }} +
+
+ + + + +
+
+ +
+
+ + +
+
+
+ + +
{{ (disabled ? 'image.no-image' : 'image.no-image-selected') | translate }}
+ + + + diff --git a/ui-ngx/src/app/modules/home/components/image/gallery-image-input.component.scss b/ui-ngx/src/app/modules/home/components/image/gallery-image-input.component.scss new file mode 100644 index 0000000000..6b64516816 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/image/gallery-image-input.component.scss @@ -0,0 +1,180 @@ +/** + * Copyright © 2016-2023 The Thingsboard Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +$containerHeight: 96px !default; + +:host { + .tb-container { + margin-top: 0; + padding: 0 0 16px; + display: flex; + flex-direction: column; + gap: 8px; + label.tb-title { + display: block; + padding-bottom: 0; + } + } + + .tb-image-select-container { + width: 100%; + height: $containerHeight; + border-radius: 4px; + border: 1px solid rgba(0, 0, 0, 0.12); + display: flex; + align-items: center; + &.disabled { + width: $containerHeight; + .tb-image-container { + width: $containerHeight - 2px; + border-right: none; + } + } + } + + .tb-image-container { + width: $containerHeight - 1px; + height: $containerHeight - 2px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 4px; + border-right: 1px solid rgba(0, 0, 0, 0.12); + background: #fff; + overflow: hidden; + } + + .tb-image-preview { + width: auto; + max-width: $containerHeight - 2px; + height: auto; + max-height: $containerHeight - 2px; + } + + .tb-no-image { + text-align: center; + color: rgba(0, 0, 0, 0.38); + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 16px; + letter-spacing: 0.4px; + } + + .tb-image-info-container { + display: flex; + flex: 1; + align-self: stretch; + padding: 0 8px; + justify-content: flex-end; + align-items: center; + gap: 4px; + .tb-base64-image-container, .tb-resource-image-container, .tb-external-image-container { + display: flex; + flex: 1; + align-self: stretch; + } + .tb-resource-image-container { + padding: 8px; + justify-content: center; + align-items: flex-start; + flex-direction: column; + gap: 4px; + .tb-resource-image-name { + color: rgba(0, 0, 0, 0.54); + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: 16px; + letter-spacing: 0.25px; + } + .tb-resource-image-details { + display: flex; + align-items: center; + gap: 8px; + color: rgba(0, 0, 0, 0.38); + font-size: 11px; + font-style: normal; + font-weight: 400; + line-height: 16px; + letter-spacing: 0.017px; + .mat-divider.mat-divider-vertical { + height: 16px; + } + } + &.loading { + align-items: center; + } + } + + .tb-external-image-container { + padding: 16px 8px 0 16px; + flex-direction: column; + align-items: flex-start; + gap: 4px; + .tb-external-link-label { + color: rgba(0, 0, 0, 0.54); + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 16px; + letter-spacing: 0.4px; + } + .tb-external-link-input-container { + display: flex; + justify-content: flex-end; + align-items: center; + gap: 4px; + align-self: stretch; + .tb-inline-field { + width: 100%; + } + } + } + + .tb-image-clear-btn { + color: rgba(0,0,0,0.38); + } + } + + .tb-image-select-buttons-container { + display: flex; + flex: 1; + align-self: stretch; + padding: 8px; + gap: 8px; + justify-content: center; + align-items: flex-start; + .tb-image-select-button { + width: 100%; + height: 100%; + align-self: stretch; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 4px; + padding: 16px; + line-height: normal; + font-size: 12px; + .mat-icon { + width: 24px; + height: 24px; + font-size: 24px; + margin: 0; + } + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/image/gallery-image-input.component.ts b/ui-ngx/src/app/modules/home/components/image/gallery-image-input.component.ts new file mode 100644 index 0000000000..527fe28d12 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/image/gallery-image-input.component.ts @@ -0,0 +1,224 @@ +/// +/// Copyright © 2016-2023 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { + ChangeDetectorRef, + Component, + forwardRef, + Input, + OnDestroy, + OnInit, + Renderer2, + ViewContainerRef +} from '@angular/core'; +import { PageComponent } from '@shared/components/page.component'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, } from '@angular/forms'; +import { coerceBoolean } from '@shared/decorators/coercion'; +import { + extractParamsFromImageResourceUrl, + ImageResourceInfo, + isBase64DataImageUrl, + isImageResourceUrl +} from '@shared/models/resource.models'; +import { ImageService } from '@core/http/image.service'; +import { MatButton } from '@angular/material/button'; +import { TbPopoverService } from '@shared/components/popover.service'; +import { ImageGalleryComponent } from '@home/components/image/image-gallery.component'; + +enum ImageLinkType { + none = 'none', + base64 = 'base64', + external = 'external', + resource = 'resource' +} + +@Component({ + selector: 'tb-gallery-image-input', + templateUrl: './gallery-image-input.component.html', + styleUrls: ['./gallery-image-input.component.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => GalleryImageInputComponent), + multi: true + } + ] +}) +export class GalleryImageInputComponent extends PageComponent implements OnInit, OnDestroy, ControlValueAccessor { + + @Input() + label: string; + + @Input() + @coerceBoolean() + required = false; + + @Input() + disabled: boolean; + + imageUrl: string; + + imageResource: ImageResourceInfo; + + loadingImageResource = false; + + ImageLinkType = ImageLinkType; + + linkType: ImageLinkType = ImageLinkType.none; + + externalLinkControl = new FormControl(null); + + private propagateChange = null; + + constructor(protected store: Store, + private imageService: ImageService, + private cd: ChangeDetectorRef, + private renderer: Renderer2, + private viewContainerRef: ViewContainerRef, + private popoverService: TbPopoverService) { + super(store); + } + + ngOnInit() { + this.externalLinkControl.valueChanges.subscribe((value) => { + if (this.linkType === ImageLinkType.external) { + this.imageUrl = value; + this.updateModel(); + } + }); + } + + ngOnDestroy() { + } + + registerOnChange(fn: any): void { + this.propagateChange = fn; + } + + registerOnTouched(fn: any): void { + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + if (this.disabled) { + this.detectLinkType(); + this.externalLinkControl.disable({emitEvent: false}); + } else { + this.externalLinkControl.enable({emitEvent: false}); + } + } + + writeValue(value: string): void { + if (this.imageUrl !== value) { + this.reset(); + this.imageUrl = value; + this.detectLinkType(); + if (this.linkType === ImageLinkType.resource) { + const params = extractParamsFromImageResourceUrl(value); + this.loadingImageResource = true; + this.imageService.getImageInfo(params.type, params.key, {ignoreLoading: true, ignoreErrors: true}).subscribe( + { + next: (res) => { + this.imageResource = res; + this.loadingImageResource = false; + this.cd.markForCheck(); + }, + error: () => { + this.reset(); + this.loadingImageResource = false; + this.cd.markForCheck(); + } + } + ); + } else if (this.linkType === ImageLinkType.base64) { + this.cd.markForCheck(); + } else if (this.linkType === ImageLinkType.external) { + this.externalLinkControl.setValue(this.imageUrl, {emitEvent: false}); + this.cd.markForCheck(); + } + } + } + + private detectLinkType() { + if (this.imageUrl) { + if (isImageResourceUrl(this.imageUrl)) { + this.linkType = ImageLinkType.resource; + } else if (isBase64DataImageUrl(this.imageUrl)) { + this.linkType = ImageLinkType.base64; + } else { + this.linkType = ImageLinkType.external; + } + } else { + this.linkType = ImageLinkType.none; + } + } + + private updateModel() { + this.cd.markForCheck(); + this.propagateChange(this.imageUrl); + } + + private reset() { + this.linkType = ImageLinkType.none; + this.imageUrl = null; + this.imageResource = null; + this.externalLinkControl.setValue(null, {emitEvent: false}); + } + + clearImage() { + this.reset(); + this.updateModel(); + } + + setLink($event: Event) { + if ($event) { + $event.stopPropagation(); + } + this.linkType = ImageLinkType.external; + } + + toggleGallery($event: Event, browseGalleryButton: MatButton) { + if ($event) { + $event.stopPropagation(); + } + const trigger = browseGalleryButton._elementRef.nativeElement; + if (this.popoverService.hasPopover(trigger)) { + this.popoverService.hidePopover(trigger); + } else { + const ctx: any = { + pageMode: false, + popoverMode: true, + mode: 'grid', + selectionMode: true + }; + const imageGalleryPopover = this.popoverService.displayPopover(trigger, this.renderer, + this.viewContainerRef, ImageGalleryComponent, 'top', true, null, + ctx, + {}, + {}, {}, true); + imageGalleryPopover.tbComponentRef.instance.imageSelected.subscribe((image) => { + imageGalleryPopover.hide(); + this.linkType = ImageLinkType.resource; + this.imageUrl = image.link; + this.imageResource = image; + this.updateModel(); + }); + } + } + +} diff --git a/ui-ngx/src/app/modules/home/components/image/image-gallery.component.html b/ui-ngx/src/app/modules/home/components/image/image-gallery.component.html index 96eb9c7be9..6b46bb1779 100644 --- a/ui-ngx/src/app/modules/home/components/image/image-gallery.component.html +++ b/ui-ngx/src/app/modules/home/components/image/image-gallery.component.html @@ -15,11 +15,11 @@ limitations under the License. --> -
+
+ [fxShow]="!textSearchMode && (mode === 'grid' || dataSource?.selection.isEmpty())" [ngClass.lt-md]="{'multi-row': !isSysAdmin}">
image.gallery @@ -93,7 +93,7 @@ {{ 'image.include-system-images' | translate }} - +
- +
- {{ translate.get('image.selected-images', {count: dataSource.selection.selected.length}) | async }} + {{ translate.get('image.selected-images', {count: dataSource?.selection.selected.length}) | async }} + +
-
+
+
{{ item.title }} diff --git a/ui-ngx/src/app/modules/home/components/image/image-gallery.component.scss b/ui-ngx/src/app/modules/home/components/image/image-gallery.component.scss index 0b7b5e3c65..00b40ff2e1 100644 --- a/ui-ngx/src/app/modules/home/components/image/image-gallery.component.scss +++ b/ui-ngx/src/app/modules/home/components/image/image-gallery.component.scss @@ -13,9 +13,42 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + +@import "../../../../../scss/constants"; + $tb-button-selected-color: rgb(255, 110, 64) !default; .tb-images { + + &.tb-popover-mode { + padding-top: 8px; + position: relative; + width: 300px; + height: 500px; + max-width: calc(100vw - 50px); + max-height: calc(100vh - 100px); + @media #{$mat-gt-xs} { + width: 400px; + height: 600px; + } + @media #{$mat-gt-sm} { + width: 500px; + height: 600px; + } + @media #{$mat-gt-md} { + width: 700px; + height: 700px; + } + @media #{$mat-gt-xmd} { + width: 900px; + height: 700px; + } + @media #{$mat-gt-xl} { + width: 1200px; + height: 800px; + } + } + .tb-images-content { width: 100%; height: 100%; diff --git a/ui-ngx/src/app/modules/home/components/image/image-gallery.component.ts b/ui-ngx/src/app/modules/home/components/image/image-gallery.component.ts index 43938f2515..c8d65d2732 100644 --- a/ui-ngx/src/app/modules/home/components/image/image-gallery.component.ts +++ b/ui-ngx/src/app/modules/home/components/image/image-gallery.component.ts @@ -29,10 +29,10 @@ import { AfterViewInit, ChangeDetectorRef, Component, - ElementRef, + ElementRef, EventEmitter, Input, OnDestroy, - OnInit, + OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core'; @@ -74,6 +74,28 @@ interface GridImagesFilter { includeSystemImages: boolean; } +const pageGridColumns: ScrollGridColumns = { + columns: 2, + breakpoints: { + 'screen and (min-width: 2320px)': 10, + 'screen and (min-width: 2000px)': 8, + 'gt-lg': 7, + 'screen and (min-width: 1600px)': 6, + 'gt-md': 5, + 'screen and (min-width: 1120px)': 4, + 'gt-xs': 3 + } +}; + +const popoverGridColumns: ScrollGridColumns = { + columns: 2, + breakpoints: { + 'gt-lg': 5, + 'screen and (min-width: 1600px)': 4, + 'gt-md': 3 + } +}; + @Component({ selector: 'tb-image-gallery', templateUrl: './image-gallery.component.html', @@ -86,9 +108,19 @@ export class ImageGalleryComponent extends PageComponent implements OnInit, OnDe @coerceBoolean() pageMode = true; + @Input() + @coerceBoolean() + popoverMode = false; + @Input() mode: 'list' | 'grid' = 'list'; + @Input() + selectionMode = false; + + @Output() + imageSelected = new EventEmitter(); + @ViewChild('searchInput') searchInputField: ElementRef; @ViewChild(MatPaginator) paginator: MatPaginator; @@ -111,18 +143,7 @@ export class ImageGalleryComponent extends PageComponent implements OnInit, OnDe textSearch = this.fb.control('', {nonNullable: true}); includeSystemImages = this.fb.control(false); - gridColumns: ScrollGridColumns = { - columns: 2, - breakpoints: { - 'screen and (min-width: 2320px)': 10, - 'screen and (min-width: 2000px)': 8, - 'gt-lg': 7, - 'screen and (min-width: 1600px)': 6, - 'gt-md': 5, - 'screen and (min-width: 1120px)': 4, - 'gt-xs': 3 - } - }; + gridColumns: ScrollGridColumns; gridImagesFetchFunction: GridEntitiesFetchFunction; gridImagesFilter: GridImagesFilter = { @@ -166,6 +187,7 @@ export class ImageGalleryComponent extends PageComponent implements OnInit, OnDe } ngOnInit(): void { + this.gridColumns = this.popoverMode ? popoverGridColumns : pageGridColumns; this.displayedColumns = this.computeDisplayedColumns(); let sortOrder: SortOrder = this.defaultSortOrder; this.pageSizeOptions = [this.defaultPageSize, this.defaultPageSize * 2, this.defaultPageSize * 3]; @@ -285,6 +307,9 @@ export class ImageGalleryComponent extends PageComponent implements OnInit, OnDe } private computeDisplayedColumns(): string[] { + if (this.selectionMode) { + return ['preview', 'title', 'imageSelect']; + } const columns = ['select', 'preview', 'title', 'createdTime', 'resolution', 'size']; if (!this.isSysAdmin && this.includeSystemImages.value) { columns.push('system'); @@ -567,6 +592,13 @@ export class ImageGalleryComponent extends PageComponent implements OnInit, OnDe }); } + selectImage($event, image: ImageResourceInfo) { + if ($event) { + $event.stopPropagation(); + } + this.imageSelected.next(image); + } + uploadImage(): void { this.dialog.open(UploadImageDialogComponent, { diff --git a/ui-ngx/src/app/modules/home/components/image/images-in-use-dialog.component.html b/ui-ngx/src/app/modules/home/components/image/images-in-use-dialog.component.html index 12690094b2..8739f7c9b2 100644 --- a/ui-ngx/src/app/modules/home/components/image/images-in-use-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/image/images-in-use-dialog.component.html @@ -15,9 +15,9 @@ limitations under the License. --> -

{{title | translate}}

+

{{title}}

-
+
diff --git a/ui-ngx/src/app/modules/home/components/image/images-in-use-dialog.component.ts b/ui-ngx/src/app/modules/home/components/image/images-in-use-dialog.component.ts index 9e1e7708c9..2211f7e071 100644 --- a/ui-ngx/src/app/modules/home/components/image/images-in-use-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/image/images-in-use-dialog.component.ts @@ -60,12 +60,12 @@ export class ImagesInUseDialogComponent extends ngOnInit(): void { if (this.data.multiple) { - this.title = 'image.images-are-in-use'; - this.message = 'image.images-are-in-use-text'; + this.title = this.translate.instant('image.images-are-in-use'); + this.message = this.translate.instant('image.images-are-in-use-text'); this.dataSource = new ImagesDatasource(null, this.data.images, entity => true); } else { - this.title = 'image.image-is-in-use'; - this.message = 'image.image-is-in-use-text'; + this.title = this.translate.instant('image.image-is-in-use'); + this.message = this.translate.instant('image.image-is-in-use-text', {title: this.data.images[0].title}); this.references = this.data.images[0].references; } } @@ -97,8 +97,10 @@ export class ImagesInUseDialogComponent extends }, {}, {}, {}, false, visible => { - const addClasses = visible ? 'mdc-button--unelevated mat-mdc-unelevated-button' : 'mdc-button--outlined mat-mdc-outlined-button'; - const removeClasses = visible ? 'mdc-button--outlined mat-mdc-outlined-button' : 'mdc-button--unelevated mat-mdc-unelevated-button'; + const addClasses = + visible ? 'mdc-button--unelevated mat-mdc-unelevated-button' : 'mdc-button--outlined mat-mdc-outlined-button'; + const removeClasses = + visible ? 'mdc-button--outlined mat-mdc-outlined-button' : 'mdc-button--unelevated mat-mdc-unelevated-button'; addClasses.split(' ').forEach(clazz => { this.renderer.addClass(trigger, clazz); }); diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html index 3e324a646f..89d122eccd 100644 --- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html +++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html @@ -54,11 +54,15 @@ {{ 'widgets-bundle.title-max-length' | translate }} - + + widgets-bundle.description diff --git a/ui-ngx/src/app/shared/components/popover.component.ts b/ui-ngx/src/app/shared/components/popover.component.ts index 27705c4802..bd9df1b898 100644 --- a/ui-ngx/src/app/shared/components/popover.component.ts +++ b/ui-ngx/src/app/shared/components/popover.component.ts @@ -44,7 +44,7 @@ import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedOverlayPositionChange, - ConnectionPositionPair + ConnectionPositionPair, NoopScrollStrategy } from '@angular/cdk/overlay'; import { Subject, Subscription } from 'rxjs'; import { @@ -311,6 +311,7 @@ export class TbPopoverDirective implements OnChanges, OnDestroy, AfterViewInit { [cdkConnectedOverlayHasBackdrop]="hasBackdrop" [cdkConnectedOverlayOrigin]="origin" [cdkConnectedOverlayPositions]="positions" + [cdkConnectedOverlayScrollStrategy]="scrollStrategy" [cdkConnectedOverlayOpen]="visible" [cdkConnectedOverlayPush]="true" (overlayOutsideClick)="onClickOutside($event)" @@ -451,6 +452,7 @@ export class TbPopoverComponent implements OnDestroy, OnInit { public dir: Direction = 'ltr'; classMap: { [klass: string]: any } = {}; positions: ConnectionPositionPair[] = [...DEFAULT_POPOVER_POSITIONS]; + scrollStrategy = new NoopScrollStrategy(); private parentScrollSubscription: Subscription = null; private intersectionObserver = new IntersectionObserver((entries) => { if (this.lastIsIntersecting !== entries[0].isIntersecting) { diff --git a/ui-ngx/src/app/shared/models/resource.models.ts b/ui-ngx/src/app/shared/models/resource.models.ts index da6cc197a5..b019c064ea 100644 --- a/ui-ngx/src/app/shared/models/resource.models.ts +++ b/ui-ngx/src/app/shared/models/resource.models.ts @@ -127,8 +127,18 @@ 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 IMAGES_URL_REGEXP = /\/api\/images\/(tenant|system)\/(.*)/; export const IMAGES_URL_PREFIX = '/api/images'; -export const isImageResourceUrl = (url: string): boolean => url && url.startsWith(IMAGES_URL_PREFIX); +export const IMAGE_BASE64_URL_PREFIX = 'data:image/'; + +export const isImageResourceUrl = (url: string): boolean => url && IMAGES_URL_REGEXP.test(url); + +export const extractParamsFromImageResourceUrl = (url: string): {type: ImageResourceType; key: string} => { + const res = url.match(IMAGES_URL_REGEXP); + return {type: res[1] as ImageResourceType, key: res[2]}; +}; + +export const isBase64DataImageUrl = (url: string): boolean => url && url.startsWith(IMAGE_BASE64_URL_PREFIX); export const NO_IMAGE_DATA_URI = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; diff --git a/ui-ngx/src/app/shared/pipe/image.pipe.ts b/ui-ngx/src/app/shared/pipe/image.pipe.ts index 6cad747676..e1467fe40e 100644 --- a/ui-ngx/src/app/shared/pipe/image.pipe.ts +++ b/ui-ngx/src/app/shared/pipe/image.pipe.ts @@ -40,18 +40,22 @@ export class ImagePipe implements PipeTransform { transform(urlData: string | UrlHolder, args?: any): Observable { const ignoreLoadingImage = !!args?.ignoreLoadingImage; const asString = !!args?.asString; + const emptyUrl = args?.emptyUrl || NO_IMAGE_DATA_URI; const image$ = ignoreLoadingImage ? new Subject() : new BehaviorSubject(LOADING_IMAGE_DATA_URI); const url = (typeof urlData === 'string') ? urlData : urlData?.url; if (isDefinedAndNotNull(url)) { const preview = !!args?.preview; - this.imageService.resolveImageUrl(url, preview, asString).subscribe((imageUrl) => { - image$.next(imageUrl); - image$.complete(); + this.imageService.resolveImageUrl(url, preview, asString, emptyUrl).subscribe((imageUrl) => { + Promise.resolve().then(() => { + image$.next(imageUrl); + image$.complete(); + }); }); } else { - const emptyUrl = args?.emptyUrl || NO_IMAGE_DATA_URI; - image$.next(asString ? emptyUrl : this.sanitizer.bypassSecurityTrustUrl(emptyUrl)); - image$.complete(); + Promise.resolve().then(() => { + image$.next(asString ? emptyUrl : this.sanitizer.bypassSecurityTrustUrl(emptyUrl)); + image$.complete(); + }); } return image$.asObservable(); } 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 9bd9ef140c..f29faeaffd 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -2976,13 +2976,19 @@ "invalid-image-json-file-error": "Unable to import image from JSON: Invalid image JSON data structure.", "image-is-in-use": "Image is used by other entities", "images-are-in-use": "Images are used by other entities", - "image-is-in-use-text": "The image was not deleted because it is used by the following entities:", + "image-is-in-use-text": "The image '{{title}}' was not deleted because it is used by the following entities:", "images-are-in-use-text": "Not all images have been deleted because they are used by other entities.
You can view referenced entities by clicking the References button in the corresponding image row.
If you still want to delete these images, select them in the table below and click the Delete selected button.", "delete-image-in-use-text": "If you still want to delete the image, click the Delete anyway button.", "system-entities": "System entities:", "entities": "entities:", "references": "References", - "include-system-images": "Include system images" + "include-system-images": "Include system images", + "clear-image": "Clear image", + "no-image": "No image", + "no-image-selected": "No image selected", + "browse-from-gallery": "Browse from gallery", + "set-link": "Set link", + "image-link": "Image link" }, "image-input": { "drop-images-or": "Drag and drop an images or",