ywana-core8 0.0.249 → 0.0.253

package/package.json

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

package/src/html/text.js

@@ -23,7 +23,7 @@ export const Text = ({ format, children }) => {
     const { lang, dictionary = {} } = site
     const term = dictionary[children]
     const text = term ? term[lang] : children
-    if (text) value=text 
+    if (text) value = text 
   }
   
   const formatter = Intl.NumberFormat()

package/src/html/text.test.js

@@ -1,11 +1,12 @@
 import React, { useState } from 'react'
-import { Text, FORMATS } from './text'
+import { Text, TEXTFORMATS } from './text'
 
 const TextTest = (prop) => {
 
     return (
         <>
-           <Text format={FORMATS.NUMERIC}>345356345.345</Text>
+           <Text format={TEXTFORMATS.NUMERIC}>846964.4199142859</Text>
+           <Text format={TEXTFORMATS.NUMERIC}>{"345356345.345"}</Text>
         </>
     )
 }

package/src/html/textfield.js

@@ -167,8 +167,6 @@ export const DropDown = (props) => {
         }
     }
 
-    console.log('dropdown',id, 'predictive', predictive)
-    
     return (
         <div className="dropdown">
             <TextField {...props} onClick={toggle} value={label} onChange={change} />

package/src/widgets/planner/Planner.css

@@ -3,7 +3,10 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    border: solid 1px var(--divider-color);
+    border: solid 10px var(--divider-color);
+}
+
+.planner-box> header {
 }
 
 .planner-box > header > label { 
@@ -12,13 +15,12 @@
 
 .planner {
     flex: 1;
+    overflow: auto;
     display: flex;
-    height: 70rem;
-    overflow-y: auto;
-    margin: 1rem;
-
-    --row-height: 8rem;
-    --column-width: 14rem;
+    
+    --row-height: 6rem;
+    --column-width: 8rem;
+    border: solid 3px red;
 }
 
 .planner > .column0 {
@@ -26,8 +28,15 @@
     left: 0px;
     z-index: 11;
     background-color: var(--paper-color);
-    width: var(--column-width);
+    min-width: var(--column-width);
     border-right: solid 1px var(--divider-color);
+    
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+    border: solid 3px red;
 }
 
 .column-header {
@@ -69,6 +78,7 @@
     height: 6rem;
     border-bottom: solid 1px var(--divider-color);
     border-right: solid 1px var(--divider-color);
+    flex: 1;
 }
 
 .row-header {
@@ -82,6 +92,7 @@
 
 .planner > .rows {
     flex: 1;
+    border: solid 3px red;
 }
 
 .planner .row {

package/src/widgets/planner/Planner.js

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { DropDown, Header, Icon, Text, TextField } from "../../html";
 import moment from "moment";
 import { extendMoment } from "moment-range";
-import "./Planner.css";
+import "./Planner2.css";
 
 const ranges = extendMoment(moment);
 
@@ -14,7 +14,7 @@ const DATE_RANGE = [
 /**
  * Planner
  */
-export const Planner = ({ title, events = [], lanes = [], selected = false, editable = false, navigation = true, onSelect, onAdd, onDelete, onMove }) => {
+export const Planner = ({ title, events = [], lanes = [], navigation = true, onSelectCell }) => {
 
     const [dateRange, setDateRange] = useState("month");
     const [from, setFrom] = useState("2021-02-26");
@@ -46,20 +46,8 @@ export const Planner = ({ title, events = [], lanes = [], selected = false, edit
         setTo(to_date);
     }
 
-    function add(set, date) {
-        if (onAdd) onAdd(date, set);
-    }
-
-    function remove(id) {
-        if (onDelete) onDelete(id);
-    }
-
-    function move(form) {
-        if (onMove) onMove(form);
-    }
-
-    function select({ id, plan }) {
-        if (onSelect) onSelect(plan);
+    function selectCell(lane, date) {
+        if (onSelectCell) onSelectCell(lane, date);
     }
 
     const period = useMemo(() => {
@@ -132,7 +120,7 @@ export const Planner = ({ title, events = [], lanes = [], selected = false, edit
                         })}
                     </div>
 
-                    {lanes.map((lane) => <PlannerRow lane={lane} events={events} period={period} />)}
+                    {lanes.map((lane) => <PlannerRow lane={lane} events={events} period={period} onSelectCell={selectCell} />)}
 
                 </div>
             </main>
@@ -145,7 +133,7 @@ export const Planner = ({ title, events = [], lanes = [], selected = false, edit
  */
 const PlannerRow = (props) => {
 
-    const { lane, events = [], period } = props
+    const { lane, events = [], period, onSelectCell } = props
     const rowEvents = events.filter(event => event.lane === lane.id)
 
     return (
@@ -153,13 +141,13 @@ const PlannerRow = (props) => {
             {period.map((date) => {
                 const slotDate = new Date(date.year, date.month, date.day);
                 slotDate.setHours(0, 0, 0);
-                const cellEvents = rowEvents.filter( event => {
+                const cellEvents = rowEvents.filter(event => {
                     const eventDate = new Date(event.date);
                     eventDate.setHours(0, 0, 0);
                     return eventDate.getTime() === slotDate.getTime();
                 })
                 return (
-                    <PlannerCell date={date} events={cellEvents}/>
+                    <PlannerCell lane={lane} date={date} events={cellEvents} onSelect={onSelectCell} />
                 );
             })}
         </div>
@@ -173,6 +161,10 @@ const PlannerCell = ({ lane, events, date, disabled = false, onAdd, onDelete, on
 
     const [dragOver, setDragOver] = useState(false);
 
+    function select() {
+        if (onSelect) onSelect(lane, date)
+    }
+
     function onDragOver(event) {
         if (!dragOver) setDragOver(true);
         event.stopPropagation();
@@ -201,8 +193,23 @@ const PlannerCell = ({ lane, events, date, disabled = false, onAdd, onDelete, on
     const weekend = isWekend ? "weekend" : "";
 
     return (
-        <div className={`cell ${weekend}`} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={drop}>
-            c
+        <div className={`cell ${weekend}`} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={drop} onClick={select}>
+            {events.map(event => {
+                const { title, color, Renderer = EventCard } = event
+                return <Renderer event={event} />
+            })}
         </div>
     );
 };
+
+const EventCard = (props) => {
+    const { event } = props
+    const { title, color } = event
+
+    let style = { backgroundColor: color, color: "white" }
+    return (
+        <div className={`event-card`} style={style}>
+            {title}
+        </div>
+    )
+}

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

@@ -1,23 +1,37 @@
 import React from 'react'
 import { Planner } from './Planner'
 
+const EventCard = (props) => {
+    const { event } = props
+    const { title, color } = event
+
+    let style = { backgroundColor : "red", color: "white" }
+    return (
+        <div className={`event-card`} style={style}>
+            {title}
+        </div>
+    ) 
+}
+
 const PlannerTest = (prop) => {
 
     const lanes = [
         { id: "lane1", label: "Lane 1" },
         { id: "lane2", label: "Lane 2" },
         { id: "lane3", label: "Lane 3" },
-        { id: "lane3", label: "Lane 3" },
-        { id: "lane3", label: "Lane 3" },
-        { id: "lane3", label: "Lane 3" },
-        { id: "lane3", label: "Lane 3" },
+        { id: "lane4", label: "Lane 4" },
+        { id: "lane5", label: "Lane 5" },
+        { id: "lane6", label: "Lane 6" },
+        { id: "lane7", label: "Lane 7" },
     ]
     
-    const events = []
+    const events = [
+        { lane: "lane1", date: "2022-02-01", color: "red", title : "Event One", Renderer: EventCard }
+    ]
 
     return (
      
-            <Planner title="Planner 1" lanes={lanes} events={events} navigation={true} >
+            <Planner title="Planner 1" lanes={lanes} events={events} navigation={true} onSelectCell={console.log}>
 
             </Planner>
      

package/src/widgets/planner/Planner2.css

@@ -0,0 +1,117 @@
+.planner-box {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.planner-box > header {
+  height: 5rem;
+  border: solid 1px var(--divider-color);
+  border-bottom: 0px;
+}
+
+.planner {
+  flex: 1;
+  border: solid 1px var(--divider-color);
+  display: flex;
+  overflow: auto;
+
+  --row-height: 6rem;
+  --column-width: 8rem;
+}
+
+.planner > .column0 {
+  width: var(--column-width);
+  position: sticky;
+  left: 0px;
+  z-index: 11;
+}
+
+.planner > .column0 > .column-header {
+  width: var(--column-width);
+  height: var(--row-height);
+  position: sticky;
+  top: 0px;
+  background-color: var(--paper-color);
+  border-right: solid 1px var(--divider-color);
+  border-bottom: solid 1px var(--divider-color);
+}
+
+.planner .row-header {
+  width: var(--column-width);
+  background-color: var(--paper-color);
+  height: var(--row-height);
+  border-bottom: solid 1px var(--divider-color);
+  border-right: solid 1px var(--divider-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.planner > .rows {
+  overflow: visible;
+}
+
+.planner > .rows .column-header {
+  width: var(--column-width);
+  background-color: var(--paper-color);
+  height: 2.6rem;
+  padding: .5rem;
+}
+
+.planner > .rows > .row {
+  height: var(--row-height);
+  border-bottom: solid 1px var(--divider-color);
+}
+
+.planner > .rows > .row0 {
+  position: sticky;
+  top: 0px;
+  z-index: 10;
+  height: 3rem;
+  background-color: var(--paper-color);
+  border-bottom: solid 1px var(--divider-color);
+}
+
+.planner > .rows > .row1 {
+  position: sticky;
+  top: 3rem;
+  z-index: 10;
+  height: 3rem;
+  background-color: var(--paper-color);
+  border-bottom: solid 1px var(--divider-color);
+}
+
+.planner .cell {
+  width: var(--column-width);
+  height: 100%;
+  padding: 0.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  border-right: dotted 1px var(--divider-color);
+}
+
+.planner .cell:hover {
+  background-color: rgba(220,220,220,.3);
+}
+
+.planner .cell.weekend {
+  background-color: rgba(200,200,200,.2);
+}
+
+.event-card {
+  width: 100%;
+  border: solid 1px var(--divider-color);
+  border-radius: 3px;
+  padding: .1rem .5rem;
+  font-size: .8rem;
+  font-weight: 500;
+  color: var(--text-color-light);
+}
+
+.event-card:hover {
+  cursor: pointer;
+  border: solid 2px var(--divider-color);
+}