rolens/frontend/src/organisms/connection/collection/components/querychooser.svelte

<script>
  import Icon from '../../../../components/icon.svelte';
  import { createEventDispatcher } from 'svelte';
  import Modal from '../../../../components/modal.svelte';
  import { input } from '../../../../lib/actions';
  import queries from '../../../../lib/stores/queries';
  import Grid from '../../../../components/grid.svelte';
  import Hint from '../../../../components/hint.svelte';

  export let queryToSave = undefined;
  export let collection = {};
  export let show = false;

  const dispatch = createEventDispatcher();
  let gridSelectedPath = [];
  let selectedKey = '';

  function submit() {
    if (queryToSave) {
      queryToSave.hostKey = collection.hostKey;
      queryToSave.dbKey = collection.dbKey;
      queryToSave.collKey = collection.key;

      const newId = queries.create(queryToSave);

      if (newId) {
        dispatch('created', newId);
        queryToSave = undefined;
        selectedKey = newId;
        select();
      }
    }
    else {
      select();
    }
  }

  function select() {
    dispatch('select', selectedKey);
    show = false;
  }

  function gridSelect(event) {
    if (event?.detail?.level === 0) {
      selectedKey = event.detail.itemKey;

      if (queryToSave) {
        queryToSave.name = event.detail.itemKey;
      }
    }
  }

  function gridTrigger(event) {
    gridSelect(event);
    select();
  }

  async function gridRemove(event) {
    await queries.remove(event.detail);
  }

  $: if (queryToSave && !queryToSave.name) {
    queryToSave.name = 'New query';
  }
  $: if (queryToSave?.name) {
    gridSelectedPath = [ queryToSave.name ];
  }
  $: if (selectedKey) {
    gridSelectedPath = [ selectedKey ];
  }
</script>

<Modal bind:show title={queryToSave ? 'Save query' : 'Load query'} width="500px">
  <form on:submit|preventDefault={submit}>
    {#if queryToSave}
      <label class="field queryname">
        <span class="label">Query name</span>
        <input type="text" bind:value={queryToSave.name} use:input={{ autofocus: true }} />
      </label>
      <label class="field">
        <textarea bind:value={queryToSave.remarks} placeholder="Remarks…" use:input></textarea>
      </label>
    {/if}

    <div class="querylist">
      <Grid
        columns={[ { key: 'name', title: 'Query name' } ]}
        items={$queries}
        showHeaders={true}
        canRemoveItems={true}
        bind:activePath={gridSelectedPath}
        on:select={gridSelect}
        on:trigger={gridTrigger}
        on:removeItem={gridRemove}
      />
    </div>

    {#if queryToSave}
      <button class="btn" type="submit">
        <Icon name="save" /> Save query
      </button>

      {#if Object.keys($queries).includes(queryToSave.name)}
        <Hint>
          You are about to <strong>overwrite</strong> a saved query. Rename it
          if you do not want to overwrite.
        </Hint>
      {/if}
    {:else}
      <button class="btn" type="submit" disabled={!selectedKey}>
        <Icon name="upload" /> Load query
      </button>
    {/if}
  </form>
</Modal>

<style>
  .field, .querylist {
    margin-bottom: 0.5rem;
  }

  textarea {
    min-height: 100px;
  }

  .querylist {
    border: 1px solid #ccc;
    min-height: 200px;
  }

  .btn + :global(.hint) {
    margin-top: 0.5rem;
  }
</style>