ywana-core8 0.0.34 → 0.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.34",
+  "version": "0.0.38",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",

package/src/domain/ContentEditor.css

@@ -3,7 +3,6 @@
 }
 
 .content-editor>section {
-
     margin-bottom: 1rem;
 }
 
@@ -90,14 +89,12 @@
     background-color: var(--paper-color) !important;
 }
 
-
 .collection-adder td.actions {
     border: solid 0px red;
     display: flex;
     align-items: center;
 }
 
-
 .field-editor {
     padding: 0;
 }

package/src/domain/CreateContentDialog.js

@@ -31,9 +31,10 @@ export const CreateContentDialog = ({ label, type, value = {}, filter, validator
         site.closeDialog();
     }
 
-    function createFilter(field, content) {
-        return field.required === true || field.optional === true
-        // TODO: execute props.filter
+    function filterForm(field, content) {
+        console.log('------ filterForm------------', field.id, filter)
+        const visible =  field.required === true || field.optional === true
+        return filter ? visible && filter(field, content) : visible
     }
 
     const actions = (
@@ -48,7 +49,7 @@ export const CreateContentDialog = ({ label, type, value = {}, filter, validator
     const content = new Content(type, form)
     return (
         <Dialog title={title} open={true} onAction={onAction} actions={actions}>
-            <ContentEditor content={content} onChange={change} filter={createFilter} />
+            <ContentEditor content={content} onChange={change} filter={filterForm} />
             {errors.map(error => <Text use="overline" tag="div" className="error">{error}</Text>)}
         </Dialog>
     )

package/src/domain/EditContentDialog.js

@@ -31,6 +31,11 @@ export const EditContentDialog = ({ label, type, value = {}, filter, validator,
         site.closeDialog();
     }
 
+    function filterForm(field, content) {
+        const visible =  field.required === true || field.optional === true
+        return filter ? visible && filter(field, content) : visible
+    }
+
     const actions = (
         <Fragment>
             <Button label="CLOSE" action={() => onAction("CLOSE")} />
@@ -43,7 +48,7 @@ export const EditContentDialog = ({ label, type, value = {}, filter, validator,
     const content = new Content(type, form)
     return (
         <Dialog title={title} open={true} onAction={onAction} actions={actions}>
-            <ContentEditor content={content} onChange={change} filter={filter} />
+            <ContentEditor content={content} onChange={change} filter={filterForm} />
             {errors.map(error => <Text use="overline" tag="div" className="error">{error}</Text>)}
         </Dialog>
     )

package/src/domain/TablePage.js

@@ -1,11 +1,11 @@
 import equal from 'deep-equal'
 import React, { Fragment, useContext, useEffect, useMemo, useRef, useState } from 'react'
-import { EditContentDialog } from './EditContentDialog'
-import { Content } from './ContentType'
-import { ContentEditor } from './ContentEditor'
-import { HTTPClient, Session } from '../http'
-import { SiteContext, PageContext } from '../site'
 import { Button, DataTable, DropDown, Header, Icon, MenuIcon, MenuItem, Text } from '../html'
+import { HTTPClient, Session } from '../http'
+import { PageContext, SiteContext } from '../site'
+import { ContentEditor } from './ContentEditor'
+import { Content } from './ContentType'
+import { CreateContentDialog } from './CreateContentDialog'
 import "./TablePage.css"
 
 const http = HTTPClient(window.API || process.env.REACT_APP_API, Session);
@@ -16,7 +16,7 @@ const http = HTTPClient(window.API || process.env.REACT_APP_API, Session);
 export const TablePage = (props) => {
 
     const site = useContext(SiteContext)
-    const { id = "table", icon, title, name = "table 1", schema, url, field, delay = 1000, actions, editable, canAdd = true, dev = false, autosave = true, groupBy, validator, scenario } = props
+    const { id = "table", icon, title, name = "table 1", schema, url, field, delay = 1000, actions, editable, canAdd = true, dev = false, autosave = true, groupBy, validator, scenario, formFilter } = props
     const [pageContext, setPageContext] = useContext(PageContext)
     const { selected } = pageContext
     const timer = useRef(null)
@@ -46,7 +46,8 @@ export const TablePage = (props) => {
             await pageContext.create(form);
             setPageContext(Object.assign({}, pageContext))
         }
-        site.openDialog(<EditContentDialog label={`Crear ${name}`} type={schema} onOK={onOK} validator={validator} />);
+        //site.openDialog(<EditContentDialog label={`Crear ${name}`} type={schema} onOK={onOK} validator={validator} />);
+        site.openDialog(<CreateContentDialog label={`Crear ${name}`} type={schema} onOK={onOK} validator={validator} filter={formFilter}/>);
     }
 
     function change(next) {

package/src/upload/UploadArea.js

@@ -59,4 +59,22 @@ const UploadIcon = ({ resumable }) => {
             <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/upload/uploader.css

@@ -1,6 +1,7 @@
 .uploader {
     display: flex;
     flex-direction: column;
+    flex: 1;
 }
 
 .demo-uploader {

package/src/upload/uploader.js

@@ -1,68 +1,85 @@
 import React, { useState, useMemo } from 'react'
 import ResumableJS from 'resumablejs'
-import { UploadArea } from './UploadArea'
+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, className, onSuccess, onError, onComplete, errors = [] }) => {
+export const Uploader = ({ label, target, accept, simultaneousUploads = 1, className, onSuccess, onError, onComplete, errors = [] }) => {
 
-    const STATES = { 'IDLE': 0, 'RUNNING': 1, 'SUCCESS': 2, 'ERROR': 3, 'COMPLETED': 4 }
 
-    const resumable = useMemo(() => {
-        const config = {
-            target: target,
-            chunkSize: 1 * 1024 * 1024,
-            simultaneousUploads: 1,
-            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 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([])
+        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)
-        resumable.upload()
-    }
+        function onFileAdded(file) {
+            files.push(file)
+            setFiles(files)
+            setState(STATES.RUNNING)
+            resumable.upload()
+        }
 
-    function onFileProgress(file) {
-        const progress = file.progress()
-        setProgress(progress)
-    }
+        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 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 onFileError(file, message) {
+            setError(message)
+            setState(STATES.ERROR)
+            if (onError) onError(file, message)
+        }
+
+        function onAllComplete() {
+            setState(STATES.IDLE)
+            if (onComplete) onComplete(files)
+        }
 
-    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>
+        )
     }
 
-    return (
-        <div className={`uploader ${className}`}>
-            <UploadArea resumable={resumable} state={state} label={label} error={error}/>
-        </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>
+        );
+    };