mirror of
https://github.com/garraflavatra/rolens.git
synced 2025-01-18 13:07:58 +00:00
Added a JSON viewer for items
This commit is contained in:
parent
6931e63f47
commit
5297f00635
GPG Key ID:
0EFF8478ADDF6C49
16
frontend/package-lock.json
generated
16
frontend/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -17,6 +17,12 @@
|
||||
"vite": "^3.0.0"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": ["nodejs", "svelte3"]
|
||||
"extends": [
|
||||
"nodejs",
|
||||
"svelte3"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"highlight.js": "^11.7.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1 +1 @@
|
||||
2c80c12f4d36310f15d586e535d30d27
|
||||
d445254075c563425c5b0fd21e804d4a
|
||||
@ -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);
|
||||
|
||||
@ -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])}
|
||||
<tr
|
||||
on:click={() => 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}
|
||||
>
|
||||
|
||||
@ -20,4 +20,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
|
||||
{:else if name === 'reload'}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
|
||||
{:else if name === 'clipboard'}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
|
||||
{/if}
|
||||
|
||||
58
frontend/src/components/jsonviewer.svelte
Normal file
58
frontend/src/components/jsonviewer.svelte
Normal file
@ -0,0 +1,58 @@
|
||||
<script>
|
||||
import hljs from 'highlight.js/lib/core';
|
||||
import hljsJson from 'highlight.js/lib/languages/json';
|
||||
import 'highlight.js/styles/atom-one-dark.css';
|
||||
import Icon from './icon.svelte';
|
||||
import Modal from './modal.svelte';
|
||||
|
||||
export let json = '';
|
||||
|
||||
hljs.registerLanguage('json', hljsJson);
|
||||
$: highlighted = json ? hljs.highlight('json', json).value : '';
|
||||
|
||||
function copy() {
|
||||
navigator.clipboard.writeText(json);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if json}
|
||||
<Modal bind:show={json} title="JSON viewer" contentPadding={false}>
|
||||
<div class="codeblock">
|
||||
<div class="buttons">
|
||||
<button class="btn" on:click={copy}>
|
||||
<Icon name="clipboard" />
|
||||
</button>
|
||||
</div>
|
||||
<pre><code class="hljs">{@html highlighted}</code></pre>
|
||||
</div>
|
||||
</Modal>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.codeblock {
|
||||
position: relative;
|
||||
}
|
||||
.buttons {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 1rem;
|
||||
}
|
||||
.buttons button {
|
||||
margin-left: 1rem;
|
||||
background: none;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.buttons button:hover {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.hljs {
|
||||
user-select: text;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
pre :global(::selection) {
|
||||
background: rgba(5, 5, 5, 0.8);
|
||||
}
|
||||
</style>
|
||||
@ -8,7 +8,7 @@
|
||||
</script>
|
||||
|
||||
{#if show}
|
||||
<div class="modal outer" on:mousedown|self={close} transition:fade>
|
||||
<div class="modal outer" on:mousedown|self={() => show = false} transition:fade>
|
||||
<div class="inner" transition:fly={{ y: 100 }}>
|
||||
<header>
|
||||
{#if title}
|
||||
@ -18,7 +18,7 @@
|
||||
<Icon name="x" />
|
||||
</button>
|
||||
</header>
|
||||
<div class="slot content" class:p-0={!contentPadding}> <slot /> </div>
|
||||
<div class="slot content" class:padded={contentPadding}> <slot /> </div>
|
||||
{#if $$slots.footerLeft || $$slots.footerRight}
|
||||
<footer>
|
||||
<slot name="footer" />
|
||||
@ -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;
|
||||
|
||||
@ -69,4 +69,14 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<Grid {columns} {items} {showHeaders} {contained} key="key" bind:activeKey />
|
||||
<Grid
|
||||
key="key"
|
||||
on:select
|
||||
on:selectChild
|
||||
on:trigger
|
||||
bind:activeKey
|
||||
{columns}
|
||||
{items}
|
||||
{showHeaders}
|
||||
{contained}
|
||||
/>
|
||||
|
||||
@ -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 @@
|
||||
<div class="result">
|
||||
<div class="grid">
|
||||
{#key result}
|
||||
<ObjectGrid data={result.results} bind:activeKey />
|
||||
<ObjectGrid data={result.results} bind:activeKey on:trigger={e => openJson(e.detail)} />
|
||||
{/key}
|
||||
</div>
|
||||
|
||||
@ -128,6 +136,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<JsonViewer bind:json />
|
||||
|
||||
<style>
|
||||
.find {
|
||||
display: grid;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user