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 *ngIf="linkType === ImageLinkType.none" class="tb-image-select-buttons-container">
<button #browseGalleryButton
mat-stroked-button
<button mat-stroked-button
type="button"
color="primary"
class="tb-image-select-button"
(click)="toggleGallery($event, browseGalleryButton)">
(click)="toggleGallery($event)">
<tb-icon matButtonIcon>filter</tb-icon>
<span translate>image.browse-from-gallery</span>
</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.
///
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 { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
@ -24,10 +24,13 @@ import { DndDropEvent } from 'ngx-drag-drop';
import { isUndefined } from '@core/utils';
import { coerceBoolean } from '@shared/decorators/coercion';
import { ImageLinkType } from '@shared/components/image/gallery-image-input.component';
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';
import {
ImageResourceInfo,
prependTbImagePrefixToUrls,
removeTbImagePrefixFromUrls
} from '@shared/models/resource.models';
import { MatDialog } from '@angular/material/dialog';
import { ImageGalleryDialogComponent } from '@shared/components/image/image-gallery-dialog.component';
@Component({
selector: 'tb-multiple-gallery-image-input',
@ -66,10 +69,8 @@ export class MultipleGalleryImageInputComponent extends PageComponent implements
private propagateChange = null;
constructor(protected store: Store<AppState>,
private cd: ChangeDetectorRef,
private renderer: Renderer2,
private viewContainerRef: ViewContainerRef,
private popoverService: TbPopoverService) {
private dialog: MatDialog,
private cd: ChangeDetectorRef) {
super(store);
}
@ -130,31 +131,21 @@ export class MultipleGalleryImageInputComponent extends PageComponent implements
this.updateModel();
}
toggleGallery($event: Event, browseGalleryButton: MatButton) {
toggleGallery($event: Event) {
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.dialog.open<ImageGalleryDialogComponent, any,
ImageResourceInfo>(ImageGalleryDialogComponent, {
autoFocus: false,
disableClose: false,
panelClass: ['tb-dialog', 'tb-fullscreen-dialog']
}).afterClosed().subscribe((image) => {
if (image) {
this.imageUrls.push(image.link);
this.updateModel();
});
}
}
});
}
imageDragStart(index: number) {