ywana-core8 0.1.11 → 0.1.13

package/package.json

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

package/src/domain/TablePage2.js

@@ -27,6 +27,7 @@ export const TablePage2 = (props) => {
         groupBy, validator,
         formFilter, tableFilter, editorFilter = false,
         tabbedBy,
+        sortedBy,
         tableClassName,
         children,
         onSelect,
@@ -139,7 +140,7 @@ export const TablePage2 = (props) => {
                 </menu>
             ) : null}
             <main key={id} className={`table-page ${className}`}>
-                <TableEditor icon={icon} title={name} schema={schema} delay={delay} editable={editable} tabbedBy={tabbedBy} groupBy={groupBy} filter={tableFilter} actions={tableActions} canDelete={canDelete} className={tableClassName} />
+                <TableEditor icon={icon} title={name} schema={schema} delay={delay} editable={editable} tabbedBy={tabbedBy} groupBy={groupBy} sortedBy={sortedBy} filter={tableFilter} actions={tableActions} canDelete={canDelete} className={tableClassName} />
                 {children ? <article>{children}</article> : null}
             </main>
             {renderAside()}
@@ -331,7 +332,7 @@ export const TableEditor = (props) => {
     const site = useContext(SiteContext)
     const [pageContext, setPageContext] = useContext(PageContext)
     const { all = [], filters } = pageContext
-    const { icon, title, schema, editable, canDelete, filter, actions, className, tabbedBy } = props
+    const { icon, title, schema, editable, canDelete, filter, actions, className, tabbedBy, sortedBy } = props
     const [groupBy, setGroupBy] = useState(props.groupBy)
     const [tab, setTab] = useState(0)
 
@@ -456,7 +457,7 @@ export const TableEditor = (props) => {
         return groups
     }, {})
 
