Fixed frontend coding style problems

frontend/package.json.md5

@@ -1 +1 @@
-679b6f6f86f66d3499bdecbee288c567
+499da1237327bf4ddd2de74bfd6635c7

frontend/src/app.svelte

@@ -1,7 +1,6 @@
 <script>
   import BlankState from '$components/blankstate.svelte';
   import ContextMenu from '$components/contextmenu.svelte';
-  import connections from '$lib/stores/connections';
   import contextMenu from '$lib/stores/contextmenu';
   import environment from '$lib/stores/environment';
   import hosts from '$lib/stores/hosts';
@@ -10,7 +9,7 @@
   import About from '$organisms/about.svelte';
   import Connection from '$organisms/connection/index.svelte';
   import Settings from '$organisms/settings/index.svelte';
-  import { EventsEmit, EventsOn } from '$wails/runtime';
+  import { EventsOn } from '$wails/runtime';
   import { tick } from 'svelte';
 
   const activeHostKey = '';
@@ -21,9 +20,6 @@
   let connectionManager;
   let showWelcomeScreen = undefined;
 
-  $: host = hosts[activeHostKey];
-  $: connection = $connections[activeHostKey];
-
   hosts.subscribe(h => {
     if (h && (showWelcomeScreen === undefined)) {
       showWelcomeScreen = !Object.keys($hosts || {}).length;

frontend/src/components/grid-items.svelte

@@ -50,7 +50,9 @@
       return obj;
     }
     else if ((typeof obj === 'object') && (obj !== null)) {
-      return Object.entries(obj).map(([ k, item ]) => ({ ...item, [key]: k }));
+      return Object.entries(obj).map(([ k, item ]) => {
+        return { ...item, [key]: k };
+      });
     }
     else {
       return obj;

frontend/src/components/icon.svelte

@@ -16,7 +16,15 @@
   }
 </style>
 
-<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">
+<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">
   {#if name === 'radio'}
     <circle cx="12" cy="12" r="2"></circle><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path>
   {:else if name === 'chev-l'}
@@ -44,7 +52,12 @@
   {:else if name === 'reload'}
     <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>
   {:else if name === '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>
+    <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>
   {:else if name === 'edit'}
     <path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
   {:else if name === 'check'}
@@ -60,15 +73,35 @@
   {:else if name === 'zap'}
     <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" />
   {:else if name === 'server'}
-    <rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><path d="M6 6h.01M6 18h.01"/>
+    <rect x="2"
+      y="2"
+      width="20"
+      height="8"
+      rx="2"
+      ry="2" /><rect x="2"
+      y="14"
+      width="20"
+      height="8"
+      rx="2"
+      ry="2" /><path d="M6 6h.01M6 18h.01" />
   {:else if name === 'text'}
     <path d="M4 7V4h16v3M9 20h6M12 4v16" />
   {:else if name === 'hash'}
     <path d="M4 9h16M4 15h16M10 3 8 21M16 3l-2 18" />
   {:else if name === 'toggle-l'}
-    <rect x="1" y="5" width="22" height="14" rx="7" ry="7"/><circle cx="8" cy="12" r="3"/>
+    <rect x="1"
+      y="5"
+      width="22"
+      height="14"
+      rx="7"
+      ry="7" /><circle cx="8" cy="12" r="3" />
   {:else if name === 'cal'}
-    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><path d="M16 2v4M8 2v4M3 10h18"/>
+    <rect x="3"
+      y="4"
+      width="18"
+      height="18"
+      rx="2"
+      ry="2" /><path d="M16 2v4M8 2v4M3 10h18" />
   {:else if name === 'code'}
     <path d="m16 18 6-6-6-6M8 6l-6 6 6 6" />
   {:else if name === 'target'}

frontend/src/components/objectviewer.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { jsonLooseParse, looseJsonIsValid } from '$lib/strings';
+  import { looseJsonIsValid } from '$lib/strings';
   import { createEventDispatcher, onDestroy } from 'svelte';
   import Icon from './icon.svelte';
   import Modal from './modal.svelte';

frontend/src/lib/stores/inited.js

@@ -10,7 +10,7 @@ const defer = listener => {
     listener();
   }
   else {
-    listeners.push(listener)
+    listeners.push(listener);
   }
 };
 

frontend/src/organisms/connection/collection/aggregate.svelte

@@ -31,7 +31,9 @@
   }
 
   async function run() {
-    const pipeline = stages.map(stage => ({ [stage.type]: jsonLooseParse(stage.data) }));
+    const pipeline = stages.map(stage => {
+      return { [stage.type]: jsonLooseParse(stage.data) };
+    });
     await Aggregate(
       collection.hostKey,
       collection.dbKey,
@@ -66,7 +68,8 @@
 
         <!-- svelte-ignore a11y-label-has-associated-control -->
         <label class="field">
-          <ObjectEditor bind:text={stage.data} on:inited={e => {
+          <ObjectEditor bind:text={stage.data}
+            on:inited={e => {
               e.detail.editor.dispatch({
                 changes: {
                   from: 0,

frontend/src/organisms/connection/collection/components/form.svelte

@@ -38,7 +38,7 @@
 
 {#if item && view}
   {#each view?.columns?.filter(c => inputTypes.includes(c.inputType)) || [] as column, index}
-    <!-- svelte-ignore a11y-label-has-associated-control because FormInput contains one -->
+    <!-- svelte-ignore a11y-label-has-associated-control -->
     <label class="column">
       <div class="label">
         <Icon name={iconMap[column.inputType]} />

frontend/src/organisms/connection/collection/components/viewconfig.svelte

@@ -13,7 +13,9 @@
 
   $: tabs = Object.entries(views.forCollection(collection.hostKey, collection.dbKey, collection.key))
     .sort((a, b) => sortTabKeys(a[0], b[0]))
-    .map(([ key, v ]) => ({ key, title: v.name, closable: key !== 'list' }));
+    .map(([ key, v ]) => {
+      return { key, title: v.name, closable: key !== 'list' };
+    });
 
   function sortTabKeys(a, b) {
     if (a === 'list') {
@@ -70,11 +72,13 @@
       return;
     }
 
-    $views[activeViewKey].columns = Object.keys(firstItem).sort().map(key => ({
+    $views[activeViewKey].columns = Object.keys(firstItem).sort().map(key => {
+      return {
         key,
         showInTable: true,
         inputType: 'none',
-    }));
+      };
+    });
   }
 
   function moveColumn(oldIndex, delta) {

frontend/src/organisms/connection/collection/find.svelte

@@ -38,8 +38,8 @@
   let querying = false;
   let objectViewerSuccessMessage = '';
 
+  // $: 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})` : ''};`;
   $: viewsForCollection = views.forCollection(collection.hostKey, collection.dbKey, collection.key);
-  $: 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})` : ''};`;
   $: lastPage = (submittedForm.limit && result?.results?.length) ? Math.max(0, Math.ceil((result.total - submittedForm.limit) / submittedForm.limit)) : 0;
   $: activePage = (submittedForm.limit && submittedForm.skip && result?.results?.length) ? submittedForm.skip / submittedForm.limit : 0;
 
@@ -162,7 +162,12 @@
     <div class="form-row one">
       <label class="field">
         <span class="label">Query or id</span>
-        <input type="text" class="code" bind:this={queryField} bind:value={form.query} use:input={{ type: 'json', autofocus: true }} placeholder={defaults.query} />
+        <input type="text"
+          class="code"
+          bind:this={queryField}
+          bind:value={form.query}
+          use:input={{ type: 'json', autofocus: true }}
+          placeholder={defaults.query} />
       </label>
 
       <label class="field">
@@ -179,12 +184,22 @@
 
       <label class="field">
         <span class="label">Skip</span>
-        <input type="number" min="0" bind:value={form.skip} use:input placeholder={defaults.skip} list="skipstops" />
+        <input type="number"
+          min="0"
+          bind:value={form.skip}
+          use:input
+          placeholder={defaults.skip}
+          list="skipstops" />
       </label>
 
       <label class="field">
         <span class="label">Limit</span>
-        <input type="number" min="0" bind:value={form.limit} use:input placeholder={defaults.limit} list="limits" />
+        <input type="number"
+          min="0"
+          bind:value={form.limit}
+          use:input
+          placeholder={defaults.limit}
+          list="limits" />
       </label>
     </div>
 
@@ -219,7 +234,9 @@
         {:else}
           <Grid
             key="_id"
-            columns={$views[collection.viewKey]?.columns?.map(c => ({ key: c.key, title: c.key })) || []}
+            columns={$views[collection.viewKey]?.columns?.map(c => {
+              return { key: c.key, title: c.key };
+            }) || []}
             showHeaders={true}
             items={result.results ? result.results.map(r => EJSON.deserialize(r)) : []}
             bind:activePath

frontend/src/organisms/connection/collection/index.svelte

@@ -57,7 +57,8 @@
         { key: 'remove', icon: 'trash', title: 'Remove' },
         { key: 'indexes', icon: 'list', title: 'Indexes' },
         { key: 'aggregate', icon: 're', title: 'Aggregate' },
-      ]} bind:selectedKey={tab} />
+      ]}
+        bind:selectedKey={tab} />
 
       <div class="container">
         {#if tab === 'stats'} <Stats {collection} />

frontend/src/organisms/connection/collection/indexes.svelte

@@ -1,7 +1,6 @@
 <script>
   import Icon from '$components/icon.svelte';
   import ObjectGrid from '$components/objectgrid.svelte';
-  import ObjectViewer from '$components/objectviewer.svelte';
   import { DropIndex, GetIndexes } from '$wails/go/app/App';
   import IndexDetail from './components/indexdetail.svelte';
 

frontend/src/organisms/connection/collection/insert.svelte

@@ -60,9 +60,7 @@
 
   function showDocs() {
     dispatch('performFind', {
-      query: insertedIds.length === 1
+      query: insertedIds.length === 1 ? `{ "_id": ${JSON.stringify(insertedIds[0])} }` : `{ "_id": { "$in": [ ${insertedIds.map(id => JSON.stringify(id)).join(', ')} ] } }`,
-        ? `{ "_id": ${JSON.stringify(insertedIds[0])} }`
-        : `{ "_id": { "$in": [ ${insertedIds.map(id => JSON.stringify(id)).join(', ')} ] } }`,
     });
   }
 
@@ -146,11 +144,11 @@
         <Grid
           key="id"
           items={newItems}
-          columns={
+          columns={$views[collection.viewKey]?.columns
-            $views[collection.viewKey]?.columns
             ?.filter(c => inputTypes.includes(c.inputType))
-              .map(c => ({ ...c, id: randomString(8), title: c.key })) || []
+            .map(c => {
-          }
+              return { ...c, id: randomString(8), title: c.key };
+            }) || []}
           showHeaders={true}
           canSelect={false}
           canRemoveItems={true}

frontend/src/organisms/connection/collection/remove.svelte

@@ -11,7 +11,7 @@
   let many = true;
   let result = undefined;
   let editor;
-  $: code = `db.${collection.key}.remove(${json});`;
+  // $: code = `db.${collection.key}.remove(${json});`;
 
   async function removeItems() {
     result = await RemoveItems(

frontend/src/organisms/connection/collection/update.svelte

@@ -11,7 +11,7 @@
   const allOperators = Object.values(atomicUpdateOperators).map(Object.keys).flat();
   const form = { query: '{}', parameters: [ { type: '$set' } ] };
   let updatedCount;
-  $: code = buildCode(form);
+  // $: code = buildCode(form);
   $: invalid = !form.query || form.parameters?.some(param => {
     if (!param.value) {
       return true;
@@ -26,26 +26,28 @@
     }
   });
 
-  function buildCode(form) {
+  // function buildCode(form) {
-    let operation = '{ ' + form.parameters.filter(p => p.type).map(p => `${p.type}: ${p.value || '{}'}`).join(', ') + ' }';
+  //   let operation = '{ ' + form.parameters.filter(p => p.type).map(p => `${p.type}: ${p.value || '{}'}`).join(', ') + ' }';
-    if (operation === '{  }') {
+  //   if (operation === '{  }') {
-      operation = '{}';
+  //     operation = '{}';
-    }
+  //   }
 
-    let options = (form.upsert || form.many) ? ', { ' : '';
+  //   let options = (form.upsert || form.many) ? ', { ' : '';
-    form.upsert && (options += 'upsert: true');
+  //   form.upsert && (options += 'upsert: true');
-    form.upsert && form.many && (options += ', ');
+  //   form.upsert && form.many && (options += ', ');
-    form.many && (options += 'multi: true');
+  //   form.many && (options += 'multi: true');
-    (form.upsert || form.many) && (options += ' }');
+  //   (form.upsert || form.many) && (options += ' }');
 
-    const code = `db.${collection.key}.update(${form.query || '{}'}, ${operation}${options});`;
+  //   const code = `db.${collection.key}.update(${form.query || '{}'}, ${operation}${options});`;
-    return code;
+  //   return code;
-  }
+  // }
 
   async function submitQuery() {
     const f = deepClone(form);
     f.query = convertLooseJson(f.query);
-    f.parameters = f.parameters.map(param => ({ ...param, value: convertLooseJson(param.value) }));
+    f.parameters = f.parameters.map(param => {
+      return { ...param, value: convertLooseJson(param.value) };
+    });
     updatedCount = await UpdateItems(collection.hostKey, collection.dbKey, collection.key, JSON.stringify(f));
   }
 

frontend/src/organisms/connection/database/stats.svelte

@@ -7,7 +7,7 @@
   let copySucceeded = false;
 
   async function copy() {
-    const json = JSON.stringify(collection.stats, undefined, '\t');
+    const json = JSON.stringify(database.stats, undefined, '\t');
     await navigator.clipboard.writeText(json);
     copySucceeded = true;
     setTimeout(() => copySucceeded = false, 1500);

frontend/src/organisms/connection/dump.svelte

@@ -65,7 +65,6 @@
 
 <Modal bind:show={info} title="Perform dump">
   <form on:submit|preventDefault={performDump}>
-    <!-- svelte-ignore a11y-label-has-associated-control - input is in DirectoryChooser -->
     <label class="field">
       <span class="label">Output destination:</span>
       <DirectoryChooser bind:value={info.outdir} />
@@ -83,7 +82,9 @@
           hideChildrenToggles
           items={[
             { id: undefined, name: '(localhost)' },
-            ...Object.keys($hosts).map(id => ({ id, name: $hosts[id]?.name })),
+            ...Object.keys($hosts).map(id => {
+              return { id, name: $hosts[id]?.name };
+            }),
           ]}
           on:select={e => selectHost(e.detail?.itemKey)}
         />
@@ -97,9 +98,9 @@
           hideChildrenToggles
           items={[
             { id: undefined, name: '(all databases)' },
-            ...($connections[info.hostKey]?.databases
+            ...($connections[info.hostKey]?.databases ? Object.keys($connections[info.hostKey].databases).map(id => {
-              ? Object.keys($connections[info.hostKey].databases).map(id => ({ id, name: id }))
+              return { id, name: id };
-              : []
+            }) : []
             ),
           ]}
           on:select={e => selectDatabase(e.detail?.itemKey)}
@@ -114,9 +115,9 @@
           hideChildrenToggles
           items={[
             { id: undefined, name: '(all collections)' },
-            ...($connections[info.hostKey]?.databases[info.dbKey]?.collections
+            ...($connections[info.hostKey]?.databases[info.dbKey]?.collections ? Object.keys($connections[info.hostKey].databases[info.dbKey].collections).map(id => {
-              ? Object.keys($connections[info.hostKey].databases[info.dbKey].collections).map(id => ({ id, name: id }))
+              return { id, name: id };
-              : []
+            }) : []
             ),
           ]}
           on:select={e => selectCollection(e.detail?.itemKey)}

frontend/src/organisms/connection/host/index.svelte

@@ -14,7 +14,7 @@
     host.hostKey = hostKey;
   }
 
-  $: if (hostKey || dbKey) {
+  $: if (hostKey) {
     tab = 'status';
   }
 
@@ -26,8 +26,9 @@
     {#key host}
       <TabBar tabs={[
         { key: 'status', icon: 'chart', title: 'Host status' },
-        { key: 'systemInfo', icon: 'server', title: 'System info' }
+        { key: 'systemInfo', icon: 'server', title: 'System info' },
-      ]} bind:selectedKey={tab} />
+      ]}
+        bind:selectedKey={tab} />
 
       <div class="container">
         {#if tab === 'status'} <Status {host} />

frontend/src/organisms/connection/host/status.svelte

@@ -7,7 +7,7 @@
   let copySucceeded = false;
 
   async function copy() {
-    const json = JSON.stringify(collection.stats, undefined, '\t');
+    const json = JSON.stringify(host.status, undefined, '\t');
     await navigator.clipboard.writeText(json);
     copySucceeded = true;
     setTimeout(() => copySucceeded = false, 1500);

frontend/src/organisms/connection/host/systeminfo.svelte

@@ -7,7 +7,7 @@
   let copySucceeded = false;
 
   async function copy() {
-    const json = JSON.stringify(collection.stats, undefined, '\t');
+    const json = JSON.stringify(host.systemInfo, undefined, '\t');
     await navigator.clipboard.writeText(json);
     copySucceeded = true;
     setTimeout(() => copySucceeded = false, 1500);

frontend/src/organisms/connection/hosttree.svelte

@@ -2,10 +2,9 @@
   import Grid from '$components/grid.svelte';
   import { startProgress } from '$lib/progress';
   import connections from '$lib/stores/connections';
-  import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher, tick } from 'svelte';
   import { DropCollection, DropDatabase, OpenCollection, OpenConnection, OpenDatabase, RemoveHost, TruncateCollection } from '../../../wailsjs/go/app/App';
   import hosts from '$lib/stores/hosts';
-  import { tick } from 'svelte';
   import windowTitle from '$lib/stores/windowtitle';
 
   export let activeHostKey = '';
@@ -17,10 +16,7 @@
   // $: activeGridPath[0] = activeHostKey || undefined;
   // $: activeGridPath[1] = activeDbKey || undefined;
   // $: activeGridPath[2] = activeCollKey || undefined;
-  $: host = $hosts[activeHostKey];
   $: connection = $connections[activeHostKey];
-  $: database = connection?.databases[activeDbKey];
-  $: collection = database?.collections?.[activeCollKey];
 
   export async function reload() {
     activeHostKey && await openConnection(activeHostKey);
@@ -129,16 +125,19 @@
   striped={false}
   columns={[ { key: 'name' }, { key: 'count', right: true } ]}
   bind:activePath={activeGridPath}
-  items={Object.keys($hosts).map(hostKey => ({
+  items={Object.keys($hosts).map(hostKey => {
+    return {
       id: hostKey,
       name: $hosts[hostKey].name,
       icon: 'server',
-    children: Object.keys(connection?.databases || {}).sort().map(dbKey => ({
+      children: Object.keys(connection?.databases || {}).sort().map(dbKey => {
+        return {
           id: dbKey,
           name: dbKey,
           icon: 'db',
           count: Object.keys(connection.databases[dbKey].collections || {}).length || '',
-      children: Object.keys(connection.databases[dbKey].collections).sort().map(collKey => ({
+          children: Object.keys(connection.databases[dbKey].collections).sort().map(collKey => {
+            return {
               id: collKey,
               name: collKey,
               icon: 'list',
@@ -152,21 +151,24 @@
                 { separator: true },
                 { label: 'New collection…', fn: () => dispatch('newCollection') },
               ],
-      })) || [],
+            };
+          }) || [],
           menu: [
             { label: 'Drop database…', fn: () => dropDatabase(dbKey) },
             { separator: true },
             { label: 'New database…', fn: () => dispatch('newDatabase') },
             { label: 'New collection…', fn: () => dispatch('newCollection') },
           ],
-    })),
+        };
+      }),
       menu: [
         { label: 'New database…', fn: () => dispatch('newDatabase') },
         { separator: true },
         { label: `Edit host ${$hosts[hostKey].name}…`, fn: () => dispatch('editHost', hostKey) },
-      { label: `Remove host…`, fn: () => removeHost(hostKey) },
+        { label: 'Remove host…', fn: () => removeHost(hostKey) },
       ],
-  }))}
+    };
+  })}
   on:select={e => {
     const key = e.detail.itemKey;
     switch (e.detail?.level) {

frontend/src/organisms/connection/index.svelte

@@ -1,10 +1,9 @@
 <script>
   import { startProgress } from '$lib/progress';
   import connections from '$lib/stores/connections';
-  import { Hosts, RenameCollection } from '$wails/go/app/App';
+  import { RenameCollection } from '$wails/go/app/App';
   import { EnterText } from '$wails/go/ui/UI';
   import { EventsOn } from '$wails/runtime/runtime';
-  import { onMount } from 'svelte';
   import HostView from './host/index.svelte';
   import DatabaseView from './database/index.svelte';
   import CollectionView from './collection/index.svelte';
@@ -135,7 +134,7 @@
 <HostDetail
   bind:show={showHostDetail}
   on:reload={hosts.update}
-  hostKey={activeHostKey}
+  hostKey={hostDetailKey}
 />
 
 <DumpInfo bind:info={exportInfo} />

frontend/src/organisms/settings/index.svelte

@@ -27,7 +27,7 @@
     </span>
 
     <label for="defaultExportDirectory">Default export directory</label>
-    <!-- svelte-ignore a11y-label-has-associated-control - input is in DirectoryChooser -->
+    <!-- svelte-ignore a11y-label-has-associated-control -->
     <label class="field">
       <DirectoryChooser id="defaultExportDirectory" bind:value={$settings.defaultExportDirectory} />
     </label>