1
0
Fork 0
mirror of synced 2024-09-20 19:33:10 +12:00
budibase/packages/builder/src/userInterface/EditComponentProps.svelte

215 lines
4.6 KiB
Svelte
Raw Normal View History

2019-08-17 02:48:45 +12:00
<script>
import PropsView from "./PropsView.svelte";
import { store } from "../builderStore";
import { isRootComponent } from "./pagesParsing/searchComponents";
import IconButton from "../common/IconButton.svelte";
import Textbox from "../common/Textbox.svelte";
import UIkit from "uikit";
import { pipe } from "../common/core";
import {
getScreenInfo
2019-08-17 02:48:45 +12:00
} from "./pagesParsing/createProps";
import Button from "../common/Button.svelte";
import ButtonGroup from "../common/ButtonGroup.svelte";
import {
cloneDeep,
2019-08-17 02:48:45 +12:00
join,
split,
map,
keys,
isUndefined,
last
} from "lodash/fp";
import { assign } from "lodash";
let component;
let name = "";
let description = "";
let tagsString = "";
let nameInvalid = "";
let componentInfo;
let modalElement
let propsValidationErrors = [];
2019-10-03 18:12:13 +13:00
let originalName="";
let components;
2019-10-03 18:12:13 +13:00
let ignoreStore = false;
2019-08-19 19:51:01 +12:00
2019-08-17 02:48:45 +12:00
$: shortName = last(name.split("/"));
store.subscribe(s => {
2019-10-03 18:12:13 +13:00
if(ignoreStore) return;
2019-08-17 02:48:45 +12:00
component = s.currentFrontEndItem;
if(!component) return;
2019-10-03 18:12:13 +13:00
originalName = component.name;
2019-08-17 02:48:45 +12:00
name = component.name;
description = component.description;
tagsString = join(", ")(component.tags);
componentInfo = s.currentComponentInfo;
components = s.components;
2019-08-17 02:48:45 +12:00
});
const save = () => {
2019-10-03 18:12:13 +13:00
ignoreStore = true;
if(!validate()) {
ignoreStore = false;
return;
}
2019-08-17 02:48:45 +12:00
2019-10-07 18:03:41 +13:00
component.name = originalName || name;
2019-08-17 02:48:45 +12:00
component.description = description;
component.tags = pipe(tagsString, [
split(","),
map(s => s.trim())
]);
store.saveScreen(component);
2019-10-03 18:12:13 +13:00
ignoreStore = false;
// now do the rename
if(name !== originalName) {
store.renameScreen(originalName, name);
2019-10-03 18:12:13 +13:00
}
2019-08-17 02:48:45 +12:00
}
const deleteComponent = () => {
showDialog();
}
const confirmDeleteComponent = () => {
store.deleteScreen(component.name);
2019-08-17 02:48:45 +12:00
hideDialog();
}
const onPropsValidate = result => {
propsValidationErrors = result;
}
2019-08-19 19:51:01 +12:00
const updateComponent = doChange => {
const newComponent = cloneDeep(component);
doChange(newComponent);
component = newComponent;
componentInfo = getScreenInfo(components, newComponent);
2019-08-19 19:51:01 +12:00
}
const onPropsChanged = newProps => {
updateComponent(newComponent =>
2019-08-19 19:51:01 +12:00
assign(newComponent.props, newProps));
2019-08-17 02:48:45 +12:00
}
const validate = () => {
const fieldInvalid = (field, err) =>
2019-08-17 02:48:45 +12:00
errors[field] = err;
const fieldValid = field =>
2019-08-17 02:48:45 +12:00
errors[field] && delete errors[field];
if(!name) nameInvalid = "component name i not supplied";
else nameInvalid = "";
return (!nameInvalid && propsValidationErrors.length === 0);
}
const hideDialog = () => {
UIkit.modal(modalElement).hide();
}
const showDialog = () => {
UIkit.modal(modalElement).show();
}
</script>
<div class="root">
<div class="title">
<div>{shortName}</div>
<div>
<IconButton icon="save"
on:click={save}
color="var(--secondary100)"
hoverColor="var(--primary100)"/>
<IconButton icon="trash"
on:click={deleteComponent}
color="var(--secondary100)"
hoverColor="var(--primary100)"/>
2019-08-17 02:48:45 +12:00
</div>
</div>
2019-10-03 18:12:13 +13:00
<div class="component-props-container">
2019-08-17 02:48:45 +12:00
2019-08-17 02:48:45 +12:00
<PropsView onValidate={onPropsValidate}
{componentInfo}
{onPropsChanged} />
2019-08-17 02:48:45 +12:00
</div>
</div>
<div bind:this={modalElement} uk-modal>
<div class="uk-modal-dialog">
<div class="uk-modal-header">
Delete {name} ?
2019-08-17 02:48:45 +12:00
</div>
<div class="uk-modal-body">
Are you sure you want to delete this component ?
</div>
<div class="uk-modal-footer">
<ButtonGroup>
<Button grouped
2019-08-17 02:48:45 +12:00
on:click={confirmDeleteComponent}>
OK
</Button>
<Button grouped
on:click={hideDialog}
2019-08-17 02:48:45 +12:00
color="secondary" >
Cancel
</Button>
</ButtonGroup>
</div>
</div>
</div>
<style>
.root {
height: 100%;
display: flex;
2019-09-20 20:02:22 +12:00
flex-direction: column;
2019-08-17 02:48:45 +12:00
}
.title {
padding: 1rem;
2019-08-17 02:48:45 +12:00
display: grid;
grid-template-columns: [name] 1fr [actions] auto;
color: var(--secondary100);
font-size: .9rem;
font-weight: bold;
2019-08-17 02:48:45 +12:00
}
.title > div:nth-child(1) {
grid-column-start: name;
color: var(--secondary100);
}
.title > div:nth-child(2) {
grid-column-start: actions;
}
2019-09-20 20:02:22 +12:00
.component-props-container {
flex: 1 1 auto;
overflow-y: auto;
}
</style>