explanation modal
This commit is contained in:
Gerard Burns
parent
d1c043b993
commit
906feeca46
|
|
@ -6,6 +6,7 @@
|
||||||
import Property from './Property.svelte'
|
import Property from './Property.svelte'
|
||||||
import InfoWord from './InfoWord.svelte'
|
import InfoWord from './InfoWord.svelte'
|
||||||
import DocumentationLink from './DocumentationLink.svelte'
|
import DocumentationLink from './DocumentationLink.svelte'
|
||||||
|
import ExplanationModal from './ExplanationModal/index.svelte'
|
||||||
|
|
||||||
export let supportLevelClass = ''
|
export let supportLevelClass = ''
|
||||||
export let supportLevelIconColor = ""
|
export let supportLevelIconColor = ""
|
||||||
|
|
@ -16,7 +17,7 @@
|
||||||
export let columnIcon
|
export let columnIcon
|
||||||
export let columnType
|
export let columnType
|
||||||
export let columnName
|
export let columnName
|
||||||
export let sidecar = false
|
export let explanationModal = false
|
||||||
|
|
||||||
export let errors = []
|
export let errors = []
|
||||||
export let warnings = []
|
export let warnings = []
|
||||||
|
|
@ -54,15 +55,15 @@
|
||||||
|
|
||||||
$: docLink = getDocLink(columnType);
|
$: docLink = getDocLink(columnType);
|
||||||
|
|
||||||
let sidecarSubject = null
|
let explanationModalSubject = null
|
||||||
|
|
||||||
const handleMouseenter = (option, idx) => {
|
const handleMouseenter = (option, idx) => {
|
||||||
sidecarSubject = option;
|
explanationModalSubject = option;
|
||||||
root = root
|
root = root
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleMouseleave = (option) => {
|
const handleMouseleave = (option) => {
|
||||||
sidecarSubject = null;
|
explanationModalSubject = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -151,112 +152,15 @@
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if sidecar}
|
<ExplanationModal
|
||||||
<ContextTooltip
|
anchor={root}
|
||||||
noAnimation
|
{schema}
|
||||||
visible={sidecarSubject !== null}
|
subject={explanationModalSubject}
|
||||||
anchor={root}
|
/>
|
||||||
offset={20}
|
|
||||||
>
|
|
||||||
<div class="sidecarContent">
|
|
||||||
{#if sidecarSubject === "column"}
|
|
||||||
<div class="heading wrapper">
|
|
||||||
<span class="heading">{columnName}</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 sidecarSubject === "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 sidecarSubject === "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 sidecarSubject === "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>
|
|
||||||
</ContextTooltip>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
.sidecarContent {
|
.explanationModalContent {
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
padding: 16px 12px 18px;
|
padding: 16px 12px 18px;
|
||||||
}
|
}
|
||||||
|
|
@ -319,14 +223,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.bullet {
|
.bullet {
|
||||||
color: var(--grey-5);
|
color: var(--grey-6);
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
display: inline block;
|
display: inline block;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.period {
|
.period {
|
||||||
color: var(--grey-5);
|
color: var(--grey-6);
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
display: inline block;
|
display: inline block;
|
||||||
margin-left: 3px;
|
margin-left: 3px;
|
||||||
|
|
@ -334,7 +238,7 @@
|
||||||
|
|
||||||
.comma {
|
.comma {
|
||||||
margin-left: 2px;
|
margin-left: 2px;
|
||||||
color: var(--grey-5);
|
color: var(--grey-6);
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
display: inline block;
|
display: inline block;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
<script>
|
||||||
|
export let name;
|
||||||
|
export let value;
|
||||||
|
export let pre;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="property">
|
||||||
|
|
||||||
|
{#if pre}
|
||||||
|
<pre class="pre propertyValue">
|
||||||
|
{value}
|
||||||
|
</pre>
|
||||||
|
{:else}
|
||||||
|
<span class="propertyName">
|
||||||
|
{name}
|
||||||
|
</span>
|
||||||
|
<span class="propertyDivider">-</span>
|
||||||
|
<span class="propertyValue">
|
||||||
|
{value}
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.propertyDivider {
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.propertyName {
|
||||||
|
font-style: italic;
|
||||||
|
|
||||||
|
}
|
||||||
|
.pre {
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 3px;
|
||||||
|
width: 250px;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,150 @@
|
||||||
|
<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 '../InfoWord.svelte'
|
||||||
|
|
||||||
|
export let anchor
|
||||||
|
export let schema
|
||||||
|
export let subject = null
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<ContextTooltip
|
||||||
|
noAnimation
|
||||||
|
visible={subject !== null}
|
||||||
|
{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>
|
||||||
|
</ContextTooltip>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.explanationModalContent {
|
||||||
|
max-width: 300px;
|
||||||
|
padding: 16px 12px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
Loading…
Reference in New Issue