ywana-core8 0.0.238 → 0.0.239

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.238",
+  "version": "0.0.239",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",
@@ -31,6 +31,8 @@
   "dependencies": {
     "deep-equal": "^2.0.5",
     "material-design-icons-iconfont": "^6.1.1",
+    "moment": "^2.29.1",
+    "moment-range": "^4.0.2",
     "react-datepicker": "^4.6.0",
     "react-error-overlay": "^6.0.10",
     "react-notifications": "^1.7.3",

package/src/html/header.css

@@ -5,6 +5,7 @@
   align-items: center;
   background-repeat: no-repeat;
   background-size: cover;
+  overflow: visible;
 }
 
 .header>.icon .header>img {
@@ -50,7 +51,7 @@
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-  overflow: vivsible;
+  overflow: visible;
 }
 
 .header.primary {

package/src/html/textfield.css

@@ -31,11 +31,16 @@
 
 .textfield>.icon {
   position: absolute;
-  top: 1.7rem;
+  top: 1.5rem;
   right: .2rem;
   color: rgba(150,150,150,1);
 }
 
+.textfield-date>.icon,
+.textfield-DATE>.icon {
+  right: 2.5rem;
+}
+
 .textfield > label {
   color: var(--primary-color);
   font-size: .9rem;
@@ -120,7 +125,7 @@ input:read-only ~ label,
 }
 
 .dropdown>menu {
-  z-index: 2;
+  z-index: 11;
   position: absolute;
   top: 3.8rem;
   left: 0px;

package/src/html/textfield.js

@@ -43,7 +43,7 @@ export const TextField = (props) => {
 
     const borderStyle = outlined ? "textfield-outlined" : "textfield"
     const labelStyle = label ? "" : "no-label"
-    const style = `${labelStyle} ${borderStyle}`
+    const style = `${labelStyle} ${borderStyle} textfield-${type}`
     const labelTxt = <Text>{label}</Text>
 
     return (
@@ -83,7 +83,7 @@ export const DropDown = (props) => {
     }
 
     function toggle() {
-        if (site) {
+        if (site && site.changeFocus) {
             site.changeFocus({
                 lose: () => {
                     setOpen(false)

package/src/html/textfield.test.js

@@ -0,0 +1,21 @@
+import React, { useState } from 'react'
+import { DropDown, TextField } from '.'
+import { Wrapper } from '../../__reactpreview__/Wrapper'
+
+const KanbanTest = (prop) => {
+
+    const [form, setForm] = useState({})
+
+    function change(id, value) {
+        const next = Object.assign({}, form, { [id]: value })
+        setForm(next)
+    }
+
+    return (
+        <>
+           <TextField id="date1" type="DATE" label="Date" value={form.date1} onChange={change}/>
+           <div/>
+           <DropDown id="gender1" label="Gender" value={form.gender1} onChange={change} options={[ {label: "Male", value: "M"}, { label: "Female", value: "F" }]} /> 
+        </>
+    )
+}

package/src/widgets/kanban/Kanban.test.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Kanban, KanbanCard, KanbanColumn } from './Kanban'
+
+const KanbanTest = (prop) => {
+    return (
+           <Kanban>
+               <KanbanColumn title="TODO">
+                    <KanbanCard />
+               </KanbanColumn>
+               <KanbanColumn title="IN PROGRESS">
+
+               </KanbanColumn>
+               <KanbanColumn title="DONE">
+                   
+               </KanbanColumn>
+           </Kanban>
+    )
+}

package/src/widgets/planner/Planner.css

@@ -0,0 +1,179 @@
+.planner-box {
+    flex:1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border: solid 1px var(--divider-color);
+}
+
+.planner-box > header > label { 
+    min-width:13rem;
+}
+
+.planner {
+    flex: 1;
+    display: flex;
+    height: 70rem;
+    overflow-y: auto;
+    margin: 1rem;
+
+    --row-height: 8rem;
+    --column-width: 14rem;
+}
+
+.planner > .column0 {
+    position: sticky;
+    left: 0px;
+    z-index: 11;
+    background-color: var(--paper-color);
+    width: var(--column-width);
+    border-right: solid 1px var(--divider-color);
+}
+
+.column-header {
+    width: var(--column-width);
+    background-color: var(--paper-color);
+    height: 2.6rem;
+}
+
+.date-header {
+    display: flex;
+    padding: 0.5rem 1rem;
+    align-items: baseline;
+}
+
+.weekend {
+    background-color: rgb(245, 245, 245);
+}
+
+.month-header {
+    padding: 0.5rem 1rem;
+    border-top: solid 1px var(--divider-color);
+}
+
+.month-header>* {
+    display: none
+}
+
+.month-header.first {
+    border-left: solid 1px var(--divider-color);
+}
+
+.month-header.first>* {
+    display: block
+}
+
+.column0 > .column-header {
+    position: sticky;
+    top: 0px;
+    height: 6rem;
+    border-bottom: solid 1px var(--divider-color);
+    border-right: solid 1px var(--divider-color);
+}
+
+.row-header {
+    width: var(--column-width);
+    height: var(--row-height);
+    border-bottom: solid 1px var(--divider-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.planner > .rows {
+    flex: 1;
+}
+
+.planner .row {
+    height: var(--row-height);
+    border-bottom: solid 1px var(--divider-color);
+    display: flex;
+}
+
+.planner .row0 {
+    position: sticky;
+    top: 0px;
+    z-index: 10;
+    height: 3rem;
+    background-color: var(--paper-color);
+    border-bottom: solid 1px var(--divider-color);
+}
+
+.planner .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: center;
+    border-right: dotted 1px var(--divider-color);
+}
+
+.photoshoot-icon {
+    border: solid 0px var(--divider-color);
+    border-radius: 4px;
+    flex: 1;
+    height: 100%;
+    padding: 0.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: rgba(200, 200, 200, 0.5);
+}
+
+.photoshoot-icon.dragOver {
+    background-color: rgba(225,225,250);
+}
+
+.photoshoot-card {
+    border: solid 1px var(--divider-color);
+    border-radius: 4px;
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.photoshoot-card > * {
+    background-color: #FFF;
+    opacity: .8;
+}
+
+.photoshoot-card > header {
+    padding:  0 0.5rem ;
+
+}
+
+.photoshoot-card > main {
+    padding:  0 0.5rem ;
+    flex: 1;
+}
+
+.photoshoot-card > footer {
+    display: flex;
+}
+
+.photoshoot-card.disabled {
+    opacity: 0.3;
+}
+
+.photoshoot-card:hover {
+    cursor: pointer;
+    box-shadow: var(--shadow1);
+}
+
+.expand {
+    flex: 1;
+}
+

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>
+     
+    )
+}