diff --git a/projects/editor/src/app/components/dialogs/delete-confirmation-dialog.component.ts b/projects/editor/src/app/components/dialogs/delete-confirmation-dialog.component.ts index 7aa0f8bd4b1d7859812bb5c256d31515f922daef..ab8411ec99c2179749d0a70d672e6ed84587b09e 100644 --- a/projects/editor/src/app/components/dialogs/delete-confirmation-dialog.component.ts +++ b/projects/editor/src/app/components/dialogs/delete-confirmation-dialog.component.ts @@ -9,16 +9,8 @@ import { UIElement } from 'common/models/elements/element'; <div mat-dialog-title>Löschen bestätigen</div> <div mat-dialog-content> {{data.text}} - <mat-list *ngIf="data.elementList && data.elementList.length > 0"> - <mat-list-item *ngFor="let element of data.elementList"> - <mat-icon matListItemIcon> - {{$any(element.constructor).icon}} - </mat-icon> - <div matListItemTitle> - {{$any(element.constructor).title}}: <i>{{element.id}}</i> - </div> - </mat-list-item> - </mat-list> + <aspect-element-list *ngIf="data.elementList && data.elementList.length > 0" + [elements]="data.elementList"></aspect-element-list> <fieldset *ngIf="data.refs && data.refs.length > 0"> <legend [style.background-color]="'orange'">Referenzen festgestellt</legend> <aspect-reference-list [refs]="data.refs"></aspect-reference-list> @@ -40,7 +32,5 @@ import { UIElement } from 'common/models/elements/element'; ] }) export class DeleteConfirmationDialogComponent { - constructor(@Inject(MAT_DIALOG_DATA) public data: { text: string, elementList?: UIElement[], refs?: ReferenceList[] }) { - console.log('dialog refs', this.data); - } + constructor(@Inject(MAT_DIALOG_DATA) public data: { text: string, elementList?: UIElement[], refs?: ReferenceList[] }) { } } diff --git a/projects/editor/src/app/components/element-list.component.ts b/projects/editor/src/app/components/element-list.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..9f07b471a5a4f14a0f06e74dd93c6758e8a8cd5b --- /dev/null +++ b/projects/editor/src/app/components/element-list.component.ts @@ -0,0 +1,34 @@ +import { Component, Input } from '@angular/core'; +import { ReferenceList } from 'editor/src/app/services/reference-manager'; +import { UIElement } from 'common/models/elements/element'; +import { MatIconModule } from '@angular/material/icon'; +import { MatListModule } from '@angular/material/list'; +import { NgForOf } from '@angular/common'; + +@Component({ + selector: 'aspect-element-list', + standalone: true, + imports: [ + NgForOf, + MatIconModule, + MatListModule + ], + template: ` + <mat-list> + <mat-list-item *ngFor="let element of elements"> + <mat-icon matListItemIcon> + {{ $any(element.constructor).icon }} + </mat-icon> + <div matListItemTitle> + {{ $any(element.constructor).title }}: <i>{{ element.id }}</i> + </div> + </mat-list-item> + </mat-list> + `, + styles: [ + + ] +}) +export class ElementListComponent { + @Input() elements!: UIElement[]; +} diff --git a/projects/editor/src/app/components/reference-list.component.ts b/projects/editor/src/app/components/reference-list.component.ts index be57f858422a5f776d2a4b036044d5a3c67d1eec..9f8bd1cf71a17fde3b8654ce8bd39770e7bbd493 100644 --- a/projects/editor/src/app/components/reference-list.component.ts +++ b/projects/editor/src/app/components/reference-list.component.ts @@ -3,24 +3,26 @@ import { } from '@angular/core'; import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar'; import { ReferenceList } from 'editor/src/app/services/reference-manager'; +import { NgForOf } from '@angular/common'; +import { MatListModule } from '@angular/material/list'; +import { MatIconModule } from '@angular/material/icon'; +import { ElementListComponent } from 'editor/src/app/components/element-list.component'; @Component({ selector: 'aspect-reference-list', + standalone: true, + imports: [ + NgForOf, + MatListModule, + MatIconModule, + ElementListComponent + ], template: ` <ng-container *ngFor="let refGroup of refs ? refs : data"> <span> - <b>{{refGroup.element.id}}</b> wird referenziert von: + <b>{{ refGroup.element.id }}</b> wird referenziert von: </span> - <mat-list> - <mat-list-item *ngFor="let element of refGroup.refs"> - <mat-icon matListItemIcon> - {{$any(element.constructor).icon}} - </mat-icon> - <div matListItemTitle> - {{$any(element.constructor).title}}: <i>{{element.id}}</i> - </div> - </mat-list-item> - </mat-list> + <aspect-element-list [elements]="refGroup.refs"></aspect-element-list> </ng-container> `, styles: [