ywana-core8 0.0.1

package/src/domain/CollectionPage.js

@@ -0,0 +1,346 @@
+import { Fragment, useContext, useEffect, useState, useRef } from 'react'
+import equal from 'deep-equal'
+import { Content, ContentEditor, EditContentDialog, TabbedContentEditor, TreededContentEditor } from '.'
+import { HTTPClient, Session, PageContext, SiteContext } from '..'
+import { Header, List, Text, Button, Icon, MenuIcon, Menu, MenuItem, Tree, TreeNode, TreeItem } from '../html'
+import "./CollectionPage.css"
+
+const http = HTTPClient(window.API || process.env.REACT_APP_API, Session);
+
+/**
+ * Collection Page
+ */
+export const CollectionPage = (props) => {
+
+    const site = useContext(SiteContext)
+    const { id = "collection", icon, title, name = "Collection 1", schema, url, groupBy, editor, field, autosave = false, delay = 1000, actions, levels } = props
+    const [pageContext, setPageContext] = useContext(PageContext)
+    const context = CollectionContext(url, field)
+
+    useEffect(async () => {
+        await context.load()
+        setPageContext(context)
+    }, [])
+
+    async function reload() {
+        await pageContext.load()
+        setPageContext(Object.assign({}, pageContext))
+    }
+
+    function add() {
+        const onOK = async (form) => {
+            await pageContext.create(form);
+            setPageContext(Object.assign({}, pageContext))
+        }
+        site.openDialog(<EditContentDialog label={`Crear ${name}`} type={schema} onOK={onOK} />);
+    }
+
+    return (
+        <Fragment>
+            <Header className="collection-page" title={<Text>{title}</Text>}>
+                <Button icon="add" label="Add" action={add} />
+                <Button icon="refresh" label="Reload" action={reload} />
+                {actions}
+            </Header>
+            <menu className="collection-page">
+                <Header title={<Text>Lista de {name}</Text>} >
+                </Header>
+                {levels ? <CollectionTree levels={levels} /> : <CollectionList groupBy={groupBy} />}
+            </menu>
+            <main key={id} className="collection-page">
+                <CollectionEditor icon={icon} schema={schema} layout={editor} autosave={autosave} delay={delay} />
+            </main>
+        </Fragment>
+    )
+}
+
+/**
+ * Collection List
+ */
+const CollectionList = (props) => {
+
+    const { groupBy } = props
+    const [pageContext, setPageContext] = useContext(PageContext)
+    const { all = [] } = pageContext
+
+    function clear() {
+        pageContext.clear()
+        setPageContext(Object.assign({}, pageContext))
+    }
+
+    async function select(id) {
+        clear()
+        await pageContext.select(id)
+        setPageContext(Object.assign({}, pageContext))
+    }
+
+    const items = all ? all.map(content => ({
+        id: content.id,
+        line1: content.name,
+        line2: content.description,
+        content
+    })) : []
+
+    return (
+        <List items={items} onSelect={select} groupBy={groupBy} />
+    )
+}
+
+/**
+ * Collection Tree
+ */
+const CollectionTree = (props) => {
+
+    const { levels } = props
+    const [pageContext, setPageContext] = useContext(PageContext)
+    const { all = [] } = pageContext
+
+    function clear() {
+        pageContext.clear()
+        setPageContext(Object.assign({}, pageContext))
+    }
+
+    async function select(id) {
+        clear()
+        await pageContext.select(id)
+        setPageContext(Object.assign({}, pageContext))
+    }
+
+    function group(items, by) {
+        return items.reduce((nodes, field) => {
+            let node = nodes.find(n => n.name === field[by])
+            if (!node) {
+                let name = field[by]
+                node = { name, items: [], field: by }
+                nodes.push(node)
+            }
+            node.items.push(field)
+            return nodes
+        }, [])
+    }
+
+    function generateNodes(levels, items) {
+        const by = levels[0]
+        const nodes = group(items, by)
+        if (levels.length > 1) nodes.forEach(node => node.nodes = generateNodes(levels.slice(1), node.items))
+        return nodes
+    }
+
+    function renderNodes(nodes) {
+        return nodes.map(node => {
+            const title = typeof node.name === 'boolean' ? `${node.field} = ${node.name}` : node.name
+            return (
+                <TreeNode key={node.name} icon={null} label={title} open={true}>
+                    {node.nodes ? renderNodes(node.nodes) : node.items.map(item => <TreeItem key={item.id} id={item.id} label={item.name} onSelect={select}>item</TreeItem>)}
+                </TreeNode>
+            )
+        })
+    }
+
+    const nodes = generateNodes(levels, all)
+    return (
+        <main>
+            <Tree>
+                {renderNodes(nodes)}
+            </Tree>
+        </main>
+    )
+}
+
+/**
+ * Collection Editor
+ */
+const CollectionEditor = (props) => {
+    const [pageContext, setPageContext] = useContext(PageContext)
+    const { selected } = pageContext
+    const { icon, schema, layout, autosave = false, delay = 1000 } = props
+    const timer = useRef(null)
+    const [form, setForm] = useState(selected)
+
+    useEffect(() => {
+        setForm(selected)
+    }, [selected])
+
+    useEffect(() => {
+        if (autosave) {
+            clearTimeout(timer.current)
+            timer.current = setTimeout(() => {
+                if (canSave()) save()
+            }, delay)
+        }
+    }, [form])
+
+    function clear() {
+        pageContext.clear()
+        setPageContext(Object.assign({}, pageContext))
+    }
+
+    async function remove() {
+        await pageContext.remove(selected.id)
+        pageContext.clear()
+        setPageContext(Object.assign({}, pageContext))
+    }
+
+    function change(next) {
+        setForm(next)
+    }
+
+    function canSave() {
+        const can = !equal(form, selected)
+        return can
+    }
+
+    async function save() {
+        console.log('saving.....')
+        await pageContext.update(form)
+        setPageContext(Object.assign({}, pageContext))
+    }
+
+    function renderEditor() {
+        const content = new Content(schema, form)
+        switch (layout) {
+            case 'TABBED': return <TabbedContentEditor {...props} content={content} onChange={change} />
+            case 'TREEDED': return <TreededContentEditor {...props} content={content} onChange={change} />
+            default: return <ContentEditor {...props} content={content} onChange={change} />
+        }
+    }
+
+    return selected && form ? (
+        <Fragment>
+            <Header icon={icon} title={<Text>{selected.name}</Text>}>
+                <Icon icon="close" clickable action={clear} />
+                <MenuIcon align="alignRight">
+                    <Menu>
+                        <MenuItem label="Eliminar" onSelect={remove} />
+                    </Menu>
+                </MenuIcon>
+                {autosave === true ? null : <Button icon="save" label="Guardar Cambios" raised disabled={!canSave()} action={save} />}
+            </Header>
+            {renderEditor()}
+        </Fragment>
+    ) : null
+}
+
+/**
+ * Collection Context
+ */
+export const CollectionContext = (url, field) => {
+
+    const API = CollectionAPI(url)
+
+    return {
+
+        all: [],
+        selected: null,
+
+        async load() {
+            try {
+                const data = await API.all();
+                this.all = field ? data[field] : data;
+            } catch (error) {
+                console.log(error)
+            }
+            return
+        },
+
+        select(id) {
+            const result = this.all.find(item => item.id === id);
+            this.selected = result;
+        },
+
+        clear() {
+            this.selected = null
+        },
+
+        async create(form) {
+            try {
+                await API.create(form);
+                await this.load();
+            } catch (error) {
+                console.log("CREATE ERROR", error)
+            }
+            return
+        },
+
+        async update(form) {
+            try {
+                await API.update(form)
+                await this.load()
+            } catch (error) {
+                console.log(error)
+            }
+            return
+        },
+
+        async patch(id, form) {
+            try {
+                await API.patch(id, form)
+                await this.load()
+            } catch (error) {
+                console.log(error)
+            }
+            return
+        },
+
+        async updateProperty(id, propertyName, form) {
+            try {
+                await API.updateProperty(id, propertyName, form)
+                await this.load()
+            } catch (error) {
+                console.log(error)
+            }
+            return
+        },
+
+        async remove(id) {
+            try {
+                await API.remove(id)
+                await this.load()
+            } catch (error) {
+                console.log(error)
+            }
+            return
+        },
+    }
+}
+
+/**
+ * Collection API
+ */
+const CollectionAPI = (url) => {
+
+    return {
+        all() {
+            return http.GET(url)
+        },
+
+        find(id) {
+            return http.GET(`${url}/${id}`)
+        },
+
+        create(form) {
+            const body = JSON.stringify(form)
+            return http.POST(url, body)
+        },
+
+        update(form) {
+            const body = JSON.stringify(form)
+            return http.PUT(`${url}/${form.id}`, body)
+        },
+
+        patch(id, form) {
+            const body = JSON.stringify(form)
+            return http.PATCH(`${url}/${id}`, body)
+        },
+
+        updateProperty(id, propertyName, form) {
+            const body = JSON.stringify(form)
+            return http.PUT(`${url}/${id}/${propertyName}`, body)
+        },
+
+        remove(id) {
+            return http.DELETE(`${url}/${id}`)
+        }
+
+    }
+}

