ywana-core8 0.0.72 → 0.0.76

package/package.json

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

package/src/css/html.css

@@ -30,4 +30,8 @@ body {
 .row {
   display: flex;
   align-items: center;
+}
+
+td.actions {
+  display: flex;
 }

package/src/domain/ContentEditor.js

@@ -2,6 +2,7 @@ import React, { Fragment, useState } from 'react';
 import { Button, CheckBox, DataTable, DropDown, Icon, Stack, Tab, Tabs, Text, TextField, Tree, TreeNode, TreeItem, TokenField, Property } from '../html';
 import { Content, TYPES } from './ContentType';
 import './ContentEditor.css';
+import { FORMATS } from '.';
 
 /**
  * Content Editor
@@ -25,7 +26,7 @@ export const ContentEditor = ({ content, filter, onChange }) => {
               {fields
                 .filter(field => field.id !== 'id')
                 .filter(field => filter ? filter(field, content) : true)
-                .map((field) => <FieldEditor key={field.id} field={field} onChange={change} outlined={true}/>)}
+                .map((field) => <FieldEditor key={field.id} field={field} onChange={change} outlined={true} />)}
             </main>
           </section>
         )
@@ -177,8 +178,6 @@ export const FieldEditor = ({ field, onChange, content, outlined = false }) => {
         return <StringEditor outlined={outlined} field={field} value={value1} onChange={change} content={content} />
       case TYPES.BOOLEAN:
         return <CheckBox outlined id={id} label={label} value={value1} onChange={change} />
-      case TYPES.DATE:
-        return <TextField outlined={outlined} id={id} type='date' label={label} value={value1} onChange={change} disabled={editable} />
       case TYPES.NUMBER:
         return <NumberEditor outlined={outlined} field={field} value={value1} onChange={change} />
       case TYPES.ARRAY:
@@ -225,7 +224,7 @@ const EntityEditor = ({ field, value = {}, onChange }) => {
  * String Editor
  */
 export const StringEditor = ({ field, value = '', onChange, content, outlined }) => {
-  const { id, label, options, editable = true, filter } = field
+  const { id, format, label, options, editable = true, filter } = field
 
   function change(id, value) {
     if (onChange) onChange(id, value)
@@ -239,14 +238,9 @@ export const StringEditor = ({ field, value = '', onChange, content, outlined })
   return (
     <div className='field-editor string-editor'>
       {
-        editable ?
-          options ? (
-            <DropDown outlined={outlined} id={id} label={label} value={value} onChange={change} options={buildOptions()} />
-          ) : (
-            <TextField outlined={outlined} id={id} label={label} value={value} onChange={change} />
-          ) : (
-            <TextField outlined={outlined} id={id} label={label} value={value} onChange={change} readOnly={true} />
-          )
+        format === FORMATS.DATE ? <TextField outlined={outlined} id={id} type="date" label={label} value={value} onChange={change} readOnly={!editable} /> :
+          options ? <DropDown outlined={outlined} id={id} label={label} value={value} onChange={change} options={buildOptions()} readOnly={!editable} /> :
+            <TextField outlined={outlined} id={id} label={label} value={value} onChange={change} readOnly={!editable} />
       }
     </div>
   )

package/src/domain/ContentForm.js

@@ -8,14 +8,11 @@ import { TextField, CheckBox, DropDown, Form } from '../html';
 export const ContentForm = ({ content, columns = 1, filter, rules, onChange }) => {
 
     const form = content.form()
-    console.log(form)
 
     const fields = Object.keys(form)
         .map(key => form[key])
         .filter( field => filter ? filter(field) : true)
 
-    console.log(fields)
-    
     return (
         <Form className="content-form" columns={columns} outlined={true} onChange={onChange}>
             { fields.map(field => <ContentFormField key={field.id} {...field} />)}

package/src/domain/TablePage.js

@@ -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, canDelete = true, dev = false, autosave = true, groupBy, validator, scenario, formFilter, tableFilter, tableActions } = props
+    const { id = "table", icon, title, name = "table 1", schema, url, field, delay = 1000, actions, editable, canFilter=false, canAdd = true, canDelete = true, dev = false, autosave = true, groupBy, validator, scenario, formFilter, tableFilter, tableActions } = props
     const [pageContext, setPageContext] = useContext(PageContext)
     const { selected } = pageContext
     const timer = useRef(null)
@@ -46,7 +46,7 @@ export const TablePage = (props) => {
             await pageContext.create(form);
             setPageContext(Object.assign({}, pageContext))
         }
-        site.openDialog(<CreateContentDialog label={`Crear ${name}`} type={schema} onOK={onOK} validator={validator} filter={formFilter}/>);
+        site.openDialog(<CreateContentDialog label={`Crear ${name}`} type={schema} onOK={onOK} validator={validator} filter={formFilter} />);
     }
 
     function change(next) {
@@ -106,11 +106,9 @@ export const TablePage = (props) => {
                 ) : null}
                 {actions}
             </Header>
-            <menu className="table-page">
-                <TableFilters schema={schema} />
-            </menu>
+            {canFilter ? <menu className="table-page"><TableFilters schema={schema} /></menu> : null}
             <main key={id} className="table-page">
-                <TableEditor icon={icon} title={name} schema={schema} delay={delay} editable={editable} groupBy={groupBy} filter={tableFilter} actions={tableActions} canDelete={canDelete}/>
+                <TableEditor icon={icon} title={name} schema={schema} delay={delay} editable={editable} groupBy={groupBy} filter={tableFilter} actions={tableActions} canDelete={canDelete} />
             </main>
             {renderAside()}
         </Fragment>
@@ -241,10 +239,10 @@ const TableEditor = (props) => {
                     }),
                 rows: groups[groupName]
                     .map(item => {
-                        item.actions =  actions ? actions.map(action => {
-                            return action.filter ? 
-                                action.filter(item) ? <Icon icon={action.icon} clickable size="small" action={() => run(action, item) }/> : null
-                                    : <Icon icon={action.icon} clickable size="small" action={() => run(action, item) }/>
+                        item.actions = actions ? actions.map(action => {
+                            return action.filter ?
+                                action.filter(item) ? <Icon icon={action.icon} clickable size="small" action={() => run(action, item)} /> : null
+                                : <Icon icon={action.icon} clickable size="small" action={() => run(action, item)} />
                         }) : []
                         if (canDelete) item.actions.push(<Icon icon="delete" size="small" clickable action={() => remove(item.id)} />)
                         return item
@@ -253,7 +251,7 @@ const TableEditor = (props) => {
 
             table.columns.push({ id: "actions" })
             const groupSize = groups[groupName].length
-            
+
             return (
                 <Fragment key={groupName}>
                     <Header title={groupName} >
@@ -372,7 +370,7 @@ const TableAPI = (url) => {
                     if (typeof (value) === 'boolean') {
                         return query.concat(`${key}=${value}&`)
                     } else if (Array.isArray(value)) {
-                        const param = value.length === 0 ? '' : value.reduce((param,item) => { 
+                        const param = value.length === 0 ? '' : value.reduce((param, item) => {
                             param = param.concat(`${key}=${item}&`)
                             return param
                         }, "")

package/src/html/textfield.js

@@ -41,7 +41,7 @@ export const TextField = (props) => {
     const labelTxt = <Text>{label}</Text>
     return (
         <div className={`${style}`} onClick={onClick}>
-            <input id={id} type={type} placeholder={placeholder} value={value} required onChange={change} onKeyDown={onKeyPress} onFocus={focus} readOnly={readOnly}/>
+            <input id={id} type={type} placeholder={placeholder} value={value} required onChange={change} onKeyDown={onKeyPress} onFocus={focus} readOnly={readOnly} onfocus="(this.type='date')" onfocusout="(this.type='text')"/>
             <span className="bar"></span>
             { label ? <label>{labelTxt}</label> : null }
         </div>

package/src/site/site.js

@@ -64,8 +64,9 @@ export const SiteProvider = ({ children, siteLang, siteDictionary, showConsole }
 
         preview,
         openPreview: (preview) => { setPreview(preview) },
-        closePreview: () => { setPreview(null) }
+        closePreview: () => { setPreview(null) },
 
+        confirm: (message) => window.confirm(message)
     }
 
     return (