ywana-core8 0.0.1

package/src/domain/CreateContentDialog.js

@@ -0,0 +1,59 @@
+import React, { Fragment, useContext, useMemo, useState } from 'react';
+import { Button, Text } from '../html';
+import { Dialog } from '../site/dialog'
+import { SiteContext } from '../site/siteContext';
+import { ContentForm } from './ContentForm';
+import { Content } from './ContentType';
+
+/**
+ * Create Content Dialog
+ */
+export const CreateContentDialog = ({ label, type, validator, onOK, onError, onActionClose = true }) => {
+
+    const site = useContext(SiteContext);
+    const [form, setForm] = useState({})
+    const [isValid, setValid] = useState(false)
+    const [errors, setErrors] = useState([])
+
+    function change(form, validForm) {
+        setForm(form)
+        if (validator) {
+            const { validation, errors = [] } = validator(form)
+            setValid(validForm && validation)
+            setErrors(errors) 
+        } else {
+            setValid(validForm)
+        }
+    }
+    
+    function onAction(action) {
+        if (action === 'OK' && onOK) onOK(form)
+        if (action === 'CLOSE' || onActionClose === true) site.closeDialog();
+    }
+    
+    function isRequired(field) {
+        const { required = false } = field
+        return required 
+    }
+
+    function isOptional(field) {
+        const { creation = false } = field
+        return creation
+    }
+    
+    const actions = (
+        <Fragment>
+            <Button label="CLOSE" action={() => onAction("CLOSE")}/>
+            <Button label="OK" action={() => onAction("OK")} disabled={!isValid} raised />
+        </Fragment>
+    )
+    
+   const title = <Text use="headline6">{label}</Text>
+   const content = new Content(type, form)
+    return (
+        <Dialog title={title} open={true} onAction={onAction} actions={actions}>
+            <ContentForm content={content} filter={(field) => isRequired(field) || isOptional(field)} onChange={change} />
+            { errors.map ( error => <Text use="overline" tag="div" className="error">{error}</Text> )}
+        </Dialog>
+    )
+}

package/src/domain/EditContentDialog.js

@@ -0,0 +1,50 @@
+import React, { Fragment, useState, useContext, useMemo } from 'react';
+import { Dialog } from '../site'
+import { SiteContext } from '../site/siteContext'
+import { Text, Button } from '../html';
+import { Content } from './ContentType'
+import { ContentEditor } from './ContentEditor'
+
+/**
+ * Edit Content Dialog
+ */
+export const EditContentDialog = ({ label, type, value = {}, filter, validator, onOK, onError }) => {
+
+    const site = useContext(SiteContext);
+    const [form, setForm] = useState(value)
+    const [isValid, setValid] = useState(false)
+    const [errors, setErrors] = useState([])
+
+    function change(form) {
+        setForm(form)
+        if (validator) {
+            const { validation, errors = [] } = validator(form)
+            setValid(validation)
+            setErrors(errors)
+        } else {
+            setValid(true)
+        }
+    }
+
+    function onAction(action) {
+        if (action === 'OK' && onOK) onOK(Object.assign({}, value, form))
+        site.closeDialog();
+    }
+
+    const actions = (
+        <Fragment>
+            <Button label="CLOSE" action={() => onAction("CLOSE")} />
+            <div className="expand" />
+            <Button label="OK" action={() => onAction("OK")} disabled={!isValid} raised />
+        </Fragment>
+    )
+
+    const title = <Text use="headline6">{label}</Text>
+    const content = new Content(type, form)
+    return (
+        <Dialog title={title} open={true} onAction={onAction} actions={actions}>
+            <ContentEditor content={content} onChange={change} filter={filter} />
+            {errors.map(error => <Text use="overline" tag="div" className="error">{error}</Text>)}
+        </Dialog>
+    )
+}

package/src/domain/TablePage.css

