ywana-core8 0.0.769 → 0.0.771

package/package.json

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

package/src/html/tab.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { Fragment } from 'react'
+import { Icon } from '../html'
 import './tab.css'
 
 /**
@@ -35,7 +36,7 @@ export const Tabs = (props) => {
  */
 export const Tab = (props) => {
 
-  const { id, label, selected, actions, onSelect } = props
+  const { id, icon, label, selected, actions, onSelect } = props
 
   function select() {
     if (onSelect) onSelect(id)
@@ -44,6 +45,7 @@ export const Tab = (props) => {
   const style = selected ? "selected" : ""
   return (
     <div className={`tab ${style}`} onClick={select}>
+      {icon ? <Icon icon={icon} size="small" /> : null}
       {label}
       {actions ? actions : null}
     </div>

package/src/incubator/task-test.js

@@ -2,20 +2,43 @@ import { useContext, useState } from "react"
 import { Button } from "../html"
 import { TaskContext, TaskContextProvider, TaskMonitor } from "./task"
 
+/**
+ * Task Example 
+ *
+    const task = {
+        id: "633eb091b8e64e79c9219091",
+        name: "REMOVE_SPOTCOLOR",
+        owner: "633de6e1b8e64e79c9219089",
+        description: "Remove selected Spot Colors",
+        body: {
+            resource: "JOBS",
+            resourceID: "633de6e1b8e64e79c9219089",
+            // ...
+        },
+        init: "2022-10-06T10:40:17.680Z",
+        end: "2022-10-06T10:40:33.439Z",
+        percentage: 100,
+        state: "COMPLETED", // CREATED, RUNNING, COMPLETED, FAULTED, CANCELED
+        result: {
+            status: "OK",
+            message: "Spot Colors removed",
+            data: {
+                // ...
+            }
+        }
+    }
+ 
+ **/
+
 const CreateTaskButton = (props) => {
 
     const taskContext = useContext(TaskContext)
 
     async function run() {
-
-        const task = await taskContext.createTask({
+        taskContext.createTask({
+            name: "TEST",
             description: "Test Task " + Date.now(),
-            init: new Date().toString(),
-        })
-
-        taskContext.addListener(task.id, (task) => { 
-            console.log(task.description + " " + task.state)
-            taskContext.removeListener(task.id)
+            result: "OK",
         })
     }
 
@@ -27,11 +50,21 @@ const CreateTaskButton = (props) => {
 
 const TaskTest = (props) => {
 
+    const taskListeners = {
+        "TEST": (task, taskContext) => { 
+            console.log("LISTENER FOR TASK: ", task)
+            taskContext.updateTask(Object.assign({}, task, { percentage: task.percentage + 1 }))
+        }
+    }
+
+    const taskEditors = {
+        "TEST": (task) => <div>{task.description} {task.state}</div>,
+    }
+
     return (
-        <TaskContextProvider host="http://localhost:3001">
-            <TaskMonitor />
+        <TaskContextProvider host="http://localhost:3001" listeners={taskListeners} >
+            <TaskMonitor editors={taskEditors}/>
             <CreateTaskButton />
         </TaskContextProvider>
-
     )
 }

package/src/incubator/task.js

@@ -13,10 +13,10 @@ export const TaskContext = React.createContext({})
  * Task Provider
  */
 export const TaskContextProvider = (props) => {
-    
-    const { host, url = "/tasks", frequency = 5000, children } = props
+
+    const { host, url = "/tasks", frequency = 5000, children, listeners = {} } = props
     const API = CollectionAPI(url, host)
-    const listeners = []
+    const _listeners = Object.assign({}, listeners)
 
     async function tasks(filters, likes) {
         try {
@@ -39,54 +39,58 @@ export const TaskContextProvider = (props) => {
     async function createTask(task, listener) {
         try {
             const response = await API.create(task);
-            if (listener) addListener(response.id, listener)
+            if (listener) addListener(task.name, listener)
             return response;
         } catch (error) {
             console.log("createTask error", error);
         }
     }
 
-    async function removeTask(id) {
+    async function updateTask(task) {
         try {
-            removeListener(id)
-            const response = await API.remove(id);
+            const response = await API.update(task);
             return response;
         } catch (error) {
-            console.log("removeTask error", error);
+            console.log("updateTask error", error);
         }
     }
 
-    function addListener(taskId, listener) {
-        const listenerId = listeners.length
-        listeners.push({ taskId, listener })
-        return listenerId
+    async function removeTask(task) {
+        try {
+            const response = await API.remove(task.id);
+            return response;
+        } catch (error) {
+            console.log("removeTask error", error);
+        }
     }
 
-    function removeListener(taskId) {
+    function addListener(taskName, listener) {
+        _listeners[taskName] = listener
+    }
 
-        listeners.forEach((listener, index) => {
-            if (listener.taskId === taskId) {
-                listeners.splice(index, 1)
-            }
-        })
+    function removeListener(taskName) {
+        delete _listeners[taskName]
     }
 
     useEffect(() => {
         const interval = setInterval(async () => {
             const tasks = await API.all()
-            listeners.forEach(({ taskId, listener }) => {
-                const task = tasks.find(task => task.id === taskId)
-                if (task) listener(task)
+
+            // invoque listeners for each task
+            Object.entries(_listeners).forEach(([taskName, listener]) => {
+                const listenerTasks = tasks.filter(task => task.name === taskName)
+                listenerTasks.forEach(task => listener(task, value))
             })
+
         }, frequency)
         return () => clearInterval(interval)
     }, [])
 
-
     const value = {
         tasks,
         task,
         createTask,
+        updateTask,
         removeTask,
         addListener,
         removeListener
@@ -99,6 +103,17 @@ export const TaskContextProvider = (props) => {
     )
 }
 
+/**
+ * Task States
+ */
+export const TASK_STATES = {
+    "CREATED": "CREATED",
+    "RUNNING": "RUNNING",
+    "COMPLETED": "COMPPLETED",
+    "FAULTED": "FAULTED",
+    "CANCELED": "CANCELED"
+}
+
 /**
  * TaskProgress
  */
@@ -131,8 +146,7 @@ export const TaskProgress = (props) => {
  */
 export const TaskMonitor = (props) => {
 
-    const { title = "Task Monitor", filters } = props
-
+    const { title = "Task Monitor", filters, editors } = props
     const context = useContext(TaskContext)
     const [tasks = [], setTasks] = useState([])
 
@@ -150,7 +164,8 @@ export const TaskMonitor = (props) => {
     }
 
     async function remove(task) {
-        await context.removeTask(task.id)
+        console.log("remove", task)
+        await context.removeTask(task)
         refresh()
     }
 
@@ -171,15 +186,16 @@ export const TaskMonitor = (props) => {
         rows: tasks.map(task => {
             return {
                 id: task.id,
-                resourceID: task.resourceID,
+                state: task.state,
+                description: task.description,
+                progress: <LinearProgress progress={task.percentage} />,
+                percentage: task.percentage,
                 init: task.init,
                 end: task.end,
+                resourceID: task.resourceID,
                 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)} />
+                actions: <Icon size="small" icon="cancel" clickable action={() => remove(task)} />,
+                info: editors && task.result ? <TaskInfo task={task} editors={editors} /> : null
             }
         })
     }
@@ -193,3 +209,13 @@ export const TaskMonitor = (props) => {
         </div>
     )
 }
+
+/**
+ * Task Info
+ */
+const TaskInfo = (props) => {
+    const { task, editors } = props
+    const editor = editors ? editors[task.action] : null
+    return editor(task)
+}
+