ywana-core8 0.0.782 → 0.0.784

package/package.json

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

package/src/domain/ContentEditor.js

@@ -1,9 +1,10 @@
 import React, { Fragment, useState } from 'react';
-import { Button, CheckBox, DataTable, DropDown, Icon, Stack, Tab, Tabs, Text, TextField, Tree, TreeNode, TreeItem, TokenField, Header, Accordion } from '../html';
+import { Button, CheckBox, DataTable, DropDown, Icon, Stack, Tab, Tabs, Text, TextField, PasswordField, Tree, TreeNode, TreeItem, TokenField, Header, Accordion } from '../html';
 import { CHECK, Content, TYPES, FORMATS } from './ContentType';
 import { DateRange } from '../html/textfield';
 import { ColorField } from '../html/color';
 import './ContentEditor.css';
+import { PasswordEditor } from '../incubator';
 
 /**
  * Content Editor
@@ -286,6 +287,8 @@ export const StringEditor = ({ field, value = '', onChange, content, outlined })
     const label = required ? `${field.label} *` : field.label
 
     switch (format) {
+      case FORMATS.PASSWORD:
+        return <PasswordEditor outlined={outlined} id={id} type="password" label={label} value={value} onChange={change} readOnly={!editable} />
       case FORMATS.IMG:
         return (
           <div className='img-field'>

package/src/domain/ContentEditor.test.js

@@ -18,6 +18,7 @@ const schema = {
     field3: { id: "field3", type: TYPES.STRING, format: FORMATS.TOKENS, required: true, editable: true , label: "field3"                                    , options: buildTokenOptions },
     field4: { id: "field4", type: TYPES.STRING, format: FORMATS.COLOR , required: true, editable: true , label: "Color"                                                                  },
     field5: { id: "field5", type: TYPES.STRING, format: FORMATS.TOKENS, required: true, editable: true , label: "field5"                  , multivalue: true                 },
+    field6: { id: "field6", type: TYPES.STRING, format: FORMATS.PASSWORD, required: true, editable: true , label: "Password" },
 
 }
 

package/src/domain/ContentType.js

@@ -23,7 +23,8 @@ export const FORMATS = {
     URL: 'URL',
     IMG: 'IMG',
     COLOR: 'COLOR',
-    TOKENS: 'TOKENS'
+    TOKENS: 'TOKENS',
+    PASSWORD: 'PASSWORD',
 }
 
 

package/src/html/index.js

@@ -14,7 +14,7 @@ export { Section } from './section'
 export { Tabs, Tab, Stack } from './tab'
 export { DataTable } from './table'
 export { Text, TEXTFORMATS } from './text'
-export { TextField, DropDown, TextArea, DateRange } from './textfield'
+export { TextField, DropDown, TextArea, DateRange, PasswordField } from './textfield'
 export { TokenField } from './tokenfield'
 export { Tree, TreeNode, TreeItem } from './tree'
 export { Switch } from './switch'

package/src/html/table.js

@@ -381,7 +381,6 @@ export const StringCellEditor = ({ id, value = '', options, onChange }) => {
  */
 const SortIcon = (props) => {
     const { sortDir, onChange } = props
-    console.log("sortDir", sortDir)
     const icon = sortDir ? sortDir > 0 ? "arrow_upward" : "arrow_downward" : "swap_vert"
     return <Icon icon={icon} size="small" clickable action={onChange} />
 }

package/src/html/textfield.js

@@ -203,7 +203,9 @@ export const DropDown = (props) => {
     )
 }
 
-
+/**
+ * Date Range
+ */
 export const DateRange = (props) => {
 
     const { id, label, value, onChange } = props
@@ -228,4 +230,22 @@ export const DateRange = (props) => {
             <TextField id="to" type="date" label="To" value={form.to} onChange={change} />
         </div>
     )
-}
+}
+
+export const PasswordField = (props) => {
+
+    const { id, label, value, onChange } = props
+    const [show, setShow] = useState(false)
+
+    function toggle() {
+        setShow(!show)
+    }
+
+    return (
+        <div className="password-field">
+            <TextField id={id} type={show ? "text" : "password"} label={label} value={value} onChange={onChange} />
+            <Icon icon={show ? "visibility" : "visibility_off"} clickable size="small" action={toggle} />
+        </div>
+    )
+}
+

package/src/incubator/index.js

@@ -1,2 +1,3 @@
 export { Wizard, WizardContext } from './wizard'
-export { TaskContextProvider, TaskContext, TaskMonitor, TaskProgress } from './task'
+export { TaskContextProvider, TaskContext, TaskMonitor, TaskProgress } from './task'
+export * from './password'

package/src/incubator/password.css

@@ -0,0 +1,7 @@
+.password-editor {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: end;
+    justify-content: center;
+}

