ywana-core8 0.0.238 → 0.0.242

package/src/widgets/planner/Planner.js

@@ -0,0 +1,208 @@
+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";
+
+const ranges = extendMoment(moment);
+
+const DATE_RANGE = [
+    { label: "Week", value: "week" },
+    { label: "Month", value: "month" },
+];
+
+/**
+ * Planner
+ */
+export const Planner = ({ title, events = [], lanes = [], selected = false, editable = false, navigation = true, onSelect, onAdd, onDelete, onMove }) => {
+
+    const [dateRange, setDateRange] = useState("month");
+    const [from, setFrom] = useState("2021-02-26");
+    const [to, setTo] = useState("2021-04-01");
+
+    useEffect(() => {
+        const today = moment();
+        const from_date = today.startOf(dateRange).format("YYYY-MM-DD");
+        const to_date = today.endOf(dateRange).format("YYYY-MM-DD");
+        setFrom(from_date);
+        setTo(to_date);
+    }, [dateRange]);
+
+    function next() {
+        const actual = moment(from);
+        const next = actual.add(1, dateRange);
+        const from_date = next.startOf(dateRange).format("YYYY-MM-DD");
+        const to_date = next.endOf(dateRange).format("YYYY-MM-DD");
+        setFrom(from_date);
+        setTo(to_date);
+    }
+
+    function prev() {
+        const actual = moment(from);
+        const next = actual.subtract(1, dateRange);
+        const from_date = next.startOf(dateRange).format("YYYY-MM-DD");
+        const to_date = next.endOf(dateRange).format("YYYY-MM-DD");
+        setFrom(from_date);
+        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);
+    }
+
+    const period = useMemo(() => {
+        const start = ranges(from, "YYYY-MM-DD");
+        const end = ranges(to, "YYYY-MM-DD");
+        const range = ranges.range(start, end);
+        const period = Array.from(range.by("day")).map((m) => ({
+            year: m.year(),
+            month: m.month(),
+            day: m.date(),
+            moment: m,
+        }));
+        return period;
+    }, [from, to]);
+
+    const label = <Text use="headline6">{title}</Text>;
+    return (
+        <div className="planner-box">
+
+            {navigation ? (
+                <Header title={label}>
+                    <Icon icon="chevron_right" clickable action={next} />
+                    <TextField id="to" type="date" label="To" value={to} onChange={(id, value) => setTo(value)} />
+                    <div className="expand"></div>
+                    <DropDown id="ranges" label="Date Range" options={DATE_RANGE} value={dateRange} onChange={(id, value) => setDateRange(value)} />
+                    <div className="expand"></div>
+                    <TextField id="from" type="date" label="From" value={from} onChange={(id, value) => setFrom(value)} />
+                    <Icon icon="chevron_left" clickable action={prev} />
+                </Header>
+            ) : null}
+
+
+            <main className="planner">
+
+                <div className="column0">
+                    <div className="column-header"></div>
+                    {lanes.map((lane) => (
+                        <div className="row-header">
+                            {lane.label}
+                        </div>
+                    ))}
+                </div>
+
+                <div className="rows">
+                    <div className="row row0">
+                        {period.map((date, index) => {
+                            const first = index === 0 || date.day === 1 ? "first" : "";
+                            return (
+                                <div className="column-header">
+                                    <div className={`month-header ${first}`}>
+                                        <Text use="overline">{date.moment.format("MMM")}</Text>
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </div>
+                    <div className="row row1">
+                        {period.map((date) => {
+                            const isWekend = [0, 6].includes(date.moment.day());
+                            const weekend = isWekend ? "weekend" : "";
+                            return (
+                                <div className="column-header">
+                                    <div className={`date-header ${weekend}`}>
+                                        <Text use="headline6">{date.moment.format("DD")}</Text>
+                                        &nbsp;
+                                        <Text use="caption">{date.moment.format("ddd")}</Text>
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </div>
+
+                    {lanes.map((lane) => <PlannerRow lane={lane} events={events} period={period} />)}
+
+                </div>
+            </main>
+        </div>
+    );
+};
+
+/**
+ * Planner Row
+ */
+const PlannerRow = (props) => {
+
+    const { lane, events = [], period } = props
+    const rowEvents = events.filter(event => event.lane === lane.id)
+
+    return (
+        <div className="row">
+            {period.map((date) => {
+                const slotDate = new Date(date.year, date.month, date.day);
+                slotDate.setHours(0, 0, 0);
+                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}/>
+                );
+            })}
+        </div>
+    )
+}
+
+/**
+ * Planner Cell
+ */
+const PlannerCell = ({ lane, events, date, disabled = false, onAdd, onDelete, onSelect, onDrop, editable = false }) => {
+
+    const [dragOver, setDragOver] = useState(false);
+
+    function onDragOver(event) {
+        if (!dragOver) setDragOver(true);
+        event.stopPropagation();
+        event.preventDefault();
+    }
+
+    function onDragLeave(event) {
+        setDragOver(false);
+        event.stopPropagation();
+        event.preventDefault();
+    }
+
+    function drop(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        const id = event.dataTransfer.getData("text");
+        if (onDrop)
+            onDrop({
+                id,
+                lane: lane.id,
+                date: date.moment.format("YYYY-MM-DD")
+            });
+    }
+
+    const isWekend = [0, 6].includes(date.moment.day());
+    const weekend = isWekend ? "weekend" : "";
+
+    return (
+        <div className={`cell ${weekend}`} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={drop}>
+            c
+        </div>
+    );
+};

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Planner } from './Planner'
+
+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" },
+    ]
+    
+    const events = []
+
+    return (
+     
+            <Planner title="Planner 1" lanes={lanes} events={events} navigation={true} >
+
+            </Planner>
+     
+    )
+}