103 lines
3.1 KiB
TypeScript
103 lines
3.1 KiB
TypeScript
import { useState } from "preact/hooks";
|
|
|
|
export type ImportResult = {
|
|
added: number;
|
|
modified: number;
|
|
ignored: number;
|
|
errors: number;
|
|
details: ImportDetail[];
|
|
};
|
|
|
|
export type ImportDetail = {
|
|
type: "change" | "error";
|
|
message: string;
|
|
};
|
|
|
|
type Props = {
|
|
result: ImportResult;
|
|
onClose: () => void;
|
|
};
|
|
|
|
export default function ImportResultPopup({ result, onClose }: Props) {
|
|
const [showDetails, setShowDetails] = useState(false);
|
|
const hasErrors = result.errors > 0;
|
|
const changes = result.details.filter((d) => d.type === "change");
|
|
const errors = result.details.filter((d) => d.type === "error");
|
|
|
|
return (
|
|
<div class="import-popup-overlay" onClick={onClose}>
|
|
<div class="import-popup" onClick={(e) => e.stopPropagation()}>
|
|
<div class="import-popup-header">
|
|
<h3 class="import-popup-title">Resultats de l'import</h3>
|
|
<span
|
|
class={`import-popup-badge ${
|
|
hasErrors ? "badge-error" : "badge-success"
|
|
}`}
|
|
>
|
|
{hasErrors ? "Erreur" : "Succes"}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="import-popup-stats">
|
|
<div class="import-stat-row">
|
|
<span class="import-stat-label">Ajoutes</span>
|
|
<span class="import-stat-value stat-added">
|
|
{result.added} note{result.added !== 1 ? "s" : ""}
|
|
</span>
|
|
</div>
|
|
<div class="import-stat-row">
|
|
<span class="import-stat-label">Modifies</span>
|
|
<span class="import-stat-value stat-modified">
|
|
{result.modified} note{result.modified !== 1 ? "s" : ""}
|
|
</span>
|
|
</div>
|
|
<div class="import-stat-row">
|
|
<span class="import-stat-label">Ignores</span>
|
|
<span class="import-stat-value stat-ignored">
|
|
{result.ignored} note{result.ignored !== 1 ? "s" : ""}
|
|
</span>
|
|
</div>
|
|
<div class="import-stat-row">
|
|
<span class="import-stat-label">Erreurs</span>
|
|
<span class="import-stat-value stat-errors">
|
|
{result.errors} note{result.errors !== 1 ? "s" : ""}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="import-popup-actions">
|
|
{result.details.length > 0 && (
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
onClick={() => setShowDetails(!showDetails)}
|
|
>
|
|
Details {showDetails ? "\u25B3" : "\u25BD"}
|
|
</button>
|
|
)}
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary"
|
|
onClick={onClose}
|
|
>
|
|
Ok
|
|
</button>
|
|
</div>
|
|
|
|
{showDetails && result.details.length > 0 && (
|
|
<div class="import-popup-details">
|
|
{changes.length > 0 &&
|
|
changes.map((d, i) => (
|
|
<p key={`c-${i}`} class="import-detail-change">{d.message}</p>
|
|
))}
|
|
{errors.length > 0 &&
|
|
errors.map((d, i) => (
|
|
<p key={`e-${i}`} class="import-detail-error">{d.message}</p>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|