feat(front): rend l'écran d'administration réellement fonctionnel
Les boutons Modifier et Désactiver de la page Administration n'appelaient rien : handleDelete se contentait d'un console.log et le bouton Enregistrer de la modale ne faisait que la refermer. L'écran donnait l'illusion d'un CRUD. Branche les 4 onglets sur les endpoints POST/PUT/DELETE ajoutés côté API, avec confirmation avant suppression, rechargement après enregistrement et remontée des erreurs de l'API (dont le refus 409 quand des enregistrements sont rattachés). Les 4 blocs de colonnes de tableau, quasi identiques d'un onglet à l'autre, laissent place à une description déclarative (referentielsConfig.js) : un seul tableau et un seul formulaire générique (ReferentielForm) servent les 4 référentiels. Les colonnes qui portaient un identifiant brut affichent maintenant le libellé. La modale, jusqu'ici déclarée dans Admin.jsx, devient un composant commun réutilisable.
This commit is contained in:
@@ -0,0 +1,19 @@
|
||||
import styles from './Modal.module.css';
|
||||
|
||||
export default function Modal({ isOpen, onClose, title, children }) {
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className={styles.modalOverlay} onClick={onClose}>
|
||||
<div className={styles.modal} onClick={e => e.stopPropagation()}>
|
||||
<div className={styles.modalHeader}>
|
||||
<h2>{title}</h2>
|
||||
<button className={styles.closeBtn} onClick={onClose} aria-label="Fermer">×</button>
|
||||
</div>
|
||||
<div className={styles.modalBody}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
.modalOverlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background-color: var(--color-white);
|
||||
border-radius: var(--radius);
|
||||
border-top: 4px solid var(--color-primary);
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modalHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid var(--color-gray-border);
|
||||
}
|
||||
|
||||
.modalHeader h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.closeBtn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modalBody {
|
||||
padding: 24px;
|
||||
}
|
||||
@@ -1,229 +1,186 @@
|
||||
// src/pages/Admin/Admin.jsx
|
||||
// Page Administration : onglets pour gérer monitorings, services, catégories, contacts
|
||||
import { useState, useEffect } from 'react';
|
||||
// Page Administration : CRUD sur les référentiels (monitorings, services,
|
||||
// catégories, contacts). Réservée au rôle Admin côté API.
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { Plus, Edit, Trash2 } from 'lucide-react';
|
||||
import { getMonitorings, getServices, getCategories, getContacts } from '../../services/api';
|
||||
import DataTable from '../../components/common/DataTable';
|
||||
import LoadingSpinner from '../../components/common/LoadingSpinner';
|
||||
import ErrorMessage from '../../components/common/ErrorMessage';
|
||||
import Button from '../../components/common/Button';
|
||||
import Modal from '../../components/common/Modal';
|
||||
import ReferentielForm from './ReferentielForm';
|
||||
import { REFERENTIELS, LIBELLES_REFERENTIEL } from './referentielsConfig';
|
||||
import styles from './Admin.module.css';
|
||||
|
||||
/* Modale générique pour ajouter/modifier */
|
||||
function Modal({ isOpen, onClose, title, children }) {
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className={styles.modalOverlay} onClick={onClose}>
|
||||
<div className={styles.modal} onClick={e => e.stopPropagation()}>
|
||||
<div className={styles.modalHeader}>
|
||||
<h2>{title}</h2>
|
||||
<button className={styles.closeBtn} onClick={onClose}>×</button>
|
||||
</div>
|
||||
<div className={styles.modalBody}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Admin() {
|
||||
const [activeTab, setActiveTab] = useState('monitorings');
|
||||
const [data, setData] = useState({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [erreur, setErreur] = useState('');
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [editingItem, setEditingItem] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
async function loadData() {
|
||||
setLoading(true);
|
||||
setErreur('');
|
||||
try {
|
||||
async function chargerReferentiels() {
|
||||
const [monitorings, services, categories, contacts] = await Promise.all([
|
||||
getMonitorings(),
|
||||
getServices(),
|
||||
getCategories(),
|
||||
getContacts()
|
||||
getContacts(),
|
||||
]);
|
||||
setData({
|
||||
return {
|
||||
monitorings: Array.isArray(monitorings) ? monitorings : [],
|
||||
services: Array.isArray(services) ? services : [],
|
||||
categories: Array.isArray(categories) ? categories : [],
|
||||
contacts: Array.isArray(contacts) ? contacts : []
|
||||
});
|
||||
contacts: Array.isArray(contacts) ? contacts : [],
|
||||
};
|
||||
}
|
||||
|
||||
export default function Admin() {
|
||||
const [ongletActif, setOngletActif] = useState(REFERENTIELS[0].key);
|
||||
const [donnees, setDonnees] = useState({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [erreur, setErreur] = useState('');
|
||||
const [modaleOuverte, setModaleOuverte] = useState(false);
|
||||
const [elementEnEdition, setElementEnEdition] = useState(null);
|
||||
|
||||
const recharger = useCallback(async () => {
|
||||
setErreur('');
|
||||
try {
|
||||
setDonnees(await chargerReferentiels());
|
||||
} catch (e) {
|
||||
setErreur(e.message || 'Erreur lors du chargement des données administratives.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
function handleAdd() {
|
||||
setEditingItem(null);
|
||||
setModalOpen(true);
|
||||
useEffect(() => {
|
||||
let annule = false;
|
||||
async function chargerAuMontage() {
|
||||
try {
|
||||
const resultat = await chargerReferentiels();
|
||||
if (!annule) setDonnees(resultat);
|
||||
} catch (e) {
|
||||
if (!annule) setErreur(e.message || 'Erreur lors du chargement des données administratives.');
|
||||
} finally {
|
||||
if (!annule) setLoading(false);
|
||||
}
|
||||
}
|
||||
chargerAuMontage();
|
||||
return () => { annule = true; };
|
||||
}, []);
|
||||
|
||||
const referentiel = REFERENTIELS.find(r => r.key === ongletActif);
|
||||
|
||||
function ouvrirCreation() {
|
||||
setElementEnEdition(null);
|
||||
setModaleOuverte(true);
|
||||
}
|
||||
|
||||
function handleEdit(item) {
|
||||
setEditingItem(item);
|
||||
setModalOpen(true);
|
||||
function ouvrirEdition(element) {
|
||||
setElementEnEdition(element);
|
||||
setModaleOuverte(true);
|
||||
}
|
||||
|
||||
function handleDelete(item) {
|
||||
// Simulation de suppression (pas d'API pour ça)
|
||||
console.log('Supprimer', item);
|
||||
async function handleEnregistrer(corps) {
|
||||
if (elementEnEdition) {
|
||||
await referentiel.modifier(elementEnEdition[referentiel.idField], corps);
|
||||
} else {
|
||||
await referentiel.creer(corps);
|
||||
}
|
||||
setModaleOuverte(false);
|
||||
await recharger();
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{ key: 'monitorings', label: 'Monitorings' },
|
||||
{ key: 'services', label: 'Services' },
|
||||
{ key: 'categories', label: 'Catégories' },
|
||||
{ key: 'contacts', label: 'Contacts' }
|
||||
async function handleSupprimer(element) {
|
||||
const action = referentiel.suppressionEstDesactivation ? 'Désactiver' : 'Supprimer';
|
||||
const nom = element[referentiel.colonnes[0].key];
|
||||
if (!window.confirm(`${action} « ${nom} » ?`)) return;
|
||||
|
||||
setErreur('');
|
||||
try {
|
||||
await referentiel.supprimer(element[referentiel.idField]);
|
||||
await recharger();
|
||||
} catch (e) {
|
||||
setErreur(e.message || 'La suppression a échoué.');
|
||||
}
|
||||
}
|
||||
|
||||
/* Affiche le libellé d'un référentiel lié plutôt que son identifiant brut. */
|
||||
function libelleLie(nomReferentiel, id) {
|
||||
const { idField, labelField } = LIBELLES_REFERENTIEL[nomReferentiel];
|
||||
const trouve = (donnees[nomReferentiel] || []).find(item => item[idField] === id);
|
||||
return trouve ? trouve[labelField] : id;
|
||||
}
|
||||
|
||||
const colonnes = [
|
||||
...referentiel.colonnes.map(colonne => ({
|
||||
key: colonne.key,
|
||||
label: colonne.label,
|
||||
render: colonne.referentiel
|
||||
? val => libelleLie(colonne.referentiel, val)
|
||||
: undefined,
|
||||
})),
|
||||
{
|
||||
key: 'actions',
|
||||
label: 'Actions',
|
||||
render: (val, row) => (
|
||||
<div className={styles.actions}>
|
||||
<button className={styles.actionBtn} onClick={() => ouvrirEdition(row)}>
|
||||
<Edit size={14} />
|
||||
Modifier
|
||||
</button>
|
||||
<button className={styles.actionBtn} onClick={() => handleSupprimer(row)}>
|
||||
<Trash2 size={14} />
|
||||
{referentiel.suppressionEstDesactivation ? 'Désactiver' : 'Supprimer'}
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const columns = {
|
||||
monitorings: [
|
||||
{ key: 'monito_intitule', label: 'Nom' },
|
||||
{ key: 'id_service', label: 'Service' },
|
||||
{ key: 'id_categorie', label: 'Catégorie' },
|
||||
{ key: 'bdd_source', label: 'Source' },
|
||||
{ key: 'table_source', label: 'Table' },
|
||||
{
|
||||
key: 'actions',
|
||||
label: 'Actions',
|
||||
render: (val, row) => (
|
||||
<div className={styles.actions}>
|
||||
<button className={styles.actionBtn} onClick={() => handleEdit(row)}>
|
||||
<Edit size={14} />
|
||||
Modifier
|
||||
</button>
|
||||
<button className={styles.actionBtn} onClick={() => handleDelete(row)}>
|
||||
<Trash2 size={14} />
|
||||
Désactiver
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
],
|
||||
services: [
|
||||
{ key: 'nom_service', label: 'Nom' },
|
||||
{
|
||||
key: 'actions',
|
||||
label: 'Actions',
|
||||
render: (val, row) => (
|
||||
<div className={styles.actions}>
|
||||
<button className={styles.actionBtn} onClick={() => handleEdit(row)}>
|
||||
<Edit size={14} />
|
||||
Modifier
|
||||
</button>
|
||||
<button className={styles.actionBtn} onClick={() => handleDelete(row)}>
|
||||
<Trash2 size={14} />
|
||||
Désactiver
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
],
|
||||
categories: [
|
||||
{ key: 'intitule_categorie', label: 'Nom' },
|
||||
{
|
||||
key: 'actions',
|
||||
label: 'Actions',
|
||||
render: (val, row) => (
|
||||
<div className={styles.actions}>
|
||||
<button className={styles.actionBtn} onClick={() => handleEdit(row)}>
|
||||
<Edit size={14} />
|
||||
Modifier
|
||||
</button>
|
||||
<button className={styles.actionBtn} onClick={() => handleDelete(row)}>
|
||||
<Trash2 size={14} />
|
||||
Désactiver
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
],
|
||||
contacts: [
|
||||
{ key: 'intitule_contact', label: 'Intitulé' },
|
||||
{ key: 'nom', label: 'Nom' },
|
||||
{ key: 'prenom', label: 'Prénom' },
|
||||
{ key: 'mail', label: 'Email' },
|
||||
{ key: 'id_service', label: 'Service' },
|
||||
{
|
||||
key: 'actions',
|
||||
label: 'Actions',
|
||||
render: (val, row) => (
|
||||
<div className={styles.actions}>
|
||||
<button className={styles.actionBtn} onClick={() => handleEdit(row)}>
|
||||
<Edit size={14} />
|
||||
Modifier
|
||||
</button>
|
||||
<button className={styles.actionBtn} onClick={() => handleDelete(row)}>
|
||||
<Trash2 size={14} />
|
||||
Désactiver
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
if (loading) return <LoadingSpinner message="Chargement des données administratives..." />;
|
||||
if (erreur) return <ErrorMessage message={erreur} />;
|
||||
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<h1 className={styles.title}>Administration</h1>
|
||||
|
||||
{/* Onglets */}
|
||||
<div className={styles.tabs}>
|
||||
{tabs.map(tab => (
|
||||
{REFERENTIELS.map(item => (
|
||||
<button
|
||||
key={tab.key}
|
||||
className={`${styles.tab} ${activeTab === tab.key ? styles.active : ''}`}
|
||||
onClick={() => setActiveTab(tab.key)}
|
||||
key={item.key}
|
||||
className={`${styles.tab} ${ongletActif === item.key ? styles.active : ''}`}
|
||||
onClick={() => setOngletActif(item.key)}
|
||||
>
|
||||
{tab.label}
|
||||
{item.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Contenu de l'onglet actif */}
|
||||
{erreur && <ErrorMessage message={erreur} />}
|
||||
|
||||
<div className={styles.tabContent}>
|
||||
<div className={styles.header}>
|
||||
<h2>{tabs.find(t => t.key === activeTab)?.label}</h2>
|
||||
<Button variant="primary" onClick={handleAdd}>
|
||||
<h2>{referentiel.label}</h2>
|
||||
<Button variant="primary" onClick={ouvrirCreation}>
|
||||
<Plus size={14} />
|
||||
Ajouter
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
columns={columns[activeTab]}
|
||||
data={data[activeTab] || []}
|
||||
columns={colonnes}
|
||||
data={donnees[ongletActif] || []}
|
||||
pageSize={50}
|
||||
emptyMessage={`Aucun ${activeTab.slice(0, -1)} trouvé.`}
|
||||
emptyMessage={`Aucun ${referentiel.singulier} trouvé.`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Modale */}
|
||||
<Modal
|
||||
isOpen={modalOpen}
|
||||
onClose={() => setModalOpen(false)}
|
||||
title={`${editingItem ? 'Modifier' : 'Ajouter'} ${tabs.find(t => t.key === activeTab)?.label.slice(0, -1)}`}
|
||||
isOpen={modaleOuverte}
|
||||
onClose={() => setModaleOuverte(false)}
|
||||
title={`${elementEnEdition ? 'Modifier' : 'Ajouter'} ${referentiel.singulier}`}
|
||||
>
|
||||
<p>Formulaire à implémenter selon les besoins.</p>
|
||||
<div className={styles.modalActions}>
|
||||
<Button variant="secondary" onClick={() => setModalOpen(false)}>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button variant="primary" onClick={() => setModalOpen(false)}>
|
||||
Enregistrer
|
||||
</Button>
|
||||
</div>
|
||||
<ReferentielForm
|
||||
/* Remonte le formulaire à zéro quand on change d'onglet ou d'élément */
|
||||
key={`${referentiel.key}-${elementEnEdition?.[referentiel.idField] ?? 'nouveau'}`}
|
||||
referentiel={referentiel}
|
||||
valeurInitiale={elementEnEdition}
|
||||
donnees={donnees}
|
||||
onEnregistrer={handleEnregistrer}
|
||||
onAnnuler={() => setModaleOuverte(false)}
|
||||
/>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -83,55 +83,33 @@
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* Modale */
|
||||
.modalOverlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
/* Formulaire de la modale (le conteneur vit dans Modal.module.css) */
|
||||
.field {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background-color: var(--color-white);
|
||||
border-radius: var(--radius);
|
||||
border-top: 4px solid var(--color-primary);
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modalHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid var(--color-gray-border);
|
||||
}
|
||||
|
||||
.modalHeader h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
.label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.closeBtn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
.input {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--color-gray-border);
|
||||
border-radius: var(--radius);
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
|
||||
.modalBody {
|
||||
padding: 24px;
|
||||
.input:focus {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.modalActions {
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
import { useState } from 'react';
|
||||
import Button from '../../components/common/Button';
|
||||
import ErrorMessage from '../../components/common/ErrorMessage';
|
||||
import { LIBELLES_REFERENTIEL } from './referentielsConfig';
|
||||
import styles from './Admin.module.css';
|
||||
|
||||
/* Formulaire générique piloté par la description des champs du référentiel
|
||||
(voir referentielsConfig.js) : les 4 onglets partagent ce composant. */
|
||||
export default function ReferentielForm({ referentiel, valeurInitiale, donnees, onEnregistrer, onAnnuler }) {
|
||||
const [valeurs, setValeurs] = useState(() =>
|
||||
Object.fromEntries(
|
||||
referentiel.champs.map(champ => [champ.name, valeurInitiale?.[champ.name] ?? ''])
|
||||
)
|
||||
);
|
||||
const [enCours, setEnCours] = useState(false);
|
||||
const [erreur, setErreur] = useState('');
|
||||
|
||||
function handleChange(name, valeur) {
|
||||
setValeurs(precedentes => ({ ...precedentes, [name]: valeur }));
|
||||
}
|
||||
|
||||
async function handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
setErreur('');
|
||||
setEnCours(true);
|
||||
try {
|
||||
/* Les identifiants de référentiel arrivent en chaîne depuis <select> :
|
||||
l'API attend des entiers. */
|
||||
const corps = Object.fromEntries(
|
||||
referentiel.champs.map(champ => [
|
||||
champ.name,
|
||||
champ.type === 'select' ? Number(valeurs[champ.name]) : valeurs[champ.name],
|
||||
])
|
||||
);
|
||||
await onEnregistrer(corps);
|
||||
} catch (e) {
|
||||
setErreur(e.message || "L'enregistrement a échoué.");
|
||||
} finally {
|
||||
setEnCours(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
{referentiel.champs.map(champ => (
|
||||
<div key={champ.name} className={styles.field}>
|
||||
<label className={styles.label} htmlFor={champ.name}>{champ.label}</label>
|
||||
{champ.type === 'select' ? (
|
||||
<select
|
||||
id={champ.name}
|
||||
className={styles.input}
|
||||
value={valeurs[champ.name]}
|
||||
onChange={e => handleChange(champ.name, e.target.value)}
|
||||
required={champ.required}
|
||||
>
|
||||
<option value="">— Choisir —</option>
|
||||
{(donnees[champ.options] || []).map(option => {
|
||||
const { idField, labelField } = LIBELLES_REFERENTIEL[champ.options];
|
||||
return (
|
||||
<option key={option[idField]} value={option[idField]}>
|
||||
{option[labelField]}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
) : (
|
||||
<input
|
||||
id={champ.name}
|
||||
type={champ.type}
|
||||
className={styles.input}
|
||||
value={valeurs[champ.name]}
|
||||
onChange={e => handleChange(champ.name, e.target.value)}
|
||||
required={champ.required}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{erreur && <ErrorMessage message={erreur} />}
|
||||
|
||||
<div className={styles.modalActions}>
|
||||
<Button variant="secondary" type="button" onClick={onAnnuler} disabled={enCours}>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button variant="primary" type="submit" disabled={enCours}>
|
||||
{enCours ? 'Enregistrement…' : 'Enregistrer'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
import {
|
||||
createService, updateService, deleteService,
|
||||
createCategorie, updateCategorie, deleteCategorie,
|
||||
createContact, updateContact, deleteContact,
|
||||
createMonitoring, updateMonitoring, desactiverMonitoring,
|
||||
} from '../../services/api';
|
||||
|
||||
/* Description déclarative des 4 référentiels administrables.
|
||||
Les colonnes du tableau, les champs du formulaire et les appels API sont
|
||||
décrits ici plutôt que répétés onglet par onglet : les 4 onglets partagent
|
||||
ainsi un seul tableau et un seul formulaire. */
|
||||
export const REFERENTIELS = [
|
||||
{
|
||||
key: 'monitorings',
|
||||
label: 'Monitorings',
|
||||
singulier: 'monitoring',
|
||||
idField: 'id_monito',
|
||||
/* Désactivation logique : TABLE_FINAL référence le monitoring. */
|
||||
suppressionEstDesactivation: true,
|
||||
colonnes: [
|
||||
{ key: 'monito_intitule', label: 'Nom' },
|
||||
{ key: 'id_service', label: 'Service', referentiel: 'services' },
|
||||
{ key: 'id_categorie', label: 'Catégorie', referentiel: 'categories' },
|
||||
{ key: 'bdd_source', label: 'Source' },
|
||||
{ key: 'table_source', label: 'Table' },
|
||||
],
|
||||
champs: [
|
||||
{ name: 'monito_intitule', label: 'Nom', type: 'text', required: true },
|
||||
{ name: 'id_service', label: 'Service', type: 'select', options: 'services', required: true },
|
||||
{ name: 'id_categorie', label: 'Catégorie', type: 'select', options: 'categories', required: true },
|
||||
{ name: 'table_source', label: 'Table source', type: 'text', required: true },
|
||||
{ name: 'bdd_source', label: 'Base source', type: 'text', required: true },
|
||||
],
|
||||
creer: createMonitoring,
|
||||
modifier: updateMonitoring,
|
||||
supprimer: desactiverMonitoring,
|
||||
},
|
||||
{
|
||||
key: 'services',
|
||||
label: 'Services',
|
||||
singulier: 'service',
|
||||
idField: 'id_service',
|
||||
colonnes: [{ key: 'nom_service', label: 'Nom' }],
|
||||
champs: [{ name: 'nom_service', label: 'Nom du service', type: 'text', required: true }],
|
||||
creer: createService,
|
||||
modifier: updateService,
|
||||
supprimer: deleteService,
|
||||
},
|
||||
{
|
||||
key: 'categories',
|
||||
label: 'Catégories',
|
||||
singulier: 'catégorie',
|
||||
idField: 'id_categorie',
|
||||
colonnes: [{ key: 'intitule_categorie', label: 'Nom' }],
|
||||
champs: [{ name: 'intitule_categorie', label: 'Intitulé', type: 'text', required: true }],
|
||||
creer: createCategorie,
|
||||
modifier: updateCategorie,
|
||||
supprimer: deleteCategorie,
|
||||
},
|
||||
{
|
||||
key: 'contacts',
|
||||
label: 'Contacts',
|
||||
singulier: 'contact',
|
||||
idField: 'id_contact',
|
||||
colonnes: [
|
||||
{ key: 'intitule_contact', label: 'Intitulé' },
|
||||
{ key: 'nom', label: 'Nom' },
|
||||
{ key: 'prenom', label: 'Prénom' },
|
||||
{ key: 'mail', label: 'Email' },
|
||||
{ key: 'id_service', label: 'Service', referentiel: 'services' },
|
||||
],
|
||||
champs: [
|
||||
{ name: 'intitule_contact', label: 'Intitulé', type: 'text', required: true },
|
||||
{ name: 'nom', label: 'Nom', type: 'text', required: true },
|
||||
{ name: 'prenom', label: 'Prénom', type: 'text', required: true },
|
||||
{ name: 'mail', label: 'Email', type: 'email', required: true },
|
||||
{ name: 'id_service', label: 'Service', type: 'select', options: 'services', required: true },
|
||||
],
|
||||
creer: createContact,
|
||||
modifier: updateContact,
|
||||
supprimer: deleteContact,
|
||||
},
|
||||
];
|
||||
|
||||
/* Libellés des listes déroulantes et des colonnes qui affichent un identifiant. */
|
||||
export const LIBELLES_REFERENTIEL = {
|
||||
services: { idField: 'id_service', labelField: 'nom_service' },
|
||||
categories: { idField: 'id_categorie', labelField: 'intitule_categorie' },
|
||||
};
|
||||
@@ -3,9 +3,11 @@
|
||||
/* Utilise la variable d'environnement Vite si définie, sinon localhost par défaut */
|
||||
const BASE_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
/* Clés de stockage local pour le token JWT et l'utilisateur connecté */
|
||||
/* Clés de stockage local pour le token JWT et l'utilisateur connecté.
|
||||
USER_KEY est exporté : AuthContext lit/écrit la même entrée, et une clé
|
||||
dupliquée des deux côtés divergerait silencieusement au premier renommage. */
|
||||
const TOKEN_KEY = 'ds_token';
|
||||
const USER_KEY = 'ds_user';
|
||||
export const USER_KEY = 'ds_user';
|
||||
|
||||
/* Helpers de gestion du token JWT dans le localStorage */
|
||||
export function getToken() {
|
||||
@@ -188,6 +190,58 @@ export async function getContacts(id_service) {
|
||||
return fetchApi('/contacts', { id_service });
|
||||
}
|
||||
|
||||
/* ---------- Administration du référentiel (réservé Admin) ---------- */
|
||||
|
||||
export async function createService(body) {
|
||||
return sendJson('/services', 'POST', body);
|
||||
}
|
||||
|
||||
export async function updateService(id_service, body) {
|
||||
return sendJson(`/services/${id_service}`, 'PUT', body);
|
||||
}
|
||||
|
||||
export async function deleteService(id_service) {
|
||||
return sendJson(`/services/${id_service}`, 'DELETE');
|
||||
}
|
||||
|
||||
export async function createCategorie(body) {
|
||||
return sendJson('/categories', 'POST', body);
|
||||
}
|
||||
|
||||
export async function updateCategorie(id_categorie, body) {
|
||||
return sendJson(`/categories/${id_categorie}`, 'PUT', body);
|
||||
}
|
||||
|
||||
export async function deleteCategorie(id_categorie) {
|
||||
return sendJson(`/categories/${id_categorie}`, 'DELETE');
|
||||
}
|
||||
|
||||
export async function createContact(body) {
|
||||
return sendJson('/contacts', 'POST', body);
|
||||
}
|
||||
|
||||
export async function updateContact(id_contact, body) {
|
||||
return sendJson(`/contacts/${id_contact}`, 'PUT', body);
|
||||
}
|
||||
|
||||
export async function deleteContact(id_contact) {
|
||||
return sendJson(`/contacts/${id_contact}`, 'DELETE');
|
||||
}
|
||||
|
||||
export async function createMonitoring(body) {
|
||||
return sendJson('/monitorings', 'POST', body);
|
||||
}
|
||||
|
||||
export async function updateMonitoring(id_monito, body) {
|
||||
return sendJson(`/monitorings/${id_monito}`, 'PUT', body);
|
||||
}
|
||||
|
||||
/* Désactivation (actif = 0) : l'historique référence le monitoring,
|
||||
il n'est jamais supprimé physiquement. */
|
||||
export async function desactiverMonitoring(id_monito) {
|
||||
return sendJson(`/monitorings/${id_monito}`, 'DELETE');
|
||||
}
|
||||
|
||||
/* Récupère la nomenclature (monitorings), filtrable par service et catégorie */
|
||||
export async function getMonitorings(id_service, id_categorie) {
|
||||
const data = await fetchApi('/monitorings', { id_service, id_categorie });
|
||||
|
||||
Reference in New Issue
Block a user