ywana-core8 0.0.263 → 0.0.266

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.263",
+  "version": "0.0.266",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",

package/src/domain/ContentEditor.js

@@ -180,9 +180,6 @@ export const FieldEditor = ({ field, onChange, content, outlined = false }) => {
     if (isHidden) {
       return null
     } else {
-
-      console.log("FieldEditor: ", label, value1)
-
       switch (type) {
         case TYPES.ENTITY:
           return <EntityEditor field={field} value={value1} onChange={change} />

package/src/domain/TablePage.js

@@ -21,7 +21,7 @@ export const TablePage = (props) => {
         icon, title, name,
         schema, url, field,
         autosave = true, delay = 1000,
-        editable, 
+        editable,
         actions = [], dev = false, tableActions, selectionActions = [],
         canFilter = false, canQuery = false, canAdd = true, canDelete = true, canEdit = true,
         groupBy, validator, scenario,
@@ -97,7 +97,7 @@ export const TablePage = (props) => {
         if (rowSelected || rowChecked) {
             return (
                 <aside className="table-page">
-                    {rowSelected ? <TableRowEditor content={new Content(schema, form)} filter={editorFilter} onChange={change} onClose={closeAside} editable={canEdit}/> : null}
+                    {rowSelected ? <TableRowEditor content={new Content(schema, form)} filter={editorFilter} onChange={change} onClose={closeAside} editable={canEdit} /> : null}
                     {rowChecked ? <TableSelector schema={schema} actions={selectionActions} /> : null}
                 </aside>
             )
@@ -108,7 +108,7 @@ export const TablePage = (props) => {
     function renderActions() {
         return actions.map(element => {
             const action = () => element.props.action(pageContext)
-            const clone = React.cloneElement(element, { action })
+            const clone = React.cloneElement(element, { action })
             return clone
         })
     }
@@ -124,10 +124,12 @@ export const TablePage = (props) => {
                 ) : null}
                 {renderActions()}
             </Header>
-            <menu className="table-page">
-                {canQuery ? <TableQueries schema={schema} /> : null}
-                {canFilter ? <TableFilters schema={schema} /> : null}
-            </menu>
+            {canQuery || canFilter ? (
+                <menu className="table-page">
+                    {canQuery ? <TableQueries schema={schema} /> : null}
+                    {canFilter ? <TableFilters schema={schema} /> : null}
+                </menu>
+            ) : null)}
             <main key={id} className="table-page">
                 <TableEditor icon={icon} title={name} schema={schema} delay={delay} editable={editable} groupBy={groupBy} filter={tableFilter} actions={tableActions} canDelete={canDelete} />
             </main>
@@ -147,7 +149,7 @@ const TableRowEditor = (props) => {
                 <Icon icon="close" clickable action={onClose} />
             </Header>
             <main>
-                { editable ? <ContentEditor content={content} onChange={onChange} filter={filter} /> : <ContentViewer content={content} /> }
+                {editable ? <ContentEditor content={content} onChange={onChange} filter={filter} /> : <ContentViewer content={content} />}
             </main>
         </div>
     )
@@ -313,12 +315,12 @@ export const TableEditor = (props) => {
     function renderGroupLabel(groupName) {
         const grouper = schema[groupBy]
 
-        if (!groupName || !grouper) return ""
+        if (!groupName || !grouper) return ""
 
         if (grouper.options) {
             const options = CHECK['isFunction'](grouper.options) ? grouper.options() : grouper.options
             const option = options.find(option => option.value === groupName)
-            console.log(groupName, options, option )
+            console.log(groupName, options, option)
             return option ? option.label : groupName
         } else {
             return groupName

package/src/site/site.css

@@ -15,7 +15,6 @@
     background-color: var(--site-header-bgcolor);
     display: flex;
     align-items: center;
-    width: var(--site-menu-width);
 }
 
 .site6>nav {
@@ -45,6 +44,21 @@
     width: var(--site-menu-width);
 }
 
+.site6>menu.max {
+    width: 20rem;
+}
+
+.site6>menu>main>.site-menu-item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.site6>menu.max>main>.site-menu-item:hover {
+    background-color: rgba(200,200,200,.2);
+    cursor: pointer;
+}
+
 .site6>menu>main {
     flex: 1;
     overflow-x: hidden;

package/src/site/site.js

@@ -4,7 +4,12 @@ import { Tabs, Tab } from '../html/tab'
 import { Header } from '../html/header'
 import { Page } from './page'
 import { SiteContext } from './siteContext'
-import { NotificationContainer, NotificationManager} from 'react-notifications'
+
+/*
+import { NotificationManager } from 'react-notifications'
+import { NotificationContainer } from 'react-notifications'
+*/
+
 import './site.css'
 import 'react-notifications/lib/notifications.css';
 
@@ -69,8 +74,8 @@ export const SiteProvider = ({ children, siteLang, siteDictionary, showConsole }
 
         confirm: (message) => window.confirm(message),
 
-        notify: ({title, body}) => {
-            NotificationManager.info(body, title)
+        notify: ({ title, body }) => {
+            //NotificationManager.info(body, title)
         }
     }
 
@@ -106,6 +111,9 @@ export const Site = ({ icon, logo, title, toolbar, children, init, min, lang, di
 }
 
 const SiteNotifications = () => {
+    return (
+        <div></div>
+    )
     return (
         <NotificationContainer />
     )
@@ -151,17 +159,22 @@ const SiteAside = () => {
 const SiteMenu = ({ logo, title, children, min }) => {
 
     const context = useContext(SiteContext)
-    const { sideNav, showNav } = context
-    const toggleIcon = sideNav === 'max' ? 'chevron_left' : 'chevron_right'
+    const { sideNav, setSideNav, showNav } = context
 
     useEffect(() => {
         if (min) context.setSideNav('min')
     }, [])
 
+    function toggle() {
+        const next = sideNav === 'max' ? 'min' : 'max'
+        setSideNav(next)
+    }
+
     const goto = (id) => {
         context.setShowNav(false)
         context.goto(id)
     }
+
     const sections = children ?
         Children.toArray(children).reduce((sections, page) => {
             const section = page.props ? page.props.section : '...'
@@ -171,18 +184,29 @@ const SiteMenu = ({ logo, title, children, min }) => {
             return sections
         }, {}) : {}
 
+
+    const style = sideNav === 'max' ? 'max' : 'min'
+    const toggleIcon = sideNav === 'max' ? 'chevron_left' : 'chevron_right'
     return (
-        <menu className={`min ${showNav ? 'show' : ''}`}>
+        <menu className={`${style} ${showNav ? 'show' : ''}`}>
             <main >
                 {Object.keys(sections).map(title => (
                     <Fragment key={title}>
                         {sections[title].map(({ id, icon = 'info', title }) => {
-                            return (<Icon key={id} icon={icon} clickable checked={id === context.page} action={() => goto(id)} />)
+                            return (
+                                <div className="site-menu-item" key={id} onClick={() => goto(id)}>
+                                    <Icon key={id} icon={icon} clickable checked={id === context.page} action={() => goto(id)} />
+                                    { sideNav === 'max' ? <label>{title}</label> : null }
+                                </div>
+                            )
                         })}
                         <div className="section-divider" ></div>
                     </Fragment>
                 ))}
             </main>
+            <footer>
+                <Icon icon={toggleIcon} clickable action={toggle} />
+            </footer>
         </menu>
     )
 }

package/src/site/site.test.js

@@ -0,0 +1,19 @@
+import React, { useState } from 'react'
+import { Site } from './site'
+import { Page } from './page'
+import './site.css'
+import './page.css'
+
+const SiteTest = (prop) => {
+
+    return (
+        <Site icon="star" title="Site Test" init={"PAGE1"}>
+            <Page id="PAGE1" section="SECTION1" icon="description" title="Page 1">
+                111
+            </Page>
+            <Page id="PAGE2" section="SECTION1" icon="description" title="Page 2">
+                222
+            </Page>
+        </Site>
+    )
+}

package/src/widgets/planner/Planner.js

@@ -195,7 +195,7 @@ const PlannerCell = ({ lane, events, date, disabled = false, onAdd, onDelete, on
     return (
         <div className={`cell ${weekend}`} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={drop} onClick={select}>
             {events.map(event => {
-                const { title, color, Renderer = EventCard } = event
+                const { Renderer = EventCard } = event
                 return <Renderer event={event} />
             })}
         </div>