@andersonalmeidax0/webcomponents 0.1.0

package/README.md

@@ -0,0 +1,50 @@
+# webcomponents
+React HTML controls, with convenience functions and events\
+1 XButton: button  (WHY COMPONENT?)
+2 XInput: with numeric validation (shows error), transale "," to "." (store internally with different format)  (WHY COMPONENT?)
+3 XtextArea:  (WHY COMPONENT?)
+4 XSelect: input array key / value
+5 XCheckbox: true/false
+6 XDateSelect:  (WHY COMPONENT?)
+
+
+# how to use:
+1. Create index.html
+2. Create App WebComponents 
+
+
+
+## Example
+```
+<XButton id="bt1" type="button" disabled={false}  label="Btn1" onClick={}/>
+
+```
+### Example "routes":  labels, links and components for navigation
+```
+var routes = [
+  {"route":"/page/page1","label":"PageNotes", "component":Page1},
+  {"route":"/page/page2","label":"PageNotes2", "component":Page2},
+  {"route":"/page/page3","label":"PageTestComps", "component":PageTestComps},
+  ]
+```
+### Example appContext
+```
+let kc = {tokenParsed:{email:"noLogon@nologon"}, logout(){alert("Fake logout")}}
+class AppContext {
+  constructor(kc){
+    this.kc=kc;
+  }  
+}
+```
+### Example PageComponent
+```
+class Page1 extends React.Component{
+        constructor(props){
+        super(props);
+    		this.state ={}
+        }
+   render() {
+        return ( <React.Fragment>...)
+      }
+}
+```

package/XButton.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+
+
+var xstyles = {
+   button: function() { return "primary shadowed small"}
+}
+
+
+/* ************************************************** */
+// Simple Button => se tiver icon prop, renderiza como icon
+// PROP: onClick, icon, label
+/* ************************************************** */
+class XButton extends React.Component {
+  constructor(props) {
+    super(props)
+    this.evt = this.evt.bind(this);
+    this.evtFile = this.evtFile.bind(this);
+  }
+  evt(ev)  {
+      ev.preventDefault();
+      this.props.onClick(ev);
+  }
+  evtFile(ev)  {
+    ev.preventDefault();
+    this.props.onClick(ev);
+}
+
+render() {
+  var t=this.props.attachFile?'file':'button';
+  if(this.props.attachFile)
+   return (
+    <label onChange={this.evtFile} xclassName='tile bg--lightblue fg--white btn--raised '  xstyle={{lineHeight:20,xwidth:20,display:'inline-block'}} htmlFor="formId">
+        <input name="" type="file" id="formId" hidden />
+        <i   className={'fa fa-paperclip'} />
+    </label>
+      );
+
+  if(this.props.icon){
+    if(this.props.textlabel==null)
+      return (
+            <button id={this.props.id} type={t}   className="btn--raised tooltip" data-text={this.props.label} onClick={this.props.attachFile?this.evtFile:this.evt}  disabled={this.props.disabled}> <i   className={this.props.icon}  ></i> </button>
+      )
+      else
+      return (
+        <button id={this.props.id} type={t}   className="btn--raised tooltip" data-text={this.props.label} onClick={this.props.attachFile?this.evtFile:this.evt}  disabled={this.props.disabled}>{this.props.textlabel} </button>
+      )
+  }
+   else
+  return (
+        <button id={this.props.id} className={xstyles.button()}       onClick={this.evt}  disabled={this.props.disabled} > {this.props.label} </button>
+   )
+  }
+}
+
+
+export {XButton};

package/XCheckbox.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+class XCheckbox extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { isChecked: this.props.defaultValue, };
+  }
+  toggleChange = (ev) => {
+    this.setState({ isChecked: !this.state.isChecked, });
+    this.props.onChange(this.state.isChecked);
+    //this.props.onChange(ev.target.value);
+  };
+  render() {
+    return (
+      <input type="checkbox" disabled={this.props.disabled}
+        defaultChecked={this.props.defaultValue}
+        onChange={this.toggleChange} />
+    );
+  }
+}
+
+export {XCheckbox};

package/XDateSelect.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+class XDateSelect extends React.Component {
+  constructor(props) {
+    super(props);
+    //this.state = { value: this.props.value, };
+  }
+  toggleChange = (ev) => {
+    //this.setState({value: v.target.value});
+    //this.props.onChange(this.state.value);
+    this.props.onChange(ev.target.value);
+  };
+  render() {
+    return (
+      <input type="date" disabled={this.props.disabled}
+        value={this.props.defaultValue}
+        onChange={this.toggleChange} />
+    );
+  }
+}
+
+export {XDateSelect};

