ietm64/LoreMind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Corrections d'ordre graphique / ergonomique :

Browse Source 
- Lorsqu'on part de zéro : la création de dossier / page / template ce fait de manière plus fluide à la création d'un lore (par exemple création de page sans template et dossier : parcours facilité)
- Ajout d'un bouton "+" dans le header templates
- Harmonisation création / modification template

Correction de tests unitaires
This commit is contained in:
IETM_FIXE\ietm6
2026-04-23 11:25:58 +02:00
parent 29978058ee
commit 84ccdd53ad
20 changed files with 463 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/app/lore/lore-node-create/lore-node-create.component.html
View File

@@ -49,15 +49,6 @@
</textarea>
</div>
<div class="field">
<label>Adresse</label>
<input
type="text"
formControlName="address"
placeholder="nom-du-dossier"
/>
</div>
<div class="form-actions">
<button type="submit" class="btn-primary" [disabled]="form.invalid">
<lucide-icon [img]="getIcon(selectedIcon)" [size]="16"></lucide-icon>

30
web/src/app/lore/lore-node-create/lore-node-create.component.ts
View File

@@ -9,6 +9,7 @@ import { PageService } from '../../services/page.service';
import { LayoutService } from '../../services/layout.service';
import { LoreNode } from '../../services/lore.model';
import { loadLoreSidebarData, buildLoreSidebarConfig } from '../lore-sidebar.helper';
import { popReturnTo } from '../return-stack.helper';
import { LORE_ICON_OPTIONS, IconOption, resolveIcon } from '../lore-icons';
@Component({
@@ -42,15 +43,8 @@ export class LoreNodeCreateComponent implements OnInit, OnDestroy {
this.form = this.fb.group({
name: ['', Validators.required],
description: [''],
address: ['', Validators.required],
parentId: [''] // '' = racine
});
// Auto-génère l'adresse depuis le nom
this.form.get('name')!.valueChanges.subscribe(name => {
const slug = (name as string).toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
this.form.get('address')!.setValue(slug, { emitEvent: false });
});
}
ngOnInit(): void {
@@ -84,17 +78,35 @@ export class LoreNodeCreateComponent implements OnInit, OnDestroy {
this.loreService.createLoreNode({
name: raw.name,
description: raw.description,
address: raw.address,
icon: this.selectedIcon,
parentId: raw.parentId && raw.parentId !== '' ? raw.parentId : null,
loreId: this.loreId
}).subscribe({
next: () => this.router.navigate(['/lore', this.loreId]),
next: () => this.navigateBack(),
error: () => console.error('Erreur lors de la création du dossier')
});
}
cancel(): void {
this.navigateBack();
}
/**
* Redirige vers l'écran d'origine en dépilant le premier élément du query-param
* `returnTo` (pile séparée par des virgules). Supporte `page-create` et
* `template-create`, en transmettant le reste de la pile à l'écran suivant.
*/
private navigateBack(): void {
const { next, rest } = popReturnTo(this.route.snapshot.queryParamMap.get('returnTo'));
const qp = rest ? { returnTo: rest } : {};
if (next === 'page-create') {
this.router.navigate(['/lore', this.loreId, 'pages', 'create'], { queryParams: qp });
return;
}
if (next === 'template-create') {
this.router.navigate(['/lore', this.loreId, 'templates', 'create'], { queryParams: qp });
return;
}
this.router.navigate(['/lore', this.loreId]);
}

29
web/src/app/lore/lore-sidebar.helper.ts
View File

@@ -63,8 +63,9 @@ export function buildLoreSidebarConfig(data: LoreSidebarData): SecondarySidebarC
}
/**
* Construit récursivement le TreeItem d'un dossier :
* ses sous-dossiers, puis ses pages, puis les actions "+ Nouveau dossier" et "+ Nouvelle page".
* Construit récursivement le TreeItem d'un dossier : ses sous-dossiers,
* ses pages, et deux actions révélées au survol de la ligne (pas dans la
* hiérarchie) — "Nouveau sous-dossier" et "Nouvelle page".
*/
const buildFolderItem = (node: LoreNode): TreeItem => {
const subFolders = childrenByParent.get(node.id!) ?? [];
@@ -116,20 +117,16 @@ export function buildLoreSidebarConfig(data: LoreSidebarData): SecondarySidebarC
id: 'templates',
title: 'Templates',
initiallyOpen: true,
items: [
...templates.map(t => ({
id: t.id!,
label: t.name,
meta: `${t.fieldCount ?? t.fields.length} champs`,
route: `/lore/${lore.id}/templates/${t.id}`
})),
{
id: 'create-template',
label: '+ Nouveau template',
isAction: true,
route: `/lore/${lore.id}/templates/create`
}
]
headerAction: {
label: 'Nouveau template',
route: `/lore/${lore.id}/templates/create`
},
items: templates.map(t => ({
id: t.id!,
label: t.name,
meta: `${t.fieldCount ?? t.fields.length} champs`,
route: `/lore/${lore.id}/templates/${t.id}`
}))
};
return {

22
web/src/app/lore/page-create/page-create.component.html
View File

@@ -35,7 +35,7 @@
<ng-template #emptyTemplates>
<p class="empty-hint">
Aucun template défini pour ce Lore.
<a [routerLink]="['/lore', loreId, 'templates', 'create']">Créer un template</a> d'abord.
<a [routerLink]="['/lore', loreId, 'templates', 'create']" [queryParams]="{ returnTo: 'page-create' }" (click)="saveDraft()">Créer un template</a> d'abord.
</p>
</ng-template>
</div>
@@ -43,11 +43,21 @@
<!-- Dossier de destination -->
<div class="field">
<label>Dossier de destination *</label>
<select formControlName="nodeId" [attr.disabled]="preselectedNodeId ? true : null">
<option value="" disabled>Sélectionnez un dossier</option>
<option *ngFor="let node of nodes" [value]="node.id">{{ node.name }}</option>
</select>
<p class="hint">La page sera créée dans ce dossier</p>
<ng-container *ngIf="nodes.length; else emptyFolders">
<select formControlName="nodeId" [attr.disabled]="preselectedNodeId ? true : null">
<option value="" disabled>Sélectionnez un dossier</option>
<option *ngFor="let node of nodes" [value]="node.id">{{ node.name }}</option>
</select>
<p class="hint">La page sera créée dans ce dossier</p>
</ng-container>
<ng-template #emptyFolders>
<p class="empty-hint">
Aucun dossier dans ce Lore.
<a [routerLink]="['/lore', loreId, 'nodes', 'create']" [queryParams]="{ returnTo: 'page-create' }" (click)="saveDraft()">Créer un dossier</a> d'abord.
</p>
</ng-template>
</div>
<!-- Aide contextuelle -->

39
web/src/app/lore/page-create/page-create.component.ts
View File

@@ -92,9 +92,48 @@ export class PageCreateComponent implements OnInit, OnDestroy {
if (this.preselectedNodeId) {
this.form.patchValue({ nodeId: this.preselectedNodeId });
}
this.restoreDraft();
});
}
/** Clé sessionStorage pour le brouillon — scopée au lore courant. */
private get draftKey(): string {
return `page-create-draft:${this.loreId}`;
}
/**
* Sauvegarde le titre et le template sélectionné avant un détour de navigation
* (création de template ou de dossier), pour pouvoir les restaurer au retour.
* NodeId volontairement omis : il peut référencer un dossier qui n'existait
* pas encore et serait invalide après un aller-retour.
*/
saveDraft(): void {
const draft = {
title: this.form.value.title ?? '',
selectedTemplateId: this.selectedTemplateId
};
if (!draft.title && !draft.selectedTemplateId) return;
try {
sessionStorage.setItem(this.draftKey, JSON.stringify(draft));
} catch { /* quota dépassé ou storage indisponible : on ignore */ }
}
private restoreDraft(): void {
let raw: string | null = null;
try { raw = sessionStorage.getItem(this.draftKey); } catch { return; }
if (!raw) return;
sessionStorage.removeItem(this.draftKey);
try {
const draft = JSON.parse(raw) as { title?: string; selectedTemplateId?: string | null };
if (draft.title) this.form.patchValue({ title: draft.title });
if (draft.selectedTemplateId && this.templates.some(t => t.id === draft.selectedTemplateId)) {
const tpl = this.templates.find(t => t.id === draft.selectedTemplateId)!;
this.selectTemplate(tpl);
}
} catch { /* JSON corrompu : on ignore */ }
}
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.

22
web/src/app/lore/return-stack.helper.ts Normal file
View File

@@ -0,0 +1,22 @@
/**
* Gère la pile de retours partagée par les écrans de création imbriqués
* (page-create ↔ template-create ↔ node-create).
*
* La pile est encodée dans le query-param `returnTo` sous forme de chaîne
* séparée par des virgules, ex : `"template-create,page-create"`. Chaque
* écran dépile le premier élément pour savoir où revenir, et propage le
* reste comme nouveau `returnTo`.
*/
export interface PoppedReturn {
/** Nom de l'écran vers lequel revenir, ou null si la pile est vide. */
next: string | null;
/** Reste de la pile à transmettre à l'écran de retour, ou null si vide. */
rest: string | null;
}
export function popReturnTo(raw: string | null | undefined): PoppedReturn {
const parts = (raw ?? '').split(',').map(s => s.trim()).filter(Boolean);
const next = parts.shift() ?? null;
const rest = parts.length ? parts.join(',') : null;
return { next, rest };
}

24
web/src/app/lore/template-create/template-create.component.html
View File

@@ -22,11 +22,23 @@
<div class="field">
<label>Dossier par défaut *</label>
<select formControlName="defaultNodeId">
<option value="" disabled>Sélectionnez un dossier</option>
<option *ngFor="let node of nodes" [value]="node.id">{{ node.name }}</option>
</select>
<p class="hint">Les pages créées avec ce template seront placées dans ce dossier</p>
<ng-container *ngIf="nodes.length; else emptyFolders">
<select formControlName="defaultNodeId">
<option value="" disabled>Sélectionnez un dossier</option>
<option *ngFor="let node of nodes" [value]="node.id">{{ node.name }}</option>
</select>
<p class="hint">Les pages créées avec ce template seront placées dans ce dossier</p>
</ng-container>
<ng-template #emptyFolders>
<p class="empty-hint">
Aucun dossier dans ce Lore.
<a [routerLink]="['/lore', loreId, 'nodes', 'create']"
[queryParams]="{ returnTo: nodeCreateReturnTo }"
(click)="saveDraft()">Créer un dossier</a> d'abord.
</p>
</ng-template>
</div>
</div>
@@ -85,7 +97,7 @@
type="text"
[(ngModel)]="newFieldName"
[ngModelOptions]="{ standalone: true }"
placeholder="Nom du champ..."
placeholder="+ Ajouter un champ"
(keydown.enter)="$event.preventDefault(); addField()" />
<select
class="type-select"

7
web/src/app/lore/template-create/template-create.component.scss
View File

@@ -247,3 +247,10 @@
&:hover { background: #363650; }
}
.empty-hint {
color: #9ca3af;
font-size: 0.88rem;
a { color: #a5b4fc; text-decoration: underline; }
}

68
web/src/app/lore/template-create/template-create.component.ts
View File

@@ -1,7 +1,7 @@
import { Component, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { LucideAngularModule, Plus, Trash2, Type, Image as ImageIcon, ChevronUp, ChevronDown } from 'lucide-angular';
import { LoreService } from '../../services/lore.service';
import { TemplateService } from '../../services/template.service';
@@ -10,6 +10,7 @@ import { LayoutService } from '../../services/layout.service';
import { LoreNode } from '../../services/lore.model';
import { FieldType, ImageLayout, TemplateField } from '../../services/template.model';
import { loadLoreSidebarData, buildLoreSidebarConfig } from '../lore-sidebar.helper';
import { popReturnTo } from '../return-stack.helper';
/**
* Écran de création d'un Template (gabarit de Page).
@@ -20,7 +21,7 @@ import { loadLoreSidebarData, buildLoreSidebarConfig } from '../lore-sidebar.hel
@Component({
selector: 'app-template-create',
standalone: true,
imports: [CommonModule, FormsModule, ReactiveFormsModule, LucideAngularModule],
imports: [CommonModule, FormsModule, ReactiveFormsModule, RouterModule, LucideAngularModule],
templateUrl: './template-create.component.html',
styleUrls: ['./template-create.component.scss']
})
@@ -69,9 +70,54 @@ export class TemplateCreateComponent implements OnInit, OnDestroy {
loadLoreSidebarData(this.loreId, this.loreService, this.templateService, this.pageService).subscribe(data => {
this.nodes = data.nodes;
this.layoutService.show(buildLoreSidebarConfig(data));
this.restoreDraft();
});
}
/** Clé sessionStorage pour le brouillon de template — scopée au lore. */
private get draftKey(): string {
return `template-create-draft:${this.loreId}`;
}
/**
* Sauvegarde le formulaire courant avant un détour (création de dossier).
* defaultNodeId volontairement omis : il référence potentiellement un dossier
* qui n'existe pas encore.
*/
saveDraft(): void {
const draft = {
name: this.form.value.name ?? '',
description: this.form.value.description ?? '',
fields: this.fields
};
try {
sessionStorage.setItem(this.draftKey, JSON.stringify(draft));
} catch { /* storage indisponible : on ignore */ }
}
private restoreDraft(): void {
let raw: string | null = null;
try { raw = sessionStorage.getItem(this.draftKey); } catch { return; }
if (!raw) return;
sessionStorage.removeItem(this.draftKey);
try {
const draft = JSON.parse(raw) as { name?: string; description?: string; fields?: TemplateField[] };
if (draft.name) this.form.patchValue({ name: draft.name });
if (draft.description) this.form.patchValue({ description: draft.description });
if (Array.isArray(draft.fields) && draft.fields.length) this.fields = draft.fields;
} catch { /* JSON corrompu : on ignore */ }
}
/**
* Construit le `returnTo` à passer à l'écran de création de dossier :
* on empile 'template-create' par-dessus la pile courante, pour que node-create
* revienne ici puis remonte à l'écran d'origine le cas échéant.
*/
get nodeCreateReturnTo(): string {
const current = this.route.snapshot.queryParamMap.get('returnTo');
return current ? `template-create,${current}` : 'template-create';
}
addField(): void {
const name = this.newFieldName.trim();
if (!name) return;
@@ -129,12 +175,28 @@ export class TemplateCreateComponent implements OnInit, OnDestroy {
defaultNodeId: raw.defaultNodeId,
fields: this.fields
}).subscribe({
next: () => this.router.navigate(['/lore', this.loreId]),
next: () => this.navigateBack(),
error: () => console.error('Erreur lors de la création du template')
});
}
cancel(): void {
this.navigateBack();
}
/**
* Redirige vers l'écran d'origine en dépilant le premier élément du query-param
* `returnTo` (pile de retours séparés par des virgules, ex : `page-create` ou
* `template-create,page-create`). Sinon retombe sur la page détail du Lore.
*/
private navigateBack(): void {
const { next, rest } = popReturnTo(this.route.snapshot.queryParamMap.get('returnTo'));
if (next === 'page-create') {
this.router.navigate(['/lore', this.loreId, 'pages', 'create'], {
queryParams: rest ? { returnTo: rest } : {}
});
return;
}
this.router.navigate(['/lore', this.loreId]);
}

9
web/src/app/lore/template-edit/template-edit.component.html
View File

@@ -58,7 +58,10 @@
<lucide-icon [img]="ChevronDown" [size]="12"></lucide-icon>
</button>
</div>
<span class="field-chip" [class.field-chip-image]="f.type === 'IMAGE'">
<span class="field-chip"
[class.field-chip-image]="f.type === 'IMAGE'"
[class.field-chip-existing]="f.type !== 'IMAGE' && isExistingField(f)"
[class.field-chip-new]="f.type !== 'IMAGE' && !isExistingField(f)">
<lucide-icon [img]="f.type === 'IMAGE' ? ImageIcon : Type" [size]="12"></lucide-icon>
{{ f.name }}
</span>
@@ -79,8 +82,8 @@
<option value="MASONRY">Mosaique</option>
<option value="CAROUSEL">Carrousel</option>
</select>
<button type="button" class="btn-icon-ghost" (click)="removeField(i)" aria-label="Supprimer">
<lucide-icon [img]="X" [size]="14"></lucide-icon>
<button type="button" class="btn-icon-danger" (click)="removeField(i)" aria-label="Supprimer">
<lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
</button>
</li>
</ul>

51
web/src/app/lore/template-edit/template-edit.component.scss
View File

@@ -107,9 +107,23 @@
align-items: center;
gap: 0.45rem;
// Discriminant visuel pour les champs IMAGE (palette indigo).
// Champ existant, chargé depuis le backend — orange ambre.
&.field-chip-existing {
background: #5a3a1a;
border-color: #7a4f22;
color: #fde4c0;
}
// Champ ajouté pendant cette session, pas encore sauvegardé — vert.
&.field-chip-new {
background: #2a5f3f;
border-color: #347a4f;
color: #d1fae5;
}
// Champ IMAGE (palette indigo) — prioritaire sur existing/new.
&.field-chip-image {
background: #1f1b3a;
background: #312b5c;
border-color: #3d3566;
color: #c7b8ff;
}
@@ -118,11 +132,33 @@
.btn-type-toggle {
width: auto;
padding: 0 0.7rem;
background: #2a2a3d;
color: #d1d5db;
font-size: 0.72rem;
letter-spacing: 0.02em;
color: #9ca3af;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
height: 32px;
&:hover { color: #a5b4fc; background: #1f1b3a; }
&:hover { background: #363650; color: white; }
}
.btn-icon-danger {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: #3f1f1f;
color: #fca5a5;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s;
&:hover { background: #5a2a2a; }
}
.type-select,
@@ -227,15 +263,14 @@
justify-content: center;
width: 36px;
height: 36px;
margin-right: 0.4rem;
background: transparent;
color: #6c63ff;
background: #6c63ff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s;
&:hover { background: #2a2a3d; }
&:hover { background: #5a52d6; }
}
.btn-primary, .btn-secondary, .btn-danger {

15
web/src/app/lore/template-edit/template-edit.component.ts
View File

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { forkJoin } from 'rxjs';
import { LucideAngularModule, Plus, X, Trash2, Type, Image as ImageIcon, ChevronUp, ChevronDown } from 'lucide-angular';
import { LucideAngularModule, Plus, Trash2, Type, Image as ImageIcon, ChevronUp, ChevronDown } from 'lucide-angular';
import { LoreService } from '../../services/lore.service';
import { TemplateService } from '../../services/template.service';
import { PageService } from '../../services/page.service';
@@ -26,7 +26,6 @@ import { loadLoreSidebarData, buildLoreSidebarConfig } from '../lore-sidebar.hel
})
export class TemplateEditComponent implements OnInit, OnDestroy {
readonly Plus = Plus;
readonly X = X;
readonly Trash2 = Trash2;
readonly Type = Type;
readonly ImageIcon = ImageIcon;
@@ -41,6 +40,17 @@ export class TemplateEditComponent implements OnInit, OnDestroy {
fields: TemplateField[] = [];
newFieldName = '';
newFieldType: FieldType = 'TEXT';
/**
* Noms des champs chargés depuis le backend — utilisés pour discriminer
* visuellement les champs existants (orange) des champs ajoutés dans cette
* session d'édition (vert). Non muté ensuite.
*/
private originalFieldNames = new Set<string>();
/** True si le champ est présent depuis le chargement du template. */
isExistingField(field: TemplateField): boolean {
return this.originalFieldNames.has(field.name);
}
constructor(
private fb: FormBuilder,
@@ -83,6 +93,7 @@ export class TemplateEditComponent implements OnInit, OnDestroy {
? { name: f.name, type, layout: f.layout ?? 'GALLERY' }
: { name: f.name, type };
});
this.originalFieldNames = new Set(this.fields.map(f => f.name));
this.form.patchValue({
name: template.name,
description: template.description,