package/src/incubator/password.js

@@ -0,0 +1,48 @@
+import React, { useContext } from 'react'
+import { Icon, TextField } from '../html'
+import { Dialog, SiteContext } from '../site'
+import { ResetPasswordBox } from '../widgets'
+import './password.css'
+
+/**
+ * Password Editor
+ */
+export const PasswordEditor = (props) => {
+
+    const site = useContext(SiteContext)
+    const { id, label = "Change Password", labelPosition = "left", className, value, onChange } = props
+
+    function onOK(form) {
+        if (onChange) onChange(id, form.password1)
+        site.closeDialog()
+    }
+
+    function onClose() {
+        site.closeDialog()
+    }
+
+    const openDialog = () => {
+        site.openDialog(<ChangePasswordDialog label={label} onOK={onOK} onClose={onClose} />)
+    }
+
+    return (
+        <div className={`password-editor ${className}`}>
+            <TextField label={label} labelPosition={labelPosition} type="password" value={value} readOnly={true} />
+            <Icon icon="edit" action={openDialog} size="small"/>
+        </div>
+    )
+}
+
+const ChangePasswordDialog = (props) => {
+
+    const site = useContext(SiteContext)
+    const { id, label, lang, onChange, content, onOK, onClose } = props
+
+    return (
+        <Dialog title={label} onClose={onClose}>
+            <ResetPasswordBox lang={lang} onOK={onOK} onClose={onClose} userRequired={false} />
+        </Dialog>
+    )
+}
+
+

package/src/incubator/task.js

@@ -167,7 +167,6 @@ export const TaskMonitor = (props) => {
     }
 
     async function remove(task) {
-        console.log("remove", task)
         await context.removeTask(task)
         refresh()
     }
@@ -175,30 +174,39 @@ export const TaskMonitor = (props) => {
     const table = {
         columns: [
             { id: "state", label: "Estado" },
+            { id: "init", label: "Inicio", type: TYPES.STRING, format: FORMATS.DATE},
+            { id: "end", label: "Fin", type: TYPES.STRING, format: FORMATS.DATE },
             { id: "description", label: "Descripcion" },
             { id: "progress", label: "%" },
             { id: "percentage", label: "" },
-            { id: "init", label: "Inicio", type: TYPES.STRING, format: FORMATS.DATE },
-            { id: "end", label: "Fin", type: TYPES.STRING, format: FORMATS.DATE },
-            { id: "resourceID", label: "Recurso" },
-            { id: "owner", label: "Propietario" },
+            //            { id: "resourceID", label: "Recurso" },
+            //            { id: "owner", label: "Propietario" },
             { id: "actions", label: "" }
         ],
-        rows: tasks.map(task => {
-            return {
-                id: task.id,
-                state: task.state,
-                description: task.description,
-                progress: <LinearProgress progress={task.percentage} />,
-                percentage: task.percentage,
-                init: task.init,
-                end: task.end,
-                resourceID: task.resourceID,
-                owner: task.owner,
-                actions: <Icon size="small" icon="cancel" clickable action={() => remove(task)} />,
-                info: editors && task.result ? <TaskInfo task={task} editors={editors} /> : null
-            }
-        })
+        rows: tasks
+
+            // sort by init date from recent to old
+            .sort((a, b) => {
+                if (a.init > b.init) return -1
+                if (a.init < b.init) return 1
+                return 0
+            })
+
+            .map(task => {
+                return {
+                    id: task.id,
+                    state: task.state,
+                    description: task.description,
+                    progress: <LinearProgress progress={task.percentage} />,
+                    percentage: task.percentage,
+                    init: task.init,
+                    end: task.end,
+                    resourceID: task.resourceID,
+                    owner: task.owner,
+                    actions: <Icon size="small" icon="cancel" clickable action={() => remove(task)} />,
+                    info: editors && task.result ? <TaskInfo task={task} editors={editors} /> : null
+                }
+            })
     }
 
     return (

package/src/site/site.test.js

@@ -14,6 +14,7 @@ import { TablePage2 } from '../domain/TablePage2'
 import { CollectionPage } from '../domain/CollectionPage'
 import { FORMATS, TYPES } from '../domain/ContentType'
 import { TableTest } from '../html/table.test'
+import { PasswordEditor } from '../incubator/password'
 
 const SiteTest = (prop) => {
 
@@ -214,6 +215,7 @@ const Page5 = (props) => {
 
     return (
         <Fragment>
+            <PasswordEditor id="password" label="Password" value="12345678" onChange={(id, value) => console.log(id, value)} />
             <CollectionPage 
                 title="Referencias" 
                 schema={schema} host="http://localhost:3000" url="/references" fetching={true}              // resource