Outil fiche technique – lambique.online

Documentation Outil Fiche Technique

Outil Fiche Technique : application web permettant de définir et gérer dynamiquement les fiches techniques d’articles à partir de caractéristiques configurables, avec une interface adaptable au type de chaque donnée.

🚀 Lancer le projet en local

Ouvrir le dossier dans Visual Studio Code
Lancer le serveur via l’extension Live Server (clic droit sur index.html → “Open with Live Server”)
Le projet s’ouvre dans le navigateur (http://127.0.0.1:5500 par défaut)

📌 Pré-requis

HTML5 / CSS3
JavaScript ES6 (modules)
Navigateurs modernes (Chrome, Firefox, Edge)
Aucune dépendance externe (pas de framework)

📁 Structure du projet

/index.html — Page principale
/css/
- style.css — Styles globaux
- VPopupListe.css — Styles spécifiques à la popup
/data/
- caracteristique.json — Caractéristiques disponibles
- caracteristique_type_valeur.json — Valeurs des caractéristiques de type COM
/js/
- main.js — Entrée principale
- /fiche_technique/
  - MFicheTechnique.js
  - VFicheTechnique.js
  - PFicheTechnique.js
- /caracteristique/
  - MCaracteristique.js
- /shared/
  - VPopupListe.js
  - PopupFactory.js

🧱 Architecture MVP

Modèles : MCaracteristique, MFicheTechnique
Vues : VFicheTechnique, VPopupListe
Présentateurs : PFicheTechnique

🧩 Fonctionnalités principales

Ajout de caractéristiques via une popup filtrable
Rendu adaptatif des cellules selon le type (COM, CHA, ENT, REE)
Suppression, renommage et saisie d’articles
Export JSON dans la console

🔍 Types de champs

CHA – Texte libre
ENT – Nombre entier
REE – Nombre réel (décimal)
COM – Liste de choix liée à un ref_type

🔁 Flux de données

caracteristique.json → liste de caractéristiques
caracterisitque_type_valeur.json → liste de valeurs pour les types COM
Chaque caractéristique de type COM reçoit ses options dynamiquement

📄 Exemple de données

Caractéristique :

{
  "ref_caracteristique": 1,
  "nom": "DN",
  "type_champ": "COM",
  "ref_type": 1,
  "info": "Diamètre nominal",
  "actif": 1
}

Valeur pour type :

{
  "ref_valeur": 1,
  "ref_type": 1,
  "ordre": 1,
  "valeur": "DN 15",
  "actif": 1
}

L’exportation de données d’une table SQL en JSON peut se faire via le code ci-dessous.

SELECT '[' + 
  STUFF((
    SELECT ',' + 
      '{' +
        '"ref_caracteristique":' + CAST(ref_caracteristique AS VARCHAR) + ',' +
        '"nom":"' + ISNULL(REPLACE(nom, '\"', '\"\"'), '') + '",' +
        '"var_constant":"' + ISNULL(REPLACE(var_constant, '\"', '\"\"'), '') + '",' +
        '"type_champ":"' + ISNULL(REPLACE(type_champ, '\"', '\"\"'), '') + '",' +
        '"type_unite":"' + ISNULL(REPLACE(type_unite, '\"', '\"\"'), '') + '",' +
        '"ref_type":' + CAST(ISNULL(ref_type, 0) AS VARCHAR) + ',' +
        '"info":"' + ISNULL(REPLACE(info, '\"', '\"\"'), '') + '",' +
        '"actif":' + CAST(ISNULL(actif, 0) AS VARCHAR) +
      '}'
    FROM LATEArticle_Caracteristique
    FOR XML PATH(''), TYPE
  ).value('.', 'NVARCHAR(MAX)'), 1, 1, '') + ']'
AS json_output;

🧪 Tester dans la console

caracteristiquesDisponibles : tableau de MCaracteristique
typeValeurs : liste brute des options chargées
getPopupListe() : accéder à la popup globale

🔜 Prochaines évolutions

Connexion à une vraie API REST (remplacement des fichiers JSON)
Sauvegarde des fiches sur le serveur
Validation des champs en fonction du type
Ajout d’un champ unité (type_unite)
Ajout de styles UX pour faciliter la lecture

Editeur de blocs personnalisables

Documentation de projet — Éditeur de blocs personnalisés

1. Contexte & Objectif

Créer un éditeur web de type “Gutenberg” (à titre d’inspiration), totalement autonome (pas de dépendance WordPress) pour composer des fiches techniques structurées à partir de blocs métiers : informations, fluides, matériaux, caractéristiques générales, tableaux de caractéristiques spécifiques, etc.

2. Fonctionnalités Clés

Barre d’outils globale « ➕ Ajouter un bloc » pour insérer tout type de section.
Blocs prédéfinis :
- Information (titre + contenu libre)
- Fluide (nom, propriétés, unités)
- Matériau (nom, propriétés, unités)
- Caractéristique générale (label + valeur)
- Tableau spécifique (structure articles × caractéristiques)
Masquage/affichage dynamique de chaque bloc selon la fiche en cours.
Drag & drop pour réordonner les blocs et les éléments au sein des blocs.
Export/Import JSON ou format standard (PDF, Excel) de la fiche complète.
Pluginable : possibilité d’ajouter de nouveaux types de blocs via un mécanisme d’extension.

3. Architecture & Structure proposée


mon-editeur-blocs/
├─ index.html                   ← page d’accueil de l’éditeur
├─ package.json
├─ vite.config.js               ← (ou Webpack/Rollup)
├─ src/
│   ├─ main.js                  ← point d’entrée global
│   ├─ App.js                   ← composant racine
│   ├─ components/              ← UI et blocs
│   │   ├─ Toolbar.js
│   │   ├─ BlockSelector.js
│   │   ├─ blocks/
│   │   │   ├─ InfoBlock.js
│   │   │   ├─ FluideBlock.js
│   │   │   ├─ MateriauBlock.js
│   │   │   ├─ CaracGeneraleBlock.js
│   │   │   └─ TableauSpecifiqueBlock.js
│   ├─ services/                ← API, stockage local/session
│   │   └─ StorageService.js
│   └─ styles/
│       └─ global.css
└─ public/
    └─ assets/                  ← images / polices / logos

4. Choix Techniques

Framework UI : React (JSX) vs. Vanilla JS (Web Components) vs. Svelte/Vue.
Bundler : Vite (dev rapide) ou Webpack/Rollup.
Styles : CSS pur, Sass, PostCSS, ou Tailwind CSS.
Stockage des données : LocalStorage/IndexedDB pour prototypage, API REST/GraphQL pour production.
Drag & Drop : react-dnd ou API native (dragstart/drop).
Internationalisation : i18next ou solution maison.
Tests : Jest + Testing Library, Cypress pour E2E.
CI/CD : GitHub Actions pour build et déploiement.

5. Questions en Suspens

Doit-on proposer un seul bloc “Tableau spécifique” gérant plusieurs tableaux, ou plusieurs blocs distincts ?
Comment modéliser plusieurs instances de blocs identiques (ex. plusieurs “Fluide”) ?
Quelle approche pour l’export (PDF/Excel) : librairie client (jsPDF, SheetJS) ou service côté serveur ?
Faut-il stocker une arborescence JSON complète ou modéliser en base de données relationnelle ?
Quel mécanisme d’extension/plugin pour autoriser l’ajout de nouveaux types de blocs ?
Version mobile : interface alternative pour écrans étroits ?
Commentaires & collaboration en temps réel : intégrer CRDT ou WebSocket ?

6. Prochaines Étapes

Valider le périmètre des blocs et leur modèle de données JSON.
Choisir la stack (framework, bundler, styles, tests).
Initialiser le projet (scaffold Vite/Webpack + Git).
Implémenter la barre d’outils et le sélecteur de blocs.
Créer le premier bloc (Information) et tester l’ajout / sauvegarde.
Écrire un guide de contribution pour ajouter de nouveaux blocs.