ywana-core8 0.0.545 → 0.0.548

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.545",
+  "version": "0.0.548",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/domain/CollectionPage.js

@@ -71,7 +71,7 @@ export const CollectionPage = (props) => {
                 {levels ? <CollectionTree icon={icon} levels={levels} onSelect={onSelect} sorter={sorter} searchBy={searchBy} /> : <CollectionList groupBy={groupBy} onSelect={onSelect} searchBy={searchBy} />}
             </menu>
             <main key={id} className={`collection-page ${className}`}>
-                <CollectionEditor icon={icon} schema={schema} layout={editor} autosave={autosave} delay={delay} />
+                <CollectionEditor icon={icon} schema={schema} layout={editor} autosave={autosave} delay={delay} canDelete={canDelete} canEdit={canEdit} />
                 {children ? <article>{children}</article> : null}
             </main>
         </Fragment>
@@ -238,7 +238,10 @@ export const CollectionTree = (props) => {
             const title = typeof node.name === 'boolean' ? `${node.field} = ${node.name}` : node.name
             return (
                 <TreeNode key={node.name} icon={null} label={title} open={true}>
-                    {node.nodes ? renderNodes(node.nodes) : node.items.map(item => <TreeItem icon={icon} key={item.id} id={item.id} label={item.name} onSelect={select} selected={item.id === pageContext.selected}>item</TreeItem>)}
+                    {node.nodes ? renderNodes(node.nodes) : node.items.map(item => {
+                        const selected = pageContext.selected && item.id === pageContext.selected.id
+                        return <TreeItem icon={icon} key={item.id} id={item.id} label={item.name} onSelect={select} selected={selected}>item</TreeItem>
+                    })}
                 </TreeNode>
             )
         })
@@ -280,7 +283,7 @@ export const CollectionTree = (props) => {
 const CollectionEditor = (props) => {
     const [pageContext, setPageContext] = useContext(PageContext)
     const { selected } = pageContext
-    const { icon, schema, layout, autosave = false, delay = 1000 } = props
+    const { icon, schema, layout, autosave = false, delay = 1000, canDelete, canEdit } = props
     const timer = useRef(null)
     const [form, setForm] = useState(selected)
 
@@ -337,7 +340,7 @@ const CollectionEditor = (props) => {
                 <Icon icon="close" clickable action={clear} />
                 <MenuIcon align="alignRight">
                     <Menu>
-                        <MenuItem label="Eliminar" onSelect={remove} />
+                        { canDelete ? <MenuItem label="Eliminar" onSelect={remove} /> : null }
                     </Menu>
                 </MenuIcon>
                 {autosave === true ? null : <Button icon="save" label="Guardar Cambios" raised disabled={!canSave()} action={save} />}

package/src/domain/ContentEditor.js

@@ -419,7 +419,7 @@ export const CollectionEditor = ({ field, value = [], onChange }) => {
         Renderer ?
           <Renderer field={field} value={value} onRemove={remove} onChange={onChange} />
           // : <DataTable {...table} editable={editable} />
-          : <TableEditor icon={"info"} title={label} data={value} schema={item} groupBy={"field1"} />
+          : <TableEditor icon={"info"} title={label} data={value} schema={item} groupBy={"field1"} canDelete={true} remove={remove}/>
 
       }
       <footer>
@@ -475,7 +475,7 @@ const CollectionAdder = ({ item, onAdd }) => {
  */
 const TableEditor = (props) => {
 
-  const { data = [], icon, title, schema, editable, canDelete, filter, actions, className } = props
+  const { data = [], icon, title, schema, editable, canDelete, remove, filter, actions, className } = props
   const [groupBy, setGroupBy] = useState(props.groupBy)
 
   function changeGroup(id, value) {

package/src/html/tree.css

@@ -27,6 +27,11 @@
     padding-left: 1rem;
 }
 
+.tree-item.selected {
+    background-color: var(--accent-color);
+    font-weight: 500;
+} 
+
 .tree-item>i {
     padding-left: .3rem;
 }