ywana-core8 0.0.288 → 0.0.291

package/package.json

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

package/src/domain/TablePage.js

@@ -318,7 +318,6 @@ export const TableEditor = (props) => {
         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)
             return option ? option.label : groupName
         } else {
             return groupName

package/src/html/table.js

@@ -78,7 +78,7 @@ export const DataTable = (props) => {
                             const sort = sortDir[id] ? sortDir[id] : null
                             const [rowspan, colspan] = type === TYPES.ENTITY ? [1, Object.values(item).filter(v=>v.column===true).length] : [2, 1]
                             return (
-                                <th rowSpan={rowspan} colSpan={colspan}>
+                                <th key={id} rowSpan={rowspan} colSpan={colspan}>
                                     {id === "checked" ? <CheckBox onChange={checkAll} /> : <Text key={`th_${id}`}>{label}</Text>}
                                     {sortable ? <Icon icon="arrow_up" size="small" clickable /> : null}
                                 </th>

package/src/site/site.css

@@ -48,17 +48,28 @@
     width: 20rem;
 }
 
+.site6>menu>main {
+    padding: .1rem;
+}
+
 .site6>menu>main>.site-menu-item {
     width: 100%;
     display: flex;
     align-items: center;
 }
 
-.site6>menu.max>main>.site-menu-item:hover {
+.site6>menu.max>main>.site-menu-item:not(.selected):hover {
+    color: var(--text-color);
     background-color: rgba(200,200,200,.2);
     cursor: pointer;
 }
 
+.site6>menu>main>.site-menu-item.selected {
+    color: rgb(255, 255, 255);
+    background-color: rgb(60, 60, 60);
+    border-radius: .5rem;
+}
+
 .site6>menu>main {
     flex: 1;
     overflow-x: hidden;

package/src/site/site.js

@@ -166,7 +166,7 @@ const SiteAside = () => {
 const SiteMenu = ({ logo, title, children, min }) => {
 
     const context = useContext(SiteContext)
-    const { sideNav, setSideNav, showNav } = context
+    const { page, sideNav, setSideNav, showNav } = context
 
     useEffect(() => {
         if (min) context.setSideNav('min')
@@ -191,7 +191,6 @@ const SiteMenu = ({ logo, title, children, min }) => {
             return sections
         }, {}) : {}
 
-
     const style = sideNav === 'max' ? 'max' : 'min'
     const toggleIcon = sideNav === 'max' ? 'chevron_left' : 'chevron_right'
     return (
@@ -200,9 +199,10 @@ const SiteMenu = ({ logo, title, children, min }) => {
                 {Object.keys(sections).map(title => (
                     <Fragment key={title}>
                         {sections[title].map(({ id, icon = 'info', title }) => {
+                            const styleItem = id === page ? 'selected' : ''
                             return (
-                                <div className="site-menu-item" key={id} onClick={() => goto(id)}>
-                                    <Icon key={id} icon={icon} clickable checked={id === context.page} action={() => goto(id)} />
+                                <div className={`site-menu-item ${styleItem}`} key={id} onClick={() => goto(id)}>
+                                    <Icon key={id} icon={icon} clickable action={() => goto(id)} />
                                     { sideNav === 'max' ? <label>{title}</label> : null }
                                 </div>
                             )

package/src/site/site.test.js

@@ -1,19 +1,18 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { Fragment, useContext, useEffect, useState } from 'react'
+import { SiteContext } from './siteContext'
 import { Site } from './site'
 import { Page } from './page'
 import './site.css'
 import './page.css'
-import { Fragment } from 'react/cjs/react.production.min'
-import { SiteContext } from './siteContext'
 
 const SiteTest = (prop) => {
     return (
-        <Site icon="star" title="Site Test" init={"PAGE1"}>
+        <Site icon="star" title="Site Test" init={"PAGE2"}>
             <Page id="PAGE1" section="SECTION1" icon="description" title="Page 1" layout="workspace">
                 <Page1 />
             </Page>
             <Page id="PAGE2" section="SECTION1" icon="description" title="Page 2" layout="workspace">
-                222
+                <Page2 />
             </Page>
         </Site>
     )
@@ -23,15 +22,24 @@ const Page1 = (props) => {
 
     const site = useContext(SiteContext)
     useEffect(() => {
-
         site.notify({ title: "Notification 1", body: "Lorem ipsum dolor sit amet"})
     }, [])
 
     return (
         <Fragment>
             <header>Page 1</header>
-            <main>1</main>
+            <main></main>
             <footer>f1</footer>
         </Fragment>
     )
+}
+
+const Page2 = (props) => {
+    return (
+        <Fragment>
+            <header>Page 2</header>
+            <main></main>
+            <footer>f2</footer>
+        </Fragment>
+    )
 }

package/src/widgets/planner/Planner.js

@@ -14,12 +14,21 @@ const DATE_RANGE = [
 /**
  * Planner
  */
-export const Planner = ({ title, events = [], lanes = [], navigation = true, onSelectCell }) => {
+export const Planner = ({ title, events = [], lanes = [], navigation = true, onSelectCell, focusEvent }) => {
 
     const [dateRange, setDateRange] = useState("month");
     const [from, setFrom] = useState("2021-02-26");
     const [to, setTo] = useState("2021-04-01");
 
+    useEffect(() => {
+        const element = document.getElementById(focusEvent)
+        if (element) element.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+            inline: 'center'
+        })
+    }, [focusEvent])
+
     useEffect(() => {
         const today = moment();
         const from_date = today.startOf(dateRange).format("YYYY-MM-DD");

package/src/widgets/planner/Planner.test.js

@@ -1,13 +1,13 @@
-import React from 'react'
+import React, {useEffect, useState} from 'react'
 import { Planner } from './Planner'
 
 const EventCard = (props) => {
-    const { event } = props
-    const { title, color } = event
+    const { event={} } = props
+    const { id, title, color } = event
 
     let style = { backgroundColor : "red", color: "white" }
     return (
-        <div className={`event-card`} style={style}>
+        <div id={id} className={`event-card`} style={style}>
             {title}
         </div>
     ) 
@@ -15,6 +15,12 @@ const EventCard = (props) => {
 
 const PlannerTest = (prop) => {
 
+    const [event, setEvent] = useState()
+
+    useEffect(() => {
+        setEvent("3")
+    }, [])
+
     const lanes = [
         { id: "lane1", label: "Lane 1" },
         { id: "lane2", label: "Lane 2" },
@@ -26,12 +32,15 @@ const PlannerTest = (prop) => {
     ]
     
     const events = [
-        { lane: "lane1", date: "2022-02-01", color: "red", title : "Event One", Renderer: EventCard }
+        { id: "1", lane: "lane1", date: "2022-03-01", color: "red", title : "Event One", Renderer: EventCard },
+        { id: "2", lane: "lane1", date: "2022-03-22", color: "red", title : "Event One", Renderer: EventCard },
+        { id: "3", lane: "lane1", date: "2022-04-03", color: "red", title : "Event One", Renderer: EventCard },
+        { id: "4", lane: "lane1", date: "2022-03-04", color: "red", title : "Event One", Renderer: EventCard },
     ]
 
+
     return (
-     
-            <Planner title="Planner 1" lanes={lanes} events={events} navigation={true} onSelectCell={console.log}>
+            <Planner title="Planner 1" lanes={lanes} events={events} navigation={true} onSelectCell={console.log} focusEvent={event}>
 
             </Planner>