mirror of https://github.com/Budibase/budibase.git
Mel O'Hagan
4 years ago
58 changed files with 1968 additions and 1749 deletions
@ -0,0 +1,114 @@ |
|||
<script> |
|||
import { createEventDispatcher } from "svelte" |
|||
import RowSelectorTypes from "./RowSelectorTypes.svelte" |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
|
|||
export let value |
|||
export let bindings |
|||
export let block |
|||
export let isTestModal |
|||
|
|||
let schemaFields |
|||
|
|||
$: { |
|||
let fields = {} |
|||
|
|||
for (const [key, type] of Object.entries(block?.inputs?.fields)) { |
|||
fields = { |
|||
...fields, |
|||
[key]: { |
|||
type: type, |
|||
name: key, |
|||
fieldName: key, |
|||
constraints: { type: type }, |
|||
}, |
|||
} |
|||
|
|||
if (value[key] === type) { |
|||
value[key] = INITIAL_VALUES[type.toUpperCase()] |
|||
} |
|||
} |
|||
|
|||
schemaFields = Object.entries(fields) |
|||
} |
|||
|
|||
const INITIAL_VALUES = { |
|||
BOOLEAN: null, |
|||
NUMBER: null, |
|||
DATETIME: null, |
|||
STRING: "", |
|||
OPTIONS: [], |
|||
ARRAY: [], |
|||
} |
|||
|
|||
const coerce = (value, type) => { |
|||
const re = new RegExp(/{{([^{].*?)}}/g) |
|||
if (re.test(value)) { |
|||
return value |
|||
} |
|||
|
|||
if (type === "boolean") { |
|||
if (typeof value === "boolean") { |
|||
return value |
|||
} |
|||
return value === "true" |
|||
} |
|||
if (type === "number") { |
|||
if (typeof value === "number") { |
|||
return value |
|||
} |
|||
return Number(value) |
|||
} |
|||
if (type === "options") { |
|||
return [value] |
|||
} |
|||
if (type === "array") { |
|||
if (Array.isArray(value)) { |
|||
return value |
|||
} |
|||
return value.split(",").map(x => x.trim()) |
|||
} |
|||
|
|||
if (type === "link") { |
|||
if (Array.isArray(value)) { |
|||
return value |
|||
} |
|||
|
|||
return [value] |
|||
} |
|||
|
|||
return value |
|||
} |
|||
|
|||
const onChange = (e, field, type) => { |
|||
value[field] = coerce(e.detail, type) |
|||
dispatch("change", value) |
|||
} |
|||
</script> |
|||
|
|||
{#if schemaFields.length && isTestModal} |
|||
<div class="schema-fields"> |
|||
{#each schemaFields as [field, schema]} |
|||
<RowSelectorTypes |
|||
{isTestModal} |
|||
{field} |
|||
{schema} |
|||
{bindings} |
|||
{value} |
|||
{onChange} |
|||
/> |
|||
{/each} |
|||
</div> |
|||
{/if} |
|||
|
|||
<style> |
|||
.schema-fields { |
|||
display: grid; |
|||
grid-gap: var(--spacing-s); |
|||
margin-top: var(--spacing-s); |
|||
} |
|||
.schema-fields :global(label) { |
|||
text-transform: capitalize; |
|||
} |
|||
</style> |
|||
@ -1,7 +1,4 @@ |
|||
<script> |
|||
import ComponentListPanel from "./_components/navigation/ComponentListPanel.svelte" |
|||
import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte" |
|||
</script> |
|||
|
|||
<ComponentListPanel /> |
|||
<ComponentSettingsPanel /> |
|||
<!-- |
|||
Placeholder file so that routify works. |
|||
No unique content is needed in this index page. |
|||
--> |
|||
|
|||
@ -0,0 +1,5 @@ |
|||
<script> |
|||
import NewComponentPanel from "./_components/NewComponentPanel.svelte" |
|||
</script> |
|||
|
|||
<NewComponentPanel /> |
|||
@ -1,21 +0,0 @@ |
|||
<script> |
|||
import Panel from "components/design/Panel.svelte" |
|||
import { Body, Layout } from "@budibase/bbui" |
|||
import { selectedComponent, selectedScreen, store } from "builderStore" |
|||
|
|||
$: componentDefinition = store.actions.components.getDefinition( |
|||
$selectedComponent?._component |
|||
) |
|||
$: isScreen = $selectedComponent?._id === $selectedScreen?.props._id |
|||
$: title = isScreen ? "Screen" : $selectedComponent?._instanceName |
|||
$: position = componentDefinition?.hasChildren ? "inside" : "below" |
|||
</script> |
|||
|
|||
<Panel {title} icon={componentDefinition?.icon} borderLeft> |
|||
<Layout paddingX="L" paddingY="XL"> |
|||
<Body size="S"> |
|||
Components that you add will be placed {position} |
|||
{title} |
|||
</Body> |
|||
</Layout> |
|||
</Panel> |
|||
@ -1,26 +0,0 @@ |
|||
<script> |
|||
import NewComponentPanel from "./_components/NewComponentPanel.svelte" |
|||
import NewComponentTargetPanel from "./_components/NewComponentTargetPanel.svelte" |
|||
import { onMount } from "svelte" |
|||
import { store, selectedComponent, selectedScreen } from "builderStore" |
|||
import { redirect } from "@roxi/routify" |
|||
|
|||
// Select the screen slot as the target to add to, if no component |
|||
// is selected |
|||
onMount(() => { |
|||
if (!$selectedComponent) { |
|||
if ($selectedScreen) { |
|||
store.update(state => { |
|||
state.selectedComponentId = $selectedScreen.props._id |
|||
return state |
|||
}) |
|||
} else { |
|||
// Otherwise go back out of the add screen |
|||
$redirect("../") |
|||
} |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
<NewComponentPanel /> |
|||
<NewComponentTargetPanel /> |
|||
@ -0,0 +1,58 @@ |
|||
<script> |
|||
import { RoleUtils } from "@budibase/frontend-core" |
|||
import { Tooltip, StatusLight } from "@budibase/bbui" |
|||
import { roles } from "stores/backend" |
|||
import { Roles } from "constants/backend" |
|||
|
|||
export let roleId |
|||
|
|||
let showTooltip = false |
|||
|
|||
$: color = RoleUtils.getRoleColour(roleId) |
|||
$: role = $roles.find(role => role._id === roleId) |
|||
$: tooltip = |
|||
roleId === Roles.PUBLIC |
|||
? "This screen is open to the public" |
|||
: `Requires at least ${role?.name} access` |
|||
</script> |
|||
|
|||
<div |
|||
class="container" |
|||
on:mouseover={() => (showTooltip = true)} |
|||
on:mouseleave={() => (showTooltip = false)} |
|||
style="--color: {color};" |
|||
> |
|||
<StatusLight square {color} /> |
|||
{#if showTooltip} |
|||
<div class="tooltip"> |
|||
<Tooltip textWrapping text={tooltip} direction="left" /> |
|||
</div> |
|||
{/if} |
|||
</div> |
|||
|
|||
<style> |
|||
.container { |
|||
position: relative; |
|||
} |
|||
.tooltip { |
|||
z-index: 1; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: calc(50% - 8px); |
|||
transform: translateX(-100%) translateY(-50%); |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-end; |
|||
width: 130px; |
|||
pointer-events: none; |
|||
} |
|||
.tooltip :global(.spectrum-Tooltip) { |
|||
background: var(--color); |
|||
color: white; |
|||
font-weight: 600; |
|||
max-width: 130px; |
|||
} |
|||
.tooltip :global(.spectrum-Tooltip-tip) { |
|||
border-top-color: var(--color); |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
File diff suppressed because it is too large
Loading…
Reference in new issue