@xeplr/ui-utils 1.0.10 → 1.0.12

package/src/dataImport/droppedRows.js

@@ -0,0 +1,86 @@
+// ROWS AN IMPORT DROPPED — the ones the database refused — as the dropped-rows
+// view shows them, copies them and counts them. Pure: no React, no fetch.
+//
+// The app's onLoadDropped(job) answers:
+//   { columns: ['sku', 'qty'],                       // the file's own, in order
+//     rows: [{ rowNum: 5, reason: '…', values: { sku: 'S5', qty: -1 } }],
+//     total: 2,                                      // rows kept to look at
+//     dropped: 2 }                                   // rows the import counted
+
+/** How many rows a job or an import result dropped (either shape). */
+export function droppedCount(job) {
+  if (!job) return 0;
+  var n = job.rowsDropped != null ? job.rowsDropped : job.dropped;
+  return Number(n) || 0;
+}
+
+/**
+ * The view's table: a row number, the reason, then the file's columns. Keys
+ * are positional (c0, c1, …) because a column name can hold a dot, which a
+ * table's accessor reads as a path.
+ *
+ * @returns {{ columns: [{ key, header }], rows: object[] }}
+ */
+export function droppedTable(data) {
+  var names = (data && data.columns) || [];
+  var columns = [{ key: 'rowNum', header: 'Row' }, { key: 'reason', header: 'Why it was dropped' }]
+    .concat(names.map(function(name, i) { return { key: 'c' + i, header: name }; }));
+  var rows = ((data && data.rows) || []).map(function(r) {
+    var row = { rowNum: r.rowNum == null ? '' : r.rowNum, reason: r.reason || '' };
+    names.forEach(function(name, i) { row['c' + i] = displayValue(r.values ? r.values[name] : null); });
+    return row;
+  });
+  return { columns: columns, rows: rows };
+}
+
+function displayValue(v) {
+  if (v == null) return '';
+  return typeof v === 'object' ? JSON.stringify(v) : String(v);
+}
+
+/**
+ * The rows as tab-separated text with a header — what Excel takes from the
+ * clipboard as cells. The file's columns only, like the download: pasted,
+ * fixed and saved, it imports again as it is. A value holding a tab, a line
+ * break or a quote is quoted, its quotes doubled, as Excel itself copies it.
+ */
+export function droppedAsTsv(data) {
+  var names = (data && data.columns) || [];
+  var lines = [names.map(tsvCell).join('\t')];
+  ((data && data.rows) || []).forEach(function(r) {
+    lines.push(names.map(function(name) { return tsvCell(displayValue(r.values ? r.values[name] : null)); }).join('\t'));
+  });
+  return lines.join('\r\n');
+}
+
+export function tsvCell(value) {
+  var s = value == null ? '' : String(value);
+  return /[\t\r\n"]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
+}
+
+/**
+ * What to say above the rows: the heading, and a note when not every dropped
+ * row is here — the view shows the first ones, or the import predates rows
+ * being kept and has only a count.
+ */
+export function droppedSummary(job, data) {
+  var dropped = data && data.dropped != null ? Number(data.dropped) : droppedCount(job);
+  var total = data ? Number(data.total) || 0 : 0;
+  var shown = data && data.rows ? data.rows.length : 0;
+  var heading = plural(dropped, 'row') + ' dropped' +
+    (job && job.originalFileName ? ' from ' + job.originalFileName + (job.part ? ' (' + job.part + ')' : '') : '') +
+    (job && job.target ? ' → ' + job.target : '');
+  var note = null;
+  if (data && total === 0 && dropped > 0) {
+    note = 'These rows were not kept — this import ran before dropped rows were saved. Import the file again to see them.';
+  } else if (data && total < dropped) {
+    note = 'Only ' + plural(total, 'row') + ' of ' + dropped + ' were kept; the import stopped recording after too many failures in a row.';
+  } else if (data && shown < total) {
+    note = 'Showing the first ' + shown.toLocaleString() + ' of ' + total.toLocaleString() + '. Download has all of them.';
+  }
+  return { heading: heading, note: note };
+}
+
+function plural(n, word) {
+  return Number(n).toLocaleString() + ' ' + word + (Number(n) === 1 ? '' : 's');
+}

package/src/dataImport/pages.jsx

@@ -1,17 +1,40 @@
 import { useDataImportController } from './useDataImportController.js';
 import { useImportHistoryController } from './useImportHistoryController.js';
+import { useDroppedRowsController } from './useDroppedRowsController.js';
 import DataImportSample from './designs/DataImportSample.jsx';
 import ImportHistorySample from './designs/ImportHistorySample.jsx';
-import { useDesignValidator, DATA_IMPORT_RULES, IMPORT_HISTORY_RULES } from './validateDesign.js';
+import DroppedRowsSample from './designs/DroppedRowsSample.jsx';
+import { useDesignValidator, DATA_IMPORT_RULES, IMPORT_HISTORY_RULES, DROPPED_ROWS_RULES } from './validateDesign.js';
 
+// Props: onInspect, onCommit, … and, to show the rows an import dropped,
+// onLoadDropped(job) and onDownloadDropped(job) (see useDroppedRowsController).
 export function DataImportPage(props) {
   var controller = useDataImportController(props);
+  var dropped = useDroppedRowsController(props);
   var ref = useDesignValidator('DataImportPage', DATA_IMPORT_RULES);
-  return <div ref={ref}><DataImportSample {...controller} /></div>;
+  return (
+    <div ref={ref}>
+      <DataImportSample {...controller} canViewDropped={dropped.canView} viewDropped={dropped.open} />
+      {dropped.job && <DroppedRowsPage {...dropped} />}
+    </div>
+  );
 }
 
 export function ImportHistoryPage(props) {
   var controller = useImportHistoryController(props);
+  var dropped = useDroppedRowsController(props);
   var ref = useDesignValidator('ImportHistoryPage', IMPORT_HISTORY_RULES);
-  return <div ref={ref}><ImportHistorySample {...controller} /></div>;
+  return (
+    <div ref={ref}>
+      <ImportHistorySample {...controller} canViewDropped={dropped.canView} viewDropped={dropped.open} />
+      {dropped.job && <DroppedRowsPage {...dropped} />}
+    </div>
+  );
+}
+
+// The dropped-rows dialog, validated as it opens — its required buttons only
+// exist while it is on screen.
+export function DroppedRowsPage(props) {
+  var ref = useDesignValidator('DroppedRows', DROPPED_ROWS_RULES);
+  return <div ref={ref}><DroppedRowsSample {...props} /></div>;
 }

package/src/dataImport/useDataImportController.js

@@ -1,6 +1,6 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { uploadFile } from '../fileUpload/uploadFile.js';
-import { buildInitialMappings, checksFor } from './dataImport.js';
+import { buildInitialMappings, checksFor, targetProblems, blocksImport, IMPORT_MODES } from './dataImport.js';
 
 /**
  * @param {object} options
@@ -10,7 +10,7 @@ import { buildInitialMappings, checksFor } from './dataImport.js';
  *   - required. App-supplied: given a file ALREADY uploaded (see below), what
  *     does it contain? (format, and for a multi-part file like an Excel
  *     workbook, its part/sheet names).
- * @param {(filePath: string, mappings: {part: string|null, target: string, fixes: object}[], meta: {originalName: string}) => Promise<{results: object[]}>} options.onCommit
+ * @param {(filePath: string, mappings: {part: string|null, target: string, mode: string, fixes: object}[], meta: {originalName: string}) => Promise<{results: object[]}>} options.onCommit
  *   (each mapping's `fixes` is the person's choice for each fix the inspect
  *   step's `checks` offered — see checksFor in dataImport.js)
  *   - required. App-supplied: load the included parts into their targets.
@@ -18,6 +18,16 @@ import { buildInitialMappings, checksFor } from './dataImport.js';
  *     path) — pass it through if the app wants it recorded (e.g. import
  *     history), it's otherwise unused by this controller.
  *
+ * @param {(filePath: string, target: {part: string|null, target: string}) => Promise<{exists, matched, extra, missing}>} [options.onCheckTarget]
+ *   - optional. App-supplied: the part's columns against the table it names —
+ *     asked as the person types, so what will happen (refused, columns left
+ *     empty, a table that already exists) is said before anything is loaded.
+ *     Without it no check is made and nothing is blocked.
+ *
+ * @param {(file: File, onProgress: (percent) => void) => Promise<{filePath}>} [options.onUpload]
+ *   - optional: send the file somewhere other than configureUpload's url
+ *     (ImportsPage sends it to @xeplr/imports' /files). Default uploadFile().
+ *
  * The actual file transfer is NOT app-supplied — handleFileChange sends the
  * picked file through @xeplr/ui-utils' own uploadFile() (see
  * fileUpload/uploadFile.js), which every app configures ONCE via
@@ -30,13 +40,30 @@ import { buildInitialMappings, checksFor } from './dataImport.js';
 export function useDataImportController(options = {}) {
   var [file, setFile] = useState(null);
   var [inspecting, setInspecting] = useState(false);
+  // How much of the file has gone up, 0–100 — a 300 MB file takes a while.
+  var [uploadPercent, setUploadPercent] = useState(null);
   var [inspected, setInspected] = useState(null);
   var [mappings, setMappings] = useState([]);
   var [committing, setCommitting] = useState(false);
   var [results, setResults] = useState(null);
   var [error, setError] = useState('');
+  // The app's comparison of each part with the table it names, by
+  // part + target: { loading, result, error }. The mode is not part of the
+  // key — switching it changes what is said, not what the table is.
+  // Kept with the onCheckTarget that answered: a new one (another database,
+  // say) means a new question, and the old answers no longer apply.
+  var [checkStore, setCheckStore] = useState({ by: null, map: {} });
+  var onCheckTarget = options.onCheckTarget;
+  var targetChecks = checkStore.by === onCheckTarget ? checkStore.map : {};
+  function setTargetChecks(update) {
+    setCheckStore(function(prev) {
+      var map = prev.by === onCheckTarget ? prev.map : {};
+      return { by: onCheckTarget, map: update(map) };
+    });
+  }
 
   function reset() {
+    setCheckStore({ by: null, map: {} });
     setFile(null);
     setInspected(null);
     setMappings([]);
@@ -51,7 +78,11 @@ export function useDataImportController(options = {}) {
     setFile(picked);
     setInspecting(true);
     try {
-      var uploadRes = await uploadFile(picked);
+      setUploadPercent(0);
+      var uploadRes = options.onUpload
+        ? await options.onUpload(picked, setUploadPercent)
+        : await uploadFile(picked, { onProgress: setUploadPercent });
+      setUploadPercent(null);
       var inspectRes = await options.onInspect(uploadRes.filePath, picked);
       var merged = Object.assign({ filePath: uploadRes.filePath, originalName: picked.name }, inspectRes);
       setInspected(merged);
@@ -59,6 +90,7 @@ export function useDataImportController(options = {}) {
     } catch (err) {
       setError(err.message || 'Failed to upload/inspect file');
     } finally {
+      setUploadPercent(null);
       setInspecting(false);
     }
   }
@@ -80,15 +112,52 @@ export function useDataImportController(options = {}) {
     });
   }
 
+  // ASKED AS THE PERSON TYPES, once they pause: every included part whose
+  // part + target has not been checked yet. Each answer is kept under its own
+  // part + target, so one that arrives late lands where it belongs.
+  var checkKey = mappings.map(function(m) { return m.include ? keyOf(m) : ''; }).join('\u0001');
+  useEffect(function() {
+    if (!onCheckTarget || !inspected) return undefined;
+    var wanted = mappings.filter(function(m) { return m.include && String(m.target || '').trim() && !targetChecks[keyOf(m)]; });
+    if (!wanted.length) return undefined;
+    var timer = setTimeout(function() {
+      wanted.forEach(function(m) {
+        var key = keyOf(m);
+        setTargetChecks(function(prev) { return Object.assign({}, prev, { [key]: { loading: true } }); });
+        Promise.resolve(onCheckTarget(inspected.filePath, { part: m.part, target: String(m.target).trim() })).then(function(result) {
+          setTargetChecks(function(prev) { return Object.assign({}, prev, { [key]: { result: result || null } }); });
+        }, function(err) {
+          setTargetChecks(function(prev) { return Object.assign({}, prev, { [key]: { error: err.message || 'Could not check the table' } }); });
+        });
+      });
+    }, 400);
+    return function() { clearTimeout(timer); };
+  }, [checkKey, inspected, onCheckTarget]);
+
+  // What each part's target will do, said under it: [{ level, message }].
+  var problems = mappings.map(function(m) {
+    var c = targetChecks[keyOf(m)];
+    if (!m.include || !c) return [];
+    if (c.error) return [{ level: 'warning', message: 'Could not check the table: ' + c.error }];
+    return c.result ? targetProblems(String(m.target).trim(), m.mode, c.result) : [];
+  });
+  var checking = mappings.some(function(m) { var c = targetChecks[keyOf(m)]; return m.include && c && c.loading; });
+  var blocked = mappings.some(function(m, i) { return m.include && blocksImport(problems[i]); }) ||
+    mappings.some(function(m) { return m.include && !String(m.target || '').trim(); });
+
   async function handleCommit() {
     var included = mappings.filter(function(m) { return m.include; });
-    if (!inspected || included.length === 0) return;
+    if (!inspected || included.length === 0 || blocked) return;
     setCommitting(true);
     setError('');
     try {
-      var payload = included.map(function(m) { return { part: m.part, target: m.target, fixes: m.fixes || {} }; });
+      var payload = included.map(function(m) { return { part: m.part, target: String(m.target).trim(), mode: m.mode, fixes: m.fixes || {} }; });
       var res = await options.onCommit(inspected.filePath, payload, { originalName: inspected.originalName });
       setResults((res && res.results) || res || []);
+      // The file is gone once imported (the app removes it), so its mapping
+      // goes too: the results stay, and the next import starts from a file.
+      setInspected(null);
+      setMappings([]);
     } catch (err) {
       setError(err.message || 'Import failed');
     } finally {
@@ -97,10 +166,18 @@ export function useDataImportController(options = {}) {
   }
 
   return {
-    file, inspecting, inspected, mappings, committing, results, error,
+    file, inspecting, uploadPercent, inspected, mappings, committing, results, error,
     handleFileChange, updateMapping, setFix, handleCommit, reset,
+    // The import's mode per part, what its target will do, and whether that stops it.
+    modes: IMPORT_MODES,
+    setMode: function(index, mode) { updateMapping(index, { mode: mode }); },
+    problems: problems,
+    checking: checking,
+    blocked: blocked,
     checksOf: function(part) { return checksFor(inspected, part); },
     accept: options.accept,
     targetLabel: options.targetLabel || 'Target'
   };
 }
+
+function keyOf(m) { return (m.part == null ? '' : m.part) + '\u0000' + String(m.target || '').trim(); }

package/src/dataImport/useDroppedRowsController.js

@@ -0,0 +1,95 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { droppedAsTsv, droppedCount, droppedSummary, droppedTable } from './droppedRows.js';
+
+/**
+ * The rows an import dropped: open them, copy them, download them.
+ *
+ * @param {object} options
+ * @param {(job) => Promise<{columns, rows, total, dropped}>} [options.onLoadDropped]
+ *        the app's read of a job's dropped rows. Without it nothing offers to show them.
+ * @param {(job) => Promise<any>} [options.onDownloadDropped]
+ *        the app saves them as a file (an .xlsx that imports again as it is)
+ *
+ * job: { id, rowsDropped|dropped, originalFileName?, part?, target? } — an
+ * import-history row, or an import result with its jobId as id.
+ */
+export function useDroppedRowsController(options = {}) {
+  var [job, setJob] = useState(null);
+  var [data, setData] = useState(null);
+  var [loading, setLoading] = useState(false);
+  var [error, setError] = useState('');
+  var [copied, setCopied] = useState(false);
+  var [downloading, setDownloading] = useState(false);
+  var copiedTimer = useRef(null);
+  var onLoad = options.onLoadDropped;
+
+  useEffect(function() { return function() { clearTimeout(copiedTimer.current); }; }, []);
+
+  var canView = useCallback(function(j) {
+    return !!onLoad && !!j && j.id != null && droppedCount(j) > 0;
+  }, [onLoad]);
+
+  var open = useCallback(async function(j) {
+    setJob(j);
+    setData(null);
+    setError('');
+    setCopied(false);
+    setLoading(true);
+    try {
+      setData(await onLoad(j));
+    } catch (err) {
+      setError(err.message || 'Could not load the dropped rows');
+    } finally {
+      setLoading(false);
+    }
+  }, [onLoad]);
+
+  function close() {
+    setJob(null);
+    setData(null);
+    setError('');
+  }
+
+  async function copy() {
+    if (!data) return;
+    try {
+      await navigator.clipboard.writeText(droppedAsTsv(data));
+      setCopied(true);
+      clearTimeout(copiedTimer.current);
+      copiedTimer.current = setTimeout(function() { setCopied(false); }, 2000);
+    } catch (err) {
+      setError('Could not copy — the browser refused the clipboard. Use Download instead.');
+    }
+  }
+
+  async function download() {
+    if (!options.onDownloadDropped || !job) return;
+    setDownloading(true);
+    setError('');
+    try {
+      await options.onDownloadDropped(job);
+    } catch (err) {
+      setError(err.message || 'Download failed');
+    } finally {
+      setDownloading(false);
+    }
+  }
+
+  return {
+    job: job,
+    data: data,
+    table: data ? droppedTable(data) : null,
+    summary: job ? droppedSummary(job, data) : null,
+    loading: loading,
+    error: error,
+    copied: copied,
+    downloading: downloading,
+    canDownload: !!options.onDownloadDropped && !!data && data.total > 0,
+    canCopy: !!data && data.rows && data.rows.length > 0,
+    canView: canView,
+    open: open,
+    close: close,
+    copy: copy,
+    download: download
+  };
+}

package/src/dataImport/validateDesign.js

@@ -66,3 +66,10 @@ export var DATA_IMPORT_RULES = [
 ];
 
 export var IMPORT_HISTORY_RULES = [];
+
+// Checked when the dialog opens — it is not on the page before.
+export var DROPPED_ROWS_RULES = [
+  { id: 'xeplr-dropped-rows-copy', label: 'Copy button' },
+  { id: 'xeplr-dropped-rows-download', label: 'Download button' },
+  { id: 'xeplr-dropped-rows-close', label: 'Close button' }
+];

package/src/fileUpload/uploadFile.js

@@ -9,6 +9,16 @@ export function configureUpload(config = {}) {
   if (config.getHeaders) _config.getHeaders = config.getHeaders;
 }
 
+/**
+ * The headers every request to the app's API carries — what configureUpload
+ * was given (getHeaders, called each time so a token is current, or static
+ * headers). Exported so a page calling the app's JSON routes signs them the
+ * same way as its uploads, without a second configuration.
+ */
+export function uploadHeaders() {
+  return Object.assign({}, _config.getHeaders ? _config.getHeaders() : _config.headers);
+}
+
 /**
  * Upload files to the server.
  * @param {File[]} files - Files to upload

package/src/imports/designs/ImportsSample.jsx

@@ -0,0 +1,72 @@
+import { useEffect, useState } from 'react';
+import './imports.css';
+
+/**
+ * The import screen: which database, the import, and the history. Presentation
+ * only — everything comes from useImportsController; the import and history
+ * sections arrive as elements (ImportsPage passes DataImportPage and
+ * ImportHistoryPage), so a custom design can place them anywhere.
+ *
+ * Required (IMPORTS_RULES): #xeplr-imports-connection, #xeplr-imports-database.
+ */
+export default function ImportsSample({
+  targets, targetsError, connectionId, dbInfoId, databases, chooseConnection, chooseDatabase,
+  importing, progressText, stop, importSection, historySection
+}) {
+  return (
+    <div className="xeplr-imports">
+      <section className="xeplr-imports-card">
+        <h2 className="xeplr-imports-title">1. Choose a database</h2>
+        <p className="xeplr-imports-hint">The file is loaded into a table in this database.</p>
+        {targetsError && <div className="xeplr-imports-error">{targetsError}</div>}
+        {!targetsError && targets.length === 0 && <p className="xeplr-imports-hint">There is no database to import into yet.</p>}
+        <div className="xeplr-imports-pickers">
+          <label className="xeplr-imports-field">
+            <span>Connection</span>
+            <select id="xeplr-imports-connection" value={connectionId} disabled={!!importing}
+              onChange={function(e) { chooseConnection(e.target.value); }}>
+              {targets.map(function(t) { return <option key={t.connectionId} value={t.connectionId}>{t.label}</option>; })}
+            </select>
+          </label>
+          <label className="xeplr-imports-field">
+            <span>Database</span>
+            <select id="xeplr-imports-database" value={dbInfoId} disabled={!!importing}
+              onChange={function(e) { chooseDatabase(e.target.value); }}>
+              {databases.map(function(d) { return <option key={d.id} value={d.id}>{d.label}</option>; })}
+            </select>
+          </label>
+        </div>
+      </section>
+
+      <section className="xeplr-imports-card">
+        <h2 className="xeplr-imports-title">2. Upload &amp; map</h2>
+        <p className="xeplr-imports-hint">Excel files let you load each sheet into its own table.</p>
+        {importing && (
+          <p className="xeplr-imports-progress">
+            {progressText}
+            <RunClock startedAt={importing.startedAt} />
+            <button type="button" className="xeplr-imports-stop" title="Stop this import" onClick={stop}>✕</button>
+          </p>
+        )}
+        {importSection}
+      </section>
+
+      <section className="xeplr-imports-card">
+        <h2 className="xeplr-imports-title">Import history</h2>
+        <p className="xeplr-imports-hint">Past imports — roll one back if it loaded the wrong data, see the rows it dropped, or delete the record.</p>
+        {historySection}
+      </section>
+    </div>
+  );
+}
+
+/** "12 s", "3 min 4 s" — how long the import has been running. */
+function RunClock({ startedAt }) {
+  var [now, setNow] = useState(Date.now());
+  useEffect(function() {
+    var t = setInterval(function() { setNow(Date.now()); }, 1000);
+    return function() { clearInterval(t); };
+  }, []);
+  var s = Math.max(0, Math.round((now - startedAt) / 1000));
+  return <span className="xeplr-imports-clock">{s < 60 ? s + ' s' : Math.floor(s / 60) + ' min ' + (s % 60) + ' s'}</span>;
+}

package/src/imports/designs/imports.css

@@ -0,0 +1,29 @@
+/* Uses @xeplr/ui-account's --xeplr-* theme tokens when available, with the
+   same dark fallbacks as dataImport.css. */
+.xeplr-imports { display: flex; flex-direction: column; gap: 20px; color: var(--xeplr-text-primary, #e0e0e0); }
+.xeplr-imports-card {
+  padding: 20px;
+  border: 1px solid var(--xeplr-border-secondary, #2a2a2a);
+  border-radius: 12px;
+  background: var(--xeplr-bg-primary, #1a1a1a);
+}
+.xeplr-imports-title { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
+.xeplr-imports-hint { margin: 0 0 14px; font-size: 13px; color: var(--xeplr-text-secondary, #999); }
+.xeplr-imports-error {
+  margin-bottom: 12px; padding: 10px 12px; border-radius: 6px; font-size: 13px;
+  background: var(--xeplr-danger-bg, #3d1111); color: var(--xeplr-danger, #ff6b6b); border: 1px solid var(--xeplr-danger-border, #5a1a1a);
+}
+.xeplr-imports-pickers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
+.xeplr-imports-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--xeplr-text-secondary, #999); }
+.xeplr-imports-field select {
+  padding: 9px 10px; border-radius: 6px; font-size: 14px; font-family: inherit;
+  border: 1px solid var(--xeplr-border-primary, #444);
+  background: var(--xeplr-bg-secondary, #232323);
+  color: var(--xeplr-text-primary, #e0e0e0);
+}
+.xeplr-imports-progress { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 13px; }
+.xeplr-imports-clock { color: var(--xeplr-text-secondary, #999); font-variant-numeric: tabular-nums; }
+.xeplr-imports-stop {
+  padding: 2px 8px; border-radius: 4px; cursor: pointer; font-size: 12px;
+  border: 1px solid var(--xeplr-border-primary, #444); background: none; color: var(--xeplr-text-secondary, #999);
+}

package/src/imports/designs/index.js

@@ -0,0 +1 @@
+export { default as ImportsSample } from './ImportsSample.jsx';

package/src/imports/importsApi.js

@@ -0,0 +1,96 @@
+// IMPORTS — model. The calls @xeplr/imports' routes answer, and the pure
+// helpers the page needs. No React; fetch and XMLHttpRequest only.
+//
+// basePath is where the app mounted the router as the browser sees it —
+// '/imports', or '/api/imports' behind a proxy prefix. Requests carry the
+// headers configureUpload was given (uploadHeaders): sign-in and tenancy.
+
+import { uploadFile, uploadHeaders } from '../fileUpload/uploadFile.js';
+
+/** The import routes under one base path. Every call rejects with the server's own `error`. */
+export function createImportsApi(basePath) {
+  var base = String(basePath || '/imports').replace(/\/+$/, '');
+
+  async function call(method, path, body) {
+    var headers = uploadHeaders();
+    if (body) headers['content-type'] = 'application/json';
+    var res = await fetch(base + path, { method: method, headers: headers, body: body ? JSON.stringify(body) : undefined });
+    var data = await res.json().catch(function() { return {}; });
+    if (!res.ok) throw new Error(data.error || ('The request failed (' + res.status + ')'));
+    return data;
+  }
+
+  return {
+    upload: function(file, onProgress) { return uploadFile(file, { url: base + '/files', onProgress: onProgress }); },
+    inspect: function(filePath) { return call('POST', '/inspect', { filePath: filePath }); },
+    checkTarget: function(body) { return call('POST', '/check-target', body); },
+    commit: function(body) { return call('POST', '/commit', body); },
+    run: function(runId) { return call('GET', '/runs/' + encodeURIComponent(runId)); },
+    stop: function(runId) { return call('POST', '/runs/' + encodeURIComponent(runId) + '/stop'); },
+    targets: async function() { return (await call('GET', '/targets')).dataArray || []; },
+    history: async function() { return (await call('GET', '/history')).dataArray || []; },
+    dropped: function(id) { return call('GET', '/history/' + encodeURIComponent(id) + '/dropped'); },
+    rollback: function(id) { return call('POST', '/history/' + encodeURIComponent(id) + '/rollback'); },
+    remove: function(id) { return call('POST', '/history/' + encodeURIComponent(id) + '/delete'); },
+    /** The dropped rows as a file: { blob, name } — saving it is the page's job. */
+    droppedFile: async function(id) {
+      var res = await fetch(base + '/history/' + encodeURIComponent(id) + '/dropped/file', { headers: uploadHeaders() });
+      if (!res.ok) {
+        var data = await res.json().catch(function() { return {}; });
+        throw new Error(data.error || ('The download failed (' + res.status + ')'));
+      }
+      return { blob: await res.blob(), name: fileNameOf(res.headers.get('content-disposition'), 'dropped rows.xlsx') };
+    }
+  };
+}
+
+/** The file name a Content-Disposition gives — filename* (UTF-8) first. */
+export function fileNameOf(disposition, fallback) {
+  var cd = String(disposition || '');
+  var star = /filename\*=UTF-8''([^;]+)/i.exec(cd);
+  if (star) { try { return decodeURIComponent(star[1]); } catch (e) { /* the plain one */ } }
+  var plain = /filename="([^"]+)"/i.exec(cd);
+  return plain ? plain[1] : fallback;
+}
+
+/** "Sheet 2 of 3 (Orders) · 412,000 rows read · 400,000 written" — how far an import has got. */
+export function importProgressText(p) {
+  if (!p) return 'Importing — reading the file…';
+  var parts = [];
+  if (p.mappings > 1) parts.push('Sheet ' + p.mapping + ' of ' + p.mappings + (p.sheet ? ' (' + p.sheet + ')' : ''));
+  if (p.rowsRead != null) parts.push(Number(p.rowsRead).toLocaleString() + ' rows read');
+  if (p.rowsWritten != null) parts.push(Number(p.rowsWritten).toLocaleString() + ' written');
+  if (p.phase === 'merging') parts.push('replacing the table');
+  return 'Importing · ' + (parts.join(' · ') || 'starting');
+}
+
+/**
+ * A finished run in DataImportPage's result shape, or the error it ended
+ * with. `run` is GET /runs/:id once its status is no longer 'running'.
+ */
+export function runResults(run) {
+  if (run.status === 'error') throw new Error(run.error || 'The import failed');
+  if (run.status === 'stopped') throw new Error(run.error === 'Stopped' || !run.error ? 'The import was stopped.' : run.error);
+  return ((run.result && run.result.results) || []).map(function(r) {
+    return {
+      part: r.sheet, target: r.targetTable, success: r.success, rows: r.rows, error: r.error,
+      dropped: r.dropped || 0, jobId: r.jobId || null,
+      note: r.recovered ? Number(r.recovered).toLocaleString() + ' of them recovered from cells they had been pasted into' : null
+    };
+  });
+}
+
+/** A history row in ImportHistoryPage's shape. */
+export function historyJob(row) {
+  return {
+    id: row.id, originalFileName: row.originalFileName, part: row.part, target: row.targetTable,
+    destination: row.destination, rows: row.totalRows, rowsLoaded: row.rowsLoaded, rowsDropped: row.rowsDropped,
+    mode: row.mode, status: row.status, startedAt: row.startedAt, error: row.errorMessage, createdByName: row.createdByName
+  };
+}
+
+/** The databases of the chosen connection, for the second picker. */
+export function databasesOf(targets, connectionId) {
+  var t = (targets || []).filter(function(x) { return x.connectionId === connectionId; })[0];
+  return (t && t.databases) || [];
+}

package/src/imports/pages.jsx

@@ -0,0 +1,24 @@
+import { useImportsController } from './useImportsController.js';
+import ImportsSample from './designs/ImportsSample.jsx';
+import { IMPORTS_RULES } from './validateDesign.js';
+import { useDesignValidator } from '../dataImport/validateDesign.js';
+import { DataImportPage, ImportHistoryPage } from '../dataImport/pages.jsx';
+
+/**
+ * The whole import feature against @xeplr/imports, ready to route to:
+ *
+ *   <Route path="/upload" element={<ImportsPage basePath="/api/imports" />} />
+ *
+ * Requests carry the headers given to configureUpload (sign-in, tenancy).
+ */
+export function ImportsPage(props) {
+  var c = useImportsController(props);
+  var ref = useDesignValidator('ImportsPage', IMPORTS_RULES);
+  return (
+    <div ref={ref}>
+      <ImportsSample {...c}
+        importSection={<DataImportPage accept=".csv,.json,.xlsx,.xls" targetLabel="Table name" {...c.importProps} />}
+        historySection={<ImportHistoryPage key={c.historyVersion} {...c.historyProps} />} />
+    </div>
+  );
+}