ywana-core8 0.0.32 → 0.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.32",
+  "version": "0.0.36",
   "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

@@ -32,8 +32,8 @@ export const CreateContentDialog = ({ label, type, value = {}, filter, validator
     }
 
     function createFilter(field, content) {
-        return field.required === true || field.optional === true
-        // TODO: execute props.filter
+        const visible =  field.required === true || field.optional === true
+        return filter ? visible && filter(field, content) : visible
     }
 
     const actions = (

package/src/domain/TablePage.js

@@ -369,21 +369,13 @@ const TableAPI = (url) => {
         all(filters) {
             let queryParams = "?"
             if (filters) {
-
-                console.log('filters', filters)
-
                 const filterQuery = Object.keys(filters).reduce((query, key) => {
-
                     const value = filters[key]
-                    console.log(value)
-
                     if (typeof (value) === 'boolean') {
                         return query.concat(`${key}=${value}&`)
-
                     } else if (Array.isArray(value)) {
-                        const param = value.length === 0 ? 'xxx=1&' : value.reduce((param,item) => { 
+                        const param = value.length === 0 ? '' : value.reduce((param,item) => { 
                             param = param.concat(`${key}=${item}&`)
-                            console.log(item, param)
                             return param
                         }, "")
                         console.log(param)
@@ -392,8 +384,6 @@ const TableAPI = (url) => {
                         return query.concat(`${key}=%${filters[key]}%&`)
                     }
                 }, "")
-
-                console.log('filterQuery')
                 queryParams = queryParams.concat(filterQuery)
             }
             return http.GET(url + queryParams)

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