refactor stuff
This commit is contained in:
Gerard Burns
parent
82294c55ce
commit
b0bc5ff64b
|
|
@ -1,13 +1,7 @@
|
|||
<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'
|
||||
import DocumentationLink from './DocumentationLink.svelte'
|
||||
import ExplanationModal from './ExplanationModal/index.svelte'
|
||||
import { warnings, errors } from "../../fieldValidator";
|
||||
import { Column, Support, NotRequired, StringNumber } from "./lines"
|
||||
|
||||
export let support = {}
|
||||
|
||||
|
|
@ -22,45 +16,12 @@
|
|||
|
||||
let root = null;
|
||||
|
||||
const getDocLink = (columnType) => {
|
||||
if (columnType === "Number") {
|
||||
return "https://docs.budibase.com/docs/number"
|
||||
}
|
||||
if (columnType === "Text") {
|
||||
return "https://docs.budibase.com/docs/text"
|
||||
}
|
||||
if (columnType === "Attachment") {
|
||||
return "https://docs.budibase.com/docs/attachments"
|
||||
}
|
||||
if (columnType === "Multi-select") {
|
||||
return "https://docs.budibase.com/docs/multi-select"
|
||||
}
|
||||
if (columnType === "JSON") {
|
||||
return "https://docs.budibase.com/docs/json"
|
||||
}
|
||||
if (columnType === "Date/Time") {
|
||||
return "https://docs.budibase.com/docs/datetime"
|
||||
}
|
||||
if (columnType === "User") {
|
||||
return "https://docs.budibase.com/docs/user"
|
||||
}
|
||||
|
||||
return ""
|
||||
}
|
||||
|
||||
$: docLink = getDocLink(columnType);
|
||||
|
||||
let explanationModalSubject = null
|
||||
|
||||
const handleMouseenter = (option) => {
|
||||
const setExplanationSubject = (option) => {
|
||||
explanationModalSubject = option;
|
||||
root = root
|
||||
}
|
||||
|
||||
const handleMouseleave = () => {
|
||||
explanationModalSubject = null;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div
|
||||
|
|
@ -68,83 +29,26 @@
|
|||
class="tooltipContents"
|
||||
>
|
||||
|
||||
<div class="line">
|
||||
<span class="bullet">•</span>
|
||||
<InfoWord
|
||||
on:mouseenter={() => handleMouseenter("column")}
|
||||
on:mouseleave={handleMouseleave}
|
||||
href={tableHref}
|
||||
text={columnName}
|
||||
/>
|
||||
<span class="space" />
|
||||
<span class="text"> is a </span>
|
||||
<span class="space" />
|
||||
<DocumentationLink
|
||||
href={docLink}
|
||||
icon={columnIcon}
|
||||
text={`${columnType} column`}
|
||||
/>
|
||||
<span class="period">.</span>
|
||||
</div>
|
||||
<div class="line">
|
||||
<span class="bullet">•</span>
|
||||
<InfoWord
|
||||
on:mouseenter={() => handleMouseenter("support")}
|
||||
on:mouseleave={handleMouseleave}
|
||||
href={tableHref}
|
||||
icon={support.icon}
|
||||
color={support.iconColor}
|
||||
text={support.text}
|
||||
/>
|
||||
<span class="space" />
|
||||
<span class="text">with</span>
|
||||
<span class="space" />
|
||||
<DocumentationLink
|
||||
href="https://docs.budibase.com/docs/chart"
|
||||
icon="GraphPie"
|
||||
text="Chart components"
|
||||
/>
|
||||
<span class="period">.</span>
|
||||
</div>
|
||||
<Column
|
||||
{columnName}
|
||||
{columnIcon}
|
||||
{columnType}
|
||||
{tableHref}
|
||||
{setExplanationSubject}
|
||||
/>
|
||||
<Support
|
||||
{support}
|
||||
{setExplanationSubject}
|
||||
/>
|
||||
{#if support?.warnings?.includes(warnings.stringAsNumber)}
|
||||
<div class={`line`}>
|
||||
<span class="bullet">•</span>
|
||||
<span class="text">Any</span>
|
||||
<span class="space" />
|
||||
<InfoWord
|
||||
on:mouseenter={() => handleMouseenter("stringsAndNumbers")}
|
||||
on:mouseleave={handleMouseleave}
|
||||
text="non-number values"
|
||||
<StringNumber
|
||||
{setExplanationSubject}
|
||||
/>
|
||||
<span class="space" />
|
||||
<span class="text">
|
||||
will be ignored
|
||||
</span>
|
||||
<span class="period">.</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if support?.warnings?.includes(warnings.notRequired)}
|
||||
<div class={`line`}>
|
||||
<span class="bullet">•</span>
|
||||
<span class="text">No</span>
|
||||
<span class="space" />
|
||||
<InfoWord
|
||||
on:mouseenter={() => handleMouseenter("required")}
|
||||
on:mouseleave={handleMouseleave}
|
||||
text="required"
|
||||
<NotRequired
|
||||
{setExplanationSubject}
|
||||
/>
|
||||
<span class="space" />
|
||||
<DocumentationLink
|
||||
icon="DataUnavailable"
|
||||
href="https://docs.budibase.com/docs/budibasedb#constraints"
|
||||
text="Constraint"
|
||||
/>
|
||||
<span class="comma">,</span>
|
||||
<span class="text">
|
||||
so values may be missing
|
||||
</span>
|
||||
<span class="period">.</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
|
@ -158,10 +62,6 @@
|
|||
{/if}
|
||||
|
||||
<style>
|
||||
.text {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tooltipContents {
|
||||
max-width: 450px;
|
||||
background-color: var(--background-alt);
|
||||
|
|
@ -170,49 +70,4 @@
|
|||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bullet {
|
||||
color: var(--grey-6);
|
||||
font-size: 17px;
|
||||
display: inline block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.period {
|
||||
color: var(--grey-6);
|
||||
font-size: 20px;
|
||||
display: inline block;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.comma {
|
||||
margin-left: 2px;
|
||||
color: var(--grey-6);
|
||||
font-size: 17px;
|
||||
display: inline block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.semiColon {
|
||||
color: var(--grey-5);
|
||||
font-size: 16px;
|
||||
display: inline block;
|
||||
}
|
||||
|
||||
.space {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.line {
|
||||
background-color: var(--background-alt);
|
||||
color: var(--ink);
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.line:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
import { selectedScreen } from "stores/builder"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import Property from './Property.svelte'
|
||||
import InfoWord from '../InfoWord.svelte'
|
||||
import { InfoWord } from '../typography'
|
||||
|
||||
export let anchor
|
||||
export let schema
|
||||
|
|
|
|||
|
|
@ -1,9 +1,53 @@
|
|||
|
||||
<script>
|
||||
import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
|
||||
|
||||
export let columnName
|
||||
export let columnIcon
|
||||
export let columnType
|
||||
export let tableHref
|
||||
export let setExplanationSubject
|
||||
|
||||
const getDocLink = (columnType) => {
|
||||
if (columnType === "Number") {
|
||||
return "https://docs.budibase.com/docs/number"
|
||||
}
|
||||
if (columnType === "Text") {
|
||||
return "https://docs.budibase.com/docs/text"
|
||||
}
|
||||
if (columnType === "Attachment") {
|
||||
return "https://docs.budibase.com/docs/attachments"
|
||||
}
|
||||
if (columnType === "Multi-select") {
|
||||
return "https://docs.budibase.com/docs/multi-select"
|
||||
}
|
||||
if (columnType === "JSON") {
|
||||
return "https://docs.budibase.com/docs/json"
|
||||
}
|
||||
if (columnType === "Date/Time") {
|
||||
return "https://docs.budibase.com/docs/datetime"
|
||||
}
|
||||
if (columnType === "User") {
|
||||
return "https://docs.budibase.com/docs/user"
|
||||
}
|
||||
|
||||
return ""
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<Line>
|
||||
<InfoWord
|
||||
on:mouseenter={() => setExplanationSubject("column")}
|
||||
on:mouseleave={() => setExplanationSubject(null)}
|
||||
href={tableHref}
|
||||
text={columnName}
|
||||
/>
|
||||
<Space />
|
||||
<Text>is a</Text>
|
||||
<Space />
|
||||
<DocumentationLink
|
||||
href={getDocLink(columnType)}
|
||||
icon={columnIcon}
|
||||
text={`${columnType} column`}
|
||||
/>
|
||||
<Period />
|
||||
</Line>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,30 @@
|
|||
|
||||
<script>
|
||||
import { Line, InfoWord, DocumentationLink, Space, Text, Period, Comma } from "../typography"
|
||||
|
||||
export let setExplanationSubject
|
||||
</script>
|
||||
|
||||
<div>
|
||||
</div>
|
||||
|
||||
<Line>
|
||||
<Text>No</Text>
|
||||
<Space />
|
||||
<InfoWord
|
||||
on:mouseenter={() => setExplanationSubject("required")}
|
||||
on:mouseleave={() => setExplanationSubject(null)}
|
||||
text="required"
|
||||
/>
|
||||
<Space />
|
||||
<DocumentationLink
|
||||
icon="DataUnavailable"
|
||||
href="https://docs.budibase.com/docs/budibasedb#constraints"
|
||||
text="Constraint"
|
||||
/>
|
||||
<Comma />
|
||||
<Text>
|
||||
so values may be missing
|
||||
</Text>
|
||||
<Period />
|
||||
</Line>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,17 @@
|
|||
|
||||
<script>
|
||||
import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
|
||||
export let setExplanationSubject
|
||||
</script>
|
||||
|
||||
<div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<Line>
|
||||
<Text>Any</Text>
|
||||
<Space />
|
||||
<InfoWord
|
||||
on:mouseenter={() => setExplanationSubject("stringsAndNumbers")}
|
||||
on:mouseleave={() => setExplanationSubject(null)}
|
||||
text="non-number values"
|
||||
/>
|
||||
<Space />
|
||||
<Text>will be ignored</Text>
|
||||
<Period />
|
||||
</Line>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,25 @@
|
|||
<script>
|
||||
import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
|
||||
|
||||
export let setExplanationSubject
|
||||
export let support
|
||||
</script>
|
||||
|
||||
<div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<Line>
|
||||
<InfoWord
|
||||
on:mouseenter={() => setExplanationSubject("support")}
|
||||
on:mouseleave={() => setExplanationSubject(null)}
|
||||
icon={support.icon}
|
||||
color={support.iconColor}
|
||||
text={support.text}
|
||||
/>
|
||||
<Space />
|
||||
<Text>with</Text>
|
||||
<Space />
|
||||
<DocumentationLink
|
||||
href="https://docs.budibase.com/docs/chart"
|
||||
icon="GraphPie"
|
||||
text="Chart components"
|
||||
/>
|
||||
<Period />
|
||||
</Line>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
<span class="text"><slot /></span>
|
||||
|
||||
<style>
|
||||
.text {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
export { default as Space } from "./Space.svelte"
|
||||
export { default as Comma } from "./Comma.svelte"
|
||||
export { default as Period } from "./Period.svelte"
|
||||
export { default as Text } from "./Text.svelte"
|
||||
export { default as InfoWord } from "./InfoWord.svelte"
|
||||
export { default as DocumentationLink } from "./DocumentationLink.svelte"
|
||||
export { default as Line } from "./Line.svelte"
|
||||
|
|
|
|||
Loading…
Reference in New Issue