Refactor subjects
This commit is contained in:
Gerard Burns
parent
c30f5f5781
commit
38e4b92ae8
|
|
@ -1,10 +1,6 @@
|
|||
<script>
|
||||
import { Icon, Heading, Multiselect, ContextTooltip } from "@budibase/bbui"
|
||||
import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
|
||||
import { selectedScreen } from "stores/builder"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import Property from './Property.svelte'
|
||||
import { InfoWord } from '../typography'
|
||||
import { ContextTooltip } from "@budibase/bbui"
|
||||
import { Column, Support, NotRequired, StringsAsNumbers } from './subjects'
|
||||
|
||||
export let anchor
|
||||
export let schema
|
||||
|
|
@ -18,133 +14,22 @@
|
|||
{anchor}
|
||||
offset={20}
|
||||
>
|
||||
<div class="explanationModalContent">
|
||||
{#if subject === "column"}
|
||||
<div class="heading wrapper">
|
||||
<span class="heading">Column Overview</span>
|
||||
</div>
|
||||
<div class="divider" />
|
||||
<div class="section">
|
||||
{#if schema.type === "string"}
|
||||
<Property
|
||||
name="Max Length"
|
||||
value={schema?.constraints?.length?.maximum ?? "None"}
|
||||
/>
|
||||
{:else if schema.type === "datetime"}
|
||||
<Property
|
||||
name="Earliest"
|
||||
value={schema?.constraints?.datetime?.earliest === "" ? "None" : schema?.constraints?.datetime?.earliest}
|
||||
/>
|
||||
<Property
|
||||
name="Latest"
|
||||
value={schema?.constraints?.datetime?.latest === "" ? "None" : schema?.constraints?.datetime?.latest}
|
||||
/>
|
||||
<Property
|
||||
name="Ignore time zones"
|
||||
value={schema?.ignoreTimeZones === true ? "Yes" : "No"}
|
||||
/>
|
||||
<Property
|
||||
name="Date only"
|
||||
value={schema?.dateOnly === true ? "Yes" : "No"}
|
||||
/>
|
||||
{:else if schema.type === "number"}
|
||||
<Property
|
||||
name="Min Value"
|
||||
value={schema?.constraints?.numericality?.greaterThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.greaterThanOrEqualTo}
|
||||
/>
|
||||
<Property
|
||||
name="Max Value"
|
||||
value={schema?.constraints?.numericality?.lessThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.lessThanOrEqualTo}
|
||||
/>
|
||||
{:else if schema.type === "json"}
|
||||
<Property
|
||||
pre
|
||||
name="Schema"
|
||||
value={JSON.stringify(schema?.schema ?? {}, null, 2)}
|
||||
/>
|
||||
{/if}
|
||||
<Property
|
||||
name="Required"
|
||||
value={schema?.constraints?.presence?.allowEmpty === false ? "Yes" : "No"}
|
||||
/>
|
||||
</div>
|
||||
{:else if subject === "support"}
|
||||
<span class="heading">Data/Component Compatibility</span>
|
||||
<div class="divider" />
|
||||
<div class="section">
|
||||
<InfoWord
|
||||
icon="CheckmarkCircle"
|
||||
color="var(--green)"
|
||||
text="Compatible"
|
||||
/>
|
||||
<span class="body">Fully compatible with the component as long as the data is present.</span>
|
||||
</div>
|
||||
<div class="section">
|
||||
<InfoWord
|
||||
icon="AlertCheck"
|
||||
color="var(--yellow)"
|
||||
text="Possibly compatible"
|
||||
/>
|
||||
<span class="body">Possibly compatible with the component, but beware of other caveats mentioned in the context tooltip.</span>
|
||||
</div>
|
||||
<div class="section">
|
||||
<InfoWord
|
||||
icon="Alert"
|
||||
color="var(--red)"
|
||||
text="Not compatible"
|
||||
/>
|
||||
<span class="body">Imcompatible with the component.</span>
|
||||
</div>
|
||||
|
||||
|
||||
{:else if subject === "stringsAndNumbers"}
|
||||
<span class="heading">Text as Numbers</span>
|
||||
<div class="divider" />
|
||||
<div class="section">
|
||||
Text can be used in place of numbers in certain scenarios, but care needs to be taken to ensure that non-numerical values aren't also present, otherwise they may be parsed incorrectly and lead to unexpected behavior.
|
||||
</div>
|
||||
{:else if subject === "required"}
|
||||
<span class="heading">'Required' Constraint</span>
|
||||
<div class="divider" />
|
||||
<div class="section">
|
||||
<span class="body">A 'required' contraint can be applied to columns to ensure a value is always present. If a column doesn't have this constraint, then its value for a particular row could he missing.</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="explanationModalContent">
|
||||
{#if subject === "column"}
|
||||
<Column {schema} />
|
||||
{:else if subject === "support"}
|
||||
<Support />
|
||||
{:else if subject === "stringsAndNumbers"}
|
||||
<StringsAsNumbers />
|
||||
{:else if subject === "required"}
|
||||
<NotRequired />
|
||||
{/if}
|
||||
</div>
|
||||
</ContextTooltip>
|
||||
|
||||
<style>
|
||||
.explanationModalContent {
|
||||
max-width: 300px;
|
||||
padding: 16px 12px 18px;
|
||||
padding: 16px 12px 6px;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid var(--grey-4);
|
||||
margin: 12px 0 12px;
|
||||
}
|
||||
|
||||
|
||||
.section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.section:last-child {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section .body {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* BETWEEN STUFF */
|
||||
/* BETWEEN STUFF */
|
||||
/* BETWEEN STUFF */
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
<script>
|
||||
import { Subject, Property, Section } from './components'
|
||||
|
||||
export let schema
|
||||
</script>
|
||||
|
||||
|
||||
<Subject heading="Column Overview">
|
||||
<Section>
|
||||
{#if schema.type === "string"}
|
||||
<Property
|
||||
name="Max Length"
|
||||
value={schema?.constraints?.length?.maximum ?? "None"}
|
||||
/>
|
||||
{:else if schema.type === "datetime"}
|
||||
<Property
|
||||
name="Earliest"
|
||||
value={schema?.constraints?.datetime?.earliest === "" ? "None" : schema?.constraints?.datetime?.earliest}
|
||||
/>
|
||||
<Property
|
||||
name="Latest"
|
||||
value={schema?.constraints?.datetime?.latest === "" ? "None" : schema?.constraints?.datetime?.latest}
|
||||
/>
|
||||
<Property
|
||||
name="Ignore time zones"
|
||||
value={schema?.ignoreTimeZones === true ? "Yes" : "No"}
|
||||
/>
|
||||
<Property
|
||||
name="Date only"
|
||||
value={schema?.dateOnly === true ? "Yes" : "No"}
|
||||
/>
|
||||
{:else if schema.type === "number"}
|
||||
<Property
|
||||
name="Min Value"
|
||||
value={schema?.constraints?.numericality?.greaterThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.greaterThanOrEqualTo}
|
||||
/>
|
||||
<Property
|
||||
name="Max Value"
|
||||
value={schema?.constraints?.numericality?.lessThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.lessThanOrEqualTo}
|
||||
/>
|
||||
{:else if schema.type === "json"}
|
||||
<Property
|
||||
pre
|
||||
name="Schema"
|
||||
value={JSON.stringify(schema?.schema ?? {}, null, 2)}
|
||||
/>
|
||||
{/if}
|
||||
<Property
|
||||
name="Required"
|
||||
value={schema?.constraints?.presence?.allowEmpty === false ? "Yes" : "No"}
|
||||
/>
|
||||
</Section>
|
||||
</Subject>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script>
|
||||
import { Subject, Section } from './components'
|
||||
</script>
|
||||
|
||||
<Subject heading="'Required' Constraint">
|
||||
<Section>
|
||||
A 'required' contraint can be applied to columns to ensure a value is always present. If a column doesn't have this constraint, then its value for a particular row could he missing.
|
||||
</Section>
|
||||
</Subject>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script>
|
||||
import { Subject, Section } from './components'
|
||||
</script>
|
||||
|
||||
<Subject heading="Text as Numbers">
|
||||
<Section>
|
||||
Text can be used in place of numbers in certain scenarios, but care needs to be taken to ensure that non-numerical values aren't also present, otherwise they may be parsed incorrectly and lead to unexpected behavior.
|
||||
</Section>
|
||||
</Subject>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<script>
|
||||
import { InfoWord } from '../../typography'
|
||||
import { Subject, Section } from './components'
|
||||
</script>
|
||||
|
||||
<Subject heading="Data/Component Compatibility">
|
||||
<Section>
|
||||
<InfoWord
|
||||
icon="CheckmarkCircle"
|
||||
color="var(--green)"
|
||||
text="Compatible"
|
||||
/>
|
||||
<span class="body">Fully compatible with the component as long as the data is present.</span>
|
||||
</Section>
|
||||
<Section>
|
||||
<InfoWord
|
||||
icon="AlertCheck"
|
||||
color="var(--yellow)"
|
||||
text="Possibly compatible"
|
||||
/>
|
||||
<span class="body">Possibly compatible with the component, but beware of other caveats mentioned in the context tooltip.</span>
|
||||
</Section>
|
||||
<Section>
|
||||
<InfoWord
|
||||
icon="Alert"
|
||||
color="var(--red)"
|
||||
text="Not compatible"
|
||||
/>
|
||||
<span class="body">Imcompatible with the component.</span>
|
||||
</Section>
|
||||
</Subject>
|
||||
|
||||
<style>
|
||||
.body {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<div class="section">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<script>
|
||||
export let heading = ""
|
||||
</script>
|
||||
|
||||
<div class="heading">
|
||||
<span class="heading">
|
||||
<slot name="heading">
|
||||
{heading}
|
||||
</slot>
|
||||
</span>
|
||||
</div>
|
||||
<div class="divider" />
|
||||
<slot />
|
||||
|
||||
<style>
|
||||
.heading {
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid var(--grey-4);
|
||||
margin: 12px 0 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export { default as Subject } from "./Subject.svelte"
|
||||
export { default as Property } from "./Property.svelte"
|
||||
export { default as Section } from "./Section.svelte"
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
export { default as Column } from "./Column.svelte"
|
||||
export { default as NotRequired } from "./NotRequired.svelte"
|
||||
export { default as StringsAsNumbers } from "./StringsAsNumbers.svelte"
|
||||
export { default as Support } from "./Support.svelte"
|
||||
Loading…
Reference in New Issue