@andersonalmeidax0/webcomponents 0.1.0

package/jzcomponents/XTableRead.jsx

@@ -0,0 +1,271 @@
+import React from "react";
+import {XButton}        from "../XButton.jsx"
+import {XInputExternal} from "../XInput.jsx"
+import {XSelect3}       from "../XSelect"
+import {XTextArea}      from "../XTextArea"
+import {XCheckbox}      from "../XCheckbox.jsx"
+import {XDateSelect}    from "../XDateSelect.jsx"
+
+const DEBUG_ID=false;
+const DEBUG_ID2=DEBUG_ID; 
+const DEBUG_ID3=false; 
+
+
+/**
+ * View 2 model =>  number digitado com fmt para numero interno
+ */
+ function NumberView2Model(n) {
+  var nStr = n+'';
+  nStr = nStr.replaceAll('.','@');
+  nStr = nStr.replaceAll(',','.');
+  nStr = nStr.replaceAll('@',',');
+  var nOk = nStr;// Number.parseFloat(nStr);
+  return nOk;
+}
+/**
+* Mode 2 view =>  number interno para fmt
+*/
+function NumberModel2View(n) {
+ var nStr = n+'';
+ //nStr = nStr.replace('.','');
+ nStr = nStr.replaceAll('.','@');
+ nStr = nStr.replaceAll(',','.');
+ nStr = nStr.replaceAll('@',',');
+var nOk = (nStr);
+ return nOk;
+}
+
+function isNumeric(n) {
+ return !isNaN(n);
+}
+
+function nfmt(n) {
+ //alert("n:["+n+']'+new Error().stack);
+ if(isNumeric(n))
+    n = parseFloat(n).toFixed(0);
+ else
+   n=" - - - ";
+//  n="Num inv1("+n+")";
+
+return NumberModel2View(n);
+}
+
+function nfmt2(n) {
+ if(isNumeric(n))
+    n = parseFloat(n).toFixed(2);
+ else
+    n=" - - - ";//+'['+n+']';
+return NumberModel2View(n);
+}
+
+function nfmtM(n) {
+ if(isNumeric(n))
+    n = parseFloat(n).toFixed(2);
+ else
+     n=" - - - ";
+ return NumberModel2View(n);
+}
+
+
+
+
+/** *********************************************************
+ * XTableRead: metadata, list, onAction, onActionDelete
+ * Tabela readonly, permite chamar eventos de del e edit
+ * Nao renderiza elementos com atributo "isDeleted"
+ * =======================
+ * Faz inPlace edit se tiver isEditSelect  ou edit
+ * renderHTML, renderFn, isButton, ==> custom CELL rendering 
+ * NOVA FUNCIONALIDADE:  para Edits, força o update 
+ * ********************************************************* */ 
+ class XTableRead extends React.Component {
+  constructor(props) {
+    super(props)
+    //this.evt = this.evt.bind(this);
+    this.state={vi:0}
+    //this.renderListItem = this.renderListItem.bind(this);
+  }
+
+  evtRefresh = () =>  {
+      //alert('UPD');
+      var vi = this.state.vi;
+      this.setState({vi:vi+1});
+      this.forceUpdate();
+  }
+
+
+  cellChanged = () => {
+     console.log('u.xtable.cellchanged');
+     this.evtRefresh();
+  }
+
+  render () {
+    return (
+      <React.Fragment>
+      <h6>{DEBUG_ID&&'['+this.props.id+']'}</h6>
+      {/* div para scroll vertical */}  
+      <div xstyle={{maxHeight:'400px',overflow: 'auto'}} >
+      <table className="hoverable" xwidth={'99%'} xstyle={{border:1}} >
+       <thead>
+         <tr key={'header'+this.props.id} className="table-header">
+          <th key={'0'+this.props.id}></th>
+            {this.props.metadata.fields.filter((item)=>{return(item.show)}).map((v)=> {
+            return       <th key={v.label+this.props.id}  x='center' align={v.align} className={v.className} >&nbsp; <b>{v.label}</b></th>
+              })}
+          <th key={'actions'} align='center'><b></b></th>
+         </tr>
+          </thead>
+          <tbody>
+         {this.props.list.map((item,index,arr)=> {
+           return <XTableCell key={index}  item={item} index={index} lastIndex={arr.length} {...this.props} notifyChangeFn={this.cellChanged}  />   })}
+         </tbody>
+      </table>
+      </div>
+      <p >{DEBUG_ID2&&'Total_'+this.props.id}</p>
+      <p style={{visibility: 'hidden'}} id={'Total_'+this.props.id}>{this.props.list.length}</p>
+      {this.props.metadata.dynamicTotalFN&&this.props.metadata.dynamicTotalFN(this.props.list)}
+      </React.Fragment>
+    );
+  }
+
+}
+
+
+//var XTableCell_ID=0;
+
+/**
+ * 
+ */
+class XTableCell extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state={vi:0}
+    this.renderListItem = this.renderListItem.bind(this);
+    //this.inputChange = this.inputChange.bind(this);
+    //this.select3Change = this.select3Change.bind(this);
+  }
+
+  evtRefresh = () =>  {
+      //alert('UPD');
+      var vi = this.state.vi;
+      this.setState({vi:vi+1});
+      this.forceUpdate();
+  }
+
+  render () {
+   var item = this.props.item;
+   var index = this.props.index;
+   var lastIndex = this.props.lastIndex;
+    return this.renderListItem(item,index,lastIndex);
+  }  
+  //Map args: o valor do elemento corrente, o índice do elemento corrente e o array original que está sendo percorrido.
+  //map(v,i,arr)
+
+  //para XDate e XCheck
+  inputChange = (ev,item,v) => {
+    //item[v.attr]=ev.target.value;
+    //item[v.attr]=ev;
+    //this.evtRefresh();
+    //this.props.notifyChangeFn();
+  }
+
+  //new: recebe context para XInputExternal
+  inputChangeNew = (value,context) => {
+    console.log("u.xtableCell.inputChgNew.context"+context);
+    var v=context.v;
+    var item=context.item;
+    console.log("u.xtableCell.inputChgNew.value"+value);
+    item[v.attr]=value;
+    this.evtRefresh();
+    this.props.notifyChangeFn();
+  }
+
+  select3Change = (ev,item,v) => {
+    item[v.attr]=ev.target.value;
+    this.evtRefresh();
+    this.props.notifyChangeFn();
+  }
+
+  renderListItem(item,p1,lastIndex) {
+    //var kk='ASD'+(p1+1234);
+    //XTableCell_ID=XTableCell_ID+1;
+    if(item.isDeleted)
+    return null
+    else  /* <td>{XTableCell_ID}</td> */
+    return (
+      <tr  key={'TR_'+p1} >
+       <td key={(p1+1)+'_H_'+this.props.id} align='center' className="nudge--left "> {(p1+1)}.{DEBUG_ID3&&'['+(this.props.id)+'_R'+p1+']'}  </td>
+       {this.props.metadata.fields.filter((item)=>{return(item.show)}).map((v,i,arr)=> {
+         if(item[v.attr]==null)
+          return <td  key={i} align={v.align} className={v.className} >NAtr:{v.attr}</td>
+         else 
+         //Se for editável
+         if(v.edit)
+           return <td key={i} align={v.align} className={v.className}><XInputExternal type={(v.type=='n'||v.type=='f')?'number':''}  id={this.props.id+'_R'+p1+'_C'+i} width={v.width} cellStyle={1} value={item[v.attr]}  onXG={(ev)=>{this.inputChange(ev)}} onChangeNew={this.inputChangeNew} context={{item:item,v:v}}  />{DEBUG_ID2&&this.props.id+'_R'+p1+'_C'+i}</td>
+         else
+           if(v.isEditSelect) {
+            if(!v.lov) 
+               v.lov=[{id:0,descr:"ERR: NULL"}];
+            else 
+               if(v.lov.length==0) 
+                  v.lov=[{id:0,descr:"ERR:EMPTY"}];
+                  //var selIdx = Number.parseInt(item[v.attr]);
+                  //selIdx=isNaN(selIdx)?0:selIdx;
+                  //var readValueDescr=v.lov[selIdx].descr;
+                  //var readValueDescr='DEB:idx:'+selIdx+' item.v.atr:'+item[v.attr]+' JSON:'+JSON.stringify(v.lov);      
+                  //if(v.readOnly)
+                  //  return <td key={i}  align={v.align} className={v.className} >{readValueDescr}</td>
+                  //else      
+            return <td key={i}  align={v.align} className={v.className} ><XSelect3 id={this.props.id+'_R'+p1+'_C'+i} width={v.width} list={v.lov} value={item[v.attr]}  disabled={v.readOnly}  onChange={(ev)=>{this.select3Change(ev,item,v)}} onChange_xxx={(ev)=>item[v.attr]=ev.target.value} /></td>
+           }
+           else
+              if(v.renderHTML) {
+                  //console.log("!!!!RENDER: HTML");
+                  return  <td key={i}  align={v.align} className={v.className} ><div dangerouslySetInnerHTML={item[v.attr]} /></td>
+                }
+              else
+                if(v.renderFn)
+                {
+                  //console.log("!!!!RENDER: fn");//]}
+                  //chama a funcao custom de render, passando o valor como parametro!!!!!!!
+                    return  <td key={i}  align={v.align} className={v.className}>{v.renderFn(item[v.attr],v,i,item,p1)}</td>
+                }
+                else
+                    if(v.isButton)
+                      return <td key={i} align={v.align} className={v.className}><XButton label={v.isButton} onClick={()=>v.isButtonEvt(item)}/></td>
+                    else
+                      if(v.isLink)
+                      return <td key={i}  align={v.align} className={v.className}><a href={v.isLink.href} > {item[v.attr]} </a>  </td>
+                      else {
+                        //Renderização "NORMAL"
+                        var cellFmt = item[v.attr];
+                        if(v.type=='n')
+                          cellFmt= nfmt(cellFmt);
+                        if(v.type=='f')
+                          cellFmt= nfmt2(cellFmt);
+                        if(v.type=='m')
+                          cellFmt= nfmtM(cellFmt);
+
+                        if(v.type=='d'){
+                          return <td key={i} align={v.align} className={v.className}><XDateSelect  disabled={v.readOnly}  id={this.props.id+'_R'+p1+'_C'+i}  defaultValue={item[v.attr]}  onChange={(ev)=>{this.inputChange(ev,item,v)}} xonChange={this.inputChangeNew}  />{DEBUG_ID2&&this.props.id+'_R'+p1+'_C'+i}</td>
+                        }
+                        if(v.type=='c'){
+                          return <td key={i} align={v.align} className={v.className}><XCheckbox  disabled={v.readOnly}  id={this.props.id+'_R'+p1+'_C'+i}  defaultValue={item[v.attr]}  onChange={(ev)=>{this.inputChange(ev,item,v)}} xonChange={this.inputChangeNew}  />{DEBUG_ID2&&this.props.id+'_R'+p1+'_C'+i}</td>
+                        }
+
+                        return <td key={i}  align={v.align} className={v.className} id={this.props.id+'_R'+p1+'_C'+i}>{cellFmt}&nbsp;{DEBUG_ID2&&'['+this.props.id+'_R'+p1+'_C'+i+']'}</td>
+                      } 
+       })}
+    
+        <td key={lastIndex+1}  align='left'>
+            {!this.props.inPlaceEdit&&this.props.metadata.hasEditFn&&this.props.metadata.hasEditFn(item)&&<button  id={'Edt_'+p1+'_'+this.props.id}   onClick={()=>this.props.onAction(p1,item)} className="btn--flat nudge--right"><i   className="fa fa-pencil"></i>{DEBUG_ID&&'Edt_'+p1+'_'+this.props.id}{this.props.textlabels?"Edit":""}</button>}
+            {this.props.metadata.hasDeleteFn&&this.props.metadata.hasDeleteFn(item)&&<button  id={'Del_'+p1+'_'+this.props.id} onClick={()=>this.props.onDelete(p1,item)} className="btn--flat nudge--right"><i   className="fa fa-trash"></i>{DEBUG_ID&&'Del_'+p1+'_'+this.props.id}{this.props.textlabels?"Delete":""}</button>}
+        </td>
+     
+      </tr>
+    );
+  }
+}
+
+
+export {XTableRead,nfmt,nfmt2,nfmtM};

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@andersonalmeidax0/webcomponents",
+  "version": "0.1.0",
+  "description": "webcomponents",
+  "main": "webcomponents",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/andersonalmeidax0/webcomponents.git"
+  },
+  "author": "aax0",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/andersonalmeidax0/webcomponents/issues"
+  },
+  "homepage": "https://github.com/andersonalmeidax0/webcomponents#readme"
+}

