ywana-core8 0.0.573 → 0.0.576

package/package.json

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

package/src/domain/CollectionPage.css

@@ -47,3 +47,4 @@ main.collection-page>.content-editor {
     flex: 1;
 }
 
+

package/src/domain2/Content.js

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,74 @@
+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

@@ -0,0 +1,96 @@
+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}`)
+        },
+
+    }
+}

package/src/domain2/FORMATS.js

@@ -0,0 +1,15 @@
+/**
+ * FORMATS
+ */
+export const FORMATS = {
+    NONE: '',
+    DATE: 'date',
+    DATERANGE: 'DATERANGE',
+    TIME: 'time',
+    EMAIL: 'email',
+    HTML: 'HTML',
+    URL: 'URL',
+    IMG: 'IMG',
+    COLOR: 'COLOR',
+    TOKENS: 'TOKENS'
+}

package/src/domain2/TYPES.js

@@ -0,0 +1,11 @@
+/**
+ * TYPES
+ */
+ export const TYPES = {
+    STRING: 'String',
+    NUMBER: 'Number',
+    BOOLEAN: 'Boolean',
+    ARRAY: 'Array',
+    ENTITY: 'Object',
+    FUNCTION: 'Function',
+}

package/src/widgets/planner/Planner.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState, useRef } from "react";
 import { DropDown, Header, Icon, Text, TextField, Button } from "../../html";
 import moment from "moment";
 import { extendMoment } from "moment-range";
@@ -15,15 +15,16 @@ const DATE_RANGE = [
 /**
  * Planner
  */
-export const Planner = ({ title, events = [], lanes = [], navigation = true, onSelectCell, focusEvent, config = { range: "year", from: "2022-01-01", to: "2022-12-30"}, onChange }) => {
+export const Planner = ({ title, events = [], lanes = [], navigation = true, onSelectCell, focusEvent, config = { range: "year", from: "2022-01-01", to: "2022-12-30" }, onChange }) => {
 
     const [dateRange, setDateRange] = useState(config.range);
     const [from, setFrom] = useState(config.from);
     const [to, setTo] = useState(config.to);
-
+    const thisMondayElement = useRef(null)
+    
     useEffect(() => {
-        showThisWeek()
-    }, [])
+        if (thisMondayElement.current) { showThisWeek() }
+    }, [thisMondayElement])
 
     useEffect(() => {
         const element = document.getElementById(focusEvent)
@@ -65,7 +66,8 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
     }
 
     function showThisWeek() {
-        const element = document.querySelector(".thisMonday")
+        const element = thisMondayElement.current
+        //const element = document.querySelector(".thisMonday")
         if (element) element.scrollIntoView({
             behavior: 'smooth',
             block: 'start',
@@ -93,7 +95,7 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
             {navigation ? (
                 <Header title={label}>
                     &nbsp;&nbsp;
-                    <Button label="Esta Semana" outlined action={showThisWeek}/>
+                    <Button label="Esta Semana" outlined action={showThisWeek} />
                     <Icon icon="chevron_right" clickable action={next} />
                     <TextField id="to" type="date" label="Hasta" value={to} onChange={(id, value) => setTo(value)} />
                     <div className="expand"></div>
@@ -108,11 +110,7 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
 
                 <div className="column0">
                     <div className="column-header"></div>
-                    {lanes.map((lane) => (
-                        <div className="row-header">
-                            {lane.label}
-                        </div>
-                    ))}
+                    {lanes.map((lane) => <div className="row-header">{lane.label}</div>)}
                 </div>
 
                 <div className="rows">
@@ -133,8 +131,13 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
                             const isWekend = [0, 6].includes(date.moment.day());
                             const weekend = isWekend ? "weekend" : "";
                             const thisWeek = moment().startOf('week').isSame(date.moment, "week") ? "thisWeek" : "";
+
+                            const today = moment()
+                            var weekStart = today.clone().startOf('week')
+                            const isThisMonday = (date.moment.isSame(weekStart))
+
                             return (
-                                <div className="column-header">
+                                <div className="column-header" ref={isThisMonday ? thisMondayElement : null}>
                                     <div className={`date-header ${weekend} ${thisWeek}`}>
                                         <Text use="headline6">{date.moment.format("DD")}</Text>
                                         &nbsp;
@@ -145,7 +148,7 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
                         })}
                     </div>
 
-                    {lanes.map((lane) => <PlannerRow key={lane.id} lane={lane} events={events} period={period} onSelectCell={selectCell} onChange={onChange}/>)}
+                    {lanes.map((lane) => <PlannerRow key={lane.id} lane={lane} events={events} period={period} onSelectCell={selectCell} onChange={onChange} />)}
 
                 </div>
             </main>
@@ -177,7 +180,7 @@ const PlannerRow = (props) => {
                     return eventDate.getTime() === slotDate.getTime();
                 })
                 return (
-                    <PlannerCell key={`${lane.id}-${slotDate.toString()}`} lane={lane} date={date} events={cellEvents} onSelect={onSelectCell} onDrop={change}/>
+                    <PlannerCell key={`${lane.id}-${slotDate.toString()}`} lane={lane} date={date} events={cellEvents} onSelect={onSelectCell} onDrop={change} />
                 );
             })}
         </div>
@@ -227,7 +230,7 @@ const PlannerCell = ({ lane, events, date, disabled = false, onAdd, onDelete, on
     var weekStart = today.clone().startOf('week')
     const thisMonday = (date.moment.isSame(weekStart)) ? "thisMonday" : ""
     const dragOverStyle = dragOver ? "drag-over" : ""
-     return (
+    return (
         <div className={`cell ${thisMonday} ${weekend} ${dragOverStyle}`} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={drop} onClick={select}>
             {events.map(event => {
                 const { Renderer = EventCard } = event