package/XInput.jsx

@@ -0,0 +1,140 @@
+import React from "react";
+
+
+var xstyles = {
+   button: function() { return "primary shadowed small"}
+}
+
+function isNumeric(n) {
+  return !isNaN(n);
+}
+
+function nv2m(n){return NumberView2Model(n)}
+function nm2v(n){return NumberModel2View(n)}
+
+/**
+ * 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;
+}
+
+
+
+/** *********************************************************
+ * XInputExternal (sem estado)
+ * PROP: value, 
+ * PROP  onXG,  ==> altera sem mudar "."  para ","
+ * PROP  onChangeNew => altera SIM  "." para ","  fazendo "view2model"
+ * PROP: context: o interceptor passa para o onChangeNew, ctx é opcional
+ * PROP: 
+ * cada evento de mudanca, chama o metodo onXG com valor
+ * cabe ao chamador atualizar o estado
+ * localvalue: é o 
+ * onKeypress
+ * ********************************************************* */ 
+class XInputExternal extends React.Component {
+  constructor(props) {
+    super(props);
+    var valid=true;
+    var localValue=this.props.value;
+    console.log('XInputExternal.ctor localvalue:['+localValue+']');
+    if(this.props.type==='number') {
+      valid= isNumeric(this.props.value);
+      localValue=nm2v(this.props.value);
+    }  
+    this.state={valid:valid,localValue:localValue}
+  }
+  style1 = (valid) => {
+    //return {all: 'unset', border: '2px solid red;', padding:'2px 2px', margin: '2px 0;', xboxSizing: 'border-box',   width:'100px',borderBottom:'1px red',borderStyle:'1px red',backgroundSize:'100px',background:'rgb(202,202,255)'};
+    //return {all: 'unset', width:(this.props.width?this.props.width:100)+'px', boxSizing: 'border-box', border: '1px solid #a0a0a0', padding:'4px 2px', margin: '4px 2px',background:'rgb(255,255,255)'};
+    //return {all: 'unset', padding:'2px 2px',margin: '2px 0', borderWidth: '1px', borderStyle: 'solid', borderColor: valid?'#aaa':'#f00', /*borderBottom: '2px solid red',*/height:'25px',  width:(this.props.width?this.props.width:100)+'px',background:'rgb(242,242,242)',margin: '1px 1px'}//, boxSizing: 'border-box', border: '1px solid #a0a0a0', padding:'4px 2px', margin: '4px 2px',background:'rgb(255,255,255)'};
+    return { width:(this.props.width?this.props.width:150)+'px'}
+    //return {};
+  }
+
+  onChangeCheckInterceptor = (event) => {
+    var value=event.target.value;
+    //var item=this.props.context.item;
+    //var v=this.props.context.v;
+    //console.log('********\nu.Input3.value:'+value);
+    //console.log('u.Input3.p.type:'+this.props.type);
+    //console.log('u.Input3.p.stvalid:'+this.state.valid);
+    //console.log('u.Input3.p.item:'+item+" v:"+v);
+    if(this.props.type==='number') {
+      var testValid= isNumeric(nv2m(value));
+      if(this.props.onXG)this.props.onXG(event);
+      if(this.props.onChangeNew){
+        //troca formato
+        var modelValue=nv2m(value);
+        this.props.onChangeNew(modelValue,this.props.context);
+        this.setState({valid:testValid,localValue:modelValue});
+      } 
+      else {
+        this.setState({valid:testValid,localValue:value});
+      }
+    }
+    else{
+      if(this.props.onChangeNew)this.props.onChangeNew(value,this.props.context);
+      if(this.props.onXG)this.props.onXG(event);
+      this.setState({localValue:value});
+    }
+  }
+
+  componentDidMount = () => {
+    console.log('XInputExternal.didmount localvalue:['+this.state.localValue+']');
+
+  }
+
+  render() {
+    //var type=this.props.type?this.props.type:"text";
+    //var pattern=this.props.pattern=='number'?"[0-9]*":"[A-Za-z0-9]+";
+  //var w=150;
+  //if(this.props.width)
+  //  w=this.props.width;
+  //console.log('XInputExternal.didmount RENDER:['+this.state.localValue+']');
+
+
+  if(this.props.cellStyle)
+    return (
+      <React.Fragment>
+      <input id={this.props.id}  style={this.style1(this.state.valid)} readOnly={this.props.readOnly} 
+      defaultValue={this.state.localValue}  value={this.state.localValue}  onChange={this.onChangeCheckInterceptor}  
+      onKeyDown ={(e)=>{if (e.keyCode === 13){console.log('Xint.onKEnter');this.props.onEnterKey();this.setState({localValue:''}); }}} />
+      {(this.state.valid)?'':'(invalid)'}
+        </React.Fragment>
+    ); else
+    return (
+      <React.Fragment>
+        <label>       {this.props.label}&nbsp;         </label> 
+          <input  id={this.props.id} readOnly={this.props.readOnly}   
+          style={this.style1(this.state.valid)} 
+          className="card" 
+          defaultValue={this.state.localValue} onChange={this.onChangeCheckInterceptor}  />
+          &nbsp;
+          {(this.state.valid)?'':'(invalid)'}<br/>
+        </React.Fragment>
+
+    );
+  }
+}
+
+
+export {XInputExternal};

