Igor Kulikov
3 years ago
39 changed files with 959 additions and 164 deletions
@ -0,0 +1,49 @@ |
|||
<!-- |
|||
|
|||
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. |
|||
|
|||
--> |
|||
<ng-container *ngIf="simpleList; else complexEntityReferences"> |
|||
<ng-container *ngTemplateOutlet="referencesList; context:{entriesList: referencedEntitiesList, showDetailsLink: true}"></ng-container> |
|||
</ng-container> |
|||
<ng-template #complexEntityReferences> |
|||
<ng-container *ngIf="contentReady; else loading"> |
|||
<ul> |
|||
<ng-container *ngFor="let entry of referencedEntitiesEntries"> |
|||
<li *ngIf="isSystem(entry[0]); else tenantEntities"> |
|||
{{ 'image.system-entities' | translate }} |
|||
<ng-container *ngTemplateOutlet="referencesList; context:{entriesList: entry[1].entities, showDetailsLink: true}"></ng-container> |
|||
</li> |
|||
<ng-template #tenantEntities> |
|||
<li> |
|||
{{ 'tenant.tenant' | translate }} <a [routerLink]="entry[1].tenantDetailsUrl">{{ '"' + entry[1].tenantName + '"' }}</a> {{ 'image.entities' | translate }} |
|||
<ng-container *ngTemplateOutlet="referencesList; context:{entriesList: entry[1].entities, showDetailsLink: false}"></ng-container> |
|||
</li> |
|||
</ng-template> |
|||
</ng-container> |
|||
</ul> |
|||
</ng-container> |
|||
</ng-template> |
|||
<ng-template #referencesList let-entriesList="entriesList" let-showDetailsLink="showDetailsLink"> |
|||
<ul> |
|||
<li *ngFor="let referencedEntity of entriesList"> |
|||
{{ referencedEntity.typeName }} <a *ngIf="showDetailsLink" [routerLink]="referencedEntity.detailsUrl">{{ '"' + referencedEntity.entity.name + '"' }}</a> |
|||
<b *ngIf="!showDetailsLink">{{ '"' + referencedEntity.entity.name + '"' }}</b> |
|||
</li> |
|||
</ul> |
|||
</ng-template> |
|||
<ng-template #loading> |
|||
<mat-spinner [diameter]="32" strokeWidth="2"></mat-spinner> |
|||
</ng-template> |
|||
@ -0,0 +1,171 @@ |
|||
///
|
|||
/// 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, Input, OnInit } from '@angular/core'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { ImageReferences } from '@shared/models/resource.models'; |
|||
import { EntityType, entityTypeTranslations } from '@shared/models/entity-type.models'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
import { getEntityDetailsPageURL } from '@core/utils'; |
|||
import { getCurrentAuthUser } from '@core/auth/auth.selectors'; |
|||
import { NULL_UUID } from '@shared/models/id/has-uuid'; |
|||
import { Authority } from '@shared/models/authority.enum'; |
|||
import { Observable } from 'rxjs'; |
|||
import { EntityService } from '@core/http/entity.service'; |
|||
import { BaseData, HasId } from '@shared/models/base-data'; |
|||
import { HasTenantId } from '@shared/models/entity.models'; |
|||
import { map } from 'rxjs/operators'; |
|||
import { TbPopoverComponent } from '@shared/components/popover.component'; |
|||
|
|||
interface ReferencedEntityInfo { |
|||
entity: BaseData<HasId> & HasTenantId; |
|||
typeName: string; |
|||
detailsUrl: string; |
|||
} |
|||
|
|||
interface TenantReferencedEntities { |
|||
tenantName?: string; |
|||
tenantDetailsUrl?: string; |
|||
entities: ReferencedEntityInfo[]; |
|||
} |
|||
|
|||
type ReferencedEntities = {[tenantId: string]: TenantReferencedEntities}; |
|||
type ReferencedEntitiesEntry = [string, TenantReferencedEntities]; |
|||
|
|||
@Component({ |
|||
selector: 'tb-image-references', |
|||
templateUrl: './image-references.component.html', |
|||
styleUrls: [] |
|||
}) |
|||
export class ImageReferencesComponent implements OnInit { |
|||
|
|||
@Input() |
|||
references: ImageReferences; |
|||
|
|||
popoverComponent: TbPopoverComponent<ImageReferencesComponent>; |
|||
|
|||
contentReady = false; |
|||
|
|||
authUser = getCurrentAuthUser(this.store); |
|||
|
|||
simpleList = true; |
|||
|
|||
referencedEntitiesList: ReferencedEntityInfo[]; |
|||
|
|||
referencedEntitiesEntries: ReferencedEntitiesEntry[]; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private entityService: EntityService, |
|||
private cd: ChangeDetectorRef, |
|||
private translate: TranslateService) { |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
if (this.authUser.authority === Authority.SYS_ADMIN && this.hasNonSystemEntities(this.references)) { |
|||
this.simpleList = false; |
|||
this.toReferencedEntitiesEntries(this.references).subscribe( |
|||
(entries) => { |
|||
this.referencedEntitiesEntries = entries; |
|||
this.contentReady = true; |
|||
this.cd.detectChanges(); |
|||
if (this.popoverComponent) { |
|||
Promise.resolve().then(() => { |
|||
this.popoverComponent.updatePosition(); |
|||
}); |
|||
} |
|||
} |
|||
); |
|||
} else { |
|||
this.referencedEntitiesList = this.toReferencedEntitiesList(this.references); |
|||
this.contentReady = true; |
|||
} |
|||
} |
|||
|
|||
isSystem(tenantId: string): boolean { |
|||
return tenantId === NULL_UUID; |
|||
} |
|||
|
|||
private hasNonSystemEntities(references: ImageReferences): boolean { |
|||
for (const entityTypeStr of Object.keys(references)) { |
|||
const entities = this.references[entityTypeStr]; |
|||
if (entities.some(e => e.tenantId && e.tenantId.id && e.tenantId.id !== NULL_UUID)) { |
|||
return true; |
|||
} |
|||
} |
|||
return false; |
|||
} |
|||
|
|||
private toReferencedEntitiesList(references: ImageReferences): ReferencedEntityInfo[] { |
|||
const result: ReferencedEntityInfo[] = []; |
|||
for (const entityTypeStr of Object.keys(references)) { |
|||
const entityType = entityTypeStr as EntityType; |
|||
const entityTypeName = this.translate.instant(entityTypeTranslations.get(entityType).type); |
|||
const entities = references[entityTypeStr]; |
|||
for (const entity of entities) { |
|||
const detailsUrl = getEntityDetailsPageURL(entity.id.id, entityType); |
|||
result.push({ |
|||
entity, |
|||
typeName: entityTypeName, |
|||
detailsUrl |
|||
}); |
|||
} |
|||
} |
|||
return result; |
|||
} |
|||
|
|||
private toReferencedEntitiesEntries(references: ImageReferences): Observable<ReferencedEntitiesEntry[]> { |
|||
let referencedEntities: ReferencedEntities = {}; |
|||
const referencedEntitiesList = this.toReferencedEntitiesList(references); |
|||
for (const referencedEntityInfo of referencedEntitiesList) { |
|||
const tenantId = referencedEntityInfo.entity.tenantId?.id || NULL_UUID; |
|||
let tenantEntitiesInfo = referencedEntities[tenantId]; |
|||
if (!tenantEntitiesInfo) { |
|||
tenantEntitiesInfo = { |
|||
entities: [] |
|||
}; |
|||
referencedEntities[tenantId] = tenantEntitiesInfo; |
|||
} |
|||
tenantEntitiesInfo.entities.push(referencedEntityInfo); |
|||
} |
|||
referencedEntities = Object.keys(referencedEntities).sort((tenantId1, tenantId2) => { |
|||
if (tenantId1 === NULL_UUID) { |
|||
return -1; |
|||
} else if (tenantId2 === NULL_UUID) { |
|||
return 1; |
|||
} |
|||
return 0; |
|||
}).reduce( |
|||
(obj, key) => { |
|||
obj[key] = referencedEntities[key]; |
|||
return obj; |
|||
}, |
|||
{} |
|||
); |
|||
const tenantIds = Object.keys(referencedEntities).filter(id => id !== NULL_UUID); |
|||
return this.entityService.getEntities(EntityType.TENANT, tenantIds).pipe( |
|||
map((tenants) => { |
|||
for (const tenant of tenants) { |
|||
const tenantEntitiesInfo = referencedEntities[tenant.id.id]; |
|||
tenantEntitiesInfo.tenantName = tenant.name; |
|||
tenantEntitiesInfo.tenantDetailsUrl = getEntityDetailsPageURL(tenant.id.id, EntityType.TENANT); |
|||
} |
|||
return Object.entries(referencedEntities); |
|||
}) |
|||
); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,130 @@ |
|||
///
|
|||
/// 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 { CollectionViewer, DataSource, SelectionModel } from '@angular/cdk/collections'; |
|||
import { ImageResourceInfo } from '@shared/models/resource.models'; |
|||
import { BehaviorSubject, Observable, of, ReplaySubject, Subject } from 'rxjs'; |
|||
import { emptyPageData, PageData } from '@shared/models/page/page-data'; |
|||
import { ImageService } from '@core/http/image.service'; |
|||
import { EntityBooleanFunction } from '@home/models/entity/entities-table-config.models'; |
|||
import { PageLink } from '@shared/models/page/page-link'; |
|||
import { catchError, map, take, tap } from 'rxjs/operators'; |
|||
|
|||
export class ImagesDatasource implements DataSource<ImageResourceInfo> { |
|||
private entitiesSubject: Subject<ImageResourceInfo[]>; |
|||
private readonly pageDataSubject: Subject<PageData<ImageResourceInfo>>; |
|||
|
|||
public pageData$: Observable<PageData<ImageResourceInfo>>; |
|||
|
|||
public selection = new SelectionModel<ImageResourceInfo>(true, []); |
|||
|
|||
public dataLoading = true; |
|||
|
|||
constructor(private imageService: ImageService, |
|||
private images: ImageResourceInfo[], |
|||
private selectionEnabledFunction: EntityBooleanFunction<ImageResourceInfo>) { |
|||
if (this.images && this.images.length) { |
|||
this.entitiesSubject = new BehaviorSubject<ImageResourceInfo[]>(this.images); |
|||
} else { |
|||
this.entitiesSubject = new BehaviorSubject<ImageResourceInfo[]>([]); |
|||
this.pageDataSubject = new BehaviorSubject<PageData<ImageResourceInfo>>(emptyPageData<ImageResourceInfo>()); |
|||
this.pageData$ = this.pageDataSubject.asObservable(); |
|||
} |
|||
} |
|||
|
|||
connect(collectionViewer: CollectionViewer): |
|||
Observable<ImageResourceInfo[] | ReadonlyArray<ImageResourceInfo>> { |
|||
return this.entitiesSubject.asObservable(); |
|||
} |
|||
|
|||
disconnect(collectionViewer: CollectionViewer): void { |
|||
this.entitiesSubject.complete(); |
|||
if (this.pageDataSubject) { |
|||
this.pageDataSubject.complete(); |
|||
} |
|||
} |
|||
|
|||
reset() { |
|||
this.entitiesSubject.next([]); |
|||
if (this.pageDataSubject) { |
|||
this.pageDataSubject.next(emptyPageData<ImageResourceInfo>()); |
|||
} |
|||
} |
|||
|
|||
loadEntities(pageLink: PageLink): Observable<PageData<ImageResourceInfo>> { |
|||
this.dataLoading = true; |
|||
const result = new ReplaySubject<PageData<ImageResourceInfo>>(); |
|||
this.fetchEntities(pageLink).pipe( |
|||
tap(() => { |
|||
this.selection.clear(); |
|||
}), |
|||
catchError(() => of(emptyPageData<ImageResourceInfo>())), |
|||
).subscribe( |
|||
(pageData) => { |
|||
this.entitiesSubject.next(pageData.data); |
|||
this.pageDataSubject.next(pageData); |
|||
result.next(pageData); |
|||
this.dataLoading = false; |
|||
} |
|||
); |
|||
return result; |
|||
} |
|||
|
|||
fetchEntities(pageLink: PageLink): Observable<PageData<ImageResourceInfo>> { |
|||
return this.imageService.getImages(pageLink); |
|||
} |
|||
|
|||
isAllSelected(): Observable<boolean> { |
|||
const numSelected = this.selection.selected.length; |
|||
return this.entitiesSubject.pipe( |
|||
map((entities) => numSelected === entities.length) |
|||
); |
|||
} |
|||
|
|||
isEmpty(): Observable<boolean> { |
|||
return this.entitiesSubject.pipe( |
|||
map((entities) => !entities.length) |
|||
); |
|||
} |
|||
|
|||
total(): Observable<number> { |
|||
return this.pageDataSubject.pipe( |
|||
map((pageData) => pageData.totalElements) |
|||
); |
|||
} |
|||
|
|||
masterToggle() { |
|||
this.entitiesSubject.pipe( |
|||
tap((entities) => { |
|||
const numSelected = this.selection.selected.length; |
|||
if (numSelected === this.selectableEntitiesCount(entities)) { |
|||
this.selection.clear(); |
|||
} else { |
|||
entities.forEach(row => { |
|||
if (this.selectionEnabledFunction(row)) { |
|||
this.selection.select(row); |
|||
} |
|||
}); |
|||
} |
|||
}), |
|||
take(1) |
|||
).subscribe(); |
|||
} |
|||
|
|||
private selectableEntitiesCount(entities: Array<ImageResourceInfo>): number { |
|||
return entities.filter((entity) => this.selectionEnabledFunction(entity)).length; |
|||
} |
|||
} |
|||
@ -0,0 +1,82 @@ |
|||
<!-- |
|||
|
|||
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. |
|||
|
|||
--> |
|||
<h2 mat-dialog-title>{{title | translate}}</h2> |
|||
<div mat-dialog-content class="tb-images-in-use-content" [class]="{multiple: data.multiple}"> |
|||
<div [innerHTML]="message | translate | safe: 'html'"></div> |
|||
<ng-container *ngIf="data.multiple; else singleImageReferences"> |
|||
<div class="table-container"> |
|||
<table mat-table [dataSource]="dataSource"> |
|||
<ng-container matColumnDef="select" sticky> |
|||
<mat-header-cell *matHeaderCellDef style="width: 30px;"> |
|||
<mat-checkbox (change)="$event ? dataSource.masterToggle() : null" |
|||
[checked]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async)" |
|||
[indeterminate]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async) === false"> |
|||
</mat-checkbox> |
|||
</mat-header-cell> |
|||
<mat-cell *matCellDef="let image"> |
|||
<mat-checkbox (click)="$event.stopPropagation()" |
|||
(change)="$event ? dataSource.selection.toggle(image) : null" |
|||
[checked]="dataSource.selection.isSelected(image)"> |
|||
</mat-checkbox> |
|||
</mat-cell> |
|||
</ng-container> |
|||
<ng-container matColumnDef="preview"> |
|||
<mat-header-cell *matHeaderCellDef style="width: 50px; min-width: 50px;"></mat-header-cell> |
|||
<mat-cell *matCellDef="let image"> |
|||
<img class="tb-image-preview" [src]="image.link | image: {preview: true} | async" alt="{{ image.title }}"> |
|||
</mat-cell> |
|||
</ng-container> |
|||
<ng-container matColumnDef="title"> |
|||
<mat-header-cell *matHeaderCellDef style="width: 100%;"> |
|||
<ng-container *ngIf="dataSource.selection.isEmpty(); else selectedImages"> |
|||
{{ 'image.name' | translate }} |
|||
</ng-container> |
|||
<ng-template #selectedImages> |
|||
{{ translate.get('image.selected-images', {count: dataSource.selection.selected.length}) | async }} |
|||
</ng-template> |
|||
</mat-header-cell> |
|||
<mat-cell *matCellDef="let image"> |
|||
{{ image.title }} |
|||
</mat-cell> |
|||
</ng-container> |
|||
<ng-container matColumnDef="references"> |
|||
<mat-header-cell *matHeaderCellDef></mat-header-cell> |
|||
<mat-cell *matCellDef="let image"> |
|||
<button #showReferencesButton |
|||
mat-stroked-button |
|||
color="primary" |
|||
(click)="toggleShowReferences($event, image, showReferencesButton)">{{ 'image.references' | translate }}</button> |
|||
</mat-cell> |
|||
</ng-container> |
|||
<mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="['select', 'preview', 'title', 'references']; sticky: true"></mat-header-row> |
|||
<mat-row [ngClass]="{'mat-row-select': true, |
|||
'mat-selected': dataSource.selection.isSelected(image)}" |
|||
*matRowDef="let image; columns: ['select', 'preview', 'title', 'references'];"></mat-row> |
|||
</table> |
|||
</div> |
|||
</ng-container> |
|||
</div> |
|||
<div mat-dialog-actions fxLayoutAlign="end center"> |
|||
<button mat-button color="primary" (click)="cancel()">{{'action.cancel' | translate}}</button> |
|||
<button mat-raised-button color="accent" (click)="delete()" [disabled]="data.multiple && dataSource.selection.isEmpty()" |
|||
cdkFocusInitial>{{ (data.multiple ? 'action.delete-selected' : 'action.delete-anyway') | translate}}</button> |
|||
</div> |
|||
<ng-template #singleImageReferences> |
|||
<tb-image-references [references]="references"></tb-image-references> |
|||
<div [innerHTML]="'image.delete-image-in-use-text' | translate | safe: 'html'"></div> |
|||
</ng-template> |
|||
@ -0,0 +1,39 @@ |
|||
/** |
|||
* 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. |
|||
*/ |
|||
:host { |
|||
.tb-images-in-use-content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
&.multiple { |
|||
gap: 16px; |
|||
} |
|||
.table-container { |
|||
overflow: auto; |
|||
.mat-mdc-cell.mat-column-preview { |
|||
width: 50px; |
|||
height: 50px; |
|||
padding: 2px 12px; |
|||
display: block; |
|||
} |
|||
} |
|||
.tb-image-preview { |
|||
width: 50px; |
|||
height: 50px; |
|||
object-fit: contain; |
|||
border-radius: 4px; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,112 @@ |
|||
///
|
|||
/// 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 { Component, Inject, OnInit, Renderer2, ViewContainerRef } from '@angular/core'; |
|||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { DialogComponent } from '@shared/components/dialog.component'; |
|||
import { Router } from '@angular/router'; |
|||
import { ImageReferences, ImageResourceInfo, ImageResourceInfoWithReferences } from '@shared/models/resource.models'; |
|||
import { ImagesDatasource } from '@home/components/image/images-datasource'; |
|||
import { MatButton } from '@angular/material/button'; |
|||
import { TbPopoverService } from '@shared/components/popover.service'; |
|||
import { ImageReferencesComponent } from '@home/components/image/image-references.component'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
|
|||
export interface ImagesInUseDialogData { |
|||
multiple: boolean; |
|||
images: ImageResourceInfoWithReferences[]; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-images-in-use-dialog', |
|||
templateUrl: './images-in-use-dialog.component.html', |
|||
styleUrls: ['./images-in-use-dialog.component.scss'] |
|||
}) |
|||
export class ImagesInUseDialogComponent extends |
|||
DialogComponent<ImagesInUseDialogComponent, ImageResourceInfo[]> implements OnInit { |
|||
|
|||
title: string; |
|||
message: string; |
|||
|
|||
references: ImageReferences; |
|||
|
|||
dataSource: ImagesDatasource; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
protected router: Router, |
|||
@Inject(MAT_DIALOG_DATA) public data: ImagesInUseDialogData, |
|||
public dialogRef: MatDialogRef<ImagesInUseDialogComponent, ImageResourceInfo[]>, |
|||
public translate: TranslateService, |
|||
private renderer: Renderer2, |
|||
private viewContainerRef: ViewContainerRef, |
|||
private popoverService: TbPopoverService) { |
|||
super(store, router, dialogRef); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
if (this.data.multiple) { |
|||
this.title = 'image.images-are-in-use'; |
|||
this.message = '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.references = this.data.images[0].references; |
|||
} |
|||
} |
|||
|
|||
cancel() { |
|||
this.dialogRef.close(null); |
|||
} |
|||
|
|||
delete() { |
|||
if (this.data.multiple) { |
|||
this.dialogRef.close(this.dataSource.selection.selected); |
|||
} else { |
|||
this.dialogRef.close(this.data.images); |
|||
} |
|||
} |
|||
|
|||
toggleShowReferences($event: Event, image: ImageResourceInfoWithReferences, referencesButton: MatButton) { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
const trigger = referencesButton._elementRef.nativeElement; |
|||
if (this.popoverService.hasPopover(trigger)) { |
|||
this.popoverService.hidePopover(trigger); |
|||
} else { |
|||
const referencesPopover = this.popoverService.displayPopover(trigger, this.renderer, |
|||
this.viewContainerRef, ImageReferencesComponent, 'top', true, null, |
|||
{ |
|||
references: image.references |
|||
}, {}, {}, {}, |
|||
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'; |
|||
addClasses.split(' ').forEach(clazz => { |
|||
this.renderer.addClass(trigger, clazz); |
|||
}); |
|||
removeClasses.split(' ').forEach(clazz => { |
|||
this.renderer.removeClass(trigger, clazz); |
|||
}); |
|||
}); |
|||
referencesPopover.tbComponentRef.instance.popoverComponent = referencesPopover; |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue