ywana-core8 0.0.394 → 0.0.397

package/package.json

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

package/src/domain/ContentEditor.js

@@ -249,6 +249,7 @@ export const StringEditor = ({ field, value = '', onChange, content, outlined })
       case FORMATS.COLOR: return <ColorField id={id} onChange={change} value={value}/>
       case FORMATS.HTML: return <Editor id={id} value={value} onChange={change} content={content} />
       case FORMATS.DATE: return <TextField outlined={outlined} id={id} type="date" label={label} value={value} onChange={change} readOnly={!editable} />
+      case FORMATS.TOKENS: return <TokenField id={id} label={label} onChange={change} readOnly={!editable} options={options} />
       default:
         return options ? (
           <DropDown outlined={outlined} id={id} label={label} value={value} onChange={change} options={buildOptions()} readOnly={!editable} predictive={predictive} />

package/src/domain/ContentEditor.test.js

@@ -7,8 +7,12 @@ const schema = {
     name  : { id: "name"  , type: TYPES.STRING, format: FORMATS.NONE, required: true, label: "Name" },
     field1: { id: "field1", type: TYPES.STRING, format: FORMATS.NONE, required: true, label: "field1", multivalue: true },
     field2: { id: "field2", type: TYPES.STRING, format: FORMATS.NONE, required: true, label: "field2" },
-    field3: { id: "field3", type: TYPES.STRING, format: FORMATS.NONE, required: true, label: "field3" },
-    field3: { id: "field4", type: TYPES.STRING, format: FORMATS.COLOR, required: true, label: "field3" },
+    field3: { id: "field3", type: TYPES.STRING, format: FORMATS.TOKENS, required: true, label: "field3", options: [
+        {label: "One", value: 1 },
+        {label: "Two", value: 2 },
+        {label: "Three", value: 3 },
+    ] },
+    field4: { id: "field4", type: TYPES.STRING, format: FORMATS.COLOR, required: true, label: "Color" },
 }
 
 const value = {
@@ -24,6 +28,7 @@ const ContentEditorTest = (prop) => {
     }
 
     const content = new Content(schema, form)
+    console.log(form)
     return (
         <>
             <ContentEditor content={content} outlined={false} onChange={change} className="grid1"/>

package/src/domain/ContentType.js

@@ -21,7 +21,8 @@ export const FORMATS = {
     HTML: 'HTML',
     URL: 'URL',
     IMG: 'IMG',
-    COLOR: 'COLOR'
+    COLOR: 'COLOR',
+    TOKENS: 'TOKENS'
 }
 
 /**

package/src/domain/TablePage.js

@@ -4,7 +4,7 @@ import { Button, DataTable, DropDown, Header, Icon, MenuIcon, MenuItem, Text } f
 import { HTTPClient, Session } from '../http'
 import { PageContext, SiteContext } from '../site'
 import { ContentEditor } from './ContentEditor'
-import { CHECK, Content } from './ContentType'
+import { CHECK, Content, TYPES } from './ContentType'
 import { ContentViewer } from './ContentViewer'
 import { CreateContentDialog } from './CreateContentDialog'
 import { QUERY } from './squema'
@@ -215,7 +215,7 @@ const TableSelector = (props) => {
 const TableQueries = (props) => {
 
     const [pageContext, setPageContext] = useContext(PageContext)
-    const { user } = props
+    const { user } = props
     const { queries = [] } = pageContext
     const [selected, setSelected] = useState()
 
@@ -256,7 +256,7 @@ const TableQueries = (props) => {
 const TableFilters = (props) => {
 
     const [pageContext, setPageContext] = useContext(PageContext)
-    const { filters } = pageContext
+    const { filters } = pageContext
     const { schema, onSave } = props
     const [form, setForm] = useState({})
 
@@ -480,7 +480,15 @@ const TableContext = (url, field, host, urlQuery) => {
             try {
                 const filters = filter ? Object.keys(filter).reduce((filters, key) => {
                     const field = filter[key];
-                    if (field) filters[key] = field;
+
+                    if (field) {
+                        if (CHECK['isObject'](field)) {
+                            Object.keys(field).forEach(key2 => filters[`${key}.${key2}`] = field[key2])
+                        } else {
+                            filters[key] = field;
+                        }
+                    }
+
                     return filters;
                 }, {}) : []
                 const data = await API.all(filters);

package/src/html/color.js

@@ -12,7 +12,7 @@ export const ColorField = (props) => {
 
     return (
         <div className="color-field">
-            <label for={id}>{label}</label>
+            <label htmlFor={id}>{label}</label>
             <input id={id} type="color" onChange={change} value={value}/>
         </div>
     )

package/src/html/tokenfield.css

@@ -11,12 +11,13 @@
 }
 
 .tokenField>label {
+    color: var(--primary-color);
+    font-size: .8rem;
+    font-weight: normal;
     position: absolute;
+    pointer-events: none;
     top:-9px;
     padding: 2px 6px 2px 4px;
-    font-size: .8rem;
-    background-color: var(--paper-color);
-    color: var(--text-color-light)
 }
 
 .tokenField input,

package/src/html/tokenfield.js

@@ -59,9 +59,7 @@ export const TokenField = ({ id, label, init = [], readOnly, options, onChange }
   return (
     <div className='tokenField'>
       <label>{label}</label>
-
       {tokens.map((text, index) => <Token text={text} onDelete={() => remove(index)} />)}
-
       {options ? (
         <DropDown onChange={changeDropDown} options={options} predictive={true} verbose={false} />
       ) : (

package/src/site/site.test.js

@@ -5,9 +5,10 @@ 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 } from '../html'
 import { UploadDialog } from '../widgets/upload/UploadDialog'
 import { Uploader } from '../widgets/upload/Uploader'
+import { TablePage } from '../domain/TablePage'
 
 const SiteTest = (prop) => {
 
@@ -29,7 +30,7 @@ const Page1 = (props) => {
 
     const site = useContext(SiteContext)
     const [form, setForm] = useState({})
-    
+
     useEffect(() => {
         site.notify({ title: "Notification 1", body: "Lorem ipsum dolor sit amet" })
     }, [])
@@ -55,9 +56,7 @@ const Page1 = (props) => {
         <Fragment>
             <header>Page 1</header>
             <main>
-
-            <Uploader icon="cloud_upload" target="https://maso.developxp.com/kiosk/api/upload" />
-
+                <Uploader icon="cloud_upload" target="https://maso.developxp.com/kiosk/api/upload" />
                 <Button label="Upload" action={upload} />
                 <TextField id="name" label="Name" value={form.name} onChange={change} />
                 <DropDown id="gender1" label="Dropdown 1" value={form.gender1} onChange={change} options={options} predictive={true} />
@@ -107,4 +106,14 @@ const Page2 = (props) => {
             <footer>f2</footer>
         </Fragment>
     )
+}
+
+const Page3 = (props) => {
+
+    const site = useContext(SiteContext)
+
+    return (
+        <Fragment>
+        </Fragment>
+    )
 }