package/XSelect.jsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+
+var xstyles = {
+   button: function() { return "primary shadowed small"}
+}
+
+const TEST_UI_AUX=true; 
+
+/** *********************************************************
+ * XSelect3 ==> mandem o estado local, mas quando muda, chama evento externo.
+ * PROP: value (é initial value), onChange,list
+ * ********************************************************* */ 
+class XSelect3 extends React.Component {
+  constructor(props) {
+    super(props)
+    this.evt = this.evt.bind(this);
+    this.state = {value: this.props.value};
+  }
+  evt(ev)
+  {
+      console.log('Xselect3.evt value:'+ev.target.value);
+      this.setState({value: ev.target.value})
+      this.props.onChange(ev);
+  }
+
+ render() {
+  //console.log(JSON.stringify(this.props.list)); 
+  if(Array.isArray(this.props.list))
+  if(this.props.isFilter)
+  return (
+    <React.Fragment>
+    <select id={this.props.id} style={{width:(this.props.width?this.props.width:300)+'px'}}  disabled={this.props.disabled} onChange={this.evt} value={this.state.value} >
+    {this.props.list.map(function(v){
+        return <option key={v.id} value={v.id}>{v.descr}</option>;
+    })}
+    </select>
+    </React.Fragment>
+   )
+   else
+   return (
+    <div  >
+    <span id={'Last_'+this.props.id} style={{visibility: 'hidden'}} >{TEST_UI_AUX&&this.props.list[this.props.list.length-1].id}</span>  
+    <select id={this.props.id} style={{width:(this.props.width?this.props.width:300)+'px'}}  disabled={this.props.disabled} onChange={this.evt} value={this.state.value} >
+    {this.props.list.map(function(v){
+        return <option key={v.id} value={v.id}>{v.descr}</option>;
+    })}
+    </select>
+     </div>
+   )
+   else
+     return (
+     <div>LOV: INVALID LIST:{this.props.list}</div>
+     )
+  }
+}
+
+
+export {XSelect3};

package/XTextArea.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+
+var xstyles = {
+   button: function() { return "primary shadowed small"}
+}
+/** *********************************************************
+ * XTextArea (sem estado)
+ * PROP: value, onXG
+ * cada evento de mudanca, chama o metodo onXG com valor
+ * cabe ao chamador atualizar o estado
+ * ********************************************************* */ 
+class XTextArea extends React.Component {
+  constructor(props) {
+    super(props);
+}
+  /*
+  style1 = () => {
+    //return {all: 'unset', border: '2px solid red;', padding:'2px 2px', margin: '2px 0;', xboxSizing: 'border-box',   width:'100px',borderBottom:'1px red',borderStyle:'1px red',backgroundSize:'100px',background:'rgb(202,202,255)'};
+    //return {all: 'unset', width:(this.props.width?this.props.width:100)+'px', boxSizing: 'border-box', border: '1px solid #a0a0a0', padding:'4px 2px', margin: '4px 2px',background:'rgb(255,255,255)'};
+    return {all: 'unset', width:(this.props.width?this.props.width:100)+'px',background:'rgb(242,242,242)',margin: '4px 2px'}//, boxSizing: 'border-box', border: '1px solid #a0a0a0', padding:'4px 2px', margin: '4px 2px',background:'rgb(255,255,255)'};
+  }
+  */
+  render() {
+    return (
+      <textarea id={this.props.id} onChange={this.props.onXG} defaultValue={this.props.value} ></textarea>
+    ); 
+  }
+}
+
+export {XTextArea};

