Improve toolbox reorder and checklist editing UX
All checks were successful
Deploy Sokko G / deploy (push) Successful in 8s
All checks were successful
Deploy Sokko G / deploy (push) Successful in 8s
This commit is contained in:
parent
1e4ac4259b
commit
8eb622e05d
11 changed files with 695 additions and 140 deletions
|
|
@ -1,6 +1,7 @@
|
|||
// Rôle : fournit l'outil liens avec ajout manuel et import texte.
|
||||
import { useCallback, useState } from "react";
|
||||
import { Icon } from "../../../components/Icon.jsx";
|
||||
import { useDraftForm } from "../../../hooks/useDraftForm.js";
|
||||
import { moveItem, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
|
||||
import { TextImportModal } from "./TextImportModal.jsx";
|
||||
import { parseColonImportLines } from "./textImport.js";
|
||||
|
|
@ -8,8 +9,7 @@ import { parseColonImportLines } from "./textImport.js";
|
|||
export function LinksModule({ toolboxId, moduleId, context, editing }) {
|
||||
const data = context.normalizeLinksData(context.getModuleData(toolboxId, moduleId, { links: [] }));
|
||||
const textContent = context.moduleText?.links || {};
|
||||
const [title, setTitle] = useState("");
|
||||
const [url, setUrl] = useState("");
|
||||
const linkDraft = useDraftForm({ title: "", url: "" });
|
||||
const [textImport, setTextImport] = useState("");
|
||||
const [importOpen, setImportOpen] = useState(false);
|
||||
const [copiedId, setCopiedId] = useState("");
|
||||
|
|
@ -34,20 +34,20 @@ export function LinksModule({ toolboxId, moduleId, context, editing }) {
|
|||
}
|
||||
|
||||
function addLink(event) {
|
||||
event.preventDefault();
|
||||
const cleanUrl = context.normalizeUrl(url);
|
||||
if (!cleanUrl) return;
|
||||
linkDraft.handleSubmit(event, (draft, { reset }) => {
|
||||
const cleanUrl = context.normalizeUrl(draft.url);
|
||||
if (!cleanUrl) return;
|
||||
|
||||
save([
|
||||
...data.links,
|
||||
{
|
||||
id: context.uid("link"),
|
||||
title: title.trim(),
|
||||
url: cleanUrl
|
||||
}
|
||||
]);
|
||||
setTitle("");
|
||||
setUrl("");
|
||||
save([
|
||||
...data.links,
|
||||
{
|
||||
id: context.uid("link"),
|
||||
title: draft.title.trim(),
|
||||
url: cleanUrl
|
||||
}
|
||||
]);
|
||||
reset();
|
||||
});
|
||||
}
|
||||
|
||||
function importLinks(event) {
|
||||
|
|
@ -79,8 +79,8 @@ export function LinksModule({ toolboxId, moduleId, context, editing }) {
|
|||
{editing && (
|
||||
<div className="module-add-panel">
|
||||
<form className="inline-form links-add-form" onSubmit={addLink}>
|
||||
<input name="title" placeholder={textContent.titlePlaceholder || "Nom du lien"} value={title} onChange={(event) => setTitle(event.target.value)} />
|
||||
<input name="url" placeholder={textContent.urlPlaceholder || "https://..."} value={url} onChange={(event) => setUrl(event.target.value)} />
|
||||
<input {...linkDraft.getFieldProps("title", { placeholder: textContent.titlePlaceholder || "Nom du lien" })} />
|
||||
<input {...linkDraft.getFieldProps("url", { placeholder: textContent.urlPlaceholder || "https://..." })} />
|
||||
<button className="primary">{textContent.addButton || "Ajouter"}</button>
|
||||
</form>
|
||||
<div className="text-import-actions">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue