bandolier-website/client/components/Form.svelte

<script>
  import { link } from 'svelte-spa-router';
  import FormField from "./FormField.svelte";
  import { fade } from 'svelte/transition';

  export let data = {_errors: {}, _valid: false};
  export let schema = {};
  export let table = "";
  export let notice = "";

  console.log("SCHEMA IS", schema, "DATA IS", data);
</script>

<style>
  span#help-overlay {
    font-size: 0.6em;
  }
</style>

<section>
  <form>
    <card>
      <top>
        <h1><a href="/admin/table/{ table }/" use:link>{ table }</a></h1>
        {#if data._errors && data._errors.main}
          <error data-testid="update-error">{ data._errors.main }</error>
        {:else if notice}
          <b in:fade|local class="notice">{ notice }</b>
        {/if}
      </top>

      <middle>
      {#each Object.getOwnPropertyNames(schema) as label}
        <FormField form={ data } field={ label } 
                   label={ label }>
          <span id="help-overlay">
            {schema[label]["defaultValue"]}| 
            {schema[label]["maxLength"]}|
            {schema[label]["nullable"]}|
            {schema[label]["type"]}
          </span>
          <input disabled={ label == "id" } name={ label } id={ label } bind:value={ data[label] }>
        </FormField>
      {/each}
      </middle>

      <bottom>
        <button-group>
        <slot></slot>
        </button-group>
      </bottom>
    </card>
  </form>
</section>