ywana-core8 0.0.699 → 0.0.701

package/src/domain2/CollectionPage.test.js

@@ -0,0 +1,88 @@
+import React, { useContext, useEffect, useState } from 'react'
+import { CheckBox } from '../html'
+import { CollectionContext } from './CollectionContext'
+import { CollectionPage } from './CollectionPage'
+
+const CollectionPageTest = (prop) => {
+
+    const schema = [
+        { id: "id", type: "string", label: "ID" },
+        { id: "name", type: "string", label: "Name", filter: true },
+        { id: "gender", type: "string", label: "Gender", filter: true, options: [ 
+            { label: "Masculine", value: 1 }, 
+            { label: "Feminine", value: 0 }
+        ]},
+    ]
+
+    const props = {
+        host: "http://localhost:3000",
+        url: "/references",
+        schema,
+        layout: "ide",
+        canFilter: true,
+        customFilters: [<CustomFilter1 />,<CustomFilter2 />]
+    }
+
+    return (
+        <>
+            <CollectionPage {...props} />
+        </>
+    )
+}
+
+const CustomFilter1 = (props) => {
+
+    const context = useContext(CollectionContext)
+    const [active, setActive] = useState(false)
+
+    useEffect(() => {
+        if (active) {
+            context.addCustomFilter("custom1", filter)
+        } else {
+            context.removeCustomFilter("custom1")
+        }
+    }, [active])
+
+    function change(id, value) {
+        setActive(value)
+    }
+
+    function filter(all) {
+        return all.filter(item => {
+            return item.name.startsWith("1")
+        })
+    }
+
+    return (
+        <CheckBox id="custom1" value={active} label="Active" onChange={change}/>
+    )
+}
+
+const CustomFilter2 = (props) => {
+
+    const { value = false } = props
+    const context = useContext(CollectionContext)
+    const [active, setActive] = useState(value)
+
+    useEffect(() => {
+        if (active) {
+            context.addCustomFilter("custom2", filter)
+        } else {
+            context.removeCustomFilter("custom2")
+        }
+    }, [active])
+
+    function change(id, value) {
+        setActive(value)
+    }
+
+    function filter(all) {
+        return all.filter(item => {
+            return item.name.endsWith("1")
+        })
+    }
+
+    return (
+        <CheckBox id="custom1" value={active} label="Locked" onChange={change}/>
+    )
+}

package/src/domain2/CollectionQueries.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export const CollectionQueries = (props) => {
+
+    return (
+        <div className="collection-queries">
+            queries
+        </div>
+    )
+}

package/src/domain2/DynamicForm.css

@@ -0,0 +1,14 @@
+.dynamic-form {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 0 .5rem;
+}
+
+.dynamic-form-field {
+    width: 100%;
+    height: 100%;
+}

package/src/domain2/DynamicForm.js

