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

UI: Fixed not opened image gallery when used multiple-gallery-image-input.component.ts

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2024-03-26 15:31:17 +02:00
parent bdc99ee4d9
commit 89780d381a
2 changed files with 22 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -85,12 +85,11 @@
</div> </div>
</div> </div>
<div *ngIf="linkType === ImageLinkType.none" class="tb-image-select-buttons-container"> <div *ngIf="linkType === ImageLinkType.none" class="tb-image-select-buttons-container">
<button #browseGalleryButton <button mat-stroked-button
mat-stroked-button
type="button" type="button"
color="primary" color="primary"
class="tb-image-select-button" class="tb-image-select-button"
(click)="toggleGallery($event, browseGalleryButton)"> (click)="toggleGallery($event)">
<tb-icon matButtonIcon>filter</tb-icon> <tb-icon matButtonIcon>filter</tb-icon>
<span translate>image.browse-from-gallery</span> <span translate>image.browse-from-gallery</span>
</button> </button>

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

@ -14,7 +14,7 @@
/// limitations under the License. /// limitations under the License.
/// ///
import { ChangeDetectorRef, Component, forwardRef, Input, OnDestroy, Renderer2, ViewContainerRef } from '@angular/core'; import { ChangeDetectorRef, Component, forwardRef, Input, OnDestroy } from '@angular/core';
import { PageComponent } from '@shared/components/page.component'; import { PageComponent } from '@shared/components/page.component';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state'; import { AppState } from '@core/core.state';
@ -24,10 +24,13 @@ import { DndDropEvent } from 'ngx-drag-drop';
import { isUndefined } from '@core/utils'; import { isUndefined } from '@core/utils';
import { coerceBoolean } from '@shared/decorators/coercion'; import { coerceBoolean } from '@shared/decorators/coercion';
import { ImageLinkType } from '@shared/components/image/gallery-image-input.component'; import { ImageLinkType } from '@shared/components/image/gallery-image-input.component';
import { TbPopoverService } from '@shared/components/popover.service'; import {
import { MatButton } from '@angular/material/button'; ImageResourceInfo,
import { ImageGalleryComponent } from '@shared/components/image/image-gallery.component'; prependTbImagePrefixToUrls,
import { prependTbImagePrefixToUrls, removeTbImagePrefixFromUrls } from '@shared/models/resource.models'; removeTbImagePrefixFromUrls
} from '@shared/models/resource.models';
import { MatDialog } from '@angular/material/dialog';
import { ImageGalleryDialogComponent } from '@shared/components/image/image-gallery-dialog.component';
@Component({ @Component({
selector: 'tb-multiple-gallery-image-input', selector: 'tb-multiple-gallery-image-input',
@ -66,10 +69,8 @@ export class MultipleGalleryImageInputComponent extends PageComponent implements
private propagateChange = null; private propagateChange = null;
constructor(protected store: Store<AppState>, constructor(protected store: Store<AppState>,
private cd: ChangeDetectorRef, private dialog: MatDialog,
private renderer: Renderer2, private cd: ChangeDetectorRef) {
private viewContainerRef: ViewContainerRef,
private popoverService: TbPopoverService) {
super(store); super(store);
} }
@ -130,31 +131,21 @@ export class MultipleGalleryImageInputComponent extends PageComponent implements
this.updateModel(); this.updateModel();
} }
toggleGallery($event: Event, browseGalleryButton: MatButton) { toggleGallery($event: Event) {
if ($event) { if ($event) {
$event.stopPropagation(); $event.stopPropagation();
} }
const trigger = browseGalleryButton._elementRef.nativeElement; this.dialog.open<ImageGalleryDialogComponent, any,
if (this.popoverService.hasPopover(trigger)) { ImageResourceInfo>(ImageGalleryDialogComponent, {
this.popoverService.hidePopover(trigger); autoFocus: false,
} else { disableClose: false,
const ctx: any = { panelClass: ['tb-dialog', 'tb-fullscreen-dialog']
pageMode: false, }).afterClosed().subscribe((image) => {
popoverMode: true, if (image) {
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.imageUrls.push(image.link); this.imageUrls.push(image.link);
this.updateModel(); this.updateModel();
}); }
} });
} }
imageDragStart(index: number) { imageDragStart(index: number) {