ywana-core8 0.0.431 → 0.0.434

package/package.json

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

package/src/domain/ContentViewer.css

@@ -2,7 +2,22 @@
     border-bottom: solid 1px var(--divider-color);
 }
 
-.entity-viewer>header {
+.entity-viewer>header,
+.array-viewer>header {
     padding: .5rem;
     background-color: rgba(240,240,240,.5);
+}
+
+.array-viewer>table {
+    width: 100%;
+    border: solid 1px var(--divider-color);
+}
+
+.array-viewer>table tbody {
+    max-height: 20vh;
+    overflow: auto;
+}
+
+.array-viewer>table td {
+    border-bottom: solid 1px var(--divider-color);
 }

package/src/domain/ContentViewer.js

@@ -55,7 +55,7 @@ const FieldViewer = (props) => {
         case TYPES.ENTITY:
             return <EntityViewer field={field} value={value} />
         case TYPES.ARRAY:
-            return <ArrayViewer item={item} value={value} />
+            return <ArrayViewer label={label} item={item} value={value} />
         default:
             return <div>{label}</div>
     }
@@ -64,7 +64,7 @@ const FieldViewer = (props) => {
 /**
  * EntityViewer
  */
- const EntityViewer = (props) => {
+const EntityViewer = (props) => {
     const { field, value } = props
     const { item, label } = field
     const content = new Content(item, value)
@@ -87,16 +87,24 @@ const FieldViewer = (props) => {
  * Array Viewer
  */
 const ArrayViewer = (props) => {
-    const { item, value } = props
+    const { label, item, value } = props
     const columns = Object.keys(item).map(key => item[key]["label"])
+    console.log("ARRAYVIEWER", item, value, columns)
     return (
         <div className="array-viewer">
+            <header>
+                {label}
+            </header>
             <table>
                 <thead>
-                    { columns.map(column => <th>{column.name}</th>)}
+                    {columns.map(column => <th>{column}</th>)}
                 </thead>
                 <tbody>
-                   ...
+                    {value.map(v => (
+                        <tr>
+                            { Object.keys(item).map(key => <td>{v[key]}</td>) }
+                        </tr>
+                    ))}
                 </tbody>
             </table>
         </div>

package/src/widgets/planner/Planner.css

@@ -128,6 +128,7 @@
     justify-content: center;
     align-items: center;
     border-right: dotted 1px var(--divider-color);
+    border: solid 3px red;
 }
 
 .photoshoot-icon {

package/src/widgets/planner/Planner.js

@@ -9,12 +9,13 @@ const ranges = extendMoment(moment);
 const DATE_RANGE = [
     { label: "Week", value: "week" },
     { label: "Month", value: "month" },
+    { label: "Year", value: "year" },
 ];
 
 /**
  * Planner
  */
-export const Planner = ({ title, events = [], lanes = [], navigation = true, onSelectCell, focusEvent }) => {
+export const Planner = ({ title, events = [], lanes = [], navigation = true, onSelectCell, focusEvent, onChange }) => {
 
     const [dateRange, setDateRange] = useState("month");
     const [from, setFrom] = useState("2021-02-26");
@@ -88,7 +89,6 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
                 </Header>
             ) : null}
 
-
             <main className="planner">
 
                 <div className="column0">
@@ -129,7 +129,7 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
                         })}
                     </div>
 
-                    {lanes.map((lane) => <PlannerRow lane={lane} events={events} period={period} onSelectCell={selectCell} />)}
+                    {lanes.map((lane) => <PlannerRow lane={lane} events={events} period={period} onSelectCell={selectCell} onChange={onChange}/>)}
 
                 </div>
             </main>
@@ -142,9 +142,14 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
  */
 const PlannerRow = (props) => {
 
-    const { lane, events = [], period, onSelectCell } = props
+    const { lane, events = [], period, onSelectCell, onChange } = props
     const rowEvents = events.filter(event => event.lane === lane.id)
 
+
+    function change(data) {
+        if (onChange) onChange(data)
+    }
+
     return (
         <div className="row">
             {period.map((date) => {
@@ -156,7 +161,7 @@ const PlannerRow = (props) => {
                     return eventDate.getTime() === slotDate.getTime();
                 })
                 return (
-                    <PlannerCell lane={lane} date={date} events={cellEvents} onSelect={onSelectCell} />
+                    <PlannerCell lane={lane} date={date} events={cellEvents} onSelect={onSelectCell} onDrop={change}/>
                 );
             })}
         </div>
@@ -196,13 +201,14 @@ const PlannerCell = ({ lane, events, date, disabled = false, onAdd, onDelete, on
                 lane: lane.id,
                 date: date.moment.format("YYYY-MM-DD")
             });
+        setDragOver(false);
     }
 
     const isWekend = [0, 6].includes(date.moment.day());
     const weekend = isWekend ? "weekend" : "";
-
-    return (
-        <div className={`cell ${weekend}`} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={drop} onClick={select}>
+    const dragOverStyle = dragOver ? "drag-over" : ""
+     return (
+        <div className={`cell ${weekend} ${dragOverStyle}`} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={drop} onClick={select}>
             {events.map(event => {
                 const { Renderer = EventCard } = event
                 return <Renderer event={event} />
@@ -214,10 +220,9 @@ const PlannerCell = ({ lane, events, date, disabled = false, onAdd, onDelete, on
 const EventCard = (props) => {
     const { event } = props
     const { title, color } = event
-
     let style = { backgroundColor: color, color: "white" }
     return (
-        <div className={`event-card`} style={style}>
+        <div draggable="true" className={`event-card`} style={style}>
             {title}
         </div>
     )

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

@@ -1,16 +1,20 @@
-import React, {useEffect, useState} from 'react'
+import React, { useEffect, useState } from 'react'
 import { Planner } from './Planner'
 
 const EventCard = (props) => {
-    const { event={} } = props
+    const { event = {} } = props
     const { id, title, color } = event
 
-    let style = { backgroundColor : "red", color: "white" }
+    function drag(ev) {
+        ev.dataTransfer.setData("text", id);
+    }
+
+    let style = { backgroundColor: "red", color: "white" }
     return (
-        <div id={id} className={`event-card`} style={style}>
+        <div draggable onDragStart={drag} id={id} className={`event-card`} style={style}>
             {title}
         </div>
-    ) 
+    )
 }
 
 const PlannerTest = (prop) => {
@@ -30,19 +34,27 @@ const PlannerTest = (prop) => {
         { id: "lane6", label: "Lane 6" },
         { id: "lane7", label: "Lane 7" },
     ]
-    
+
     const events = [
-        { 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 },
+        { id: "3", lane: "lane1", date: "2022-04-04", color: "yellow", title: "Event One", Renderer: EventCard },
+        { id: "1", lane: "lane1", date: "2022-04-05", color: "red", title: "Event One", Renderer: EventCard },
+        { id: "2", lane: "lane1", date: "2022-04-06", color: "blue", title: "Event One", Renderer: EventCard },
+        { id: "4", lane: "lane1", date: "2022-03-07", color: "red", title: "Event One", Renderer: EventCard },
     ]
 
 
     return (
-            <Planner title="Planner 1" lanes={lanes} events={events} navigation={true} onSelectCell={console.log} focusEvent={event}>
+        <Planner 
+            title="Planner 1" 
+            lanes={lanes} 
+            events={events} 
+            navigation={true} 
+            onSelectCell={console.log} 
+            focusEvent={event}
+            onChange={(data) => console.log('D&D', data)}
+        >
+
+        </Planner>
 
-            </Planner>
-     
     )
 }

package/src/widgets/planner/Planner2.css

@@ -102,6 +102,10 @@
   background-color: rgba(200,200,200,.2);
 }
 
+.planner .cell.drag-over {
+  border: dashed 2px var(--divider-color);
+}
+
 .event-card {
   width: 100%;
   border: solid 1px var(--divider-color);