mirror of
https://github.com/pocketbase/pocketbase.git
synced 2025-01-24 14:26:58 +02:00
added page export and import
This commit is contained in:
Gani Georgiev
parent
f459dd8812
commit
93ab5fbea2
@ -24,10 +24,10 @@
|
||||
window.Prism = window.Prism || {};
|
||||
window.Prism.manual = true;
|
||||
</script>
|
||||
<script src="./libs/diff/diff.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="./src/main.js"></script>
|
||||
<script src="./libs/diff/diff.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
177
ui/package-lock.json
generated
177
ui/package-lock.json
generated
@ -8,6 +8,8 @@
|
||||
"devDependencies": {
|
||||
"@codemirror/autocomplete": "^6.0.0",
|
||||
"@codemirror/commands": "^6.0.0",
|
||||
"@codemirror/lang-javascript": "^6.0.2",
|
||||
"@codemirror/lang-json": "^6.0.0",
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/legacy-modes": "^6.0.0",
|
||||
"@codemirror/search": "^6.0.0",
|
||||
@ -17,7 +19,7 @@
|
||||
"chart.js": "^3.7.1",
|
||||
"chartjs-adapter-luxon": "^1.1.0",
|
||||
"luxon": "^2.3.2",
|
||||
"pocketbase": "^0.3.0",
|
||||
"pocketbase": "../../js-sdk",
|
||||
"prismjs": "^1.28.0",
|
||||
"sass": "^1.45.0",
|
||||
"svelte": "^3.44.0",
|
||||
@ -26,6 +28,34 @@
|
||||
"vite": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"../../js-sdk": {
|
||||
"name": "pocketbase",
|
||||
"version": "0.3.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^21.0.0",
|
||||
"@rollup/plugin-json": "^4.1.0",
|
||||
"@rollup/plugin-node-resolve": "^13.0.0",
|
||||
"@types/chai": "^4.2.19",
|
||||
"@types/chai-as-promised": "^7.1.4",
|
||||
"@types/glob": "^7.1.3",
|
||||
"@types/mocha": "^8.2.2",
|
||||
"@types/sinon": "^10.0.11",
|
||||
"chai": "^4.3.4",
|
||||
"chai-as-promised": "^7.1.1",
|
||||
"glob": "^7.1.7",
|
||||
"mocha": "^9.0.1",
|
||||
"node-fetch": "^3.2.8",
|
||||
"rollup": "^2.63.0",
|
||||
"rollup-plugin-terser": "^7.0.0",
|
||||
"rollup-plugin-ts": "^2.0.0",
|
||||
"ts-node": "^10.0.0",
|
||||
"tsconfig-paths": "^3.9.0",
|
||||
"tslib": "^2.3.0",
|
||||
"typescript": "4.6.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/autocomplete": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.1.0.tgz",
|
||||
@ -56,6 +86,31 @@
|
||||
"@lezer/common": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lang-javascript": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.0.2.tgz",
|
||||
"integrity": "sha512-BZRJ9u/zl16hLkSpDAWm73mrfIR7HJrr0lvnhoSOCQVea5BglguWI/slxexhvUb0CB5cXgKWuo2bM+N9EhIaZw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@codemirror/autocomplete": "^6.0.0",
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/lint": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.0.0",
|
||||
"@lezer/common": "^1.0.0",
|
||||
"@lezer/javascript": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lang-json": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.0.tgz",
|
||||
"integrity": "sha512-DvTcYTKLmg2viADXlTdufrT334M9jowe1qO02W28nvm+nejcvhM5vot5mE8/kPrxYw/HJHhwu1z2PyBpnMLCNQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@lezer/json": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/language": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.2.1.tgz",
|
||||
@ -79,6 +134,17 @@
|
||||
"@codemirror/language": "^6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lint": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.0.0.tgz",
|
||||
"integrity": "sha512-nUUXcJW1Xp54kNs+a1ToPLK8MadO0rMTnJB8Zk4Z8gBdrN0kqV7uvUraU/T2yqg+grDNR38Vmy/MrhQN/RgwiA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.0.0",
|
||||
"crelt": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/search": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.0.1.tgz",
|
||||
@ -138,6 +204,26 @@
|
||||
"@lezer/common": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/javascript": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.0.2.tgz",
|
||||
"integrity": "sha512-IjOVeIRhM8IuafWNnk+UzRz7p4/JSOKBNINLYLsdSGuJS9Ju7vFdc82AlTt0jgtV5D8eBZf4g0vK4d3ttBNz7A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/json": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.0.tgz",
|
||||
"integrity": "sha512-zbAuUY09RBzCoCA3lJ1+ypKw5WSNvLqGMtasdW6HvVOqZoCpPr8eWrsGnOVWGKGn8Rh21FnrKRVlJXrGAVUqRw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/lr": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.2.1.tgz",
|
||||
@ -862,10 +948,8 @@
|
||||
}
|
||||
},
|
||||
"node_modules/pocketbase": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/pocketbase/-/pocketbase-0.3.0.tgz",
|
||||
"integrity": "sha512-8D1X23zF0Qroq0uecKCBFs3yuD5MsYvGU0S+e/adIz7xH1N0CJiyhRZzPNbTKM9CcLPA8INFc/ct1YXxcO+jfQ==",
|
||||
"dev": true
|
||||
"resolved": "../../js-sdk",
|
||||
"link": true
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.4.14",
|
||||
@ -1133,6 +1217,31 @@
|
||||
"@lezer/common": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/lang-javascript": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.0.2.tgz",
|
||||
"integrity": "sha512-BZRJ9u/zl16hLkSpDAWm73mrfIR7HJrr0lvnhoSOCQVea5BglguWI/slxexhvUb0CB5cXgKWuo2bM+N9EhIaZw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@codemirror/autocomplete": "^6.0.0",
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/lint": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.0.0",
|
||||
"@lezer/common": "^1.0.0",
|
||||
"@lezer/javascript": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/lang-json": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.0.tgz",
|
||||
"integrity": "sha512-DvTcYTKLmg2viADXlTdufrT334M9jowe1qO02W28nvm+nejcvhM5vot5mE8/kPrxYw/HJHhwu1z2PyBpnMLCNQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@lezer/json": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/language": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.2.1.tgz",
|
||||
@ -1156,6 +1265,17 @@
|
||||
"@codemirror/language": "^6.0.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/lint": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.0.0.tgz",
|
||||
"integrity": "sha512-nUUXcJW1Xp54kNs+a1ToPLK8MadO0rMTnJB8Zk4Z8gBdrN0kqV7uvUraU/T2yqg+grDNR38Vmy/MrhQN/RgwiA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.0.0",
|
||||
"crelt": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"@codemirror/search": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.0.1.tgz",
|
||||
@ -1206,6 +1326,26 @@
|
||||
"@lezer/common": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@lezer/javascript": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.0.2.tgz",
|
||||
"integrity": "sha512-IjOVeIRhM8IuafWNnk+UzRz7p4/JSOKBNINLYLsdSGuJS9Ju7vFdc82AlTt0jgtV5D8eBZf4g0vK4d3ttBNz7A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@lezer/json": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.0.tgz",
|
||||
"integrity": "sha512-zbAuUY09RBzCoCA3lJ1+ypKw5WSNvLqGMtasdW6HvVOqZoCpPr8eWrsGnOVWGKGn8Rh21FnrKRVlJXrGAVUqRw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@lezer/lr": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.2.1.tgz",
|
||||
@ -1638,10 +1778,29 @@
|
||||
"dev": true
|
||||
},
|
||||
"pocketbase": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/pocketbase/-/pocketbase-0.3.0.tgz",
|
||||
"integrity": "sha512-8D1X23zF0Qroq0uecKCBFs3yuD5MsYvGU0S+e/adIz7xH1N0CJiyhRZzPNbTKM9CcLPA8INFc/ct1YXxcO+jfQ==",
|
||||
"dev": true
|
||||
"version": "file:../../js-sdk",
|
||||
"requires": {
|
||||
"@rollup/plugin-commonjs": "^21.0.0",
|
||||
"@rollup/plugin-json": "^4.1.0",
|
||||
"@rollup/plugin-node-resolve": "^13.0.0",
|
||||
"@types/chai": "^4.2.19",
|
||||
"@types/chai-as-promised": "^7.1.4",
|
||||
"@types/glob": "^7.1.3",
|
||||
"@types/mocha": "^8.2.2",
|
||||
"@types/sinon": "^10.0.11",
|
||||
"chai": "^4.3.4",
|
||||
"chai-as-promised": "^7.1.1",
|
||||
"glob": "^7.1.7",
|
||||
"mocha": "^9.0.1",
|
||||
"node-fetch": "^3.2.8",
|
||||
"rollup": "^2.63.0",
|
||||
"rollup-plugin-terser": "^7.0.0",
|
||||
"rollup-plugin-ts": "^2.0.0",
|
||||
"ts-node": "^10.0.0",
|
||||
"tsconfig-paths": "^3.9.0",
|
||||
"tslib": "^2.3.0",
|
||||
"typescript": "4.6.4"
|
||||
}
|
||||
},
|
||||
"postcss": {
|
||||
"version": "8.4.14",
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"devDependencies": {
|
||||
"@codemirror/autocomplete": "^6.0.0",
|
||||
"@codemirror/commands": "^6.0.0",
|
||||
"@codemirror/lang-javascript": "^6.0.2",
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/legacy-modes": "^6.0.0",
|
||||
"@codemirror/search": "^6.0.0",
|
||||
@ -23,7 +24,7 @@
|
||||
"chart.js": "^3.7.1",
|
||||
"chartjs-adapter-luxon": "^1.1.0",
|
||||
"luxon": "^2.3.2",
|
||||
"pocketbase": "^0.3.0",
|
||||
"pocketbase": "../../js-sdk",
|
||||
"prismjs": "^1.28.0",
|
||||
"sass": "^1.45.0",
|
||||
"svelte": "^3.44.0",
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
// https://github.com/google/diff-match-patch
|
||||
// https://github.com/google/diff-match-patch/blob/master/LICENSE
|
||||
var diff_match_patch=function(){this.Diff_Timeout=1;this.Diff_EditCost=4;this.Match_Threshold=.5;this.Match_Distance=1E3;this.Patch_DeleteThreshold=.5;this.Patch_Margin=4;this.Match_MaxBits=32},DIFF_DELETE=-1,DIFF_INSERT=1,DIFF_EQUAL=0;diff_match_patch.Diff=function(a,b){this[0]=a;this[1]=b};diff_match_patch.Diff.prototype.length=2;diff_match_patch.Diff.prototype.toString=function(){return this[0]+","+this[1]};
|
||||
diff_match_patch.prototype.diff_main=function(a,b,c,d){"undefined"==typeof d&&(d=0>=this.Diff_Timeout?Number.MAX_VALUE:(new Date).getTime()+1E3*this.Diff_Timeout);if(null==a||null==b)throw Error("Null input. (diff_main)");if(a==b)return a?[new diff_match_patch.Diff(DIFF_EQUAL,a)]:[];"undefined"==typeof c&&(c=!0);var e=c,f=this.diff_commonPrefix(a,b);c=a.substring(0,f);a=a.substring(f);b=b.substring(f);f=this.diff_commonSuffix(a,b);var g=a.substring(a.length-f);a=a.substring(0,a.length-f);b=b.substring(0,
|
||||
b.length-f);a=this.diff_compute_(a,b,e,d);c&&a.unshift(new diff_match_patch.Diff(DIFF_EQUAL,c));g&&a.push(new diff_match_patch.Diff(DIFF_EQUAL,g));this.diff_cleanupMerge(a);return a};
|
||||
|
||||
134
ui/src/components/base/CodeEditor.svelte
Normal file
134
ui/src/components/base/CodeEditor.svelte
Normal file
@ -0,0 +1,134 @@
|
||||
<script>
|
||||
import { onMount, createEventDispatcher } from "svelte";
|
||||
// code mirror imports
|
||||
// ---
|
||||
import {
|
||||
keymap,
|
||||
highlightSpecialChars,
|
||||
drawSelection,
|
||||
dropCursor,
|
||||
rectangularSelection,
|
||||
EditorView,
|
||||
placeholder as placeholderExt,
|
||||
} from "@codemirror/view";
|
||||
import { EditorState, Compartment } from "@codemirror/state";
|
||||
import { defaultHighlightStyle, syntaxHighlighting, bracketMatching } from "@codemirror/language";
|
||||
import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
|
||||
import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
|
||||
import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
|
||||
import { javascript } from "@codemirror/lang-javascript";
|
||||
// ---
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let value = "";
|
||||
export let disabled = false;
|
||||
export let placeholder = "";
|
||||
export let singleLine = false;
|
||||
|
||||
let editor;
|
||||
let container;
|
||||
let editableCompartment = new Compartment();
|
||||
let readOnlyCompartment = new Compartment();
|
||||
let placeholderCompartment = new Compartment();
|
||||
|
||||
$: if (editor && typeof disabled !== "undefined") {
|
||||
editor.dispatch({
|
||||
effects: [
|
||||
editableCompartment.reconfigure(EditorView.editable.of(!disabled)),
|
||||
readOnlyCompartment.reconfigure(EditorState.readOnly.of(disabled)),
|
||||
],
|
||||
});
|
||||
|
||||
triggerNativeChange();
|
||||
}
|
||||
|
||||
$: if (editor && value != editor.state.doc.toString()) {
|
||||
editor.dispatch({
|
||||
changes: {
|
||||
from: 0,
|
||||
to: editor.state.doc.length,
|
||||
insert: value,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
$: if (editor && typeof placeholder !== "undefined") {
|
||||
editor.dispatch({
|
||||
effects: [placeholderCompartment.reconfigure(placeholderExt(placeholder))],
|
||||
});
|
||||
}
|
||||
|
||||
// Focus the editor (if inited).
|
||||
export function focus() {
|
||||
editor?.focus();
|
||||
}
|
||||
|
||||
// Emulate native change event for the editor container element.
|
||||
function triggerNativeChange() {
|
||||
container?.dispatchEvent(
|
||||
new CustomEvent("change", {
|
||||
detail: { value },
|
||||
bubbles: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
const submitShortcut = {
|
||||
key: "Enter",
|
||||
run: (_) => {
|
||||
// trigger submit on enter for singleline input
|
||||
if (singleLine) {
|
||||
dispatch("submit", value);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
editor = new EditorView({
|
||||
parent: container,
|
||||
state: EditorState.create({
|
||||
doc: value,
|
||||
extensions: [
|
||||
highlightSpecialChars(),
|
||||
history(),
|
||||
drawSelection(),
|
||||
dropCursor(),
|
||||
EditorState.allowMultipleSelections.of(true),
|
||||
syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
|
||||
bracketMatching(),
|
||||
closeBrackets(),
|
||||
rectangularSelection(),
|
||||
highlightSelectionMatches(),
|
||||
keymap.of([
|
||||
submitShortcut,
|
||||
indentWithTab,
|
||||
...closeBracketsKeymap,
|
||||
...defaultKeymap,
|
||||
...searchKeymap,
|
||||
...historyKeymap,
|
||||
]),
|
||||
EditorView.lineWrapping,
|
||||
javascript(),
|
||||
placeholderCompartment.of(placeholderExt(placeholder)),
|
||||
editableCompartment.of(EditorView.editable.of(true)),
|
||||
readOnlyCompartment.of(EditorState.readOnly.of(false)),
|
||||
EditorState.transactionFilter.of((tr) => {
|
||||
return singleLine && tr.newDoc.lines > 1 ? [] : tr;
|
||||
}),
|
||||
EditorView.updateListener.of((v) => {
|
||||
if (!v.docChanged || disabled) {
|
||||
return;
|
||||
}
|
||||
value = v.state.doc.toString();
|
||||
triggerNativeChange();
|
||||
}),
|
||||
],
|
||||
}),
|
||||
});
|
||||
|
||||
return () => editor?.destroy();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div bind:this={container} class="code-editor" />
|
||||
96
ui/src/components/base/DiffPopup.svelte
Normal file
96
ui/src/components/base/DiffPopup.svelte
Normal file
@ -0,0 +1,96 @@
|
||||
<script>
|
||||
import OverlayPanel from "@/components/base/OverlayPanel.svelte";
|
||||
|
||||
export let title = "Side-by-side diff";
|
||||
export let contentATitle = "Old state";
|
||||
export let contentBTitle = "New state";
|
||||
|
||||
let panel;
|
||||
let contentA = "";
|
||||
let contentB = "";
|
||||
|
||||
export function show(a, b) {
|
||||
contentA = a;
|
||||
contentB = b;
|
||||
|
||||
panel?.show();
|
||||
}
|
||||
|
||||
export function hide() {
|
||||
return panel?.hide();
|
||||
}
|
||||
|
||||
function diffsToHtml(diffs, ops = [DIFF_INSERT, DIFF_DELETE, DIFF_EQUAL]) {
|
||||
const html = [];
|
||||
const pattern_amp = /&/g;
|
||||
const pattern_lt = /</g;
|
||||
const pattern_gt = />/g;
|
||||
const pattern_para = /\n/g;
|
||||
|
||||
for (let i = 0; i < diffs.length; i++) {
|
||||
const op = diffs[i][0]; // operation (insert, delete, equal)
|
||||
|
||||
if (!ops.includes(op)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const text = diffs[i][1]
|
||||
.replace(pattern_amp, "&")
|
||||
.replace(pattern_lt, "<")
|
||||
.replace(pattern_gt, ">")
|
||||
.replace(pattern_para, "<br>");
|
||||
|
||||
switch (op) {
|
||||
case DIFF_INSERT:
|
||||
html[i] = '<ins class="block">' + text + "</ins>";
|
||||
break;
|
||||
case DIFF_DELETE:
|
||||
html[i] = '<del class="block">' + text + "</del>";
|
||||
break;
|
||||
case DIFF_EQUAL:
|
||||
html[i] = text;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return html.join("");
|
||||
}
|
||||
|
||||
function diff(ops = [DIFF_INSERT, DIFF_DELETE, DIFF_EQUAL]) {
|
||||
const dmp = new diff_match_patch();
|
||||
const lines = dmp.diff_linesToChars_(contentA, contentB);
|
||||
const diffs = dmp.diff_main(lines.chars1, lines.chars2, false);
|
||||
|
||||
dmp.diff_charsToLines_(diffs, lines.lineArray);
|
||||
|
||||
return diffsToHtml(diffs, ops);
|
||||
}
|
||||
</script>
|
||||
|
||||
<OverlayPanel bind:this={panel} class="full-width-popup diff-popup" popup on:show on:hide>
|
||||
<svelte:fragment slot="header">
|
||||
<h4 class="center txt-break">{title}</h4>
|
||||
</svelte:fragment>
|
||||
|
||||
<div class="grid m-b-base">
|
||||
<div class="col-6">
|
||||
<div class="section-title">{contentATitle}</div>
|
||||
<code class="code-block">{@html diff([DIFF_DELETE, DIFF_EQUAL])}</code>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="section-title">{contentBTitle}</div>
|
||||
<code class="code-block">{@html diff([DIFF_INSERT, DIFF_EQUAL])}</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svelte:fragment slot="footer">
|
||||
<button type="button" class="btn btn-secondary" on:click={hide}>Close</button>
|
||||
</svelte:fragment>
|
||||
</OverlayPanel>
|
||||
|
||||
<style>
|
||||
code {
|
||||
color: var(--txtHintColor);
|
||||
min-height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -10,6 +10,7 @@
|
||||
|
||||
const uniqueId = "export_" + CommonHelper.randomString(5);
|
||||
|
||||
let previewContainer;
|
||||
let collections = [];
|
||||
let isLoadingCollections = false;
|
||||
|
||||
@ -68,7 +69,22 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="export-preview">
|
||||
<div
|
||||
tabindex="0"
|
||||
bind:this={previewContainer}
|
||||
class="export-preview"
|
||||
on:keydown={(e) => {
|
||||
// select all
|
||||
if (e.ctrlKey && e.code === "KeyA") {
|
||||
e.preventDefault();
|
||||
const selection = window.getSelection();
|
||||
const range = document.createRange();
|
||||
range.selectNodeContents(previewContainer);
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(range);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-secondary fade copy-schema"
|
||||
|
||||
@ -1,23 +1,24 @@
|
||||
<script>
|
||||
import { tick } from "svelte";
|
||||
import ApiClient from "@/utils/ApiClient";
|
||||
import CommonHelper from "@/utils/CommonHelper";
|
||||
import { pageTitle } from "@/stores/app";
|
||||
import { addInfoToast, addErrorToast } from "@/stores/toasts";
|
||||
import Field from "@/components/base/Field.svelte";
|
||||
import CodeBlock from "@/components/base/CodeBlock.svelte";
|
||||
import DiffPopup from "@/components/base/DiffPopup.svelte";
|
||||
import SettingsSidebar from "@/components/settings/SettingsSidebar.svelte";
|
||||
|
||||
$pageTitle = "Import collections";
|
||||
|
||||
let uniquePageId = "import_" + CommonHelper.randomString(5);
|
||||
|
||||
let fileInput;
|
||||
let diffPopup;
|
||||
|
||||
let schema = "";
|
||||
let isImporting = false;
|
||||
let isLoadingFile = false;
|
||||
let newCollections = [];
|
||||
let oldCollections = [];
|
||||
let collectionsToModify = [];
|
||||
let isLoadingOldCollections = false;
|
||||
|
||||
$: if (typeof schema !== "undefined") {
|
||||
@ -29,24 +30,22 @@
|
||||
newCollections.length &&
|
||||
newCollections.length === newCollections.filter((item) => !!item.id && !!item.name).length;
|
||||
|
||||
$: canImport = isValid && !isLoadingOldCollections;
|
||||
|
||||
$: collectionsToDelete = oldCollections.filter((collection) => {
|
||||
return !CommonHelper.findByKey(newCollections, "id", collection.id);
|
||||
return isValid && !CommonHelper.findByKey(newCollections, "id", collection.id);
|
||||
});
|
||||
|
||||
$: collectionsToAdd = newCollections.filter((collection) => {
|
||||
return !CommonHelper.findByKey(oldCollections, "id", collection.id);
|
||||
return isValid && !CommonHelper.findByKey(oldCollections, "id", collection.id);
|
||||
});
|
||||
|
||||
$: collectionsToModify = newCollections.filter((newCollection) => {
|
||||
const oldCollection = CommonHelper.findByKey(oldCollections, "id", newCollection.id);
|
||||
if (!oldCollection?.id) {
|
||||
return false;
|
||||
}
|
||||
$: if (typeof newCollections !== "undefined") {
|
||||
loadCollectionsToModify();
|
||||
}
|
||||
|
||||
return JSON.stringify(oldCollection) !== JSON.stringify(newCollection);
|
||||
});
|
||||
$: hasChanges =
|
||||
!!schema && (collectionsToDelete.length || collectionsToAdd.length || collectionsToModify.length);
|
||||
|
||||
$: canImport = !isLoadingOldCollections && isValid && hasChanges;
|
||||
|
||||
loadOldCollections();
|
||||
|
||||
@ -54,9 +53,7 @@
|
||||
isLoadingOldCollections = true;
|
||||
|
||||
try {
|
||||
oldCollections = await ApiClient.collections.getFullList(100, {
|
||||
$cancelKey: uniquePageId,
|
||||
});
|
||||
oldCollections = await ApiClient.collections.getFullList(200);
|
||||
// delete timestamps
|
||||
for (let collection of oldCollections) {
|
||||
delete collection.created;
|
||||
@ -69,6 +66,31 @@
|
||||
isLoadingOldCollections = false;
|
||||
}
|
||||
|
||||
function loadCollectionsToModify() {
|
||||
collectionsToModify = [];
|
||||
|
||||
if (!isValid) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (let newCollection of newCollections) {
|
||||
const oldCollection = CommonHelper.findByKey(oldCollections, "id", newCollection.id);
|
||||
if (
|
||||
// no old collection
|
||||
!oldCollection?.id ||
|
||||
// no changes
|
||||
JSON.stringify(oldCollection) === JSON.stringify(newCollection)
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
|
||||
collectionsToModify.push({
|
||||
new: newCollection,
|
||||
old: oldCollection,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function loadNewCollections() {
|
||||
newCollections = [];
|
||||
|
||||
@ -78,6 +100,8 @@
|
||||
|
||||
if (!Array.isArray(newCollections)) {
|
||||
newCollections = [];
|
||||
} else {
|
||||
newCollections = CommonHelper.filterDuplicatesByKey(newCollections);
|
||||
}
|
||||
|
||||
// delete timestamps
|
||||
@ -92,11 +116,18 @@
|
||||
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = (event) => {
|
||||
schema = event.target.result;
|
||||
|
||||
reader.onload = async (event) => {
|
||||
isLoadingFile = false;
|
||||
fileInput.value = ""; // reset
|
||||
|
||||
schema = event.target.result;
|
||||
|
||||
await tick();
|
||||
|
||||
if (!newCollections.length) {
|
||||
addErrorToast("Invalid collections schema.");
|
||||
clear();
|
||||
}
|
||||
};
|
||||
|
||||
reader.onerror = (err) => {
|
||||
@ -122,6 +153,11 @@
|
||||
|
||||
isImporting = false;
|
||||
}
|
||||
|
||||
function clear() {
|
||||
schema = "";
|
||||
fileInput.value = "";
|
||||
}
|
||||
</script>
|
||||
|
||||
<SettingsSidebar />
|
||||
@ -136,86 +172,146 @@
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="panel">
|
||||
<div class="content txt-xl m-b-base">
|
||||
<input
|
||||
bind:this={fileInput}
|
||||
type="file"
|
||||
class="hidden"
|
||||
accept=".json"
|
||||
on:change={() => {
|
||||
if (fileInput.files.length) {
|
||||
loadFile(fileInput.files[0]);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<p>
|
||||
Paste below the collections schema you want to import or
|
||||
<button
|
||||
class="btn btn-outline btn-sm"
|
||||
class:btn-loading={isLoadingFile}
|
||||
on:click={() => {
|
||||
fileInput.click();
|
||||
{#if isLoadingOldCollections}
|
||||
<div class="loader" />
|
||||
{:else}
|
||||
<div class="content txt-xl m-b-base">
|
||||
<input
|
||||
bind:this={fileInput}
|
||||
type="file"
|
||||
class="hidden"
|
||||
accept=".json"
|
||||
on:change={() => {
|
||||
if (fileInput.files.length) {
|
||||
loadFile(fileInput.files[0]);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span class="txt">Import from JSON file</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
/>
|
||||
|
||||
<Field class="form-field {!isValid ? 'field-error' : ''}" name="collections" let:uniqueId>
|
||||
<label for={uniqueId}>Collections schema</label>
|
||||
<textarea
|
||||
id={uniqueId}
|
||||
class="json-editor"
|
||||
spellcheck="false"
|
||||
rows="20"
|
||||
required
|
||||
bind:value={schema}
|
||||
/>
|
||||
{#if !!schema && !isValid}
|
||||
<div class="help-block help-block-error">Invalid collections schema.</div>
|
||||
<p>
|
||||
Paste below the collections schema you want to import or
|
||||
<button
|
||||
class="btn btn-outline btn-sm m-l-5"
|
||||
class:btn-loading={isLoadingFile}
|
||||
on:click={() => {
|
||||
fileInput.click();
|
||||
}}
|
||||
>
|
||||
<span class="txt">Load from JSON file</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Field class="form-field {!isValid ? 'field-error' : ''}" name="collections" let:uniqueId>
|
||||
<label for={uniqueId} class="p-b-10">Collections schema</label>
|
||||
<textarea
|
||||
id={uniqueId}
|
||||
class="code"
|
||||
spellcheck="false"
|
||||
rows="15"
|
||||
required
|
||||
bind:value={schema}
|
||||
/>
|
||||
|
||||
{#if !!schema && !isValid}
|
||||
<div class="help-block help-block-error">Invalid collections schema.</div>
|
||||
{/if}
|
||||
</Field>
|
||||
|
||||
{#if isValid && newCollections.length && !hasChanges}
|
||||
<div class="alert alert-info">
|
||||
<div class="icon">
|
||||
<i class="ri-information-line" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<string>Everything is up-to-date!</string>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</Field>
|
||||
|
||||
<div class="section-title">Detected changes</div>
|
||||
<p>No changes to your current collections schema were found.</p>
|
||||
{#if isValid && newCollections.length && hasChanges}
|
||||
<div class="flex flex-gap-10">
|
||||
<div>
|
||||
<h5 class="section-title m-0">Detected changes</h5>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-warning"
|
||||
on:click={() => {
|
||||
diffPopup?.show(
|
||||
JSON.stringify(oldCollections, null, 2),
|
||||
JSON.stringify(newCollections, null, 2)
|
||||
);
|
||||
}}
|
||||
>
|
||||
View diff
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#each collectionsToDelete as collection (collection.id)}
|
||||
Delete {collection.name}
|
||||
<br />
|
||||
{/each}
|
||||
<div class="list m-t-sm">
|
||||
{#if collectionsToDelete.length}
|
||||
{#each collectionsToDelete as collection (collection.id)}
|
||||
<div class="list-item">
|
||||
<span class="label label-danger list-label">Deleted</span>
|
||||
<strong>{collection.name}</strong>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
{#each collectionsToModify as collection (collection.id)}
|
||||
Modify {collection.name}
|
||||
<br />
|
||||
{/each}
|
||||
{#if collectionsToModify.length}
|
||||
{#each collectionsToModify as entry (entry.old.id + entry.new.id)}
|
||||
<div class="list-item">
|
||||
<span class="label label-warning list-label">Modified</span>
|
||||
<strong>
|
||||
{#if entry.old.name !== entry.new.name}
|
||||
<span class="txt-strikethrough txt-hint">{entry.old.name}</span> -
|
||||
{/if}
|
||||
{entry.new.name}
|
||||
</strong>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
{#each collectionsToAdd as collection (collection.id)}
|
||||
Add {collection.name}
|
||||
<br />
|
||||
{/each}
|
||||
{#if collectionsToAdd.length}
|
||||
{#each collectionsToAdd as collection (collection.id)}
|
||||
<div class="list-item">
|
||||
<span class="label label-success list-label">New</span>
|
||||
<strong>{collection.name}</strong>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex m-t-base">
|
||||
<div class="flex-fill" />
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-expanded"
|
||||
class:btn-loading={isImporting}
|
||||
disabled={!canImport}
|
||||
on:click={() => submitImport()}
|
||||
>
|
||||
<span class="txt">Import</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex m-t-base">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary link-hint"
|
||||
disabled={!schema || isImporting}
|
||||
on:click={() => clear()}
|
||||
>
|
||||
<span class="txt">Clear</span>
|
||||
</button>
|
||||
<div class="flex-fill" />
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-expanded m-l-auto"
|
||||
class:btn-loading={isImporting}
|
||||
disabled={!canImport}
|
||||
on:click={() => submitImport()}
|
||||
>
|
||||
<span class="txt">Import</span>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<DiffPopup bind:this={diffPopup} />
|
||||
|
||||
<style>
|
||||
.json-editor {
|
||||
font-size: 15px;
|
||||
line-height: 1.379rem;
|
||||
font-family: var(--monospaceFontFamily);
|
||||
.list-label {
|
||||
min-width: 65px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -64,11 +64,13 @@ em {
|
||||
}
|
||||
|
||||
ins {
|
||||
color: var(--txtPrimaryColor);
|
||||
background: var(--successAltColor);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
del {
|
||||
color: var(--txtPrimaryColor);
|
||||
background: var(--dangerAltColor);
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -129,6 +131,14 @@ code {
|
||||
border-radius: var(--baseRadius);
|
||||
}
|
||||
|
||||
.code-block {
|
||||
@extend %block;
|
||||
overflow: auto;
|
||||
padding: var(--xsSpacing);
|
||||
white-space: pre-wrap;
|
||||
background: var(--baseAlt1Color);
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
margin: 10px 0;
|
||||
@ -650,3 +660,23 @@ a,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
@extend %block;
|
||||
position: relative;
|
||||
border: 1px solid var(--baseAlt1Color);
|
||||
border-radius: var(--baseRadius);
|
||||
.list-item {
|
||||
word-break: break-all;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid var(--baseAlt1Color);
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -353,6 +353,11 @@ button {
|
||||
&.txt-mono {
|
||||
line-height: var(--smLineHeight);
|
||||
}
|
||||
&.code {
|
||||
font-size: 15px;
|
||||
line-height: 1.379rem;
|
||||
font-family: var(--monospaceFontFamily);
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
@ -388,6 +393,13 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
textarea {
|
||||
min-height: 80px;
|
||||
resize: vertical;
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
@include scrollbar(
|
||||
$thumbColor: var(--baseAlt3Color),
|
||||
$thumbActiveColor: var(--baseAlt4Color)
|
||||
);
|
||||
}
|
||||
}
|
||||
select {
|
||||
padding-left: 8px;
|
||||
@ -1025,5 +1037,8 @@ select {
|
||||
font-size: var(--baseFontSize);
|
||||
line-height: var(--baseLineHeight);
|
||||
}
|
||||
.cm-selectionMatch {
|
||||
background: var(--infoAltColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,40 +12,46 @@
|
||||
box-shadow: 0px 2px 5px 0px var(--shadowColor), $value;
|
||||
}
|
||||
|
||||
@mixin scrollbar($width: 8px) {
|
||||
@mixin scrollbar(
|
||||
$width: 8px,
|
||||
$thumbColor: var(--baseAlt2Color),
|
||||
$thumbActiveColor: var(--baseAlt3Color)
|
||||
) {
|
||||
$trackColor: transparent;
|
||||
|
||||
$elem: if(&, '&', '');
|
||||
|
||||
@media screen and (min-width: 550px) {
|
||||
// chrome scrollbar styles
|
||||
::-webkit-scrollbar {
|
||||
#{$elem}::-webkit-scrollbar {
|
||||
width: $width;
|
||||
height: $width;
|
||||
border-radius: var(--baseRadius);
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
#{$elem}::-webkit-scrollbar-track {
|
||||
background: $trackColor;
|
||||
border-radius: var(--baseRadius);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--baseAlt2Color);
|
||||
#{$elem}::-webkit-scrollbar-thumb {
|
||||
background-color: $thumbColor;
|
||||
border-radius: 15px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: var(--baseAlt3Color);
|
||||
background-color: $thumbActiveColor;
|
||||
}
|
||||
}
|
||||
|
||||
@if & {
|
||||
// firefox scrollbar
|
||||
scrollbar-color: var(--baseAlt2Color) $trackColor;
|
||||
scrollbar-color: $thumbColor $trackColor;
|
||||
scrollbar-width: thin;
|
||||
scroll-behavior: smooth;
|
||||
} @else {
|
||||
html {
|
||||
// firefox scrollbar
|
||||
scrollbar-color: var(--baseAlt2Color) $trackColor;
|
||||
scrollbar-color: $thumbColor $trackColor;
|
||||
scrollbar-width: thin;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
|
||||
@ -193,6 +193,9 @@
|
||||
row-gap: var(--smSpacing);
|
||||
}
|
||||
}
|
||||
&.full-width-popup {
|
||||
width: 100%;
|
||||
}
|
||||
&.image-preview {
|
||||
width: auto;
|
||||
min-width: 300px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user