Find: polish

frontend/src/components/icon.svelte

@@ -14,4 +14,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-database"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path></svg>
 {:else if name === 'x'}
   <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-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+{:else if name === '-'}
+  <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>
 {/if}

frontend/src/components/objectgrid.svelte

@@ -5,6 +5,13 @@
   export let key = '_id';
   export let showHeaders = false;
   export let contained = true;
+  export let activeKey = '';
+
+  const columns = [
+    { key: 'key', label: 'Key' },
+    { key: 'value', label: 'Value' },
+    { key: 'type', label: 'Type' },
+  ];
 
   let items = [];
 
@@ -61,8 +68,4 @@
   }
 </script>
 
-<Grid columns={[
+<Grid {columns} {items} {showHeaders} {contained} key="key" bind:activeKey />
-  { key: 'key', label: 'Key' },
-  { key: 'value', label: 'Value' },
-  { key: 'type', label: 'Type' },
-]} {items} {showHeaders} {contained} key="key" />

frontend/src/organisms/collection-detail/find.svelte

@@ -26,6 +26,7 @@
 
   let result = [];
   let queryField;
+  let activeKey = '';
   $: 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})` : ''};`;
 
   $: if (collection) {
@@ -33,11 +34,30 @@
   }
 
   async function submitQuery() {
+    activeKey = '';
     result = await PerformFind(collection.hostKey, collection.dbKey, collection.key, JSON.stringify(form));
     queryField?.focus();
     queryField?.select();
   }
 
+  function prev() {
+    form.skip -= form.limit;
+    if (form.skip < 0) {
+      form.skip = 0;
+    }
+    submitQuery();
+  }
+
+  function next() {
+    form.skip += form.limit;
+    submitQuery();
+  }
+
+  function remove() {
+    // eslint-disable-next-line no-alert
+    alert('yet to be implemented');
+  }
+
   onMount(() => {
     queryField?.focus();
     queryField?.select();
@@ -80,7 +100,7 @@
 <CodeExample {code} />
 
 <div class="result">
-  <ObjectGrid data={result} />
+  <ObjectGrid data={result} bind:activeKey />
   <div class="controls">
     <div>
       {#if result}
@@ -88,8 +108,15 @@
       {/if}
     </div>
     <div>
-      <button class="btn"><Icon name="chev-l" /></button>
+      <button class="btn danger" on:click={remove} disabled={!activeKey}>
-      <button class="btn"><Icon name="chev-r" /></button>
+        <Icon name="-" />
+      </button>
+      <button class="btn" on:click={prev} disabled={!form.limit || (form.skip <= 0) || !result?.length}>
+        <Icon name="chev-l" />
+      </button>
+      <button class="btn" on:click={next} disabled={!form.limit || ((result?.length || Infinity) < form.limit) || !result?.length}>
+        <Icon name="chev-r" />
+      </button>
     </div>
   </div>
 </div>

frontend/src/style.css

@@ -77,6 +77,12 @@ p {
     box-shadow: 0 0 0 3px rgba(0, 0, 139, 0.2);
     outline: none;
 }
+.btn.danger {
+    background-color: #c00;
+}
+.btn.danger:focus {
+    box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.2);
+}
 .btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;