package/src/domain/ContentEditor.css

@@ -0,0 +1,174 @@
+.content-editor {
+    padding: 0 1rem;
+}
+
+.content-editor>section {
+
+    margin-bottom: 1rem;
+}
+
+.content-editor>section>header {
+    padding: .5rem;
+    border-bottom: solid 1px var(--divider-color);
+    margin-bottom: .5rem;
+}
+
+.entity-editor {
+}
+
+.entity-editor>header {
+    padding: .5rem;
+}
+
+.collection-editor {
+}
+
+.collection-editor>header {
+    padding: 0 .5rem;
+    display: flex;
+    align-items: flex-end;
+}
+
+.collection-editor>header>.actions {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.collection-editor>header>.actions button {
+    height: 2rem !important;
+    padding: 0 !important;
+}
+
+.collection-editor>footer {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.collection-editor td {
+    padding-left: 0px;
+}
+
+.collection-editor .mdc-text-field {
+    width: 99%;
+}
+
+.collection-editor .actions {
+    width: 8rem;
+    text-align: right;
+    padding: .5rem;
+}
+
+.collection-adder {
+    display: flex;
+}
+
+.collection-adder .data-table {
+    width: 100%;
+    border: 0px;
+    background-color: rgb(242, 242, 242);
+}
+
+.collection-adder table {
+    width: 100%;
+    border: 0px;
+}
+
+.collection-adder th {
+    display:  ;
+}
+
+.collection-adder tr {
+    border: 0;
+}
+
+.collection-adder td {
+    padding-left: 0px;
+}
+
+.collection-adder td>label  {
+    background-color: var(--paper-color) !important;
+}
+
+
+.collection-adder td.actions {
+    border: solid 0px red;
+    display: flex;
+    align-items: center;
+}
+
+
+.field-editor {
+    padding: 0;
+}
+
+.field-editor>* {
+    width: 100%;
+}
+
+.function-editor {
+    width: 100%;
+    min-height: 10rem;
+    display: flex;
+}
+
+.function-editor>main {
+    flex: 1;
+}
+
+.function-editor>aside {
+    min-width: 10rem;
+    padding: 0 .5rem;
+}
+
+.function-editor>aside>table {
+    min-width: 20rem;
+    border: solid 1px var(--divider-color);
+    margin: 0;
+    padding: 0;
+}
+
+.function-editor>aside>table>tr {
+    border-bottom: solid 1px var(--divider-color);
+}
+
+.function-editor>aside>table>tr>td {
+    width: 10rem;
+    overflow: hidden;
+    padding: 0  0 0 .5rem;
+}
+
+.function-editor>aside>table>tr>td input {
+    appearance: none;
+    border: 0px;
+    background-color: rgba(240,240,240);
+    margin: .2rem;
+}
+
+.treeded-editor {
+    display: flex;
+}
+
+.group-caption {
+    border-bottom: solid 1px var(--divider-color);
+    margin: .5rem 0;
+}
+
+.multiselection-editor {
+    position: relative;
+    border: solid 1px var(--divider-color);
+    display: flex;
+    align-items: center;
+    border-radius: .3rem;
+    padding: 1rem;
+    margin: 1rem 0;
+}
+
+.multiselection-editor>label {
+    position: absolute;
+    top:-9px;
+    padding: 2px 6px 2px 4px;
+    font-size: .8rem;
+    background-color: var(--paper-color);
+    color: var(--text-color-light)
+}