@@ -0,0 +1,82 @@
+import React from 'react'
+import { CheckBox, ColorField, DateRange, DropDown, TextField, TokenField } from '../html'
+import { FORMATS } from './FORMATS'
+import './DynamicForm.css'
+
+/**
+ * Dynamic Form
+ */
+export const DynamicForm = (props) => {
+    const { schema, values, onChange } = props
+
+    function change(id, value) {
+        if (onChange) onChange(id, value)
+    }
+
+    return (
+        <div className="dynamic-form">
+            {schema.map(field => {
+                const { id, label, type } = field
+                return (
+                    <DynamicFormField key={id} field={field} value={values[id]} onChange={change} />
+                )
+            })}
+        </div>
+    )
+}
+
+/**
+ * Dynamic Form Field
+ */
+const DynamicFormField = (props) => {
+
+    const { field, value, onChange } = props
+    const { id, type, format, options, required } = field
+
+    function change(id, value) {
+        if (onChange) onChange(id, value)
+    }
+
+    function buildOptions() {
+        if (typeof options === "function") {
+            return options()
+        }
+        return options
+    }
+
+    function renderByFormat() {
+
+        const label = required ? `${field.label} *` : field.label
+
+        switch (format) {
+            case FORMATS.DATE:
+                return <TextField id={id} label={label} type="date" value={value} onChange={change} outlined />
+            case FORMATS.TIME:
+                return <TextField id={id} label={label} type="time" value={value} onChange={change} outlined />
+            case FORMATS.DATERANGE:
+                return <DateRange id={id} label={label} value={value} onChange={change} />
+            case FORMATS.TOKENS:
+                return <TokenField id={id} label={label} onChange={change} options={buildOptions()} tokens={value} />
+            case FORMATS.COLOR:
+                return <ColorField id={id} onChange={change} value={value} />
+            default:
+                return options ? <DropDown id={id} label={label} value={value} onChange={change} options={options} outlined/> :
+                    <TextField id={id} label={label} value={value} onChange={change} outlined />
+        }
+    }
+
+    function renderByType() {
+        switch (type) {
+            case "boolean":
+                return <CheckBox id={id} label={field.label} value={value} onChange={change} />
+            default:
+                return renderByFormat()
+        }
+    }
+
+    return (
+        <div className="dynamic-form-field">
+            {renderByType()}
+        </div>
+    )
+}

package/src/domain2/DynamicForm.test.js

@@ -0,0 +1,46 @@
+import React, { useState } from 'react'
+import { DynamicForm } from './DynamicForm'
+import { FORMATS } from './FORMATS'
+
+const DynamicFormTest = (props) => {
+
+    const config = {
+        host: "http://localhost:3000",
+        url: "/references",
+    }
+
+    const style = {
+        display: "flex",
+        flexDirection: "row",
+    }
+
+    const schema = [
+        { id: "id", type: "string", label: "ID" },
+        { id: "name", type: "string", label: "Name", filter: true, like: true },
+        { id: "gender", type: "string", label: "Gender", filter: true, options: [ 
+            { label: "Masculine", value: 1 }, 
+            { label: "Feminine", value: 0 }
+        ]},
+        { id: "initDate", type: "string", label: "Init Date", format: FORMATS.DATE },
+        { id: "hour", type: "string", label: "Hour", format: FORMATS.TIME},
+        { id: "range", type: "string", label: "Range", format: FORMATS.DATERANGE },
+        { id:"email", type: "string", label: "Email", format: FORMATS.EMAIL },
+        { id: "color", type: "string", label: "Color", format: FORMATS.COLOR },
+        { id: "active", type: "boolean", label: "Active", format: FORMATS.CHECKBOX },
+    ]
+
+    const [values, setValues] = useState({})
+
+    function onChange(id, value) {
+        setValues({ ...values, [id]: value })
+    }
+
+    console.log(values)
+
+    return (
+        <div style={style}>
+            <DynamicForm schema={schema} values={values} onChange={onChange}/>
+        </div>
+
+    )
+}

package/src/domain2/FORMATS.js