@@ -0,0 +1,29 @@
+.table-page .datatable8 {
+    margin: 0 1rem;
+}
+
+menu.table-page>header {
+    padding-right: .5rem;
+}
+
+menu.table-page>main {
+}
+
+main.table-page {
+    display: flex;
+    flex-direction: column;
+}
+
+main.table-page>header {
+    padding-bottom: 1rem;
+    padding-right: 1rem;
+}
+
+aside.table-page {
+    width: 25rem;
+}
+
+main.table-editor {
+    flex: 1;
+    overflow: auto;
+}

package/src/domain/TablePage.js

@@ -0,0 +1,395 @@
+import equal from 'deep-equal'
+import { Fragment, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { EditContentDialog } from '.'
+import { Content, ContentEditor, HTTPClient, PageContext, Session, SiteContext } from '..'
+import { SCENARIO1 } from '../../dev/scenario1'
+import { BuildGroupOptions } from '../../pages/kinds/options'
+import { Button, DataTable, DropDown, Header, Icon, MenuIcon, MenuItem, Text } from '../html'
+import "./TablePage.css"
+
+const http = HTTPClient(window.API || process.env.REACT_APP_API, Session);
+
+/**
+ * Table Page
+ */
+export const TablePage = (props) => {
+
+    const site = useContext(SiteContext)
+    const { id = "table", icon, title, name = "table 1", schema, url, field, delay = 1000, actions, editable, canAdd = true, dev = true, autosave = true, groupBy, validator, scenario } = props
+    const [pageContext, setPageContext] = useContext(PageContext)
+    const { selected } = pageContext
+    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])
+
+    useEffect(async () => {
+        const context = TableContext(url, field)
+        await context.load()
+        setPageContext(context)
+    }, [])
+
+    function add() {
+        const onOK = async (form) => {
+            await pageContext.create(form);
+            setPageContext(Object.assign({}, pageContext))
+        }
+        site.openDialog(<EditContentDialog label={`Crear ${name}`} type={schema} onOK={onOK} validator={validator} />);
+    }
+
+    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))
+    }
+
+    async function playScenario() {
+        const promises1 = pageContext.all.map(async item => await pageContext.remove(item.id))
+        Promise.all(promises1).then(async () => {
+            const promises2 = SCENARIO1.map(async (item) => await pageContext.create(item))
+            Promise.all(promises2).then(async () => {
+                await pageContext.load()
+                setPageContext(Object.assign({}, pageContext))
+            })
+        })
+    }
+
+    function closeAside() {
+        pageContext.select(null)
+        setPageContext(Object.assign({}, pageContext))
+    }
+
+    function renderAside() {
+        if (selected && form) {
+            const content = new Content(schema, form)
+            return (
+                <aside className="table-page">
+                    <Header icon="local_offer" title={selected.name || "Propiedades"}>
+                        <Icon icon="close" clickable action={closeAside} />
+                    </Header>
+                    <ContentEditor content={content} onChange={change} />
+                </aside>
+            )
+        }
+        return null;
+    }
+
+    return (
+        <Fragment>
+            <Header className="table-page" title={<Text>{title}</Text>}>
+                {canAdd ? <Button icon="add" label="Añadir" action={add} raised /> : null}
+                {dev ? (
+                    <MenuIcon align="alignRight">
+                        <MenuItem label="Cargar Escenario 1" onSelect={playScenario} />
+                    </MenuIcon>
+                ) : null}
+                {actions}
+            </Header>
+            <menu className="table-page">
+                <TableFilters schema={schema} />
+            </menu>
+            <main key={id} className="table-page">
+                <TableEditor icon={icon} title={name} schema={schema} delay={delay} editable={editable} groupBy={groupBy} />
+            </main>
+            {renderAside()}
+        </Fragment>
+    )
+}
+
+/**
+ * Table Filters
+ */
+const TableFilters = (props) => {
+
+    const [pageContext, setPageContext] = useContext(PageContext)
+    const { schema } = props
+    const [form, setForm] = useState({})
+
+    const filterSchema = useMemo(() => {
+        const filterSchema = Object.assign({}, schema)
+        Object.values(filterSchema).forEach(field => field.section = null)
+        delete filterSchema.flows
+        return filterSchema
+    }, [schema])
+
+    async function change(next) {
+        setForm(next)
+        await pageContext.load(next)
+        setPageContext(Object.assign({}, pageContext))
+    }
+
+    function clear() {
+        setForm({})
+    }
+
+    const content = new Content(filterSchema, form)
+    return (
+        <Fragment>
+            <Header title={<Text>Filtros</Text>} >
+                <Button icon="filter_list_off" label="Limpiar" action={clear} />
+            </Header>
+            <main>
+                <ContentEditor content={content} onChange={change} />
+            </main>
+        </Fragment>
+    )
+}
+
+/**
+ * Table Editor
+ */
+const TableEditor = (props) => {
+
+    const [pageContext, setPageContext] = useContext(PageContext)
+    const { all = [], filters } = pageContext
+    const { icon, title, schema, editable } = props
+    const [groupBy, setGroupBy] = useState(props.groupBy)
+
+    function changeGroup(id, value) {
+        setGroupBy(value)
+    }
+
+    async function remove(id) {
+        await pageContext.remove(id)
+        pageContext.clear()
+        setPageContext(Object.assign({}, pageContext))
+    }
+
+    function change(rowID, cellID, value) {
+        const row = all.find(r => r.id === rowID)
+        const next = Object.assign({}, row, { [cellID]: value })
+        delete next.actions
+        pageContext.update(next)
+        setPageContext(Object.assign({}, pageContext))
+    }
+
+    function clear() {
+        pageContext.clear()
+        setPageContext(Object.assign({}, pageContext))
+    }
+
+    async function select(row, event) {
+        clear()
+        await pageContext.select(row.id)
+        setPageContext(Object.assign({}, pageContext))
+    }
+
+    function renderGroups() {
+
+        const groups = all.reduce((groups, filter) => {
+            const groupName = filter[groupBy]
+            const group = groups[groupName]
+            if (!group) groups[groupName] = []
+            groups[groupName].push(filter)
+            return groups
+        }, {})
+
+
+        return Object.keys(groups).map(groupName => {
+
+            const table = {
+                columns: Object.values(schema)
+                    .filter(field => field.column === true)
+                    .map(field => {
+                        let options = field.options;
+                        if (options && typeof (options) == 'function') {
+                            options = options()
+                        }
+                        return {
+                            id: field.id,
+                            label: field.label,
+                            type: field.type,
+                            onChange: field.editable ? change : null,
+                            options
+                        }
+                    }),
+                rows: groups[groupName]
+                    .map(item => {
+                        item.actions = [<Icon icon="delete" size="small" clickable action={() => remove(item.id)} />]
+                        return item
+                    })
+            }
+
+            table.columns.push({ id: "actions" })
+
+            return (
+                <Fragment key={groupName}>
+                    <Header title={groupName} />
+                    <DataTable {...table} onRowSelection={select} editable={editable} />
+                </Fragment>
+            )
+        })
+    }
+
+    const table = {
+        columns: Object.values(schema)
+            .filter(field => field.column === true)
+            .map(field => {
+                let options = field.options;
+                if (options && typeof (options) == 'function') {
+                    options = options()
+                }
+                return {
+                    id: field.id,
+                    label: field.label,
+                    type: field.type,
+                    onChange: field.editable ? change : null,
+                    options
+                }
+            }),
+        rows: all
+            .map(item => {
+                item.actions = [<Icon icon="delete" size="small" clickable action={() => remove(item.id)} />]
+                return item
+            })
+    }
+
+    table.columns.push({ id: "actions" })
+
+    return (
+        <Fragment>
+            <Header icon={icon} title={<Text>{title}</Text>}>
+                <DropDown id="groupBy" label="Agrupar Por" value={groupBy} options={BuildGroupOptions(schema)} onChange={changeGroup} />
+            </Header>
+            <main className="table-editor">
+                {renderGroups()}
+            </main>
+        </Fragment>
+    )
+}
+
+/**
+ * table Context
+ */
+const TableContext = (url, field) => {
+
+    const API = TableAPI(url)
+
+    return {
+
+        all: [],
+        selected: null,
+        filters: {},
+
+        async load(filter) {
+            try {
+
+                const filters = filter ? Object.keys(filter).reduce((filters, key) => {
+                    const field = filter[key];
+                    if (field) filters[key] = field;
+                    return filters;
+                }, {}) : []
+
+                const data = await API.all(filters);
+                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(error)
+            }
+            return
+        },
+
+        async update(form) {
+            try {
+                await API.update(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
+        },
+
+        changeFilters(filters) {
+            this.filters = filters
+        }
+    }
+}
+
+/**
+ * table API
+ */
+const TableAPI = (url) => {
+
+    return {
+        all(filters) {
+            let queryParams = "?"
+            if (filters) {
+                const filterQuery = Object.keys(filters).reduce((query, key) => {
+                    if (typeof (filters[key]) === 'boolean') {
+                        return query.concat(`${key}=${filters[key]}&`)
+                    } else {
+                        return query.concat(`${key}=%${filters[key]}%&`)
+                    }
+                }, "")
+                queryParams = queryParams.concat(filterQuery)
+            }
+            return http.GET(url + queryParams)
+        },
+
+        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)
+        },
+
+        remove(id) {
+            return http.DELETE(`${url}/${id}`)
+        }
+    }
+}

