IETM_FIXE\ietm6
84ccdd53ad
- 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
118 lines
4.5 KiB
HTML
118 lines
4.5 KiB
HTML
<div class="page" *ngIf="template">
|
|
|
|
<header class="page-header">
|
|
<div>
|
|
<h1>{{ template.name }}</h1>
|
|
<p class="subtitle">Template</p>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button type="button" class="btn-danger" (click)="delete()">Supprimer</button>
|
|
<button type="button" class="btn-primary" (click)="save()" [disabled]="form.invalid">Sauvegarder</button>
|
|
</div>
|
|
</header>
|
|
|
|
<form [formGroup]="form" class="template-form">
|
|
|
|
<!-- Colonne gauche ---------------------------------------------- -->
|
|
<div class="col-left">
|
|
|
|
<div class="field">
|
|
<label>Nom</label>
|
|
<input type="text" formControlName="name" />
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label>Dossier par défaut</label>
|
|
<select formControlName="defaultNodeId">
|
|
<option value="">-- Aucun --</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 par défaut</p>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label>Description</label>
|
|
<textarea formControlName="description" rows="6"></textarea>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Colonne droite --------------------------------------------- -->
|
|
<div class="col-right">
|
|
|
|
<label class="section-label">Champs du template</label>
|
|
|
|
<ul class="fields-list">
|
|
<li class="field-row" *ngFor="let f of fields; let i = index; let first = first; let last = last">
|
|
<div class="reorder-stack">
|
|
<button type="button" class="btn-icon-ghost btn-reorder"
|
|
(click)="moveField(i, -1)"
|
|
[disabled]="first"
|
|
aria-label="Monter d'un cran" title="Monter">
|
|
<lucide-icon [img]="ChevronUp" [size]="12"></lucide-icon>
|
|
</button>
|
|
<button type="button" class="btn-icon-ghost btn-reorder"
|
|
(click)="moveField(i, 1)"
|
|
[disabled]="last"
|
|
aria-label="Descendre d'un cran" title="Descendre">
|
|
<lucide-icon [img]="ChevronDown" [size]="12"></lucide-icon>
|
|
</button>
|
|
</div>
|
|
<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>
|
|
<button type="button"
|
|
class="btn-icon-ghost btn-type-toggle"
|
|
(click)="toggleFieldType(i)"
|
|
[title]="f.type === 'TEXT' ? 'Transformer en champ Image' : 'Transformer en champ Texte'">
|
|
{{ f.type === 'TEXT' ? 'Texte' : 'Image' }}
|
|
</button>
|
|
<select *ngIf="f.type === 'IMAGE'"
|
|
class="layout-select"
|
|
[ngModel]="f.layout ?? 'GALLERY'"
|
|
[ngModelOptions]="{ standalone: true }"
|
|
(ngModelChange)="setFieldLayout(i, $event)"
|
|
title="Mise en page des images">
|
|
<option value="GALLERY">Grille</option>
|
|
<option value="HERO">Heros</option>
|
|
<option value="MASONRY">Mosaique</option>
|
|
<option value="CAROUSEL">Carrousel</option>
|
|
</select>
|
|
<button type="button" class="btn-icon-danger" (click)="removeField(i)" aria-label="Supprimer">
|
|
<lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="field-row add-row">
|
|
<input
|
|
type="text"
|
|
[(ngModel)]="newFieldName"
|
|
[ngModelOptions]="{ standalone: true }"
|
|
placeholder="+ Ajouter un champ"
|
|
(keydown.enter)="$event.preventDefault(); addField()" />
|
|
<select
|
|
class="type-select"
|
|
[(ngModel)]="newFieldType"
|
|
[ngModelOptions]="{ standalone: true }"
|
|
aria-label="Type du champ">
|
|
<option value="TEXT">Texte</option>
|
|
<option value="IMAGE">Image</option>
|
|
</select>
|
|
<button type="button" class="btn-add" (click)="addField()">
|
|
<lucide-icon [img]="Plus" [size]="14"></lucide-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<p class="hint">Texte = zone editable + generable par l'IA. Image = galerie d'illustrations.</p>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|