-    const sections = Object.keys(groups).map(groupName => {
+    const sections = Object.keys(groups).sort().map(groupName => {
 
         const rows = groups[groupName].map(item => {
             item.checked = pageContext.checked ? pageContext.checked.has(item.id) : false
@@ -469,6 +470,16 @@ export const TableEditor = (props) => {
             return item
         })
 
+        if (sortedBy) {
+            rows.sort((a, b) => {
+                const valueA = a[sortedBy]
+                const valueB = b[sortedBy]
+                if (valueA < valueB) return -1
+                if (valueA > valueB) return 1
+                return 0
+            })
+        }
+
         table.rows = rows
 
         return ({

package/src/incubator/planner.css

@@ -92,6 +92,11 @@
     background-color: var(--secondary-color-lighter);
 }
 
+.content-cell.drag-over {
+    background-color: var(--hover-color);
+    border: dashed 2px var(--accent-color);
+}
+
 .row-header {
     position: sticky;
     left: 0px;

package/src/incubator/planner.js

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react'
 import "./planner.css"
 
-export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, rowHeaderWidth = 10, rowHeaderTitle, EventRenderer, onSelectCell, hideEmptyRows=false}) => {
+export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, rowHeaderWidth = 10, rowHeaderTitle, EventRenderer, onSelectCell, onCellDrop, hideEmptyRows=false}) => {
 
   const [days, setDays] = useState([]);
   const lastDay = new Date(to);
   const today = new Date();
+  const [dragOverCell, setDragOverCell] = useState(null);
 
   useEffect(() => {
     const day = new Date(from);
@@ -41,10 +42,24 @@ export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, ro
     if (onSelectCell) onSelectCell(cell)
   }
 
-  function drop() {
-    //TODO
+  function onDragOver(event) {
+    event.preventDefault();
+    setDragOverCell(event.target.id);
   }
 
+  function onDragLeave(event) {
+    event.preventDefault();
+    setDragOverCell(null);
+  }
+
+  function drop(event, { lane, date }) {
+    event.preventDefault();
+    const data = event.dataTransfer.getData("text");
+    if (onCellDrop) onCellDrop({ data, lane, date });
+    setDragOverCell(null);
+  }
+
+
   const uniqueMonths = Array.from(
     new Set(days.map(({ month }) => month))
   );
@@ -119,7 +134,9 @@ export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, ro
         }
 
         return (
-          <div className={`content-row ${lane.className}`} style={{ width: `${totalDaysWidth}rem` }}>
+          <div 
+            key={`content-row-${index}`}
+            className={`content-row ${lane.className}`} style={{ width: `${totalDaysWidth}rem` }}>
             <div className="row-header" style={{ minWidth: `${rowHeaderWidth}rem`, maxWidth: `${rowHeaderWidth}rem` }} >
               {lane.title}
             </div>
@@ -132,12 +149,15 @@ export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, ro
                   eventDate.getFullYear() === dayDate.getFullYear();
               });
               const weekendClass = isWeekend ? 'weekend' : '';
+              const dragOverStyle = dragOverCell === `cell${index}_${year}-${month}-${day}` ? 'drag-over' : '';
               return (
                 <div
+                  id={`cell${index}_${year}-${month}-${day}`}
                   key={`content${index}_${year}-${month}-${day}`}
-                  className={`content-cell ${weekendClass}`} style={{ minWidth: dayWidth, maxWidth: dayWidth }}
+                  className={`content-cell ${weekendClass} ${dragOverStyle}`} style={{ minWidth: dayWidth, maxWidth: dayWidth }}
                   onClick={() => selectCell({ lane: lane.id, date: dayDate })}
-                  onDrop={drop}
+                  onDragOver={onDragOver} onDragLeave={onDragLeave}
+                  onDrop={(event) => drop(event, { lane: lane.id, date: dayDate })}
                 >
                   {dayEvents.map((event, index) => <EventRenderer key={`${event.id}-${index}`} event={event} />)}
                 </div>
@@ -155,7 +175,7 @@ const EventCard = (props) => {
   const { id, title, color } = event
 
   function drag(ev) {
-    ev.dataTransfer.setData("text", id);
+    ev.dataTransfer.setData("text", title);
   }
 
   let style = { backgroundColor: event.color, color: "white" }
@@ -181,23 +201,19 @@ const CalendarTest = (props) => {
 
   const events = [
     { id: "1", lane: "1", date: "2024-01-04", color: "yellow", title: "Event One" },
-    { id: "1", lane: "1", date: "2024-01-04", color: "yellow", title: "Event One" },
-    { id: "1", lane: "1", date: "2024-01-05", color: "yellow", title: "Event One" },
-    { id: "2", lane: "1", date: "2024-01-05", color: "red", title: "Event One" },
-    { id: "3", lane: "1", date: "2024-01-05", color: "blue", title: "Event One" },
-    { id: "4", lane: "1", date: "2024-01-05", color: "red", title: "Event One" },
-    { id: "5", lane: "2", date: "2024-01-04", color: "yellow", title: "Event One" },
-    { id: "6", lane: "2", date: "2024-01-05", color: "red", title: "Event One" },
-    { id: "7", lane: "2", date: "2024-01-06", color: "blue", title: "Event One" },
-    { id: "8", lane: "2", date: "2024-01-07", color: "red", title: "Event One" },
-    { id: "9", lane: "3", date: "2024-01-04", color: "yellow", title: "Event One" },
-    { id: "10", lane: "3", date: "2024-01-05", color: "red", title: "Event One" },
-    { id: "11", lane: "3", date: "2024-01-06", color: "blue", title: "Event One" },
+    { id: "2", lane: "1", date: "2024-01-05", color: "green", title: "Event Two" },
+    { id: "3", lane: "2", date: "2024-01-06", color: "blue", title: "Event Three" },
+    { id: "4", lane: "2", date: "2024-01-07", color: "red", title: "Event Four" },
+    { id: "5", lane: "3", date: "2024-01-08", color: "purple", title: "Event Five" },
   ]
 
+  function onDrop({ data, lane, date }) {
+    console.log(`Dropped ${data} on lane ${lane} date ${date}`);
+  }
+
   return (
     <>
-      <Planner2 from="2024-01-01" to="2024-02-01" lanes={lanes} events={events} EventRenderer={EventCard} hideEmptyRows />
+      <Planner2 from="2024-01-01" to="2024-02-01" lanes={lanes} events={events} EventRenderer={EventCard} hideEmptyRows onCellDrop={onDrop} />
     </>
   )
 }

package/src/site/site.css

@@ -42,6 +42,7 @@
     flex-direction: column;
     overflow: hidden;
     width: var(--site-menu-width);
+    transition: width 0.3s ease-in-out;
 }
 
 .site6>menu>header {
@@ -53,6 +54,7 @@
 }
 
 .site6>menu.min {
+    width: var(--site-menu-width);
     overflow: visible;
 }