ywana-core8 0.0.469 → 0.0.472

package/src/domain/TabbedTablePage.js

@@ -0,0 +1,711 @@
+import equal from 'deep-equal'
+import React, { Fragment, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { Button, DataTable, DropDown, Header, Icon, MenuIcon, MenuItem, Text, Tabs, Tab } from '../html'
+import { HTTPClient, Session } from '../http'
+import { PageContext, SiteContext } from '../site'
+import { ContentEditor } from './ContentEditor'
+import { CHECK, Content, TYPES } from './ContentType'
+import { ContentViewer } from './ContentViewer'
+import { CreateContentDialog } from './CreateContentDialog'
+import { QUERY } from './squema'
+import "./TablePage.css"
+
+/**
+ * Tabbed Table Page
+ */
+export const TabbedTablePage = (props) => {
+
+    const site = useContext(SiteContext)
+    const { id = "table",
+        icon, title, name,
+        schema, url, field, host,
+        autosave = true, delay = 1000,
+        editable,
+        actions = [], dev = false, tableActions, selectionActions = [],
+        canFilter = false, canAdd = true, canDelete = true, canEdit = true,
+        canQuery = false, urlQuery, user,
+        groupBy, validator, scenario,
+        formFilter, tableFilter, editorFilter = false,
+        children
+    } = props
+
+    const [pageContext, setPageContext] = useContext(PageContext)
+    const context = TableContext(url, field, host, urlQuery)
+    const { selected, tab } = pageContext
+    const timer = useRef(null)
+    const [form, setForm] = useState(selected)
+    const [tabs, setTabs] = useState([])
+    
+    useEffect(async () => {
+        const field = Object.values(schema).find(field => field.tab && field.tab === true)
+        const tabs = field.options.map(option => Object.assign({}, option, { field: field.id}))
+        setTabs(tabs)
+        context.changeTab(tabs[0])
+        setPageContext(context)
+    }, [])
+    
+    useEffect( async () => {
+        console.log("TAB", tab)
+        if (tab) {
+            const filter = { [tab.field]: tab.value }
+            await pageContext.load(filter, false)
+            setPageContext(Object.assign({}, pageContext))
+        }
+    }, [tab])
+
+    useEffect(() => {
+        setForm(selected)
+    }, [selected])
+
+    useEffect(() => {
+        if (autosave) {
+            clearTimeout(timer.current)
+            timer.current = setTimeout(() => {
+                if (canSave()) save()
+            }, delay)
+        }
+    }, [form])
+
+    async function reload() {
+        const filter = { [tab.field]: tab.value }
+        await pageContext.load(filter, false)
+        setPageContext(Object.assign({}, pageContext))
+    }
+
+    function add() {
+        const onOK = async (form) => {
+            await pageContext.create(form);
+            setPageContext(Object.assign({}, pageContext))
+        }
+        site.openDialog(<CreateContentDialog label={`Crear ${name}`} type={schema} onOK={onOK} validator={validator} filter={formFilter} />);
+    }
+
+    function saveQuery(filters) {
+        const onOK = async (form) => {
+            form.filters = filters
+            form.layout = {}
+            form.user = user
+            form.url = url
+            await pageContext.createQuery(form, user)
+            setPageContext(Object.assign({}, pageContext))
+        }
+        site.openDialog(<CreateContentDialog label="Nueva query" type={QUERY} onOK={onOK} />)
+    }
+
+    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 = scenario.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() {
+        const rowSelected = selected && form
+        const rowChecked = pageContext.checked && pageContext.checked.size > 0
+        if (rowSelected || rowChecked) {
+            return (
+                <aside className="table-page">
+                    {rowSelected ? <TableRowEditor content={new Content(schema, form)} filter={editorFilter} onChange={change} onClose={closeAside} editable={canEdit} /> : null}
+                    {rowChecked ? <TableSelector schema={schema} actions={selectionActions} /> : null}
+                </aside>
+            )
+        }
+        return null;
+    }
+
+    function renderActions() {
+        return actions.map(element => {
+            const action = () => element.props.action(pageContext)
+            const clone = React.cloneElement(element, { action })
+            return clone
+        })
+    }
+
+    function changeTab(id) {
+        const tab = tabs.find(tab => tab.value === id)
+        pageContext.changeTab(tab)
+        setPageContext(Object.assign({}, pageContext))
+    }
+
+    function renderTabs() {
+        const selected = tab ? tab.value : null 
+        console.log(selected)
+        return (
+            <Tabs selected={selected} onChange={changeTab}>
+                {tabs.map(tab => <Tab id={tab.value} label={tab.label} />)}
+            </Tabs>
+        )
+    }
+
+    return (
+        <Fragment>
+            <Header className="table-page" title={<Text>{title}</Text>}>
+                {canAdd ? <Button icon="add" label="Añadir" action={add} raised /> : null}
+                &nbsp;
+                <Button icon="refresh" label="Reload" action={reload} />
+                {dev ? (
+                    <MenuIcon align="alignRight">
+                        <MenuItem label="Cargar Escenario 1" onSelect={playScenario} />
+                    </MenuIcon>
+                ) : null}
+                {renderActions()}
+            </Header>
+            {canQuery || canFilter ? (
+                <menu className="table-page">
+                    {canQuery ? <TableQueries schema={schema} url={url} user={user} /> : null}
+                    {canFilter ? <TableFilters schema={schema} onSave={canQuery ? saveQuery : null} /> : null}
+                </menu>
+            ) : null}
+            <main key={id} className="table-page">
+                <TableEditor icon={icon} title={name} tabs={renderTabs()} schema={schema} delay={delay} editable={editable} groupBy={groupBy} filter={tableFilter} actions={tableActions} canDelete={canDelete} />
+                {children ? <article>{children}</article> : null}
+            </main>
+            {renderAside()}
+        </Fragment>
+    )
+}
+
+/**
+ * TableRowEditor
+ */
+const TableRowEditor = (props) => {
+    const { name, content, filter, editable, onChange, onClose } = props
+    return (
+        <div className="table-row-editor">
+            <Header icon="local_offer" title={name || "Propiedades"}>
+                <Icon icon="close" clickable action={onClose} />
+            </Header>
+            <main>
+                {editable ? <ContentEditor content={content} onChange={onChange} filter={filter} /> : <ContentViewer content={content} />}
+            </main>
+        </div>
+    )
+}
+
+/**
+ * Table Selector
+ */
+const TableSelector = (props) => {
+
+    const { schema, actions = [] } = props
+    const [pageContext, setPageContext] = useContext(PageContext)
+    const { all, checked } = pageContext
+
+    const count = `${checked.size}/${all.length}`
+
+    const columns = Object.keys(schema)
+        .filter(key => schema[key].selectorColumn === true)
+        .map(key => {
+            const field = schema[key]
+            return { id: field.id, label: field.label }
+        })
+
+    const rows = all.filter(item => checked.has(item.id))
+    const table = {
+        columns,
+        rows: rows || []
+    }
+    const buttons = actions.map(({ label, action, validate }) => {
+        return <Button
+            label={label} raised
+            action={() => action(checked, pageContext, async () => {
+                await pageContext.load()
+                setPageContext(Object.assign({}, pageContext))
+            }, rows)}
+            disabled={!validate(checked, rows)}
+        />
+    })
+
+    return (
+        <div className="table-selector">
+            <Header icon="checklist_rtl" title="Selección">
+                <span className="size">{count}</span>
+            </Header>
+            <main>
+                <DataTable {...table} />
+            </main>
+            <footer>
+                {buttons}
+            </footer>
+        </div>
+    )
+}
+
+/**
+ * Table Queries
+ */
+const TableQueries = (props) => {
+
+    const [pageContext, setPageContext] = useContext(PageContext)
+    const { url, user } = props
+    const { queries = [] } = pageContext
+    const [selected, setSelected] = useState()
+
+    function select(query) {
+        setSelected(query.id)
+        pageContext.changeFilters(query.filters)
+        setPageContext(Object.assign({}, pageContext))
+    }
+
+    async function remove(id) {
+        await pageContext.removeQuery(id, user)
+        setPageContext(Object.assign({}, pageContext))
+    }
+
+    return (
+        <Fragment>
+            <Header className="table-queries" title={<Text>Queries</Text>} />
+            <main className="table-queries">
+                {queries ? queries
+                    .filter(query => query.url === url)
+                    .map(query => {
+                        const style = selected === query.id ? "selected" : ""
+                        return (
+                            <div className={`table-queries-item ${style}`} onClick={() => select(query)}>
+                                <Icon icon="star" size="small" />
+                                <label>{query.name}</label>
+                                <Icon icon="close" clickable size="small" action={() => remove(query.id)} />
+                            </div>
+                        )
+                    }) : <div>...empty...</div>}
+            </main>
+        </Fragment>
+    )
+}
+
+/**
+ * Table Filters
+ */
+const TableFilters = (props) => {
+
+    const [pageContext, setPageContext] = useContext(PageContext)
+    const { filters } = pageContext
+    const { schema, onSave } = props
+    const [form, setForm] = useState({})
+
+    const filterSchema = useMemo(() => {
+        const filterSchema = Object.assign({}, schema)
+        for (var key in filterSchema) {
+            if (filterSchema[key].filter === false) {
+                delete filterSchema[key]
+            } else {
+                if (filterSchema[key].type === TYPES.ENTITY) {
+                    const fs = filterSchema[key].item
+                    for (var key in fs) {
+                        if (fs[key].filter === false) delete fs[key]
+                    }
+                }
+            }
+        }
+        //Object.values(filterSchema).forEach(field => field.section = null)
+        delete filterSchema.flows
+        return filterSchema
+    }, [schema])
+
+    useEffect(() => {
+        if (filters) setForm(filters)
+    }, [filters])
+
+    useEffect(() => {
+        reload()
+    }, [form])
+
+    async function change(next) {
+        setForm(next)
+    }
+
+    async function reload() {
+        await pageContext.load(form)
+        setPageContext(Object.assign({}, pageContext))
+    }
+
+    function clear() {
+        change({})
+    }
+
+    function save() {
+        if (onSave) {
+            onSave(form)
+        }
+    }
+
+    const content = new Content(filterSchema, form)
+    return (
+        <Fragment>
+            <Header className="table-filters" title={<Text>Filters</Text>} >
+                <Icon icon="filter_list_off" size="small" clickable action={clear} />
+                {onSave ? <Icon icon="save" size="small" clickable action={save} /> : null}
+            </Header>
+            <main className="table-filters">
+                <ContentEditor content={content} onChange={change} />
+            </main>
+        </Fragment>
+    )
+}
+
+/**
+ * Table Editor
+ */
+export const TableEditor = (props) => {
+
+    const site = useContext(SiteContext)
+    const [pageContext, setPageContext] = useContext(PageContext)
+    const { all = [], filters } = pageContext
+    const { icon, title, schema, editable, canDelete, filter, actions, tabs } = props
+    const [groupBy, setGroupBy] = useState(props.groupBy)
+
+    function changeGroup(id, value) {
+        setGroupBy(value)
+    }
+
+    async function remove(id) {
+        const confirm = await site.confirm("Are you sure ?")
+        if (confirm) {
+            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))
+    }
+
+    async function check(ids, value) {
+        pageContext.check(ids, value)
+        setPageContext(Object.assign({}, pageContext))
+    }
+
+    async function checkOne(id, field, value) {
+        check([id], value)
+    }
+
+    function run(action, item) {
+        action.action(item.id, pageContext, async () => {
+            await pageContext.load()
+            setPageContext(Object.assign({}, pageContext))
+        })
+    }
+
+    function renderGroupLabel(groupName) {
+        const grouper = schema[groupBy]
+        if (!groupName || !grouper) return ""
+        if (grouper.options) {
+            const options = CHECK['isFunction'](grouper.options) ? grouper.options() : grouper.options
+            const option = options.find(option => option.value === groupName)
+            return option ? option.label : groupName
+        } else {
+            return groupName
+        }
+    }
+
+    function renderGroups() {
+        const items = filter ? filter(all) : all
+        const groups = items.reduce((groups, item) => {
+            const groupName = item[groupBy]
+            const group = groups[groupName]
+            if (!group) groups[groupName] = []
+            groups[groupName].push(item)
+            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,
+                            format: field.format,
+                            item: field.item ? field.item : [],
+                            onChange: field.id === "checked" ? checkOne : field.editable ? change : null,     /* checked has it´s own handler */
+                            options
+                        }
+                    }),
+                rows: groups[groupName]
+                    .map(item => {
+                        item.checked = pageContext.checked ? pageContext.checked.has(item.id) : false
+                        item.actions = actions ? actions.map(action => {
+                            return action.filter ?
+                                action.filter(item) ? <Icon icon={action.icon} clickable size="small" action={() => run(action, item)} /> : null
+                                : <Icon icon={action.icon} clickable size="small" action={() => run(action, item)} />
+                        }) : []
+                        if (canDelete) item.actions.push(<Icon icon="delete" size="small" clickable action={() => remove(item.id)} />)
+                        return item
+                    })
+            }
+            table.columns.push({ id: "actions" })
+            const groupSize = groups[groupName].length
+            const title = <span><span className="size">{groupSize}</span>{renderGroupLabel(groupName)}</span>
+            return (
+                <Fragment key={groupName}>
+                    <Header title={title} >
+                        <span className="size">{groupSize}</span>
+                    </Header>
+                    <DataTable {...table} onRowSelection={select} editable={editable} onCheckAll={check} />
+                </Fragment>
+            )
+        })
+    }
+
+    function buildGroupOptions(schema) {
+        return Object.values(schema)
+            .filter(field => field.grouper === true)
+            .map(field => ({ label: field.label, value: field.id }))
+    }
+
+    return (
+        <Fragment>
+            <Header icon={icon} title={<Text>{title}</Text>}>
+                <DropDown id="groupBy" label="Agrupar Por" value={groupBy} options={buildGroupOptions(schema)} onChange={changeGroup} />
+                {tabs}
+            </Header>
+            <main className="table-editor">
+                {renderGroups()}
+            </main>
+        </Fragment>
+    )
+}
+
+/**
+ * Table Context
+ */
+const TableContext = (url, field, host, urlQuery) => {
+
+    const API = TableAPI(url, host)
+
+    return {
+
+        all: [],
+        checked: new Set([]),
+        selected: null,
+        filters: {},
+        queries: [],
+        tab: null,
+
+        async load(filter, like) {
+            try {
+                const filters = filter ? Object.keys(filter).reduce((filters, key) => {
+                    const field = filter[key];
+                    if (field) {
+                        if (CHECK['isObject'](field)) {
+                            Object.keys(field).forEach(key2 => {
+                                const subfield = field[key2]
+                                if (subfield) filters[`${key}.${key2}`] = subfield
+                            })
+                        } else {
+                            filters[key] = field;
+                        }
+                    }
+
+                    return filters;
+                }, {}) : []
+                
+                if (this.tab) {
+                    filters[this.tab.field] = this.tab.value
+                }
+
+                const data = await API.all(filters, like);
+                this.all = field ? data[field] : data;
+            } catch (error) {
+                console.log(error)
+            }
+            return
+        },
+
+        check(ids, isChecked = true) {
+            if (isChecked) {
+                ids.forEach(id => this.checked.add(id))
+            } else {
+                ids.forEach(id => this.checked.delete(id))
+            }
+        },
+
+        changeTab(tab) {
+            this.tab = tab
+        },
+
+        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({}, false);
+            } 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
+        },
+
+        async loadQueries(user) {
+            try {
+                this.queries = await API.queries(user, urlQuery)
+            } catch (error) {
+                console.log(error)
+            }
+        },
+
+        async createQuery(query, user) {
+            try {
+                await API.createQuery(query, urlQuery)
+                await this.loadQueries(user)
+            } catch (error) {
+                console.log(error)
+            }
+        },
+
+        async removeQuery(id, user) {
+            try {
+                await API.removeQuery(id, urlQuery)
+                await this.loadQueries(user)
+            } catch (error) {
+                console.log(error)
+            }
+            return
+        }
+
+    }
+}
+
+/**
+ * table API
+ */
+const TableAPI = (url, host) => {
+
+    const http = HTTPClient(host || window.API || process.env.REACT_APP_API, Session);
+
+    return {
+        all(filters, like = true) {
+            let queryParams = "?"
+            if (filters) {
+                const filterQuery = Object.keys(filters).reduce((query, key) => {
+                    const value = filters[key]
+                    if (typeof (value) === 'boolean') {
+                        return query.concat(`${key}=${value}&`)
+                    } else if (Array.isArray(value)) {
+                        const param = value.length === 0 ? '' : value.reduce((param, item) => {
+                            param = param.concat(`${key}=${item}&`)
+                            return param
+                        }, "")
+                        return query.concat(param)
+                    } else {
+                        return like ? query.concat(`${key}=%${filters[key]}%&`) :  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}`)
+        },
+
+        queries(user, url2) {
+            let url3 = url2 ? url2 : url
+            url3 = url3 + "queries"
+            if (user) url3 = url3 + `?user=${user}`
+            return http.GET(url3)
+        },
+
+        createQuery(form, url2) {
+            const url3 = url2 ? url2 : url
+            const body = JSON.stringify(form)
+            return http.POST(`${url3}queries`, body)
+        },
+
+        removeQuery(id, url2) {
+            const url3 = url2 ? url2 : url
+            return http.DELETE(`${url3}queries/${id}`)
+        },
+    }
+}

package/src/domain/index.js

@@ -5,3 +5,4 @@ export { CreateContentDialog } from './CreateContentDialog'
 export { EditContentDialog } from './EditContentDialog'
 export { CollectionPage, CollectionContext, CollectionTree } from './CollectionPage'
 export { TablePage, TableEditor } from './TablePage'
+export { TabbedTablePage } from './TabbedTablePage'