This is a parody of leetcode.com for designers. It's being developed live on Twitch.tv/zedashaw to demonstrate how to make a parody of a website.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
pixelperfectionist/client/components/Form.svelte

55 lines
1.4 KiB

<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>