Spaces:
Running
Running
File size: 3,126 Bytes
9dfc0e2 d4d81aa 9dfc0e2 d4d81aa 9dfc0e2 d4d81aa 9dfc0e2 d4d81aa 9dfc0e2 d4d81aa 9dfc0e2 d4d81aa 9dfc0e2 d4d81aa 9dfc0e2 d4d81aa 9dfc0e2 d4d81aa 9dfc0e2 d4d81aa 9dfc0e2 d4d81aa 9dfc0e2 d4d81aa 9dfc0e2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
import { Component, Inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';
import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';
export interface ConfirmDialogData {
title: string;
message: string;
confirmText?: string;
cancelText?: string;
confirmColor?: 'primary' | 'accent' | 'warn';
showVersionSelect?: boolean;
versions?: any[];
}
@Component({
selector: 'app-confirm-dialog',
standalone: true,
imports: [
CommonModule,
FormsModule,
MatDialogModule,
MatButtonModule,
MatSelectModule,
MatFormFieldModule
],
template: `
<h2 mat-dialog-title>{{ data.title }}</h2>
<mat-dialog-content>
<p>{{ data.message }}</p>
@if (data.showVersionSelect && data.versions) {
<mat-form-field appearance="outline" class="full-width">
<mat-label>Select Source Version</mat-label>
<mat-select [(ngModel)]="selectedVersionId" required>
@for (version of data.versions; track version.id) {
<mat-option [value]="version.id">
Version {{ version.id }} - {{ version.caption }}
@if (version.published) {
<span class="published-badge">(Published)</span>
}
</mat-option>
}
</mat-select>
</mat-form-field>
}
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button (click)="onCancel()">{{ data.cancelText || 'Cancel' }}</button>
<button mat-raised-button
[color]="data.confirmColor || 'primary'"
(click)="onConfirm()"
[disabled]="data.showVersionSelect && !selectedVersionId">
{{ data.confirmText || 'Confirm' }}
</button>
</mat-dialog-actions>
`,
styles: [`
mat-dialog-content {
padding: 20px 24px;
min-width: 400px;
}
p {
margin: 0 0 16px 0;
color: rgba(0,0,0,0.87);
line-height: 1.5;
}
.full-width {
width: 100%;
}
.published-badge {
color: #4caf50;
font-weight: 500;
margin-left: 8px;
}
mat-dialog-actions {
padding: 16px 24px;
}
`]
})
export default class ConfirmDialogComponent {
selectedVersionId: number | null = null;
constructor(
public dialogRef: MatDialogRef<ConfirmDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: ConfirmDialogData
) {
// Pre-select first version if available
if (data.showVersionSelect && data.versions && data.versions.length > 0) {
this.selectedVersionId = data.versions[0].id;
}
}
onConfirm(): void {
if (this.data.showVersionSelect) {
this.dialogRef.close(this.selectedVersionId);
} else {
this.dialogRef.close(true);
}
}
onCancel(): void {
this.dialogRef.close(false);
}
} |