ywana-core8 0.0.674 → 0.0.676

package/package.json

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

package/src/domain/TablePage.js

@@ -433,7 +433,7 @@ export const TableEditor = (props) => {
         
         const groups = items.reduce((groups, item) => {
             let groupName = item[groupBy]
-            if (!groupName) groupName=`SIN ${groupBy}`.toUpperCase()
+            if (!groupName) groupName=`NO ${groupBy}`.toUpperCase()
             if (groupName === false) groupName = `NO ${groupBy}`.toUpperCase()
             if (groupName === true) groupName = `SI ${groupBy}`.toUpperCase()
             const group = groups[groupName]

package/src/incubator/task.css

@@ -0,0 +1,31 @@
+.task-manager {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.task-manager>header {
+
+}
+
+.task-manager>main {
+    overflow: auto;
+    min-height: 20rem;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--paper-color);
+}
+
+
+.linear-progress>progress {
+    -webkit-appearance: none;
+}
+
+.linear-progress>progress::-webkit-progress-bar {
+    background-color: #eee;
+}
+
+.linear-progress>progress::-webkit-progress-value {
+    background-color: #2196f3;
+}
+

package/src/incubator/task.js

@@ -0,0 +1,189 @@
+import React, { useEffect, useContext, useState } from 'react'
+import { LinearProgress, Header, DataTable, Icon } from '../html'
+import { HTTPClient, Session } from '../http'
+import "./task.css"
+
+/**
+ * Task Context
+ */
+export const TaskContext = React.createContext({})
+
+/**
+ * Task Provider
+ */
+export const TaskContextProvider = (props) => {
+
+    const { host, url, children } = props
+    const API = TaskAPI(url, host)
+
+    async function tasks() {
+        try {
+            const response = await API.tasks();
+            return response;
+        } catch (error) {
+            console.log("tasks error", error);
+        }
+    }
+
+    async function task(id) {
+        try {
+            const response = await API.task(id);
+            return response;
+        } catch (error) {
+            console.log("task error", error);
+        }
+    }
+
+    async function createTask(task) {
+        try {
+            const response = await API.createTask(task);
+            return response;
+        } catch (error) {
+            console.log("createTask error", error);
+        }
+    }
+
+    async function removeTask(id) {
+        try {
+            const response = await API.removeTask(id);
+            return response;
+        } catch (error) {
+            console.log("removeTask error", error);
+        }
+    }
+
+    const value = {
+        tasks,
+        task,
+        createTask,
+        removeTask,
+    };
+
+    return (
+        <TaskContext.Provider value={value}>
+            {children}
+        </TaskContext.Provider>
+    )
+}
+
+/**
+ * API
+ */
+const TaskAPI = (url = "/tasks", host) => {
+
+    const http = HTTPClient(host || window.API || process.env.REACT_APP_API, Session);
+
+    return {
+
+        tasks() {
+            return http.GET(url)
+        },
+
+        task(id) {
+            return http.GET(`${url}/${id}`)
+        },
+
+        createTask(task) {
+            const body = JSON.stringify(task)
+            return http.POST(url, body)
+        },
+
+        removeTask(id) {
+            return http.DELETE(`${url}/${id}`)
+        }
+    }
+
+}
+
+/**
+ * TaskProgress
+ */
+export const TaskProgress = (props) => {
+
+    const context = useContext(TaskContext)
+    const { task, timeout = 500, autoreload = true, onComplete } = props
+    const [progress, setProgress] = useState(0)
+
+    useEffect(() => {
+        if (autoreload) {
+            const interval = setInterval(() => refresh(task.id), timeout)
+            return () => { clearInterval(interval) }
+        }
+    }, [task, autoreload])
+
+    async function refresh(id) {
+        const next = await context.task(id)
+        setProgress(next.percentage)
+        if (next.percentage === 100) {
+            if (onComplete) onComplete(next)
+        }
+    }
+
+    return task ? <LinearProgress progress={progress} /> : null
+}
+
+/**
+ * Task Monitor
+ */
+export const TaskMonitor = (props) => {
+
+    const context = useContext(TaskContext)
+    const [tasks = [], setTasks] = useState([])
+
+    useEffect(() => {
+        refresh()
+        const interval = setInterval(() => {
+            refresh()
+        }, 5000)
+        return () => { clearInterval(interval) }
+    }, [])
+
+    async function refresh() {
+        const tasks = await context.tasks()
+        setTasks(tasks)
+    }
+
+    async function remove(task) {
+        await context.removeTask(task.id)
+        refresh()
+    }
+
+    if (!tasks.length) return null
+
+    const table = {
+        columns: [
+            { id: "state", label: "Estado" },
+            { id: "description", label: "Descripcion" },
+            { id: "progress", label: "%" },
+            { id: "percentage", label: "" },
+            { id: "init", label: "Inicio" },
+            { id: "end", label: "Fin" },
+            { id: "resourceID", label: "Recurso" },
+            { id: "owner", label: "Propietario" },
+            { id: "actions", label: "" }
+        ],
+        rows: tasks.map(task => {
+            return {
+                id: task.id,
+                resourceID: task.resourceID,
+                init: task.init,
+                end: task.end,
+                owner: task.owner,
+                description: task.description,
+                percentage: task.percentage,
+                progress: <LinearProgress progress={task.percentage} />,
+                state: task.state,
+                actions: <Icon size="small" icon="cancel" clickable action={() => remove(task)} />
+            }
+        })
+    }
+
+    return (
+        <div className="task-manager">
+            <Header icon="list" title="Task Manager" />
+            <main>
+                <DataTable {...table} />
+            </main>
+        </div>
+    )
+}

package/src/site/site.js

@@ -28,7 +28,6 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
     const [breadcrumb, setBreadcrumb] = useState()
     const [focused, setFocused] = useState()
     
-    
     const value = {
         
         lang,