ywana-core8 0.0.679 → 0.0.680

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.679",
+  "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);
 }
 
@@ -92,18 +84,18 @@ main.collection-page.dock-to-right>article {
 
 .filter-field>label {
     display: flex;
-    font-size: .7rem;
+    font-size: .8rem;
     color: var(--text-color-lighter);
     margin-right: .2rem;
 }
 
 .filter-field>.value {
-    font-size: .8rem;
+    font-size: .9rem;
     padding:
 }
 
 .placeholder {
-    font-size: .8rem;
+    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'
@@ -93,8 +93,8 @@ export const CollectionPage = (props) => {
  */
 export const CollectionFilters = (props) => {
 
-    const { schema, onChange } = props
-    const [form, setForm] = useState({})
+    const { schema, initial = {}, onChange } = props
+    const [form, setForm] = useState(initial)
     const [showFilters, setShowFilters] = useState(false)
 
     const filterSchema = useMemo(() => {
@@ -131,21 +131,17 @@ export const CollectionFilters = (props) => {
     }
 
     const content = new Content(filterSchema, form)
+    const expanded = showFilters ? "expanded" : ""
     return (
         <Fragment>
-            <Header icon="filter_list" className="filters-header">
+            <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 form={form} />
+                <FilterResume schema={filterSchema} form={form} onClear={clear} />
             </Header>
             {showFilters ? (
-                <>
-                    <nav className="collection-filters">
-                        <Icon icon="clear_all" size="small" clickable action={clear} />
-                    </nav>
-                    <main className="collection-filters">
-                        <ContentEditor content={content} onChange={change} />
-                    </main>
-                </>
+                <div className="collection-filters">
+                    <ContentEditor content={content} onChange={change} />
+                </div>
             ) : null}
         </Fragment>
     )
@@ -153,22 +149,31 @@ export const CollectionFilters = (props) => {
 
 const FilterResume = (props) => {
 
-    const { form = {} } = props
+    const { schema, form = {}, onClear } = props
 
     const fields = Object.keys(form)
         .filter(key => form[key] !== undefined && form[key] !== null && form[key] !== "")
 
     return (
-        <div className='filters-resume'>
-            {
-                fields.length > 0 ? fields.map(key => (
-                <div className='filter-field'>
-                    <label>{key}</label>
-                    <div className='value'>{form[key]}</div>
-                </div>
-            )) : <div className="placeholder">No se aplican filtros</div>
-        }
-        </div>
+        <>
+            {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>
+        </>
     )
 }
 
@@ -323,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);