62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
import { Component, inject } from '@angular/core';
|
|
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
|
|
import { NgIf } from '@angular/common';
|
|
import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
import { MatInputModule } from '@angular/material/input';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { SiteService } from '../../core/services/site.service';
|
|
|
|
@Component({
|
|
selector: 'app-create-site-dialog',
|
|
standalone: true,
|
|
imports: [NgIf, MatDialogModule, MatFormFieldModule, MatInputModule, MatButtonModule, ReactiveFormsModule],
|
|
template: `
|
|
<h2 mat-dialog-title>Create New Site</h2>
|
|
<mat-dialog-content>
|
|
<form [formGroup]="form" class="flex flex-col gap-4 pt-2">
|
|
<mat-form-field appearance="outline" class="w-full">
|
|
<mat-label>Site Name</mat-label>
|
|
<input matInput formControlName="name" placeholder="My Awesome Site" />
|
|
<mat-error>Name is required</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="w-full">
|
|
<mat-label>Description (optional)</mat-label>
|
|
<textarea matInput formControlName="description" rows="3" placeholder="What's your site about?"></textarea>
|
|
</mat-form-field>
|
|
</form>
|
|
</mat-dialog-content>
|
|
<mat-dialog-actions align="end">
|
|
<button mat-button mat-dialog-close>Cancel</button>
|
|
<button mat-flat-button color="primary" [disabled]="form.invalid || loading" (click)="onCreate()">
|
|
{{ loading ? 'Creating...' : 'Create' }}
|
|
</button>
|
|
</mat-dialog-actions>
|
|
`,
|
|
})
|
|
export class CreateSiteDialog {
|
|
private fb = inject(FormBuilder);
|
|
private dialogRef = inject(MatDialogRef<CreateSiteDialog>);
|
|
private siteService = inject(SiteService);
|
|
|
|
form = this.fb.group({
|
|
name: ['', Validators.required],
|
|
description: [''],
|
|
});
|
|
loading = false;
|
|
|
|
onCreate(): void {
|
|
if (this.form.invalid) return;
|
|
this.loading = true;
|
|
this.siteService.create(this.form.value as any).subscribe({
|
|
next: (site) => {
|
|
this.dialogRef.close(site);
|
|
},
|
|
error: () => {
|
|
this.loading = false;
|
|
},
|
|
});
|
|
}
|
|
}
|