package/releasenotes.txt

@@ -0,0 +1,37 @@
+0.1.0: beta
+0.1.1: add all components
+0.1.2: with text labels for buttons
+
+TODO
+-change "Errors" => string contants
+-add "textIcon=true" option para JZEditTable ==> OK
+-create NPM
+-test 
+
+-readme: document capacities
+ JZ read and form: format specs, types
+ JZEdit: api spec, inplace, triggerUpdate cols, links, renders, totalRenders,
+ "Tester Friendly" hiden info (ex: last combo item), ID-based components
+
+=====
+TODO:
+Exepctions de erros, criador para a)evitar tratar StatusCodesHttp e b)permitir "try catch" de erros "subindo" no stack
+Expection "genericas" assim é só import de constantes, e tratar em qualquer camada com "Error.message==xxxx"
+Package separado, assim dá para usar na aplicação "Error.message==xxxx", em npms, e também no server, com imports redundantes
+1-criar test cases para PlatAPIError
+2-criar uma classe com constantes string de error  APIErrors
+3-Incluir APIAdapter no código de JZComponents
+4-Tratar erros vendo se e.message==APIErrors.API<messageCode>
+-"Throw" erros com constructor == APIErrors.API<messageCode> (vai ficar no atributo message) 
+  ==>Alterar APIAdapter para dar "throw" de new Error(APIErrors.API<messageCode>)
+
+
+//Auth
+PlatAPIAuthError
+PlatAPIForbidden
+//DB
+PlatAPIDBNotFound
+PlatAPIDBIntegrityConstraint
+//Internal
+PlatAPIError ==> PlatAPIPayloadError
+PlatAPIReturnCodeError  ==> PlatAPIServerError