ywana-core8 0.0.678 → 0.0.680

package/package.json

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

package/src/commons.js

@@ -0,0 +1,30 @@
+/**
+ * isEmpty
+ * 
+ * @param {*} obj 
+ * @returns 
+ */
+export function isEmpty(obj) {
+
+    // null
+    if (obj === null) {
+        return true
+    }
+    // undefined
+    if (obj === undefined) {
+        return true
+    }
+    // empty string
+    if (typeof obj === "string" && obj.length === 0) {
+        return true
+    }
+    // empty array
+    if (Array.isArray(obj) && obj.length === 0) {
+        return true
+    }
+    // empty object
+    if (typeof obj === "object" && Object.keys(obj).length === 0 && obj.constructor === Object) {
+        return true
+    }
+    return false
+}

package/src/domain/CollectionAPI.js

@@ -0,0 +1,86 @@
+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/domain/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/domain/CollectionPage.css

@@ -14,16 +14,8 @@ menu.collection-page>header {
     padding: 0 0.5rem
 }
 
-menu.collection-page>nav.collection-filters {
-    height: 2rem;
-    display: flex;
-    justify-content: flex-end;
-    border-bottom: dotted 1px var(--divider-color);
-    background-color: var(--background-color);
-}
-
-menu.collection-page>main.collection-filters {
-    border-bottom: dotted 1px var(--divider-color);
+menu.collection-page>div.collection-filters {
+    border-bottom: solid 1px var(--divider-color);
     background-color: var(--background-color);
 }
 
@@ -67,4 +59,43 @@ main.collection-page.dock-to-right>main {
 
 main.collection-page.dock-to-right>article {
     grid-area: dock;
+}
+
+.filters-header>.icon {
+    width: 2rem;
+    font-size: 1.2rem;
+}
+
+.filters-resume {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.filter-field {
+    flex: 0;
+    display: flex;
+    padding: .2rem .4rem;
+    margin: .2rem;
+    align-items: baseline;
+    background-color: var(--background-color);
+    border-radius: .2rem;
+}
+
+.filter-field>label {
+    display: flex;
+    font-size: .8rem;
+    color: var(--text-color-lighter);
+    margin-right: .2rem;
+}
+
+.filter-field>.value {
+    font-size: .9rem;
+    padding:
+}
+
+.placeholder {
+    font-size: .9rem;
+    font-style: italic;
+    color: var(--text-color-lighter);
 }

package/src/domain/CollectionPage.js

@@ -2,7 +2,7 @@ import equal from 'deep-equal'
 import React, { Fragment, useContext, useEffect, useRef, useState, useMemo } from 'react'
 import { HTTPClient, Session } from '../http'
 import { PageContext } from '../site'
-import { Button, Header, Icon, List, Menu, MenuIcon, MenuItem, Text, Tree, TreeItem, TreeNode, TextField, Chip } from '../html'
+import { Tooltip, Button, Header, Icon, List, Menu, MenuIcon, MenuItem, Text, Tree, TreeItem, TreeNode, TextField, Chip, Tooltip } from '../html'
 import { Content, TYPES } from './ContentType'
 import { ContentEditor, TabbedContentEditor, TreededContentEditor } from './ContentEditor'
 import { CreateContentDialog } from './CreateContentDialog'
@@ -75,7 +75,7 @@ export const CollectionPage = (props) => {
             </Header>
             <menu className={`collection-page ${className}`}>
                 {canFilter ? <CollectionFilters schema={schema} /> : null}
-                {levels ? <CollectionTree schema={schema} icon={icon} levels={levels} onSelect={onSelect} sorter={sorter} searchBy={searchBy} namer={namer}/> : <CollectionList groupBy={groupBy} onSelect={onSelect} searchBy={searchBy} />}
+                {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}`}>
                 <CollectionEditor icon={icon} schema={schema} layout={editor} autosave={autosave} delay={delay} canDelete={canDelete} onReload={reloadSelection} patch={patch} onChange={onChange} />
@@ -93,9 +93,9 @@ export const CollectionPage = (props) => {
  */
 export const CollectionFilters = (props) => {
 
-    const { schema, onChange } = props
-    const [form, setForm] = useState({})
-    const [showFilter, setShowFilter] = useState(false)
+    const { schema, initial = {}, onChange } = props
+    const [form, setForm] = useState(initial)
+    const [showFilters, setShowFilters] = useState(false)
 
     const filterSchema = useMemo(() => {
         const filterSchema = Object.assign({}, schema)
@@ -127,32 +127,56 @@ export const CollectionFilters = (props) => {
     }
 
     function toggleFilters() {
-        setShowFilter(!showFilter)
+        setShowFilters(!showFilters)
     }
 
     const content = new Content(filterSchema, form)
+    const expanded = showFilters ? "expanded" : ""
     return (
         <Fragment>
-            <header>
-                <div className='expand'>
-                    <Chip label="Activas" />
+            <Header icon="filter_list" className={`filters-header ${expanded}`}>
+                {showFilters ? <Icon icon="expand_less" size="small" clickable action={toggleFilters} /> : <Icon icon="expand_more" size="small" clickable action={toggleFilters} />}
+                <FilterResume schema={filterSchema} form={form} onClear={clear} />
+            </Header>
+            {showFilters ? (
+                <div className="collection-filters">
+                    <ContentEditor content={content} onChange={change} />
                 </div>
-                {showFilter ? <Icon icon="expand_less" size="small" clickable action={toggleFilters} /> : <Icon icon="expand_more" size="small" clickable action={toggleFilters} />}
-            </header>
-            {showFilter ? (
-                <>
-                    <nav className="collection-filters">
-                        <Icon icon="clear_all" size="small" clickable action={clear} />
-                    </nav>
-                    <main className="collection-filters">
-                        <ContentEditor content={content} onChange={change} />
-                    </main>
-                </>
             ) : null}
         </Fragment>
     )
 }
 
+const FilterResume = (props) => {
+
+    const { schema, form = {}, onClear } = props
+
+    const fields = Object.keys(form)
+        .filter(key => form[key] !== undefined && form[key] !== null && form[key] !== "")
+
+    return (
+        <>
+            {fields.length > 0 ? (
+                <Tooltip text="Limpiar Filtros">
+                    <Icon icon="clear_all" size="small" clickable action={onClear} />
+                </Tooltip> 
+            ) : null}
+
+            <div className='filters-resume'>
+                {
+                    fields.length > 0 ? fields.map(key => (
+                        <div className='filter-field'>
+                            <label>{schema[key].label}</label>
+                            <div className='value'>{form[key]}</div>
+                        </div>
+                    )) : <div className="placeholder">No se aplican filtros</div>
+                }
+
+            </div>
+        </>
+    )
+}
+
 /**
  * Collection List
  */
@@ -304,7 +328,7 @@ export const CollectionTree = (props) => {
             </main>
             <footer>
                 <div className='search-box'>
-                    <TextField icon="search" label="Search" onChange={changeSearch} outlined className="search-box" />
+                    <TextField label="Search" onChange={changeSearch} outlined className="search-box" />
                 </div>
             </footer>
         </>

package/src/index.js

@@ -1,13 +1,14 @@
 import 'material-design-icons-iconfont/dist/material-design-icons.css'
 import './css/html.css'
 
+export * from './commons'
+
 export * from './http'
 export * from './html'
 export * from './widgets'
 export * from './site'
 export * from './domain'
 
-
 export * from './incubator'
 
 export const isFunction = value => value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);

package/src/site/site.test.js

@@ -205,11 +205,11 @@ const Page5 = (props) => {
             { label: "Pendiente", value: "NOT_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: false            , label: "field1" },
-        field2: { id: "field2", section: "B", type: TYPES.STRING                  , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: false            , label: "field2" },
+        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 },
+        id    : { id: "id"                  , type: TYPES.STRING                                                                        , filter: false },
     }
 
     return (