budibase/packages/builder/src/userInterface/NewComponent.svelte

<script>
    import ComponentSelector from "./ComponentSelector.svelte";
    import { store } from "../builderStore";
    import PropsView from "./PropsView.svelte";
    import Textbox from "../common/Textbox.svelte";
    import Button from "../common/Button.svelte";
    import ButtonGroup from "../common/ButtonGroup.svelte";
    import { pipe } from "../common/core";
    import UIkit from "uikit";
    import { isRootComponent } from "./pagesParsing/searchComponents";
    import { splitName } from "./pagesParsing/splitRootComponentName.js"

    import {
        find, filter, some, map, includes
    } from "lodash/fp";
    import { assign } from "lodash";


    export const show = () => {
        UIkit.modal(componentSelectorModal).show();
    }

    let componentSelectorModal;
    let layoutComponents;
    let layoutComponent;
    let screens;
    let name="";
    let saveAttempted=false;

    store.subscribe(s => {
        layoutComponents = pipe(s.components, [
            filter(c => c.container),
            map(c => ({name:c.name, ...splitName(c.name)}))
        ]);

        layoutComponent = layoutComponent
                        ? find(c => c.name === layoutComponent.name)(layoutComponents)
                        : layoutComponents[0];

        screens = s.screens;
    });

    const save = () => {
        saveAttempted = true;

        const isValid = name.length > 0
                        && !screenNameExists(name)
                        && layoutComponent;

        if(!isValid) return;

        store.createScreen(name, layoutComponent.name);
        UIkit.modal(componentSelectorModal).hide();
    }

    const cancel = () => {
        UIkit.modal(componentSelectorModal).hide();
    }

    const screenNameExists = (name) =>
        some(s => s.name.toLowerCase() === name.toLowerCase())(screens)

</script>

<div bind:this={componentSelectorModal} id="new-component-modal" uk-modal>
    <div class="uk-modal-dialog" uk-overflow-auto>

        <div class="uk-modal-header">
            <h1>New Screen</h1>
        </div>

        <div class="uk-modal-body uk-form-horizontal">
            <div class="uk-margin">
                <label class="uk-form-label">Name</label>
                <div class="uk-form-controls">
                    <input class="uk-input uk-form-small"
                        class:uk-form-danger={saveAttempted && (name.length === 0 || screenNameExists(name))}
                        bind:value={name} >
                </div>
            </div>

            <div class="uk-margin">
                <label class="uk-form-label">Layout Component</label>
                <div class="uk-form-controls">
                    <select class="uk-select uk-form-small"
                            bind:value={layoutComponent}
                            class:uk-form-danger={saveAttempted && !layoutComponent}>
                        {#each layoutComponents as comp}
                        <option value={comp}>
                            {comp.componentName} - {comp.libName}
                        </option>
                        {/each}
                    </select>
                </div>
            </div>

            <ButtonGroup style="float: right;">
                <Button color="primary" grouped on:click={save}>Create Screen</Button>
                <Button color="tertiary" grouped on:click={cancel}>Cancel</Button>
            </ButtonGroup>
        </div>
    </div>
</div>



<style>
    h1 {
        font-size:1.2em;
    }
</style>