Mise en place des workspaces
This commit is contained in:
ocroguennec committed
1 parent
be3c93897b
commit
6b6cad7cd6
19 files changed
+1273
-56
No files matched your search
@@ -0,0 +1,324 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { api } from '../../api.js';
|
||||
import Modal from '../../components/Modal.jsx';
|
||||
import ConfirmModal from '../../components/ConfirmModal.jsx';
|
||||
import ResultBanner from '../../components/ResultBanner.jsx';
|
||||
|
||||
/* Catalogue des espaces de travail (Administration > Espaces de travail).
|
||||
* CRUD sur la table `workspaces` — indépendant de l'octroi par utilisateur,
|
||||
* qui se fait via la modale "Gérer les droits" (UsersSection.jsx). Voir
|
||||
* project_workspaces_transformation.md (mémoire projet). */
|
||||
|
||||
function IconPlus() {
|
||||
return <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>;
|
||||
}
|
||||
function IconEdit() {
|
||||
return <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>;
|
||||
}
|
||||
function IconTrash() {
|
||||
return <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/></svg>;
|
||||
}
|
||||
|
||||
function Toggle({ checked, onClick, title }) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
title={title}
|
||||
onClick={onClick}
|
||||
style={{
|
||||
width: 38, height: 21, borderRadius: 20, border: 'none', flexShrink: 0,
|
||||
background: checked ? 'var(--primary)' : 'var(--border)',
|
||||
position: 'relative', cursor: 'pointer', transition: 'background .15s',
|
||||
}}
|
||||
>
|
||||
<span style={{
|
||||
position: 'absolute', top: 2, left: checked ? 19 : 2,
|
||||
width: 17, height: 17, borderRadius: '50%', background: '#fff',
|
||||
boxShadow: '0 1px 3px rgba(0,0,0,.3)', transition: 'left .15s',
|
||||
}} />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
const emptyForm = { slug: '', nom: '', libelleMenu: '', description: '', actifGlobal: true, ordre: 0 };
|
||||
|
||||
function WorkspaceFormModal({ open, onClose, onSaved, workspace }) {
|
||||
const isEdit = !!workspace;
|
||||
const [form, setForm] = useState(emptyForm);
|
||||
const [err, setErr] = useState(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
setErr(null);
|
||||
setForm(workspace
|
||||
? {
|
||||
slug: workspace.slug,
|
||||
nom: workspace.nom,
|
||||
libelleMenu: workspace.libelle_menu,
|
||||
description: workspace.description || '',
|
||||
actifGlobal: !!workspace.actif_global,
|
||||
ordre: workspace.ordre ?? 0,
|
||||
}
|
||||
: emptyForm);
|
||||
}, [open, workspace]);
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
setErr(null);
|
||||
if (!form.nom.trim() || !form.libelleMenu.trim() || (!isEdit && !form.slug.trim())) {
|
||||
setErr('Merci de renseigner les champs obligatoires (*)');
|
||||
return;
|
||||
}
|
||||
setSaving(true);
|
||||
try {
|
||||
const payload = {
|
||||
nom: form.nom.trim(),
|
||||
libelleMenu: form.libelleMenu.trim(),
|
||||
description: form.description.trim(),
|
||||
actifGlobal: !!form.actifGlobal,
|
||||
ordre: Number(form.ordre) || 0,
|
||||
};
|
||||
if (isEdit) {
|
||||
await api.put(`/admin/workspaces/${workspace.id}`, payload);
|
||||
} else {
|
||||
await api.post('/admin/workspaces', { ...payload, slug: form.slug.trim() });
|
||||
}
|
||||
onSaved();
|
||||
} catch (e2) {
|
||||
setErr(e2.message || 'Erreur lors de l\'enregistrement');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
title={isEdit ? "Modifier l'espace de travail" : 'Nouvel espace de travail'}
|
||||
onClose={onClose}
|
||||
width={480}
|
||||
footer={
|
||||
<>
|
||||
<button className="ghost" type="button" onClick={onClose}>Annuler</button>
|
||||
<button className="btn btn-primary" type="submit" form="workspace-form" disabled={saving}>
|
||||
{saving ? 'Enregistrement…' : 'Enregistrer'}
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<form id="workspace-form" onSubmit={handleSubmit}>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<label style={{ display: 'block', fontSize: 'var(--fs-sm)', fontWeight: 600, marginBottom: 4 }}>
|
||||
Identifiant (slug) *
|
||||
</label>
|
||||
<input
|
||||
className="form-input"
|
||||
placeholder="ex: private-equity"
|
||||
value={form.slug}
|
||||
disabled={isEdit}
|
||||
onChange={e => setForm(f => ({ ...f, slug: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '') }))}
|
||||
/>
|
||||
<span style={{ fontSize: 11, color: 'var(--text-muted)' }}>
|
||||
lettres minuscules, chiffres, tirets — non modifiable après création
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<label style={{ display: 'block', fontSize: 'var(--fs-sm)', fontWeight: 600, marginBottom: 4 }}>
|
||||
Nom *
|
||||
</label>
|
||||
<input
|
||||
className="form-input"
|
||||
placeholder="ex: Private Equity"
|
||||
value={form.nom}
|
||||
onChange={e => setForm(f => ({ ...f, nom: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<label style={{ display: 'block', fontSize: 'var(--fs-sm)', fontWeight: 600, marginBottom: 4 }}>
|
||||
Libellé menu *
|
||||
</label>
|
||||
<input
|
||||
className="form-input"
|
||||
placeholder="ex: Private Equity"
|
||||
value={form.libelleMenu}
|
||||
onChange={e => setForm(f => ({ ...f, libelleMenu: e.target.value }))}
|
||||
/>
|
||||
<span style={{ fontSize: 11, color: 'var(--text-muted)' }}>
|
||||
Affiché dans la barre latérale lorsque cet espace est actif
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<label style={{ display: 'block', fontSize: 'var(--fs-sm)', fontWeight: 600, marginBottom: 4 }}>
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
className="form-input"
|
||||
rows={2}
|
||||
value={form.description}
|
||||
onChange={e => setForm(f => ({ ...f, description: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 20, alignItems: 'center', marginBottom: 4 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<Toggle
|
||||
checked={!!form.actifGlobal}
|
||||
onClick={() => setForm(f => ({ ...f, actifGlobal: !f.actifGlobal }))}
|
||||
title={form.actifGlobal ? 'Désactiver la disponibilité pour attribution' : 'Activer la disponibilité pour attribution'}
|
||||
/>
|
||||
<span style={{ fontSize: 'var(--fs-sm)' }}>Disponible pour attribution</span>
|
||||
</div>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 'var(--fs-sm)' }}>
|
||||
Ordre
|
||||
<input
|
||||
type="number"
|
||||
className="form-input"
|
||||
style={{ width: 70 }}
|
||||
value={form.ordre}
|
||||
onChange={e => setForm(f => ({ ...f, ordre: e.target.value }))}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
{err && <div className="error" style={{ marginTop: 8 }}>{err}</div>}
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default function WorkspacesSection() {
|
||||
const [workspaces, setWorkspaces] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [banner, setBanner] = useState(null);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [editing, setEditing] = useState(null);
|
||||
const [toDelete, setToDelete] = useState(null);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try { setWorkspaces(await api.get('/admin/workspaces')); }
|
||||
catch (e) { setBanner({ ok: false, msg: e.message || 'Erreur de chargement' }); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
async function handleDelete() {
|
||||
if (!toDelete) return;
|
||||
try {
|
||||
await api.del(`/admin/workspaces/${toDelete.id}`);
|
||||
setBanner({ ok: true, msg: `Espace de travail « ${toDelete.nom} » supprimé.` });
|
||||
setToDelete(null);
|
||||
load();
|
||||
} catch (e) {
|
||||
setBanner({ ok: false, msg: e.message || 'Erreur lors de la suppression' });
|
||||
setToDelete(null);
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) return <p className="text-muted" style={{ padding: 24 }}>Chargement…</p>;
|
||||
|
||||
return (
|
||||
<div className="card" style={{ padding: 0, overflow: 'hidden' }}>
|
||||
{banner && (
|
||||
<ResultBanner
|
||||
result={banner}
|
||||
onDismiss={() => setBanner(null)}
|
||||
style={{ margin: '12px 20px 0', borderRadius: 8 }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 20px 14px', gap: 16, borderBottom: '1px solid var(--border)', flexWrap: 'wrap' }}>
|
||||
<div>
|
||||
<h3 style={{ margin: '0 0 3px' }}>Espaces de travail</h3>
|
||||
<p style={{ margin: 0, fontSize: 'var(--fs-xs)', color: 'var(--text-muted)' }}>
|
||||
Catalogue des espaces de travail proposés par l'application (Crowdlending, futurs modules…).
|
||||
L'attribution à un utilisateur se fait depuis sa fiche, onglet « Gérer les droits ».
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-primary btn-sm"
|
||||
onClick={() => { setEditing(null); setShowForm(true); }}
|
||||
style={{ display: 'flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap' }}
|
||||
>
|
||||
<IconPlus /> Nouvel espace de travail
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{workspaces.length === 0 ? (
|
||||
<p style={{ color: 'var(--text-muted)', textAlign: 'center', padding: '40px 20px' }}>
|
||||
Aucun espace de travail défini.
|
||||
</p>
|
||||
) : (
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<table style={{ margin: 0 }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ paddingLeft: 20 }}>Nom</th>
|
||||
<th>Libellé menu</th>
|
||||
<th>Slug</th>
|
||||
<th style={{ textAlign: 'center' }}>Disponible</th>
|
||||
<th style={{ textAlign: 'right' }}>Ordre</th>
|
||||
<th style={{ textAlign: 'right' }}>Utilisateurs</th>
|
||||
<th style={{ width: 90, paddingRight: 20 }}></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{workspaces.map(w => (
|
||||
<tr key={w.id}>
|
||||
<td style={{ paddingLeft: 20, fontWeight: 600 }}>{w.nom}</td>
|
||||
<td>{w.libelle_menu}</td>
|
||||
<td style={{ color: 'var(--text-muted)', fontFamily: 'monospace', fontSize: 12 }}>{w.slug}</td>
|
||||
<td style={{ textAlign: 'center' }}>
|
||||
{w.actif_global
|
||||
? <span className="badge badge-success">Oui</span>
|
||||
: <span className="badge">Non</span>}
|
||||
</td>
|
||||
<td style={{ textAlign: 'right' }}>{w.ordre}</td>
|
||||
<td style={{ textAlign: 'right' }}>{w.nb_utilisateurs}</td>
|
||||
<td style={{ paddingRight: 20 }}>
|
||||
<div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }}>
|
||||
<button
|
||||
className="btn btn-sm btn-ghost"
|
||||
title="Modifier"
|
||||
onClick={() => { setEditing(w); setShowForm(true); }}
|
||||
>
|
||||
<IconEdit />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm btn-ghost"
|
||||
title={w.slug === 'crowdlending' ? 'Le workspace Crowdlending ne peut pas être supprimé' : 'Supprimer'}
|
||||
disabled={w.slug === 'crowdlending'}
|
||||
onClick={() => setToDelete(w)}
|
||||
>
|
||||
<IconTrash />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<WorkspaceFormModal
|
||||
open={showForm}
|
||||
workspace={editing}
|
||||
onClose={() => setShowForm(false)}
|
||||
onSaved={() => {
|
||||
setShowForm(false);
|
||||
setBanner({ ok: true, msg: editing ? 'Espace de travail mis à jour.' : 'Espace de travail créé.' });
|
||||
load();
|
||||
}}
|
||||
/>
|
||||
|
||||
<ConfirmModal
|
||||
open={!!toDelete}
|
||||
title="Supprimer l'espace de travail"
|
||||
message={toDelete ? `Supprimer définitivement « ${toDelete.nom} » ? Les droits accordés aux utilisateurs sur cet espace seront retirés.` : ''}
|
||||
onConfirm={handleDelete}
|
||||
onCancel={() => setToDelete(null)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user