75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
import { Component, Inject, inject } from '@angular/core';
|
|
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
|
|
import { NgIf } from '@angular/common';
|
|
import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
import { MatInputModule } from '@angular/material/input';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { PageService } from '../../core/services/page.service';
|
|
|
|
@Component({
|
|
selector: 'app-create-page-dialog',
|
|
standalone: true,
|
|
imports: [NgIf, MatDialogModule, MatFormFieldModule, MatInputModule, MatButtonModule, ReactiveFormsModule],
|
|
template: `
|
|
<h2 mat-dialog-title>Add Page</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>Page Title</mat-label>
|
|
<input matInput formControlName="title" placeholder="About" />
|
|
<mat-error>Title is required</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="w-full">
|
|
<mat-label>Slug</mat-label>
|
|
<input matInput formControlName="slug" placeholder="about" />
|
|
<mat-error *ngIf="form.get('slug')?.hasError('required')">Slug is required</mat-error>
|
|
<mat-error *ngIf="form.get('slug')?.hasError('pattern')">Lowercase letters, numbers, and hyphens only</mat-error>
|
|
</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 CreatePageDialog {
|
|
private fb = inject(FormBuilder);
|
|
private dialogRef = inject(MatDialogRef<CreatePageDialog>);
|
|
private pageService = inject(PageService);
|
|
|
|
constructor() {
|
|
const data: { siteId: string } = inject(MAT_DIALOG_DATA);
|
|
this.siteId = data.siteId;
|
|
}
|
|
|
|
siteId: string;
|
|
|
|
form = this.fb.group({
|
|
title: ['', Validators.required],
|
|
slug: ['', [Validators.pattern(/^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/)]],
|
|
});
|
|
loading = false;
|
|
|
|
onCreate(): void {
|
|
if (this.form.invalid) return;
|
|
this.loading = true;
|
|
this.pageService.create(this.siteId, {
|
|
title: this.form.value.title || '',
|
|
slug: this.form.value.slug || '',
|
|
orderIndex: 0,
|
|
}).subscribe({
|
|
next: (page) => {
|
|
this.dialogRef.close(page);
|
|
},
|
|
error: () => {
|
|
this.loading = false;
|
|
},
|
|
});
|
|
}
|
|
}
|