package/src/domain/index.js

@@ -0,0 +1,5 @@
+export { TYPES, Content } from './ContentType'
+export { ContentForm } from './ContentForm'
+export { ContentEditor, TabbedContentEditor, CollectionEditor, TreededContentEditor, FieldEditor, ListEditor } from './ContentEditor'
+export { CreateContentDialog } from './CreateContentDialog'
+export { EditContentDialog } from './EditContentDialog'

package/src/html/button.css

@@ -0,0 +1,79 @@
+.btn {
+    position: relative;
+    padding: .2rem .5rem;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    border-width: 0;
+    outline: none;
+    transition: background-color .3s;
+    display: flex;
+    color: var(--primary-color);
+    min-height: 2.5rem;
+  }
+
+  
+  .btn.outlined {
+    color: var(--primary-color);
+    border: solid 1px var(--primary-color);
+  }
+  
+  .btn.outlined.disabled {
+    border: solid 1px rgba(200,200,200,.3) !important;
+    color: rgba(100,100,100,.5) !important;
+    cursor: not-allowed;
+  }
+
+  .btn.raised {
+    color: var(--primary-color-text);
+    background-color: var(--primary-color)
+  }
+
+  .btn.raised.disabled {
+    background-color: rgba(200,200,200,.3) !important;
+    color: rgba(100,100,100,.5) !important;
+    cursor: not-allowed;
+  }
+  
+  .btn:hover, .btn:focus {
+    background-color: rgba(171, 171, 171, 0.3);
+    cursor: pointer;
+  }
+
+  .btn.raised:hover, .btn.raised:focus {
+    background-color: var(--primary-color-dark);
+    cursor: pointer;
+  }
+  
+  .btn > * {
+    position: relative;
+  }
+  
+  .btn span {
+    flex: 1;
+    display: block;
+  }
+  
+  .btn:before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: block;
+    width: 0;
+    padding-top: 0;
+    border-radius: 100%;
+    background-color: rgba(236, 240, 241, .3);
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    -o-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+  }
+  
+  .btn:active:before {
+    width: 120%;
+    padding-top: 120%;
+    transition: width .2s ease-out, padding-top .2s ease-out;
+  }
+  

package/src/html/button.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import './button.css'
+import { Icon } from './icon'
+
+/**
+ * HTML Button
+ */
+export const Button = ({ label, icon, action, disabled = false, outlined, raised }) => {
+
+    function click(event) {
+        if (!disabled) {
+            event.stopPropagation();
+            event.preventDefault();
+            if (action) action()
+        }
+    }
+
+    let style = raised ? 'raised' : outlined ? 'outlined' : 'normal'
+    if (disabled) style = `${style} disabled`
+    return (
+        <button className={`btn ${style}`} onClick={click}>
+            { icon ? <Icon icon={icon} size="small" /> : null }
+            <span>{ label }</span>
+        </button>
+    )
+}