package/jzcomponents/ErrorCard.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+export class ErrorCard extends React.Component {
+  render() {
+    return (
+      <div className="g--10 m--2">
+        <h3>Erro de sistema inesperado. Entre em contato com metalmarket@gmail.com e informe a mensagem abaixo:</h3>
+        <h4>{JSON.stringify(this.props.myException)}</h4>
+        <h4>{JSON.stringify(this.props.myException.stack)}</h4>
+        <div className="card g--10 m--0">
+          <div> <div className=""> <p>  <a href='/loginExternal'>Entrar novamente.</a>     </p> </div>  <span> </span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+

package/jzcomponents/ErrorCardAuth.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+export class ErrorCardAuth extends React.Component {
+  render() {
+    return (
+      <div className="g--10 m--2">
+        <h3>Sessão expirada. </h3>
+        <div className="card g--10 m--0">
+          <div>  <div className=""> <p>  <a href='/loginExternal'>Entrar novamente.</a>     </p> </div> <span> </span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

package/jzcomponents/Errors.js

@@ -0,0 +1,41 @@
+"use strict";
+/* ************************************************** */
+/* ************************************************** */
+class PlatAPIError extends Error {
+  constructor(message, type) {
+    super(message);
+    this.name = "PlatAPIError";
+  }
+}
+/* ************************************************** */
+/* ************************************************** */
+class PlatAPIReturnCodeError extends Error {
+  constructor(message, rc) {
+    super(message);
+    this.name = "PlatAPIReturnCodeError";
+    this.rc = rc;
+  }
+}
+/* ************************************************** */
+/* ************************************************** */
+class PlatAPIAuthError extends Error {
+  constructor(message, rc) {   super(message);    this.name = "PlatAPIAuthError";    this.rc = rc;
+  }
+}
+/* ************************************************** */
+class PlatAPIDBNotFound extends Error {
+  constructor(message) { super(message); this.name = "PlatAPIDBNotFound"; }
+}
+/* ************************************************** */
+class PlatAPIDBIntegrityConstraint extends Error {
+  constructor(message) { super(message); this.name = "PlatAPIDBIntegrityConstraint"; }
+}
+/* ************************************************** */
+class PlatAPIForbidden extends Error {
+  constructor(message) { super(message); this.name = "PlatAPIForbidden"; }
+}
+
+
+//exports.PlatAPIDBNotFound = PlatAPIDBNotFound;
+
+export {PlatAPIError,PlatAPIReturnCodeError,PlatAPIAuthError,PlatAPIDBNotFound,PlatAPIDBIntegrityConstraint,PlatAPIForbidden};

package/jzcomponents/JZEditComponent.jsx

@@ -0,0 +1,173 @@
+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"
+
+ 
+
+
+import { XTableRead } from "./XTableRead.jsx";
+import { XFormEdit } from "./XFormEdit.jsx";
+import { JZInPlaceListComponent } from "./JZInPlaceListComponent.jsx";
+
+
+import {PlatAPIError,PlatAPIReturnCodeError,PlatAPIAuthError,PlatAPIDBNotFound,PlatAPIDBIntegrityConstraint,PlatAPIForbidden} from "./Errors.js";
+import { ErrorCard } from "./ErrorCard";
+import { ErrorCardAuth } from "./ErrorCardAuth";
+
+
+/*
+import { useNavigate } from "react-router";
+export const withRouter = (Component) => {
+	const Wrapper = (props) => {
+		const history = useNavigate();
+		return <Component history={history} {...props} />;
+	};
+	return Wrapper;
+};
+*/
+
+
+const DEBUG_ID=false;
+const DEBUG_ID2=DEBUG_ID; 
+const DEBUG_ID3=false; 
+const DEBUGAPICALL_UTIL=false; 
+
+
+
+
+
+/* ************************************************** */
+// Formulario de EDIT   ===>  Usa XFormEdit !!!!!!!!!!!!!
+// api => api de BP
+// editConfig => config de list
+// mode => modo: 'I' ou 'U'
+/* ************************************************** */
+class JZEditComponent extends React.Component {
+  constructor() {
+    super()
+    this.state = {
+      currObj: null,
+      message:"",
+      notFound:false,
+    };
+  }
+  /* ******** ####################### ********** */
+  async componentDidMount() {
+    var obj=null;
+
+    //alert("jzedit.didmount");
+    //console.log("jzedit.didmount")
+    if(this.props.mode=='I'){
+      var mobj=this.props.api.newVO();
+      obj = this.props.api.model2view(mobj);
+    }
+    else {
+      try{
+        //alert("jzedit.didmount.find");
+        //console.log("jzedit.didmount.find");
+        var mobj=await this.props.api.findByPK(this.props.editKey,this.props.apiContext);
+        obj = this.props.api.model2view(mobj);
+        if(DEBUGAPICALL_UTIL)alert(JSON.stringify(obj,null,2));
+      } catch(error){
+        if(error instanceof PlatAPIDBNotFound) {
+          obj={};
+          this.setState({currObj:obj,notFound:true});
+          return;
+        }
+        if(
+          error instanceof PlatAPIDBIntegrityConstraint ||
+          error instanceof PlatAPIAuthError ||
+          error instanceof PlatAPIReturnCodeError || 
+          error instanceof PlatAPIError)
+        this.setState({myException:error}); 
+        else 
+        this.setState({myException:error}); 
+        return;
+      }
+    }
+    this.setState({currObj:obj});
+  }
+  /* ******** ####################### ********** */
+  evtSubmit = async () => {
+    try{
+        if(this.props.mode=='I') {
+          var obj=this.props.api.view2model(this.state.currObj);
+          this.props.api.validate(obj);
+          var r =await this.props.api.create(obj,this.props.apiContext);
+          if(DEBUGAPICALL_UTIL)alert(JSON.stringify(r,null,2));
+      }
+      else {
+        //mode=='U'
+        var obj=this.props.api.view2model(this.state.currObj);
+        this.props.api.validate(obj);
+        var r= await this.props.api.update(obj,this.props.apiContext)
+        if(DEBUGAPICALL_UTIL)alert(JSON.stringify(r,null,2));
+      }
+      this.props.onClose();
+    }catch(error) {
+    if(error instanceof PlatAPIReturnCodeError || 
+      error instanceof PlatAPIDBIntegrityConstraint ||
+      error instanceof PlatAPIAuthError ||
+      error instanceof PlatAPIError)
+    this.setState({myException:error}); 
+    else
+    if(error instanceof RangeError)
+    this.setState({message:error.message}); 
+    else
+    this.setState({myException:error}); 
+    }
+  }
+  /* ******** ####################### ********** */
+  evtCancel = () => {
+    this.props.onClose();
+  }
+
+  /* ******** ####################### ********** */
+  render() {
+    if (this.state.myException) {
+      if(this.state.myException instanceof PlatAPIAuthError) 
+      return (<ErrorCardAuth/>)
+      else 
+       return (<ErrorCard myException={this.state.myException}/>)
+    } //if
+
+    if(this.state.notFound)
+      return (
+        <React.Fragment>
+          <h5 style={{color:'red'}} >Item não encontrado</h5>
+          {<XButton label='Voltar'   onClick={this.evtCancel}/>}<span> </span>
+        </React.Fragment>
+      );
+    
+    if(this.state.currObj)
+      return (
+        <React.Fragment>
+          <fieldset class="vertical">
+          <XFormEdit id={this.props._id}  metadata={this.props.editConfig}  textlabels={true}   formData={this.state.currObj} />
+          </fieldset>
+
+          <div>&nbsp;</div>
+          <fieldset class="actions">
+          {this.props.editConfig.hasSaveFn&&this.props.editConfig.hasSaveFn(this.state.currObj)&&<React.Fragment>{DEBUG_ID&&'Save_'+this.props._id}<XButton label='Salvar'  id={'Save_'+this.props._id}  onClick={this.evtSubmit}/></React.Fragment>}<span> </span>
+          {this.props.editConfig.hasBackFn&&this.props.editConfig.hasBackFn(this.state.currObj)&&<XButton label='Voltar'   onClick={this.evtCancel}/>}<span> </span>
+          {this.props.editConfig.extraButtons&&this.props.editConfig.extraButtons.map((v,i)=> {return <React.Fragment  key={i} >{DEBUG_ID&&v.btnLabel+'_'+this.props._id}<XButton id={v.btnLabel+'_'+this.props._id}  label={v.btnLabel}   onClick={()=>v.evtBtn(this.state.currObj)}/><span> </span></React.Fragment> } )} 
+          </fieldset>
+          <h5 style={{color:'red'}} >{this.state.message}</h5>
+        
+        </React.Fragment>
+      )
+    else
+      return (<p className="color--blue">Carregando formulario...</p>);
+
+  }
+}
+
+
+
+
+
+export {JZEditComponent};