113 lines
4.0 KiB
TypeScript
113 lines
4.0 KiB
TypeScript
import { Component, OnInit, OnDestroy } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
|
|
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
|
|
import { LucideAngularModule, FileText } from 'lucide-angular';
|
|
import { LoreService } from '../../services/lore.service';
|
|
import { TemplateService } from '../../services/template.service';
|
|
import { PageService } from '../../services/page.service';
|
|
import { LayoutService } from '../../services/layout.service';
|
|
import { PageTitleService } from '../../services/page-title.service';
|
|
import { LoreNode } from '../../services/lore.model';
|
|
import { Template } from '../../services/template.model';
|
|
import { loadLoreSidebarData, buildLoreSidebarConfig } from '../lore-sidebar.helper';
|
|
|
|
/**
|
|
* Écran de création d'une Page.
|
|
*
|
|
* Deux entrées possibles :
|
|
* - /lore/:loreId/pages/create → noeud choisi depuis le template
|
|
* - /lore/:loreId/nodes/:nodeId/pages/create → noeud pré-rempli depuis l'URL
|
|
*
|
|
* Le MVP est volontairement simple (maquette "création de page") : titre +
|
|
* choix de template (grille) + noeud de destination. L'édition détaillée des
|
|
* champs dynamiques du template se fait APRÈS création, via l'écran page-edit.
|
|
*/
|
|
@Component({
|
|
selector: 'app-page-create',
|
|
standalone: true,
|
|
imports: [CommonModule, ReactiveFormsModule, RouterModule, LucideAngularModule],
|
|
templateUrl: './page-create.component.html',
|
|
styleUrls: ['./page-create.component.scss']
|
|
})
|
|
export class PageCreateComponent implements OnInit, OnDestroy {
|
|
readonly FileText = FileText;
|
|
|
|
form: FormGroup;
|
|
loreId = '';
|
|
/** Pré-rempli si la route contient :nodeId. */
|
|
preselectedNodeId: string | null = null;
|
|
nodes: LoreNode[] = [];
|
|
templates: Template[] = [];
|
|
/** Template actuellement sélectionné dans la grille. */
|
|
selectedTemplateId: string | null = null;
|
|
|
|
constructor(
|
|
private fb: FormBuilder,
|
|
private route: ActivatedRoute,
|
|
private router: Router,
|
|
private loreService: LoreService,
|
|
private templateService: TemplateService,
|
|
private pageService: PageService,
|
|
private layoutService: LayoutService,
|
|
private pageTitleService: PageTitleService
|
|
) {
|
|
this.form = this.fb.group({
|
|
title: ['', Validators.required],
|
|
nodeId: ['', Validators.required]
|
|
});
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
this.pageTitleService.set('Nouvelle page');
|
|
this.loreId = this.route.snapshot.paramMap.get('loreId')!;
|
|
this.preselectedNodeId = this.route.snapshot.paramMap.get('nodeId');
|
|
|
|
loadLoreSidebarData(this.loreId, this.loreService, this.templateService, this.pageService)
|
|
.subscribe(data => {
|
|
this.nodes = data.nodes;
|
|
this.templates = data.templates;
|
|
this.layoutService.show(buildLoreSidebarConfig(data));
|
|
|
|
// Si nodeId fourni par l'URL, on verrouille la valeur du formulaire.
|
|
if (this.preselectedNodeId) {
|
|
this.form.patchValue({ nodeId: this.preselectedNodeId });
|
|
}
|
|
});
|
|
}
|
|
|
|
selectTemplate(template: Template): void {
|
|
this.selectedTemplateId = template.id!;
|
|
// Si pas de noeud pré-choisi par l'URL, on pré-remplit avec le defaultNodeId du template.
|
|
if (!this.preselectedNodeId && template.defaultNodeId) {
|
|
this.form.patchValue({ nodeId: template.defaultNodeId });
|
|
}
|
|
}
|
|
|
|
get canSubmit(): boolean {
|
|
return this.form.valid && !!this.selectedTemplateId;
|
|
}
|
|
|
|
submit(): void {
|
|
if (!this.canSubmit) return;
|
|
const raw = this.form.value;
|
|
this.pageService.create({
|
|
loreId: this.loreId,
|
|
nodeId: raw.nodeId,
|
|
templateId: this.selectedTemplateId!,
|
|
title: raw.title
|
|
}).subscribe({
|
|
next: created => this.router.navigate(['/lore', this.loreId, 'pages', created.id]),
|
|
error: () => console.error('Erreur lors de la création de la page')
|
|
});
|
|
}
|
|
|
|
cancel(): void {
|
|
this.router.navigate(['/lore', this.loreId]);
|
|
}
|
|
|
|
ngOnDestroy(): void {
|
|
this.layoutService.hide();
|
|
}
|
|
}
|