feat: refonte métadonnées API + UX dossiers et import

- Nouveau schéma api_entries : convention+name, version X.X.X, provider,
  contacts splitées (name/entity/email), suppression des anciens champs
- Formulaire upload étape 2 : convention+nom, version 3 champs, fournisseur,
  contacts métier et technique obligatoires ; type détecté auto → select désactivé
- Validation YAML : redocly.yaml (extends: spec), support noms avec espaces,
  extraction métadonnées (name, version, description) depuis info YAML
- Dossiers : modale création avec champ Emplacement pré-initialisé depuis
  le contexte de navigation, options └ avec indentation par profondeur
- Import depuis un dossier : pré-sélection de la catégorie via queryParam
- Recherche étendue : name, provider, description, contacts
- Résolution @datacat/shared via workspace:* + compilation CJS avant NestJS

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
This commit is contained in:
z3n
2026-06-11 13:38:14 +00:00
parent ef3884c68d
commit e85696079c
20 changed files with 911 additions and 519 deletions

View File

@@ -10,7 +10,7 @@ import { CommonModule } from '@angular/common';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
import { ApiService } from '../../core/api.service';
import { CategoryService } from '../../core/category.service';
import { ApiEntry, Category } from '@datacat/shared';
import { ApiEntry, Category, ApiConvention } from '@datacat/shared';
@Component({
selector: 'app-api-detail',
@@ -81,10 +81,6 @@ import { ApiEntry, Category } from '@datacat/shared';
<div class="fr-card__content">
<h2 class="fr-h5 fr-mb-2w">Informations</h2>
<dl class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-12 fr-col-md-4">
<dt class="fr-text--bold">Titre</dt>
<dd>{{ entry.title }}</dd>
</div>
<div class="fr-col-12 fr-col-md-4">
<dt class="fr-text--bold">Version</dt>
<dd>{{ entry.version }}</dd>
@@ -93,6 +89,10 @@ import { ApiEntry, Category } from '@datacat/shared';
<dt class="fr-text--bold">Type</dt>
<dd>{{ entry.type }}</dd>
</div>
<div class="fr-col-12 fr-col-md-4">
<dt class="fr-text--bold">Fournisseur</dt>
<dd>{{ entry.provider }}</dd>
</div>
@if (entry.description) {
<div class="fr-col-12">
<dt class="fr-text--bold">Description</dt>
@@ -112,80 +112,28 @@ import { ApiEntry, Category } from '@datacat/shared';
</div>
</div>
<!-- Documentation fonctionnelle -->
@if (entry.functionalDoc) {
<div class="fr-card fr-mb-4w">
<div class="fr-card__body">
<div class="fr-card__content">
<h2 class="fr-h5 fr-mb-2w">Documentation fonctionnelle</h2>
<p style="white-space: pre-wrap">{{ entry.functionalDoc }}</p>
</div>
</div>
</div>
}
<!-- Documentation technique -->
@if (entry.technicalDoc) {
<div class="fr-card fr-mb-4w">
<div class="fr-card__body">
<div class="fr-card__content">
<h2 class="fr-h5 fr-mb-2w">Documentation technique</h2>
<p style="white-space: pre-wrap">{{ entry.technicalDoc }}</p>
</div>
</div>
</div>
}
<!-- Contacts -->
@if (entry.contactFunctional || entry.contactTechnical) {
<div class="fr-card fr-mb-4w">
<div class="fr-card__body">
<div class="fr-card__content">
<h2 class="fr-h5 fr-mb-2w">Contacts</h2>
<dl class="fr-grid-row fr-grid-row--gutters">
@if (entry.contactFunctional) {
<div class="fr-col-12 fr-col-md-6">
<dt class="fr-text--bold">Contact fonctionnel</dt>
<dd>{{ entry.contactFunctional }}</dd>
</div>
}
@if (entry.contactTechnical) {
<div class="fr-col-12 fr-col-md-6">
<dt class="fr-text--bold">Contact technique</dt>
<dd>{{ entry.contactTechnical }}</dd>
</div>
}
</dl>
<div class="fr-card fr-mb-4w">
<div class="fr-card__body">
<div class="fr-card__content">
<h2 class="fr-h5 fr-mb-2w">Contacts</h2>
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-12 fr-col-md-6">
<p class="fr-text--bold fr-mb-1w">Contact métier</p>
<p class="fr-mb-0">{{ entry.contactFunctionalName }}</p>
<p class="fr-mb-0 fr-text--sm">{{ entry.contactFunctionalEntity }}</p>
<p class="fr-mb-0 fr-text--sm">{{ entry.contactFunctionalEmail }}</p>
</div>
<div class="fr-col-12 fr-col-md-6">
<p class="fr-text--bold fr-mb-1w">Contact technique</p>
<p class="fr-mb-0">{{ entry.contactTechnicalName }}</p>
<p class="fr-mb-0 fr-text--sm">{{ entry.contactTechnicalEntity }}</p>
<p class="fr-mb-0 fr-text--sm">{{ entry.contactTechnicalEmail }}</p>
</div>
</div>
</div>
</div>
}
<!-- Droits d'accès -->
@if (entry.accessRights) {
<div class="fr-card fr-mb-4w">
<div class="fr-card__body">
<div class="fr-card__content">
<h2 class="fr-h5 fr-mb-2w">Droits d'accès</h2>
<p style="white-space: pre-wrap">{{ entry.accessRights }}</p>
</div>
</div>
</div>
}
<!-- Documentation externe -->
@if (entry.externalDocUrl) {
<div class="fr-mb-4w">
<a
[href]="entry.externalDocUrl"
target="_blank"
rel="noopener noreferrer"
class="fr-btn fr-btn--secondary fr-icon-external-link-line fr-btn--icon-left"
>
Documentation externe
</a>
</div>
}
</div>
<!-- Actions -->
<div class="fr-btns-group fr-btns-group--inline-sm">
@@ -229,7 +177,7 @@ import { ApiEntry, Category } from '@datacat/shared';
@if (showEditModal()) {
<div style="position:fixed;inset:0;z-index:9999;background:rgba(22,22,22,.64);display:flex;align-items:flex-start;justify-content:center;padding-top:5vh;overflow-y:auto"
role="dialog" aria-modal="true" aria-labelledby="edit-modal-title">
<div style="background:white;width:calc(100% - 2rem);max-width:600px;margin:0 1rem 2rem">
<div style="background:white;width:calc(100% - 2rem);max-width:640px;margin:0 1rem 2rem">
<div class="fr-p-4w">
<div class="fr-grid-row fr-grid-row--middle fr-mb-3w">
<div class="fr-col">
@@ -242,57 +190,144 @@ import { ApiEntry, Category } from '@datacat/shared';
@if (editError()) {
<div class="fr-alert fr-alert--error fr-mb-2w"><p>{{ editError() }}</p></div>
}
<div class="fr-input-group fr-mb-2w" [class.fr-input-group--error]="editTitleError()">
<label class="fr-label" for="edit-title">Titre <span style="color:var(--text-default-error)">*</span></label>
<input id="edit-title" class="fr-input" [class.fr-input--error]="editTitleError()" type="text" [value]="editTitle()"
(input)="editTitle.set($any($event.target).value); editTitleError.set(false)"
(blur)="editTitleError.set(!editTitle().trim())" />
@if (editTitleError()) { <p class="fr-error-text">Le titre est obligatoire.</p> }
</div>
<div class="fr-input-group fr-mb-2w" [class.fr-input-group--error]="editVersionError()">
<label class="fr-label" for="edit-version">Version <span style="color:var(--text-default-error)">*</span></label>
<input id="edit-version" class="fr-input" [class.fr-input--error]="editVersionError()" type="text" [value]="editVersion()"
(input)="editVersion.set($any($event.target).value); editVersionError.set(false)"
(blur)="editVersionError.set(!editVersion().trim())" />
@if (editVersionError()) { <p class="fr-error-text">La version est obligatoire.</p> }
<!-- Convention + Nom -->
<p class="fr-label fr-mb-1w">Titre <span style="color:var(--text-default-error)">*</span></p>
<div class="fr-grid-row fr-grid-row--gutters fr-mb-1w">
<div class="fr-col-12 fr-col-md-4">
<div class="fr-select-group">
<label class="fr-label" for="edit-convention">Convention</label>
<select id="edit-convention" class="fr-select" [value]="editConvention()"
(change)="editConvention.set($any($event.target).value)">
<option value="CONSULTER">Consulter</option>
<option value="ENREGISTRER">Enregistrer</option>
<option value="ETRE_NOTIFIE">Être notifié</option>
</select>
</div>
</div>
<div class="fr-col-12 fr-col-md-8">
<div class="fr-input-group" [class.fr-input-group--error]="editNameError()">
<label class="fr-label" for="edit-name">Nom de l'API</label>
<input id="edit-name" class="fr-input" [class.fr-input--error]="editNameError()" type="text"
[value]="editName()"
(input)="editName.set($any($event.target).value); editNameError.set(false)"
(blur)="editNameError.set(!editName().trim())" />
@if (editNameError()) { <p class="fr-error-text">Le nom est obligatoire.</p> }
</div>
</div>
</div>
<p class="fr-hint-text fr-mb-2w">Titre : <strong>{{ editPreviewTitle() }}</strong></p>
<!-- Catégorie -->
<div class="fr-select-group fr-mb-2w">
<label class="fr-label" for="edit-category">Catégorie</label>
<select id="edit-category" class="fr-select" [value]="editCategoryId()" (change)="editCategoryId.set($any($event.target).value || null)">
<select id="edit-category" class="fr-select" [value]="editCategoryId()"
(change)="editCategoryId.set($any($event.target).value || null)">
<option value="">— Sans catégorie —</option>
@for (cat of categories(); track cat.id) {
<option [value]="cat.id">{{ cat.name }}</option>
}
</select>
</div>
<!-- Fournisseur -->
<div class="fr-input-group fr-mb-2w" [class.fr-input-group--error]="editProviderError()">
<label class="fr-label" for="edit-provider">Fournisseur <span style="color:var(--text-default-error)">*</span></label>
<input id="edit-provider" class="fr-input" [class.fr-input--error]="editProviderError()" type="text"
[value]="editProvider()"
(input)="editProvider.set($any($event.target).value); editProviderError.set(false)"
(blur)="editProviderError.set(!editProvider().trim())" />
@if (editProviderError()) { <p class="fr-error-text">Le fournisseur est obligatoire.</p> }
</div>
<!-- Description -->
<div class="fr-input-group fr-mb-2w">
<label class="fr-label" for="edit-description">Description</label>
<textarea id="edit-description" class="fr-input" rows="3" [value]="editDescription()" (input)="editDescription.set($any($event.target).value)"></textarea>
<textarea id="edit-description" class="fr-input" rows="3" [value]="editDescription()"
(input)="editDescription.set($any($event.target).value)"></textarea>
</div>
<div class="fr-input-group fr-mb-2w">
<label class="fr-label" for="edit-func-doc">Documentation fonctionnelle</label>
<textarea id="edit-func-doc" class="fr-input" rows="3" [value]="editFunctionalDoc()" (input)="editFunctionalDoc.set($any($event.target).value)"></textarea>
<!-- Version -->
<p class="fr-label fr-mb-1w">Version <span style="color:var(--text-default-error)">*</span></p>
<div class="fr-grid-row fr-grid-row--gutters fr-mb-2w">
<div class="fr-col-4">
<div class="fr-input-group">
<label class="fr-label" for="edit-v-major">Majeure (X)</label>
<input id="edit-v-major" class="fr-input" type="number" min="0"
[value]="editVersionMajor()"
(input)="editVersionMajor.set(+$any($event.target).value)" />
</div>
</div>
<div class="fr-col-4">
<div class="fr-input-group">
<label class="fr-label" for="edit-v-minor">Mineure (Y)</label>
<input id="edit-v-minor" class="fr-input" type="number" min="0"
[value]="editVersionMinor()"
(input)="editVersionMinor.set(+$any($event.target).value)" />
</div>
</div>
<div class="fr-col-4">
<div class="fr-input-group">
<label class="fr-label" for="edit-v-patch">Correctif (Z)</label>
<input id="edit-v-patch" class="fr-input" type="number" min="0"
[value]="editVersionPatch()"
(input)="editVersionPatch.set(+$any($event.target).value)" />
</div>
</div>
</div>
<div class="fr-input-group fr-mb-2w">
<label class="fr-label" for="edit-tech-doc">Documentation technique</label>
<textarea id="edit-tech-doc" class="fr-input" rows="3" [value]="editTechnicalDoc()" (input)="editTechnicalDoc.set($any($event.target).value)"></textarea>
<!-- Contact métier -->
<p class="fr-label fr-mb-1w">Contact métier <span style="color:var(--text-default-error)">*</span></p>
<div class="fr-grid-row fr-grid-row--gutters fr-mb-2w">
<div class="fr-col-12 fr-col-md-4">
<div class="fr-input-group">
<label class="fr-label" for="edit-cf-name">Nom et prénom</label>
<input id="edit-cf-name" class="fr-input" type="text" [value]="editContactFunctionalName()"
(input)="editContactFunctionalName.set($any($event.target).value)" />
</div>
</div>
<div class="fr-col-12 fr-col-md-4">
<div class="fr-input-group">
<label class="fr-label" for="edit-cf-entity">Entité</label>
<input id="edit-cf-entity" class="fr-input" type="text" [value]="editContactFunctionalEntity()"
(input)="editContactFunctionalEntity.set($any($event.target).value)" />
</div>
</div>
<div class="fr-col-12 fr-col-md-4">
<div class="fr-input-group">
<label class="fr-label" for="edit-cf-email">Email</label>
<input id="edit-cf-email" class="fr-input" type="email" [value]="editContactFunctionalEmail()"
(input)="editContactFunctionalEmail.set($any($event.target).value)" />
</div>
</div>
</div>
<div class="fr-input-group fr-mb-2w">
<label class="fr-label" for="edit-ext-url">URL documentation externe</label>
<input id="edit-ext-url" class="fr-input" type="text" [value]="editExternalDocUrl()" (input)="editExternalDocUrl.set($any($event.target).value)" />
</div>
<div class="fr-input-group fr-mb-2w">
<label class="fr-label" for="edit-contact-func">Contact fonctionnel</label>
<input id="edit-contact-func" class="fr-input" type="text" [value]="editContactFunctional()" (input)="editContactFunctional.set($any($event.target).value)" />
</div>
<div class="fr-input-group fr-mb-2w">
<label class="fr-label" for="edit-contact-tech">Contact technique</label>
<input id="edit-contact-tech" class="fr-input" type="text" [value]="editContactTechnical()" (input)="editContactTechnical.set($any($event.target).value)" />
</div>
<div class="fr-input-group fr-mb-3w">
<label class="fr-label" for="edit-access">Droits d'accès</label>
<textarea id="edit-access" class="fr-input" rows="3" [value]="editAccessRights()" (input)="editAccessRights.set($any($event.target).value)"></textarea>
<!-- Contact technique -->
<p class="fr-label fr-mb-1w">Contact technique <span style="color:var(--text-default-error)">*</span></p>
<div class="fr-grid-row fr-grid-row--gutters fr-mb-3w">
<div class="fr-col-12 fr-col-md-4">
<div class="fr-input-group">
<label class="fr-label" for="edit-ct-name">Nom et prénom</label>
<input id="edit-ct-name" class="fr-input" type="text" [value]="editContactTechnicalName()"
(input)="editContactTechnicalName.set($any($event.target).value)" />
</div>
</div>
<div class="fr-col-12 fr-col-md-4">
<div class="fr-input-group">
<label class="fr-label" for="edit-ct-entity">Entité</label>
<input id="edit-ct-entity" class="fr-input" type="text" [value]="editContactTechnicalEntity()"
(input)="editContactTechnicalEntity.set($any($event.target).value)" />
</div>
</div>
<div class="fr-col-12 fr-col-md-4">
<div class="fr-input-group">
<label class="fr-label" for="edit-ct-email">Email</label>
<input id="edit-ct-email" class="fr-input" type="email" [value]="editContactTechnicalEmail()"
(input)="editContactTechnicalEmail.set($any($event.target).value)" />
</div>
</div>
</div>
<div class="fr-btns-group fr-btns-group--right fr-btns-group--inline">
<button class="fr-btn fr-btn--secondary" (click)="closeEdit()">Annuler</button>
<button class="fr-btn" (click)="submitEdit()" [disabled]="editLoading()">
@@ -321,19 +356,28 @@ export class ApiDetailComponent implements OnInit, OnDestroy {
showEditModal = signal(false);
editLoading = signal(false);
editError = signal<string | null>(null);
editTitleError = signal(false);
editVersionError = signal(false);
editNameError = signal(false);
editProviderError = signal(false);
categories = signal<Category[]>([]);
editTitle = signal('');
editVersion = signal('');
editConvention = signal<ApiConvention>('CONSULTER');
editName = signal('');
editProvider = signal('');
editVersionMajor = signal(0);
editVersionMinor = signal(0);
editVersionPatch = signal(0);
editCategoryId = signal<string | null>(null);
editDescription = signal('');
editFunctionalDoc = signal('');
editTechnicalDoc = signal('');
editExternalDocUrl = signal('');
editContactFunctional = signal('');
editContactTechnical = signal('');
editAccessRights = signal('');
editContactFunctionalName = signal('');
editContactFunctionalEntity = signal('');
editContactFunctionalEmail = signal('');
editContactTechnicalName = signal('');
editContactTechnicalEntity = signal('');
editContactTechnicalEmail = signal('');
editPreviewTitle() {
const labels: Record<ApiConvention, string> = { CONSULTER: 'Consulter', ENREGISTRER: 'Enregistrer', ETRE_NOTIFIE: 'Être notifié' };
return `${labels[this.editConvention()]} ${this.editName()}`.trim();
}
private pollInterval: ReturnType<typeof setInterval> | null = null;
private id = '';
@@ -362,19 +406,23 @@ export class ApiDetailComponent implements OnInit, OnDestroy {
openEdit() {
const entry = this.api();
if (!entry) return;
this.editTitle.set(entry.title);
this.editVersion.set(entry.version);
this.editConvention.set(entry.convention);
this.editName.set(entry.name);
this.editProvider.set(entry.provider);
this.editVersionMajor.set(entry.versionMajor);
this.editVersionMinor.set(entry.versionMinor);
this.editVersionPatch.set(entry.versionPatch);
this.editCategoryId.set(entry.categoryId ?? null);
this.editDescription.set(entry.description ?? '');
this.editFunctionalDoc.set(entry.functionalDoc ?? '');
this.editTechnicalDoc.set(entry.technicalDoc ?? '');
this.editExternalDocUrl.set(entry.externalDocUrl ?? '');
this.editContactFunctional.set(entry.contactFunctional ?? '');
this.editContactTechnical.set(entry.contactTechnical ?? '');
this.editAccessRights.set(entry.accessRights ?? '');
this.editContactFunctionalName.set(entry.contactFunctionalName);
this.editContactFunctionalEntity.set(entry.contactFunctionalEntity);
this.editContactFunctionalEmail.set(entry.contactFunctionalEmail);
this.editContactTechnicalName.set(entry.contactTechnicalName);
this.editContactTechnicalEntity.set(entry.contactTechnicalEntity);
this.editContactTechnicalEmail.set(entry.contactTechnicalEmail);
this.editError.set(null);
this.editTitleError.set(false);
this.editVersionError.set(false);
this.editNameError.set(false);
this.editProviderError.set(false);
this.categoryService.list().subscribe((res) => this.categories.set(res.items));
this.showEditModal.set(true);
}
@@ -384,21 +432,25 @@ export class ApiDetailComponent implements OnInit, OnDestroy {
}
submitEdit() {
this.editTitleError.set(!this.editTitle().trim());
this.editVersionError.set(!this.editVersion().trim());
if (!this.editTitle().trim() || !this.editVersion().trim()) return;
this.editNameError.set(!this.editName().trim());
this.editProviderError.set(!this.editProvider().trim());
if (!this.editName().trim() || !this.editProvider().trim()) return;
this.editLoading.set(true);
this.apiService.update(this.id, {
title: this.editTitle().trim(),
version: this.editVersion().trim(),
convention: this.editConvention(),
name: this.editName().trim(),
provider: this.editProvider().trim(),
versionMajor: this.editVersionMajor(),
versionMinor: this.editVersionMinor(),
versionPatch: this.editVersionPatch(),
categoryId: this.editCategoryId() || null,
description: this.editDescription().trim() || undefined,
functionalDoc: this.editFunctionalDoc().trim() || null,
technicalDoc: this.editTechnicalDoc().trim() || null,
externalDocUrl: this.editExternalDocUrl().trim() || null,
contactFunctional: this.editContactFunctional().trim() || null,
contactTechnical: this.editContactTechnical().trim() || null,
accessRights: this.editAccessRights().trim() || null,
description: this.editDescription().trim() || null,
contactFunctionalName: this.editContactFunctionalName().trim(),
contactFunctionalEntity: this.editContactFunctionalEntity().trim(),
contactFunctionalEmail: this.editContactFunctionalEmail().trim(),
contactTechnicalName: this.editContactTechnicalName().trim(),
contactTechnicalEntity: this.editContactTechnicalEntity().trim(),
contactTechnicalEmail: this.editContactTechnicalEmail().trim(),
}).subscribe({
next: (entry) => {
this.api.set(entry);