From 5297f0063525da2611aa1cdcc77d8daefc4b44c3 Mon Sep 17 00:00:00 2001 From: Romein van Buren Date: Sun, 15 Jan 2023 12:02:17 +0100 Subject: [PATCH] Added a JSON viewer for items --- frontend/package-lock.json | 16 +++++ frontend/package.json | 8 ++- frontend/package.json.md5 | 2 +- frontend/src/app.svelte | 2 - frontend/src/components/grid.svelte | 7 ++- frontend/src/components/icon.svelte | 2 + frontend/src/components/jsonviewer.svelte | 58 +++++++++++++++++++ frontend/src/components/modal.svelte | 9 ++- frontend/src/components/objectgrid.svelte | 12 +++- .../organisms/collection-detail/find.svelte | 12 +++- 10 files changed, 118 insertions(+), 10 deletions(-) create mode 100644 frontend/src/components/jsonviewer.svelte diff --git a/frontend/package-lock.json b/frontend/package-lock.json index dd2fcc9..ce0aa5a 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -7,6 +7,9 @@ "": { "name": "frontend", "version": "0.0.0", + "dependencies": { + "highlight.js": "^11.7.0" + }, "devDependencies": { "@sveltejs/vite-plugin-svelte": "^1.0.1", "eslint": "^8.31.0", @@ -1888,6 +1891,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/highlight.js": { + "version": "11.7.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz", + "integrity": "sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/ignore": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", @@ -4523,6 +4534,11 @@ "has-symbols": "^1.0.2" } }, + "highlight.js": { + "version": "11.7.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz", + "integrity": "sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==" + }, "ignore": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", diff --git a/frontend/package.json b/frontend/package.json index c0b8060..8e44cb4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -17,6 +17,12 @@ "vite": "^3.0.0" }, "eslintConfig": { - "extends": ["nodejs", "svelte3"] + "extends": [ + "nodejs", + "svelte3" + ] + }, + "dependencies": { + "highlight.js": "^11.7.0" } } diff --git a/frontend/package.json.md5 b/frontend/package.json.md5 index 8282008..83aff09 100755 --- a/frontend/package.json.md5 +++ b/frontend/package.json.md5 @@ -1 +1 @@ -2c80c12f4d36310f15d586e535d30d27 \ No newline at end of file +d445254075c563425c5b0fd21e804d4a \ No newline at end of file diff --git a/frontend/src/app.svelte b/frontend/src/app.svelte index 64ab340..12651ce 100644 --- a/frontend/src/app.svelte +++ b/frontend/src/app.svelte @@ -19,8 +19,6 @@ $: database = connection?.databases[activeDbKey]; $: collection = database?.collections?.[activeCollKey]; - $: console.log(connection?.databases); - async function openConnection(hostKey) { busy.start(); const databases = await OpenConnection(hostKey); diff --git a/frontend/src/components/grid.svelte b/frontend/src/components/grid.svelte index a49381c..6bf3cd6 100644 --- a/frontend/src/components/grid.svelte +++ b/frontend/src/components/grid.svelte @@ -53,6 +53,11 @@ } } + function doubleClick(itemKey) { + toggleChildren(itemKey, false); + dispatch('trigger', itemKey); + } + function showContextMenu(evt, item) { select(item[key]); contextMenu.show(evt, item.menu); @@ -87,7 +92,7 @@ {#each _items as item (item[key])} select(item[key])} - on:dblclick={() => toggleChildren(item[key])} + on:dblclick={() => doubleClick(item[key])} on:contextmenu|preventDefault={evt => showContextMenu(evt, item)} class:selected={activeKey === item[key] && !activeChildKey} > diff --git a/frontend/src/components/icon.svelte b/frontend/src/components/icon.svelte index bbb3c14..656f07e 100644 --- a/frontend/src/components/icon.svelte +++ b/frontend/src/components/icon.svelte @@ -20,4 +20,6 @@ {:else if name === 'reload'} +{:else if name === 'clipboard'} + {/if} diff --git a/frontend/src/components/jsonviewer.svelte b/frontend/src/components/jsonviewer.svelte new file mode 100644 index 0000000..da8dbc1 --- /dev/null +++ b/frontend/src/components/jsonviewer.svelte @@ -0,0 +1,58 @@ + + +{#if json} + +
+
+ +
+ 
{@html highlighted}
+
+ +{/if} + + diff --git a/frontend/src/components/modal.svelte b/frontend/src/components/modal.svelte index 6ee1df6..3138f01 100644 --- a/frontend/src/components/modal.svelte +++ b/frontend/src/components/modal.svelte @@ -8,7 +8,7 @@ {#if show} -
+
show = false} transition:fade>
{#if title} @@ -18,7 +18,7 @@
-
+
{#if $$slots.footerLeft || $$slots.footerRight}
@@ -52,6 +52,7 @@ margin-bottom: auto; width: 100%; border-radius: 10px; + overflow: hidden; display: flex; flex-flow: column; cursor: auto; @@ -79,10 +80,12 @@ } .content { - padding: 1rem; overflow-y: auto; max-height: 100%; } + .content.padded { + padding: 1rem; + } footer { padding: 1rem; diff --git a/frontend/src/components/objectgrid.svelte b/frontend/src/components/objectgrid.svelte index a379011..7e3ea46 100644 --- a/frontend/src/components/objectgrid.svelte +++ b/frontend/src/components/objectgrid.svelte @@ -69,4 +69,14 @@ } - + diff --git a/frontend/src/organisms/collection-detail/find.svelte b/frontend/src/organisms/collection-detail/find.svelte index 9e2cd03..f1f9dfc 100644 --- a/frontend/src/organisms/collection-detail/find.svelte +++ b/frontend/src/organisms/collection-detail/find.svelte @@ -5,6 +5,7 @@ import { input } from '../../actions'; import ObjectGrid from '../../components/objectgrid.svelte'; import Icon from '../../components/icon.svelte'; + import JsonViewer from '../../components/jsonviewer.svelte'; export let collection; @@ -21,6 +22,7 @@ let submittedForm = {}; let queryField; let activeKey = ''; + let json = ''; $: code = `db.${collection.key}.find(${form.query || '{}'}${form.fields && form.fields !== '{}' ? `, ${form.fields}` : ''}).sort(${form.sort})${form.skip ? `.skip(${form.skip})` : ''}${form.limit ? `.limit(${form.limit})` : ''};`; async function submitQuery() { @@ -55,6 +57,12 @@ queryField?.select(); } + function openJson(itemId) { + const item = result?.results?.filter(i => i._id == itemId); + console.log(item); + json = JSON.stringify(item, undefined, 2); + } + export function performQuery(q) { form = { ...defaults, ...q }; console.log(form); @@ -103,7 +111,7 @@
{#key result} - + openJson(e.detail)} /> {/key}
@@ -128,6 +136,8 @@
+ +