@@ -5,7 +5,7 @@ export const FORMATS = {
     NONE: '',
     DATE: 'date',
     DATERANGE: 'DATERANGE',
-    TIME: 'time',
+    TIME: 'time',   
     EMAIL: 'email',
     HTML: 'HTML',
     URL: 'URL',

package/src/html/index.js

@@ -14,7 +14,7 @@ export { Section } from './section'
 export { Tabs, Tab, Stack } from './tab'
 export { DataTable } from './table'
 export { Text, TEXTFORMATS } from './text'
-export { TextField, DropDown, TextArea } from './textfield'
+export { TextField, DropDown, TextArea, DateRange } from './textfield'
 export { TokenField } from './tokenfield'
 export { Tree, TreeNode, TreeItem } from './tree'
 export { Switch } from './switch'

package/src/html/textfield.js

@@ -203,7 +203,10 @@ export const DateRange = (props) => {
     const [form, setForm] = useState({})
 
     useEffect(() => {
-        if (onChange) onChange(id, form)
+        // if form has changed
+        if (form && form.from && form.to) {
+            if (onChange) onChange(id, form)
+        }
     }, [form])
 
     function change(id, value) {

package/src/incubator/task.js

@@ -69,13 +69,11 @@ export const TaskContextProvider = (props) => {
                 listeners.splice(index, 1)
             }
         })
-        console.log("listeners after remove", listeners)
     }
 
     useEffect(() => {
         const interval = setInterval(async () => {
             const tasks = await API.all()
-            console.log(listeners)
             listeners.forEach(({ taskId, listener }) => {
                 const task = tasks.find(task => task.id === taskId)
                 if (task) listener(task)

package/src/site/site.test.js

@@ -199,15 +199,15 @@ const Page5 = (props) => {
     }
 
     const schema = {
-        field6: { id: "field6", section: "C", type: TYPES.ARRAY , item: ENTITYTYPE                                                                                  , filter: false            , label: "Collection 100"},
-        name  : { id: "name"  , section: "A", type: TYPES.STRING                  , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true, label: "Name"   },
-        state : { id: "state" , section: "A", type: TYPES.STRING                  , format: FORMATS.NONE , required: true, tab: true , grouper: true , column: true , filter: true             , label: "State" , options: [
+        field6: { id: "field6", section: "C", type: TYPES.ARRAY , item: ENTITYTYPE                                                                                  , filter: false             , label: "Collection 100"},
+        name  : { id: "name"  , section: "A", type: TYPES.STRING                  , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true , label: "Name"   },
+        state : { id: "state" , section: "A", type: TYPES.STRING                  , format: FORMATS.NONE , required: true, tab: true , grouper: true , column: true , filter: true              , label: "State" , options: [
             { label: "Pendiente", value: "NOT_CLASSIFIED" },
-            { label: "Clasificada", value: "CLASSIFIED"}, 
+            { label: "Clasificada", value: "CLASSIFIED" },
         ]},
-        field1: { id: "field1", section: "A", type: TYPES.STRING                  , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true            , label: "field1" },
-        field2: { id: "field2", section: "B", type: TYPES.STRING                  , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true            , label: "field2" },
-        field4: { id: "field4", section: "B", type: TYPES.STRING                  , format: FORMATS.COLOR, required: true, tab: false, grouper: true , column: true , filter: false            , label: "Color"  },
+        field1: { id: "field1", section: "A", type: TYPES.STRING                  , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true              , label: "field1" },
+        field2: { id: "field2", section: "B", type: TYPES.STRING                  , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true              , label: "field2" },
+        field4: { id: "field4", section: "B", type: TYPES.STRING                  , format: FORMATS.COLOR, required: true, tab: false, grouper: true , column: true , filter: false             , label: "Color"  },
         field5: { id: "field5", section: "B", type: TYPES.ENTITY, item: ENTITYTYPE, format: FORMATS.NONE , editable: true, tab: false, grouper: false, column: true , filter: false, like: false, label: "Entity5"},
         id    : { id: "id"                  , type: TYPES.STRING                                                                        , filter: false },
     }
@@ -217,7 +217,8 @@ const Page5 = (props) => {
             <CollectionPage 
                 title="Referencias" 
                 schema={schema} host="http://localhost:3000" url="/references" fetching={true}              // resource 
-                searchBy={["name"]} levels={["color"]} canFilter={true}                                   // menu
+                searchBy={["name"]} levels={["color"]}                                                      // list
+                canFilter={true} filters={{ name: "111" }}                                                                          // filters
                 editor="TABBED" canAdd={true}                                                               // editor
             />
         </Fragment>

package/src/domain2/Content.js

@@ -1,33 +0,0 @@
-import { FORMATS } from "./FORMATS";
-
-/**
- * Content
- */
-class Content {
-
-    constructor(schema, value) {
-        this.schema = schema;
-        this.value = value;
-    }
-
-}
-
-const ADDRESS_SCHEMA = { 
-    id     : { type: TYPES.STRING              },
-    street : { type: TYPES.STRING, default: '' },
-    city   : { type: TYPES.STRING, default: '' },
-    state  : { type: TYPES.STRING, default: '' },
-    zip    : { type: TYPES.STRING, default: '' },
-    country: { type: TYPES.STRING, default: '' },
-}
-
-const PERSON_SCHEMA = {
-    id      : { type: TYPES.STRING                                                                                },
-    name    : { type: TYPES.STRING                      , format: FORMATS.NONE, label: 'Name'                     },
-    address : { type: TYPES.ENTITY, item: ADDRESS_SCHEMA, format: FORMATS.NONE, label: 'Address'                  },
-    age     : { type: TYPES.NUMBER                      , format: FORMATS.NONE, label: 'Age'     , default: 0     },
-    married : { type: TYPES.BOOLEAN                     , format: FORMATS.NONE, label: 'Married' , default: false },
-    children: { type: TYPES.ARRAY  , item: TYPES.STRING , format: FORMATS.NONE, label: 'Children', default: []    },
-}
-
-const person = new Content(PERSON_SCHEMA, {})

package/src/domain2/ContentFilters.js

@@ -1,74 +0,0 @@
-export const ContentFilters = (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])
-
-    const likes = useMemo(() => {
-        const fields = Object.values(schema)
-        return fields.reduce((likes, field) => {
-            if (field.like === true) likes.push(field.id)
-            return likes
-        }, [])
-    }, [schema])
-
-    useEffect(() => {
-        if (filters) setForm(filters)
-    }, [filters])
-
-    useEffect(() => {
-        reload()
-    }, [form])
-
-    async function change(next) {
-        setForm(next)
-    }
-
-    async function reload() {
-        await pageContext.load(form, likes)
-        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>
-    )
-}

package/src/domain2/ContentPage.js

@@ -1,96 +0,0 @@
-export const ContentPage = (props) => {
-
-    const {
-        icon, title, className,
-        schema, url,
-    } = props
-
-    return (
-        <>
-            <header className="content-page"></header>
-            <nav className="content-page"></nav>
-            <menu className="content-page">
-
-            </menu>
-            <main className="content-page">
-
-            </main>
-            <aside className="content-page"></aside>
-            <footer className="content-page"></footer>
-        </>
-    )
-}
-
-
-
-/**
- * Content API
- */
-const ContentAPI = (url, host) => {
-
-    const http = HTTPClient(host || window.API || process.env.REACT_APP_API, Session);
-
-    return {
-        all(filters = [], likes = [], page) {
-            let queryParams = page ? `?page=${page}&` : "?"
-            const filterQuery = Object.keys(filters).reduce((query, key) => {
-                const value = filters[key]
-                if (typeof (value) === 'boolean') return query.concat(`${key}=${value}&`)
-                if (Array.isArray(value)) {
-                    const param = value.length === 0 ? '' : value.reduce((param, item) => {
-                        param = param.concat(`${key}=${item}&`)
-                        return param
-                    }, "")
-                    return query.concat(param)
-                }
-                const likeSymbol = likes.includes(key) ? '%' : ''
-                return query.concat(`${key}=${likeSymbol}${value}${likeSymbol}&`)
-            }, "")
-            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)
-        },
-
-        updateProperty(id, propertyName, form) {
-            const body = JSON.stringify(form)
-            return http.PUT(`${url}/${id}/${propertyName}`, body)
-        },
-
-        patch(id, form) {
-            const body = JSON.stringify(form)
-            return http.PATCH(`${url}/${id}`, body)
-        },
-
-        remove(id) {
-            return http.DELETE(`${url}/${id}`)
-        },
-
-        queries(user) {
-            const queryParams = user ? `?user=${user}` : ""
-            return http.GET(`/queries/${url}${queryParams}`)
-        },
-
-        createQuery(form) {
-            const body = JSON.stringify(form)
-            return http.POST(`/queries/${url}`, body)
-        },
-
-        removeQuery(id) {
-            return http.DELETE(`/queries/${url}/${id}`)
-        },
-
-    }
-}