ezekiel-cli 5.8.2

package/gui/v1/src/lib/database/Filters.svelte

@@ -0,0 +1,155 @@
+<!-- ================================================================== -->
+<script>
+
+// imports
+// ------------------------------------------------------------------------
+import { state } from '$lib/state.js';
+import { record } from '$lib/api/record.js';
+
+import Icon from '$lib/ui/Icon.svelte';
+
+
+// properties
+// ------------------------------------------------------------------------
+// main filters form (dom node)
+let form;
+
+
+// lists allowed operations for given type
+// ------------------------------------------------------------------------
+const operations = {
+  id: ['value'],
+  string: ['value', 'exists', 'contains', 'ends_with', 'not_contains', 'not_ends_with', 'not_starts_with', 'not_value', 'starts_with'],
+  text: ['value', 'exists', 'not_value'],
+  array: ['array_contains', 'value_in', 'exists', 'array_overlaps', 'not_array_contains', 'not_array_overlaps', 'not_value_array', 'not_value_in', 'value_array'],
+  boolean: ['value_boolean', 'exists', 'not_value_boolean'],
+  integer: ['value_int', 'exists', 'not_value_int', 'range'],
+  float: ['value_float', 'exists', 'not_value_float', 'range'],
+  upload: ['value', 'exists', 'not_value'],
+  datetime: ['value', 'exists', 'not_value'],
+  date: ['value', 'exists', 'not_value']
+};
+
+
+// purpose:		parses the <form>, saves new filters to the store and triggers records reload
+// ------------------------------------------------------------------------
+const filter = () => {
+  $state.filters = { page: 1, attributes: [ Object.fromEntries((new FormData(form)).entries()) ] };
+
+  record.get({ table: $state.table.id, filters: $state.filters, sort: $state.sort });
+}
+
+</script>
+
+
+<!-- ================================================================== -->
+<style>
+
+fieldset {
+  display: flex;
+  gap: 2px;
+  align-items: center;
+}
+
+label {
+  padding-inline-end: .5em;
+}
+
+select[name="name"] {
+  max-width: 20ch;
+
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+
+  text-overflow: ellipsis;
+}
+
+select[name="operation"] {
+  border-radius: 0;
+}
+
+input[name="value"] {
+  width: 20ch;
+
+  border-radius: 0;
+}
+
+button[type="submit"] {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+[type="number"] {
+  width: 10ch;
+}
+
+</style>
+
+
+
+<!-- ================================================================== -->
+<form bind:this={form} on:submit|preventDefault={filter}>
+
+  {#if $state.table?.properties}
+
+    {#each $state.filters.attributes as attribute}
+      <fieldset>
+
+        <label for="">Filter by:</label>
+
+        <select name="name" bind:value={attribute.name} on:change={ () => { attribute.attribute_type = ($state.table.properties.find(property => property.name === attribute.name))?.attribute_type || 'id'; } }>
+          <option value="id">id</option>
+          {#each $state.table.properties as property}
+            <option value={property.name}>
+              {property.name}
+            </option>
+          {/each}
+        </select>
+
+        <input type="hidden" name="attribute_type" bind:value={attribute.attribute_type}>
+
+        {#if operations[attribute.attribute_type]}
+
+          <select name="operation" bind:value={attribute.operation}>
+            {#each operations[attribute.attribute_type] as operation}
+              <option value={operation}>{operation}</option>
+            {/each}
+          </select>
+
+          {#if attribute.operation === 'exists'}
+            <select name="value">
+              <option value="true">true</option>
+              <option value="false">false</option>
+            </select>
+          {:else if attribute.operation === 'range'}
+            <select name="maxFilter">
+              <option value="gt">&gt;</option>
+              <option value="gte">≥</option>
+            </select>
+            <input type="number" name="maxFilterValue" value={attribute.maxFilterValue}>
+            <select name="minFilter">
+              <option value="lt">&lt;</option>
+              <option value="lte">≤</option>
+            </select>
+            <input type="number" name="minFilterValue" value={attribute.minFilterValue}>
+          {:else}
+            <input type="text" name="value" bind:value={attribute.value} placeholder="filter value">
+          {/if}
+
+          <button type="submit" class="button">
+            <span class="label">Apply filters</span>
+            <Icon icon="arrowRight" />
+          </button>
+
+        {:else}
+
+          Unknow property type: <code>{attribute.attribute_type}</code>
+
+        {/if}
+
+      </fieldset>
+    {/each}
+
+  {/if}
+
+</form>

package/gui/v1/src/lib/database/Sort.svelte

@@ -0,0 +1,110 @@
+<!-- ================================================================== -->
+<script>
+
+// imports
+// ------------------------------------------------------------------------
+import { state } from '$lib/state.js';
+import { record } from '$lib/api/record.js';
+
+import Icon from '$lib/ui/Icon.svelte';
+
+
+// properties
+// ------------------------------------------------------------------------
+// main sorting form (dom node)
+let form;
+
+
+// purpose:		parses the <form>, saves new sorting to filters in the store and triggers records reload
+// ------------------------------------------------------------------------
+const filter = () => {
+  $state.filters.page = 1;
+
+  record.get({ table: $state.table.id, filters: $state.filters, sort: Object.fromEntries((new FormData(form)).entries()) });
+}
+
+</script>
+
+
+<!-- ================================================================== -->
+<style>
+
+form {
+  display: flex;
+  gap: 2px;
+  position: relative;
+}
+
+select[name="by"] {
+  max-width: 14ch;
+
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+select[name="order"] {
+  width: 50px;
+  position: absolute;
+  inset-inline-end: 0;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+label {
+  position: relative;
+
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+select:hover + label {
+  background-color: rgba(var(--color-rgb-interaction-hover), .2);
+}
+
+select:focus-visible + label {
+  box-shadow: 0 0 1px 2px var(--color-interaction-hover);
+}
+
+</style>
+
+
+
+<!-- ================================================================== -->
+<form bind:this={form} on:submit|preventDefault={filter}>
+
+  {#if $state.table?.properties}
+
+    <select name="by" id="sort_by" bind:value={$state.sort.by} on:change={() => form.requestSubmit()}>
+      <option value="created_at">created at</option>
+      <option value="updated_at">updated at</option>
+      <option value="id">id</option>
+      {#each $state.table.properties as property}
+        <option value={property.name}>
+          {property.name}
+        </option>
+      {/each}
+    </select>
+
+    <select name="order" id="sort_order" bind:value={$state.sort.order} on:change={() => form.requestSubmit()}>
+      <option value="DESC">DESC [Z→A]</option>
+      <option value="ASC">ASC [A→Z]</option>
+    </select>
+
+    <label for="sort_order" class="button">
+      {#if $state.sort.order === 'DESC'}
+        <Icon icon="sortZA" />
+      {:else}
+        <Icon icon="sortAZ" />
+      {/if}
+    </label>
+
+  {/if}
+
+</form>

package/gui/v1/src/lib/database/Table.svelte

@@ -0,0 +1,261 @@
+<!--
+  table view for records
+-->
+
+
+
+<!-- ================================================================== -->
+<script>
+
+// imports
+// ------------------------------------------------------------------------
+import { state } from '$lib/state.js';
+import { parseValue } from '$lib/parseValue.js'
+import { tryParseJSON } from '$lib/tryParseJSON.js';
+
+import Icon from '$lib/ui/Icon.svelte';
+import Delete from '$lib/database/Delete.svelte';
+import JSONTree from '$lib/ui/JSONTree.svelte';
+
+
+// properties
+// ------------------------------------------------------------------------
+// the extended menu for editing an record
+let contextMenu = {
+  // item id for which the context menu is opened for
+  id: null
+};
+
+</script>
+
+
+<!-- ================================================================== -->
+<style>
+
+table {
+  min-width: 100%;
+}
+
+thead {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+th {
+  background-color: var(--color-background);
+
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+  .type {
+    font-weight: 400;
+    color: var(--color-text-secondary);
+  }
+
+td, th {
+  padding: .6rem;
+  vertical-align: top;
+
+  border: 1px solid var(--color-frame);
+
+  transition: background-color .2s linear;
+}
+
+  .collapsed td {
+    max-width: 300px;
+    overflow: hidden;
+    vertical-align: middle;
+
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  td:first-child, th:first-child {
+    width: 4rem;
+    position: sticky;
+    left: 0;
+    z-index: 10;
+
+    border-inline-start: 0;
+    box-shadow: inset -4px 0 0 0 var(--color-frame);
+  }
+
+  td:first-child {
+    overflow: visible;
+
+    background-color: var(--color-page);
+  }
+
+  th.id {
+    text-align: end;
+  }
+
+  td .id {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: .7em;
+  }
+
+  .date span {
+    color: var(--color-text-secondary);
+  }
+
+.highlighted td {
+  background-color: var(--color-highlight);
+}
+
+.value-null {
+  text-transform: uppercase;
+  font-size: .9em;
+  color: var(--color-text-secondary);
+}
+
+.combo {
+  background-color: transparent;
+  opacity: 0;
+
+  transition: opacity .1s linear;
+}
+
+  .combo .button:first-child {
+    padding-inline: .1rem 0;
+  }
+
+  tr:hover .combo {
+    opacity: .5;
+  }
+
+  tr:hover .combo:hover {
+    opacity: 1;
+  }
+
+  tr:hover .combo .button:hover {
+    background-color: var(--color-background);
+  }
+
+
+.delete {
+  width: 50px;
+}
+
+/* extended menu */
+menu {
+  display: none;
+  position: absolute;
+  left: .5rem;
+  top: 100%;
+  z-index: 20;
+  overflow: hidden;
+
+  border-radius: 1rem;
+  white-space: nowrap;
+}
+
+menu.active {
+  display: block;
+}
+
+  td:first-child:hover {
+    z-index: 30;
+  }
+
+menu li + li {
+  border-block-start: 1px solid var(--color-context-input-background);
+}
+
+menu :global(button) {
+  width: 100%;
+  padding: .5rem 1rem;
+  display: flex;
+  align-items: center;
+  gap: .5em;
+  line-height: 0;
+}
+
+menu :global(button:hover) {
+  background-color: var(--color-context-button-background-hover);
+}
+
+menu li:last-child :global(button) {
+  padding-block-end: .6rem;
+}
+
+</style>
+
+
+
+<!-- ================================================================== -->
+{#if $state.table?.properties}
+  <table class={$state.view.tableStyle}>
+    <thead>
+      <tr>
+        <th class="id">id</th>
+          {#each $state.table.properties as property}
+            <th>{property.name} <small class="type">({property.attribute_type})</small></th>
+          {/each}
+        <th>created at</th>
+        <th>updated at</th>
+      </tr>
+    </thead>
+    {#if $state.records?.results?.length}
+      {#each $state.records?.results as record (record.id)}
+        <tr class:highlighted={$state.highlighted.record === record.id}>
+          <td on:mouseleave={() => contextMenu.id = null}>
+            <div class="id">
+              <div class="combo">
+                <button class="button compact more" on:click={() => contextMenu.id = record.id}>
+                  <span class="label">More options</span>
+                  <Icon icon="navigationMenuVertical" size="16" />
+                </button>
+                <button class="button compact edit" title="Edit record" on:click={() => { $state.record = record; }}>
+                  <span class="label">Edit record</span>
+                  <Icon icon="pencil" size="16" />
+                </button>
+              </div>
+              <menu class="content-context" class:active={contextMenu.id === record.id}>
+                <ul>
+                  <li>
+                    <button type="button" on:click={() => { $state.record = {...record}; $state.record.id = null; } }>
+                      <Icon icon="copy" size="22" />
+                      Copy record
+                    </button>
+                  </li>
+                  <li>
+                    <Delete table={$state.table} id={record.id} />
+                  </li>
+                </ul>
+              </menu>
+              {record.id}
+            </div>
+          </td>
+          {#each $state.table.properties as property}
+            {@const value = parseValue(record.properties[property.name], property.attribute_type)}
+            <td class:value-null={value.type === 'null'}>
+              {#if value.type === 'json' || value.type === 'jsonEscaped'}
+                {#if $state.view.tableStyle === 'expanded'}
+                  <JSONTree value={value.value} />
+                {:else}
+                  {JSON.stringify(value.value)}
+                {/if}
+              {:else}
+                {value.value}
+              {/if}
+            </td>
+          {/each}
+          <td class="date">
+            {(new Date(record?.created_at)).toLocaleDateString(undefined, {})}
+            <span>{(new Date(record?.created_at)).toLocaleTimeString(undefined, {})}</span>
+          </td>
+          <td class="date">
+            {(new Date(record?.updated_at)).toLocaleDateString(undefined, {})}
+            <span>{(new Date(record?.updated_at)).toLocaleTimeString(undefined, {})}</span>
+          </td>
+        </tr>
+      {/each}
+    {/if}
+  </table>
+{/if}