ywana-core8 0.0.698 → 0.0.700

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.698",
+  "version": "0.0.700",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/domain/CollectionAPI.js

@@ -25,7 +25,6 @@ import { isEmpty} from '../commons'
         const paramString = notEmptyFields.reduce((query, key) => {
                 const value = obj[key]
                 const like = likes.includes(key) ? '%' : ''
-
                 if (Array.isArray(value)) {
                     const values = value.map(v => `${key}=${like}${v}${like}`).join("&")
                     return `${query}${values}&`
@@ -39,7 +38,6 @@ import { isEmpty} from '../commons'
                     return `${query}${key}=${like}${value}${like}&`
                 }
             }, "")
-
         return paramString
     }
 

package/src/domain/CollectionPage.js

@@ -24,6 +24,7 @@ export const CollectionPage = (props) => {
         autosave = false, delay = 1000, patch = false, versioning = false,
         groupBy, levels, sorter, namer,
         editor, editorTitle, editorActions,
+        filters,
         footer,
         children
     } = props
@@ -78,7 +79,7 @@ export const CollectionPage = (props) => {
                 {renderActions()}
             </Header>
             <menu className={`collection-page ${className} ${hiddenStyle}`}>
-                {canFilter ? <CollectionFilters schema={schema} /> : null}
+                {canFilter ? <CollectionFilters schema={schema} initial={filters} /> : null}
                 {levels ? <CollectionTree schema={schema} icon={icon} levels={levels} onSelect={onSelect} sorter={sorter} searchBy={searchBy} namer={namer} /> : <CollectionList groupBy={groupBy} onSelect={onSelect} searchBy={searchBy} />}
             </menu>
             <main key={id} className={`collection-page ${className}`}>
@@ -97,6 +98,7 @@ export const CollectionPage = (props) => {
  */
 export const CollectionFilters = (props) => {
 
+    const [pageContext, setPageContext] = useContext(PageContext)
     const { schema, initial = {}, onChange } = props
     const [form, setForm] = useState(initial)
     const [showFilters, setShowFilters] = useState(false)

package/src/domain2/CollectionAPI.js

@@ -0,0 +1,83 @@
+import { HTTPClient, Session } from '../http'
+import { isEmpty} from '../commons'
+
+/**
+ * Collection API
+ */
+ export const CollectionAPI = (url, host) => {
+
+    const http = HTTPClient(host || window.API || process.env.REACT_APP_API, Session);
+
+    /**
+     * objectToQueryParamString
+     * 
+     * @param {*} obj 
+     * @returns 
+     */
+    function objectToQueryParamString(obj, likes) {
+
+        if (isEmpty(obj)) {
+            return ""
+        }
+
+        const notEmptyFields = Object.keys(obj).filter(key => !isEmpty(obj[key]))
+
+        const paramString = notEmptyFields.reduce((query, key) => {
+                const value = obj[key]
+                const like = likes.includes(key) ? '%' : ''
+                if (Array.isArray(value)) {
+                    const values = value.map(v => `${key}=${like}${v}${like}`).join("&")
+                    return `${query}${values}&`
+                } else if (typeof value === "object") {
+                    const params = objectToQueryParamString(value, likes)
+                    params.split("&").forEach(param => {
+                        query = query.concat(`${key}.${param}&`)
+                    })
+                    return query
+                } else {
+                    return `${query}${key}=${like}${value}${like}&`
+                }
+            }, "")
+        return paramString
+    }
+
+    return {
+
+        all(filters, likes = [], page) {
+            let queryParams = page ? `?page=${page}&` : "?"
+            const filterQuery = objectToQueryParamString(filters, likes)
+            queryParams = `${queryParams}${filterQuery}`
+            queryParams = queryParams.substring(0, queryParams.length - 1)
+            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}`)
+        },
+
+    }
+}

package/src/domain2/CollectionAPI.test.js

@@ -0,0 +1,19 @@
+import React, { useState } from 'react'
+import { Button } from '../html'
+
+import { CollectionAPI } from './CollectionAPI'
+
+const CollectionAPITest = (prop) => {
+
+    const API = CollectionAPI('/references', 'http://localhost:3000')
+
+    function all() {
+        API.all({ name: "2223"}, ["name"]).then(res => console.log(res))
+    }
+
+    return (
+        <>
+            <Button label="ALL" action={all} />
+        </>
+    )
+}

package/src/domain2/CollectionContext.js

@@ -0,0 +1,160 @@
+import React, { useState } from 'react'
+import { CollectionAPI } from "./CollectionAPI";
+
+export const CollectionContext = React.createContext()
+
+/**
+ * Collection Context
+ */
+export const CollectionContextProvider = (props) => {
+
+    const { host, url, page, fetching=true, field, versioning = false, children } = props
+    const API = CollectionAPI(url, host)
+
+    const [all, setAll] = useState([])
+    const [filters, setFilters] = useState({})
+    const [likes, setLikes] = useState([])
+    const [customFilters, setCustomFilters] = useState({})
+    const [queries, setQueries] = useState([])
+    const [selected, setSelected] = useState(null)
+
+    async function load() {
+
+        const runCustomFilters = (all) => {
+            const cfs = Object.values(customFilters)
+            const data = cfs.length ? cfs.reduce((acc, filter) => filter(acc), all) : all;
+            return data
+        }
+
+        try {
+            const response = await API.all(filters, likes, page);
+            const next = field ? response[field] : response;
+            const data = runCustomFilters(next)
+            setAll(data)
+        } catch (error) {
+            console.log(error)
+        }
+        return
+    }
+
+    async function select(id) {
+        if (fetching) {
+            const result = await this.fetch(id)
+            setSelected(result)
+        } else {
+            const result = this.all.find(item => item.id === id);
+            setSelected(result)
+        }
+    }
+
+    function addCustomFilter(id, filter) {
+        setCustomFilters({ ...customFilters, [id]: filter })
+    }
+
+    function removeCustomFilter(id) {
+        const next = { ...customFilters }
+        delete next[id]
+        setCustomFilters(next)
+    }
+
+/*
+    async function reloadSelection() {
+        const result = await this.fetch(this.selected.id)
+        this.selected = result
+    }
+
+    async function fetch(id) {
+        try {
+            const result = await API.find(id)
+            return result
+        } catch (error) {
+            console.log(error)
+        }
+    }
+
+    function clear() {
+        this.selected = null
+    }
+
+    async function create(form) {
+        try {
+            if (versioning) form.version = 1
+            await API.create(form);
+            await this.load();
+        } catch (error) {
+            console.log(error)
+        }
+        return
+    }
+
+    async function update(form) {
+        try {
+            if (versioning) form.version = form.version ? form.version + 1 : 1
+            await API.update(form)
+            await this.load()
+        } catch (error) {
+            console.log(error)
+        }
+        return
+    }
+
+    async function patch(id, form) {
+        try {
+            if (versioning) form.version = form.version ? form.version + 1 : 1
+            await API.patch(id, form)
+            await this.load()
+        } catch (error) {
+            console.log(error)
+        }
+        return
+    }
+
+    async function updateProperty(id, propertyName, form) {
+        try {
+            await API.updateProperty(id, propertyName, form)
+            await this.load()
+        } catch (error) {
+            console.log(error)
+        }
+        return
+    }
+
+    async function remove(id) {
+        try {
+            await API.remove(id)
+            await this.load()
+        } catch (error) {
+            console.log(error)
+        }
+        return
+    }
+
+    */
+
+    const value = {
+        all,
+        load,
+
+        selected,
+        select,
+
+        filters,
+        setFilters,
+        setLikes,
+
+        customFilters,
+        addCustomFilter,
+        removeCustomFilter,
+
+        queries,
+        setQueries,
+
+    }
+
+    return (
+        < CollectionContext.Provider value = { value } >
+            { children }
+        </CollectionContext.Provider >
+    )
+}
+

package/src/domain2/CollectionContext.test.js

@@ -0,0 +1,58 @@
+import React, { useContext } from 'react'
+import { CheckBox } from '../html'
+import { CollectionContext, CollectionContextProvider } from './CollectionContext'
+import { CollectionEditor } from './CollectionEditor'
+import { CollectionFilters } from './CollectionFilters'
+import { CollectionList } from './CollectionList'
+
+const CollectionContextTest = (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: "description", type: "string", label: "Description" },
+    ]
+
+    return (
+        <div style={style}>
+            <CollectionContextProvider {...config}>
+                <CollectionFilters schema={schema} >
+                    <CustomFilter1 />
+                </CollectionFilters>
+                <CollectionList />
+                <CollectionEditor />
+            </CollectionContextProvider>
+        </div>
+
+    )
+}
+
+const CustomFilter1 = (props) => {
+    const collectionContext = useContext(CollectionContext)
+    const { filters, setFilters } = collectionContext
+
+    function change(id, value) {
+        setFilters({ ...filters, [id]: value })
+    }
+
+    return (
+        <div>
+            <CheckBox id="custom1" label="Custom Filter 1" value={filters.custom1} onChange={change} />
+        </div>
+    )
+}
+

package/src/domain2/CollectionEditor.js

@@ -0,0 +1,17 @@
+import React, { useContext } from 'react'
+import { CollectionContext } from './CollectionContext'
+
+/**
+ * Collection Editor
+ */
+ export const CollectionEditor = (props) => {
+
+    const context = useContext(CollectionContext)
+    const { selected } = context
+
+    return (
+        <div className="collection-editor">
+            editor
+        </div>
+    )
+}

package/src/domain2/CollectionFilters.css

@@ -0,0 +1,28 @@
+.collection-filters {
+    display: flex;
+    flex-direction: column;
+    width: 30rem;
+    background-color: rgb(237, 237, 237);
+}
+
+.collection-filters>header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid rgb(207, 207, 207);
+}
+
+.custom-filters {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem;
+}
+
+.dynamic-filters {
+    display: flex;
+    flex-direction: column;
+    padding: 0 0 1rem 0;
+}

package/src/domain2/CollectionFilters.js

@@ -0,0 +1,69 @@
+import React, { useContext, useEffect, useState } from 'react'
+import { Icon, Tooltip } from '../html'
+import { CollectionContext } from './CollectionContext'
+import { DynamicForm } from './DynamicForm'
+import './CollectionFilters.css'
+
+/*.
+ * Collection Filters
+ */
+export const CollectionFilters = (props) => {
+
+    const { schema, children } = props
+    const context = useContext(CollectionContext)
+    const { filters } = context
+    const [open, setOpen] = useState(false)
+
+    useEffect(() => {
+        context.setLikes(schema.filter(field => field.like).map(field => field.id))
+    }, [schema])
+
+    function change(id, value) {
+        context.setFilters({ ...filters, [id]: value })
+    }
+
+    function toggle() {
+        setOpen(!open)
+    }
+
+    const toggleIcon = open ? "expand_less" : "expand_more"
+    return (
+        <div className="collection-filters">
+            <header>
+                <div className='custom-filters'>
+                    {children}
+                </div>
+                <CollectionFiltersResume schema={schema} />
+                <Icon icon={toggleIcon} clickable action={toggle} />
+            </header>
+            { open ? <div className='dynamic-filters'>
+                <DynamicForm schema={schema} values={filters} onChange={change} />
+            </div> : null }
+        </div>
+    )
+}
+
+const CollectionFiltersResume = (props) => {
+
+    const { schema } = props
+    const context = useContext(CollectionContext)
+    const { filters } = context
+    const fields = Object.keys(filters)
+
+    if (!fields.length) return null
+
+    return (
+        <>
+            {fields.map(id => {
+                const field = schema.find(field => field.id === id)
+                const value = filters[id]
+                return (
+                    <div className='collection-filter-resume'>
+                        <span className='collection-filter-resume-label'>{field.label}</span>
+                        <span className='collection-filter-resume-value'>{value}</span>
+                    </div>
+                )
+            })}
+        </>
+    )
+}

package/src/domain2/CollectionList.js

@@ -0,0 +1,30 @@
+import React, { useContext, useEffect } from 'react'
+import { List } from '../html'
+import { CollectionContext } from './CollectionContext'
+
+/**
+ * Collection List
+ */
+export const CollectionList = (props) => {
+
+    const context = useContext(CollectionContext)
+    const { all = [], selected, filters, customFilters } = context
+
+    useEffect(() => {
+        context.load()
+    }, [filters, customFilters])
+
+    const items = all.map(item => {
+        return {
+            icon: "folder",
+            line1: item.name,
+            meta: item.state,
+        }
+    })
+
+    return (
+        <div className="collection-list">
+            <List items={items} />
+        </div>
+    )
+}

package/src/domain2/CollectionPage.css

@@ -0,0 +1,36 @@
+.collection-page.ide {
+  display: grid;
+  grid-template-areas: "header  header" 
+                       "filters main" 
+                       "list    main";
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto auto 1fr;
+}
+
+.collection-page.ide .header {
+  grid-area: header;
+}
+
+.collection-page.ide .collection-filters {
+  grid-area: filters;
+}
+
+.collection-page.ide .collection-editor {
+  grid-area: main;
+}
+
+.collection-page.ide .collection-aside {
+  grid-area: aside;
+}
+
+.collection-page.ide .collection-list {
+  grid-area: list;
+}
+
+.collection-page.ide .collection-console {
+  grid-area: console;
+}
+
+.collection-page.ide .footer {
+  grid-area: footer;
+}

package/src/domain2/CollectionPage.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { CollectionContextProvider } from './CollectionContext'
+import { CollectionFilters } from './CollectionFilters'
+import { CollectionList } from './CollectionList'
+import { CollectionEditor } from './CollectionEditor'
+import './CollectionPage.css'
+import { Header } from '../html'
+
+/**
+ * Collection Page
+ */
+export const CollectionPage = (props) => {
+
+    const {
+        host, url, schema,
+        layout,
+        canFilter, customFilters
+    } = props
+
+    return (
+        <div className={`collection-page ${layout}`}>
+            <CollectionContextProvider host={host} url={url}>
+                <Header title="CollectionPage" />
+                {canFilter ? <CollectionFilters schema={schema} >{customFilters}</CollectionFilters> : null}
+                <CollectionList />
+                <CollectionEditor />
+            </CollectionContextProvider>
+        </div>
+
+    )
+}

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>
+    )
+}