ywana-core8 0.0.843 → 0.0.844

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.843",
+  "version": "0.0.844",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",
@@ -37,6 +37,7 @@
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",
     "react-datepicker": "^4.6.0",
+    "react-error-boundary": "^4.0.3",
     "react-error-overlay": "^6.0.10",
     "react-image-pan-zoom-rotate": "^1.6.0",
     "react-notifications-component": "^3.4.1",

package/src/http/client.js

@@ -23,22 +23,28 @@ async function fetchAsync(method, URL, body = null, token, headers) {
     }
     throw response
   } catch (error) {
-    if (error instanceof Error) { throw { error }}
+    if (error instanceof Error) { throw { error } }
     const json = await error.json()
     throw {
       success: false,
-      message: json.message || json.err
+      message: json.message || json.err
     }
   }
 }
 
-
+/**
+ * HTTP Client
+ * 
+ * @param {*} domain 
+ * @param {*} securityCtx 
+ * @returns 
+ */
 export const HTTPClient = (domain, securityCtx) => {
   return {
 
-    GET: (URL) => {
+    GET: (URL, headers) => {
       const token = securityCtx ? securityCtx.token() : null;
-      return fetchAsync('GET', domain + URL, undefined, token);
+      return fetchAsync('GET', domain + URL, undefined, token, headers);
     },
 
     POST: (URL, body, headers) => {
@@ -48,17 +54,17 @@ export const HTTPClient = (domain, securityCtx) => {
 
     PUT: (URL, body) => {
       const token = securityCtx ? securityCtx.token() : null;
-      return fetchAsync('PUT', domain + URL, body, token);
+      return fetchAsync('PUT', domain + URL, body, token, headers);
     },
 
     PATCH: (URL, body) => {
       const token = securityCtx ? securityCtx.token() : null;
-      return fetchAsync('PATCH', domain + URL, body, token);
+      return fetchAsync('PATCH', domain + URL, body, token, headers);
     },
 
     DELETE: (URL) => {
       const token = securityCtx ? securityCtx.token() : null;
-      return fetchAsync('DELETE', domain + URL, undefined, token);
+      return fetchAsync('DELETE', domain + URL, undefined, token, headers);
     }
   }
 }

package/src/site/site.css

@@ -159,4 +159,28 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+}
+
+
+.site-error-fallback {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    width: 100vw;
+    background-color: var(--background-color);
+}
+
+.site-error-fallback > dialog {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 50%;
+    height: 50%;
+    background-color: var(--paper-color);
+    box-shadow: var(--shadow1);
+
+    border: solid 1px black;
 }

package/src/site/site.js

@@ -2,18 +2,19 @@ import React, { Children, Fragment, useState, useContext, useEffect } from 'reac
 import { Icon } from '../html/icon'
 import { Tabs, Tab } from '../html/tab'
 import { Header } from '../html/header'
-import { Tooltip } from '../html/tooltip'
+import { Tooltip } from '../html/tooltip'
 import { Page } from './page'
 import { SiteContext } from './siteContext'
 import { ReactNotifications, Store } from 'react-notifications-component'
 import 'react-notifications-component/dist/theme.css'
 import './site.css'
+import { ErrorBoundary } from 'react-error-boundary'
 
 /**
  * Site Provider
  */
 export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
-    
+
     const [lang, setLang] = useState(siteLang)
     const [dictionary, setDictionary] = useState(siteDictionary)
     const [sideNav, setSideNav] = useState('max')
@@ -27,15 +28,15 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
     const [preview, setPreview] = useState()
     const [breadcrumb, setBreadcrumb] = useState()
     const [focused, setFocused] = useState()
-    
+
     const value = {
-        
+
         lang,
         setLang,
-        
+
         dictionary,
         setDictionary,
-        
+
         focused,
         changeFocus: (next) => {
             if (focused) focused.lose()
@@ -45,25 +46,25 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
             if (focused) focused.lose()
             setFocused(null)
         },
-        
+
         sideNav,
         setSideNav,
 
         showNav,
         setShowNav,
-        
+
         info,
         openInfo: (info) => { setInfo(info) },
         closeInfo: () => { setInfo(null) },
-        
+
         consoleLines,
         showConsole,
         toggleConsole: () => { setShowConsole(!showConsole) },
-        writeLog: (line) => { 
+        writeLog: (line) => {
             const next = consoleLines.concat(line)
             setConsoleLines(next)
         },
-        clearLog: () => { setConsoleLines([])},
+        clearLog: () => { setConsoleLines([]) },
 
         breadcrumb,
         setBreadcrumb,
@@ -83,10 +84,10 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
         prompt: (message) => window.prompt(message),
 
         promptDialog,
-        openPromptDialog: (dialog) => {setPromptDialog(dialog)},
-        closePromptDialog: () => { setPromptDialog(null)},
+        openPromptDialog: (dialog) => { setPromptDialog(dialog) },
+        closePromptDialog: () => { setPromptDialog(null) },
 
-        notify: ({ title, body, type = "success", duration=3000, onRemoval }) => {
+        notify: ({ title, body, type = "success", duration = 3000, onRemoval }) => {
             Store.addNotification({
                 title,
                 message: body,
@@ -104,9 +105,23 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
         }
     }
 
+    function fallbackRenderer({ error, resetErrorBoundary }) {
+        return (
+            <div className="site-error-fallback" role="alert">
+                <dialog>
+                    <h3>Ywana Core 8</h3>
+                    <p>Something went wrong:</p>
+                    <pre>{error.message}</pre>
+                </dialog>
+            </div>
+        )
+    }
+
     return (
         <SiteContext.Provider value={value}>
-            {children}
+            <ErrorBoundary fallbackRender={fallbackRenderer}>
+                {children}
+            </ErrorBoundary>
         </SiteContext.Provider>
     )
 }
@@ -167,7 +182,7 @@ const SiteToolBar = ({ children }) => {
 /**
  * Site Footer
  */
- const SiteFooter = ({ children }) => {
+const SiteFooter = ({ children }) => {
     return (
         <footer>
             {children}
@@ -223,7 +238,7 @@ const SiteMenu = ({ logo, title, children, min }) => {
     const menutTitle = sideNav === 'max' ? title : ''
     return (
         <menu className={`${style} ${showNav ? 'show' : ''}`}>
-            <Header title={menutTitle}/>
+            <Header title={menutTitle} />
             <main >
                 {Object.keys(sections).map(title => (
                     <Fragment key={title}>
@@ -282,7 +297,7 @@ const SiteDialog = () => {
 /**
  * Site Promtp Dialog
  */
- const SitePromptDialog = () => {
+const SitePromptDialog = () => {
     const context = useContext(SiteContext)
     return context.promptDialog ? context.promptDialog : ''
 }
@@ -321,7 +336,7 @@ const SiteConsole = () => {
                 <Icon icon="clear_all" size="small" clickable action={clear} />
             </nav>
             <main>
-                {context.consoleLines.map((line,index) => <div key={`log-${index}`}>{line}</div>)}
+                {context.consoleLines.map((line, index) => <div key={`log-${index}`}>{line}</div>)}
             </main>
         </div>
     ) : ''

package/src/site/site.test.js

@@ -2,10 +2,8 @@ import React, { Fragment, useContext, useEffect, useState } from 'react'
 import { SiteContext } from './siteContext'
 import { Site } from './site'
 import { Page } from './page'
-import './site.css'
-import './page.css'
 import { Dialog } from './dialog'
-import { Button, DropDown, TextField, TextArea } from '../html'
+import { Button, DropDown, TextField, TextArea, Icon } from '../html'
 import { UploadDialog } from '../widgets/upload/UploadDialog'
 import { Uploader } from '../widgets/upload/Uploader'
 import { TabbedTablePage } from '../domain/TabbedTablePage'
@@ -15,6 +13,9 @@ import { CollectionPage } from '../domain/CollectionPage'
 import { FORMATS, TYPES } from '../domain/ContentType'
 import { TableTest } from '../html/table.test'
 import { PasswordEditor } from '../incubator/password'
+import './site.css'
+import './page.css'
+
 
 const SiteTest = (prop) => {
 
@@ -41,10 +42,11 @@ const SiteTest = (prop) => {
     )
 }
 
+
 const Page1 = (props) => {
 
     const site = useContext(SiteContext)
-    const [form, setForm] = useState({})
+    const [formm, setForm] = useState({})
 
     useEffect(() => {
         site.notify({ title: "Notification 1", body: "Lorem ipsum dolor sit amet" })
@@ -84,7 +86,7 @@ const Page1 = (props) => {
     )
 }
 
-const Page2 = (props) => {
+const Page2 = (props) => { 
 
     const site = useContext(SiteContext)
 

package/src/test.js

@@ -1,67 +0,0 @@
-import React from 'react'
-
-const Test = (props) => {
-
-    return (
-
-        <div>
-
-            <table border="1">
-                <thead>
-                    <tr>
-                        <th rowspan="2" colspan="1"><div class="checkbox"><input type="checkbox" value=""/><span class="checkmark"></span><label></label></div></th>
-                        <th rowspan="2" colspan="1"><span>Estado</span></th>
-                        <th rowspan="2" colspan="1"><span>Fecha de Entrada</span></th>
-                        <th rowspan="2" colspan="1"><span>Circuito</span></th>
-                        <th rowspan="2" colspan="1"><span>Clase de Muestra</span></th>
-                        <th colspan="3"><span>Referencia</span></th>
-                        <th></th>
-                    </tr>
-                    <tr>
-                        <th>Referencia</th>
-                        <th>Referencia</th>
-                        <th>Referencia</th>
-                    </tr>
-                </thead>
-                <tbody>
-                </tbody>
-            </table>
-
-            <table border="1">
-                <thead>
-                    <tr>
-                        <th rowSpan={2}>Uno</th>
-                        <th rowSpan={2}>Dos</th>
-                        <th rowSpan={2}>Tres</th>
-                        <th colspan="4">Cuatro</th>
-                        <th rowSpan={2}>Ocho</th>
-                    </tr>
-
-                    <tr>
-                        <th>a</th>
-                        <th>b</th>
-                        <th>c</th>
-                        <th>d</th>
-                    </tr>
-
-                </thead>
-                <tbody>
-
-                    <tr>
-                        <td>1</td>
-                        <td>2</td>
-                        <td>3</td>
-                        <td>4</td>
-                        <td>5</td>
-                        <td>6</td>
-                        <td>7</td>
-                        <td>8</td>
-                    </tr>
-                </tbody>
-            </table>
-
-        </div>
-
-    )
-}
-

package/src_old/upload/UploadArea.js

@@ -1,80 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react'
-import { Icon, Text, CircularProgress } from '../html'
-
-/**
- * Component
- */
-export const UploadArea = (props) => {
-
-    const STATES = { 'IDLE': 0, 'RUNNING': 1, 'SUCCESS': 2, 'ERROR': 3 }
-
-    const areaElement = useRef()
-    const [drag, setDrag] = useState(false)
-
-    useEffect(() => {
-        const { resumable } = props
-        if (resumable && areaElement) resumable.assignDrop(areaElement.current)
-    }, [])
-
-    const onDragOver = () => {
-        setDrag(true)
-    }
-
-    const onDragLeave = () => {
-        setDrag(false)
-    }
-
-    const { state = STATES.IDLE, label = 'Add file or drop file here...', error } = props
-    const dragging = drag === true ? 'drag-over' : ''
-
-    return (
-        <div className={`upload-area6 ${dragging}`}
-            onDragOver={onDragOver}
-            onDragLeave={onDragLeave}
-            ref={areaElement}
-        >
-            {state === STATES.IDLE ? <UploadIcon resumable={props.resumable} /> : ''}
-            {state === STATES.IDLE ? <label>{label}</label> : ''}
-            {state === STATES.RUNNING ? <CircularProgress size="xlarge" /> : ''}
-            {state === STATES.SUCCESS ? <Icon icon="done_all" /> : ''}
-            {state === STATES.ERROR ? <Text use="body1">{error}</Text> : ''}
-            {props.children}
-        </div>
-    )
-}
-
-/**
- * Component
- */
-const UploadIcon = ({ resumable }) => {
-
-    const iconElement = useRef()
-
-    useEffect(() => {
-        if (resumable && iconElement) resumable.assignBrowse(iconElement.current)
-    }, [])
-
-    return (
-        <div className="upload-icon" ref={iconElement}>
-            <Icon icon="folder_open" clickable/>
-        </div>
-    )
-}
-
-/**
- * Upload Button
- */
- export function UploadButton({ resumable, icon="file_upload", label="Upload"}) {
-
-    const buttonElement = useRef();
-
-    useEffect(() => {
-        if (resumable && buttonElement) resumable.assignBrowse(buttonElement.current);
-    }, []);
-
-    return (
-        <div className="upload-button" ref={buttonElement}>
-            <Button icon={icon} label={label} outlined/>
-        </div>
-    )
-}

package/src_old/upload/UploadDialog.js

@@ -1,41 +0,0 @@
-import React, { Fragment, useContext, useState } from 'react';
-import { Uploader } from './uploader'
-import { Button, Text } from '../html';
-import { SiteContext, Dialog } from '../site';
-import { UploadFile } from './UploadFile';
-
-/**
- * Upload Dialog
- */
-export const UploadDialog = ({ label, target, accept, onSuccess, onOK, onError, onClose, onActionClose = true }) => {
-
-    const site = useContext(SiteContext);
-    const [file, setFile] = useState();
-    const [errors, setErrors] = useState([])
-
-    function onComplete(uploads) {
-        setFile(uploads[0]);
-        if (onSuccess) onSuccess(uploads[0])
-    }
-
-    function onAction(action) {
-        if (action === 'CLOSE' || onActionClose === true) {
-            site.closeDialog();
-            onClose()
-        }
-    }
-
-    const actions = (
-        <Fragment>
-            <Button label="CLOSE" action={() => onAction("CLOSE")} />
-        </Fragment>
-    )
-
-    const title = <Text use="headline6">{label}</Text>
-    return (
-        <Dialog title={title} open={true} onAction={onAction} actions={actions}>
-            {file ? <UploadFile file={file} /> : <Uploader label={label} accept={accept} target={target} onComplete={onComplete} />}
-            {errors.map(error => <Text use="overline" tag="div" className="error">{error}</Text>)}
-        </Dialog>
-    )
-}

package/src_old/upload/UploadFile.js

@@ -1,29 +0,0 @@
-import React, { Fragment } from 'react'
-import { Icon, Text, LinearProgress } from '../html'
-import './uploader.css'
-
-/**
- * Upload File
- */
-export const UploadFile = ({ file, state, progress, error }) => {
-
-    const STATES = { 'IDLE': 0, 'RUNNING': 1, 'SUCCESS': 2, 'ERROR': 3 }
-
-    const icon = error ?  <Icon icon="image" className="error"/> :  <Icon icon="image" />
-    return state !== STATES.IDLE ? (
-        <Fragment>
-
-            <div className="upload-file">
-                {icon}
-                <Text use="body1" tag="label">{file.fileName}</Text>
-                {state === STATES.RUNNING ? <LinearProgress progress={progress} /> : ''}
-                {state === STATES.RUNNING ? <Icon icon="close" clickable /> : ''}
-                {state === STATES.SUCCESS ? <Icon icon="done" /> : ''}
-                {state === STATES.ERROR ? <Icon icon="error" /> : ''}
-            </div>
-
-            { error ? <div className="error"><Text use="overline">{error}</Text></div> : ''}
-
-        </Fragment>
-    ) : ''
-}

package/src_old/upload/index.js

@@ -1,4 +0,0 @@
-export * from './uploader'
-export * from './UploadDialog'
-export * from './UploadArea'
-export * from './UploadFile'

package/src_old/upload/uploader.css

@@ -1,58 +0,0 @@
-.uploader {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-}
-
-.demo-uploader {
-    width: 40rem;
-    height: 30rem;
-    margin: 5rem auto;
-    flex-direction: column;
-}
-
-/***************** Upload Area ***********************/
-
-.upload-area6 {
-    flex: 1;
-    margin: 0 0 1rem 0;
-    border: dashed 2px var(--divider-color);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border-radius: 1rem;
-    min-height: 10rem;
-  }
-  
-  .upload-area6>label {
-    font-size: 1.1rem;
-    font-weight: 500;
-  }
-  
-  .upload-area6.drag-over {
-    background-color: rgba(200,200,200,.1);
-  }
-
-  /***************** Upload File ***********************/
-
-.upload-file {
-    display: flex;
-    align-items: center;
-    min-height: 4rem;
-    padding: 0 1rem;
-}
-
-.upload-file>label {
-    padding: 0 1rem;
-    min-width: 40%;
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.error {
-  color: red;
-  text-align: center
-}

package/src_old/upload/uploader.js

@@ -1,87 +0,0 @@
-import React, { useState, useMemo } from 'react'
-import ResumableJS from 'resumablejs'
-import { UploadArea } from "./UploadArea";
-import { UploadFile } from "./UploadFile";
-import './uploader.css'
-
-const STATES = {
-    IDLE: 0, RUNNING: 1, SUCCESS: 2, ERROR: 3, COMPLETED: 4 
-}
-
-/**
- * Uploader
- */
-export const Uploader = ({ label, target, accept, simultaneousUploads = 1, className, onProgress, onSuccess, onError, onComplete, errors = [] }) => {
-
-
-        const resumable = useMemo(() => {
-            const config = {
-                target: target,
-                chunkSize: 1 * 1024 * 1024,
-                simultaneousUploads,
-                testChunks: false,
-                throttleProgressCallbacks: 1,
-                fileType: accept
-            }
-            const resumable = new ResumableJS(config)
-            resumable.on('fileAdded', onFileAdded)
-            resumable.on('fileProgress', onFileProgress)
-            resumable.on('fileSuccess', onFileSuccess)
-            resumable.on('fileError', onFileError)
-            resumable.on('complete', onAllComplete)
-            return resumable
-        }, [])
-
-        const [progress, setProgress] = useState(0)
-        const [state, setState] = useState(STATES.IDLE)
-        const [error, setError] = useState()
-        const [files, setFiles] = useState([])
-
-        function onFileAdded(file) {
-            files.push(file)
-            setFiles(files)
-            setState(STATES.RUNNING)
-            resumable.upload()
-        }
-
-        function onFileProgress(file) {
-            const progress = file.progress()
-            setProgress(progress)
-            if (onProgress) onProgress(files);
-        }
-
-        function onFileSuccess(file, message) {
-            setState(STATES.SUCCESS)
-            if (onSuccess) onSuccess(file, message)
-        }
-
-        function onFileError(file, message) {
-            setError(message)
-            setState(STATES.ERROR)
-            if (onError) onError(file, message)
-        }
-
-        function onAllComplete() {
-            setState(STATES.IDLE)
-            if (onComplete) onComplete(files)
-        }
-
-        return (
-            <div className={`uploader ${className}`}>
-                {state === STATES.IDLE ? <UploadArea resumable={resumable} state={state} label={label} error={error} progress={progress} /> : null}
-                {state === STATES.RUNNING || STATES.SUCCESS || STATES.ERROR ? <UploadProgress files={files} errors={errors} /> : null}
-            </div>
-        )
-    }
-
-const UploadProgress = ({ files = [], errors }) => {
-        return (
-            <div>
-                {files.map((file) => {
-                    const error2 = errors.some((e) => e === file.fileName) ? "Fichero Mal Nombrado" : "";
-                    const progress = 1
-                    return <UploadFile file={file} state={STATES.RUNNING} progress={file.progress()} />;
-                })}
-            </div>
-        );
-    };