@andersonalmeidax0/webcomponents 0.1.0

package/jzcomponents/JZInPlaceListComponent.jsx

@@ -0,0 +1,95 @@
+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";
+
+
+const DEBUG_ID=false;
+const DEBUG_ID2=DEBUG_ID; 
+const DEBUG_ID3=false; 
+const DEBUGAPICALL_UTIL=false; 
+
+
+
+
+/* ************************************************** */
+// Usa XTableRead !!!!!!!!!!!!!
+// PROPS: 
+// list
+// newItemFN: funcao para criar novo objeto
+// listConfig => config de list
+// 
+/* ************************************************** */
+class JZInPlaceListComponent extends React.Component {
+  constructor() {
+    super()
+    //this.state = {
+    //  list: null,
+    //  message:"",
+    //};
+  }
+
+  componentDidMount() {
+    //this.evtRefresh();
+  }
+
+  /* VIEW METHODS *************************************************************************** */
+  /* ******** ####################### ********** */
+  evtRefresh = ()=> {
+     //this.setState({list:this.state.list});
+     this.forceUpdate();
+  }
+  /* ******** ####################### ********** */
+  evtCreate = () => {
+      var obj = this.props.newItemFN();
+      obj.isInserted=true;
+      this.props.list.push(obj)
+      this.evtRefresh();
+    }
+  /* ******** ####################### ********** */
+  evtActionDelete = async (i,item) =>  {
+    this.props.list[i].isDeleted=true;
+    this.evtRefresh();
+  }
+  /* ******** ####################### ********** */
+  render() {
+
+    if(this.props.list)
+      return (
+        <React.Fragment>
+            {<React.Fragment>
+              {this.props.listConfig.hasInsert&&<XButton label={'Novo_'+this.props._id} id={'Novo_'+this.props._id} textlabel={(this.props.textlabels)?"New":null}  icon="fa fa-plus"  onClick={this.evtCreate}/>}<span> </span>
+
+              {<XTableRead
+                id={this.props._id}
+                metadata={this.props.listConfig}
+                list={this.props.list}
+                noEdit={true}
+                inPlaceEdit={true}
+                noDelete={this.props.listConfig.noDelete}
+                onDelete={this.evtActionDelete}
+                textlabels={this.props.textlabels}
+              />}
+            </React.Fragment>}
+        </React.Fragment>
+      )
+    else
+    return (<p className="color--blue">Carregando lista...</p>);
+
+  }
+}
+
+
+
+
+
+
+
+
+export {JZInPlaceListComponent};

package/jzcomponents/JZListComponent.jsx

@@ -0,0 +1,305 @@
+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 { withRouter } from 'react-router-dom';
+
+import { XTableRead } from "./XTableRead.jsx";
+import { XFormEdit } from "./XFormEdit.jsx";
+import { JZEditComponent } from "./JZEditComponent.jsx";
+import { JZInPlaceListComponent } from "./JZInPlaceListComponent.jsx";
+
+
+import {PlatAPIError,PlatAPIReturnCodeError,PlatAPIAuthError,PlatAPIDBNotFound,PlatAPIDBIntegrityConstraint,PlatAPIForbidden} from "./Errors.js";
+import { ErrorCard } from "./ErrorCard";
+import { ErrorCardAuth } from "./ErrorCardAuth";
+
+
+
+//para react v18 (mas nao funcionou, tive que fazer downgrade para react 17)
+/*
+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; 
+
+/* ************************************************** */
+//  JZListComponentImpl (usa XTable)  => o JZListComponent é withRouter
+// PROPS: 
+// api => api de BP
+// apiContext => context object (pass to api calls)
+// listConfig => config de list
+// customEditcomponent
+// editConfig => congig de edit
+// messengerMode => vira messenger!!!!!
+// onSelectItem(vo) =>  callback quando seleciona para edicao ou insert
+// 2 impls: com e sem router!!
+/* ************************************************** */
+class JZListComponentNoRouter extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      list: null,
+      filterStr:"",
+      isFiltered:false,
+      message:"",
+      showEditModal:false,
+      editMode:'I',  //'I' insert ou 'U' update
+      editKey:null,
+      isLoading:false,
+      messageInput:'',
+      fileSelected:false,
+    };
+  }
+  componentDidMount() {
+    this.setState({isLoading:true});
+    if(this.props.messengerMode) {
+      this.interval = setInterval(() => { 
+      this.setState({ time: Date.now() });
+      this.evtRefresh();
+      }
+      , 5*1000);
+    }
+    try{
+      if(this.props.id) {
+        //alert('directEdit');
+        this.setState({showEditModal:true,editMode:'U',editKey:this.props.id,exception:null});
+       }
+       else 
+         this.evtRefresh();
+      }catch(error){
+       this.setState({exception:error}); 
+     }
+    }
+    componentWillUnmount() {
+      if(this.props.messengerMode) {
+        clearInterval(this.interval);
+      }  
+    }
+
+  /* VIEW METHODS *************************************************************************** */
+
+  /* ******** ####################### ********** */
+  listModel2View =  (list) =>  {
+    // precisa??
+    return list;
+  }
+  /* ******** ####################### ********** */
+  view2ListModel =  (list) =>  {
+    // precisa??
+    return list;
+  }
+  /* ******** ####################### ********** */
+  evtRefresh = async (pfilterId)=> {
+    //console.log('JZtable.evtRefresh filterId'+filterId?(filterId.id?filterId.id:null):null);
+    var filterId=null;
+    if(pfilterId)
+      if(pfilterId.target)
+        filterId=pfilterId.target.value;
+        
+    console.log('JZtable.evtRefresh filterId'+JSON.stringify(filterId));
+    //alert('LOAD');
+    this.setState({isLoading:true,filterId:filterId});
+    try{
+      var start = new Date();
+      var _list=await this.props.api.findAll(this.props.apiContext,filterId); //tem catch
+      if(DEBUGAPICALL_UTIL)alert(JSON.stringify(_list, null, 2));
+      _list=this.listModel2View(_list);    
+      var end = new Date() - start;
+      console.info('JZTAble REFRESH:Execution time: %dms', end)
+        //alert('END LOAD');
+       this.setState({list:_list,isLoading:false});
+       //Teste
+       this.forceUpdate();
+      }catch(error){
+        if(error instanceof PlatAPIReturnCodeError || 
+          error instanceof PlatAPIDBIntegrityConstraint ||
+          error instanceof PlatAPIAuthError ||
+          error instanceof PlatAPIError)
+        this.setState({myException:error}); 
+        else
+        this.setState({myException:error}); 
+    }   
+  }
+  evtRefreshFiltered = async ()=> {
+    var _list=null;
+    try {
+      _list=await this.props.api.findAllByFK(this.state.filter,this.props.apiContext);
+      if(DEBUGAPICALL_UTIL)alert(JSON.stringify(_list, null, 2));
+      _list=this.listModel2View(_list);    
+       this.setState({list:_list});
+       this.forceUpdate();
+      }catch(error){
+        if(error instanceof PlatAPIReturnCodeError || 
+          error instanceof PlatAPIDBIntegrityConstraint ||
+          error instanceof PlatAPIAuthError ||
+          error instanceof PlatAPIError)
+        this.setState({myException:error}); 
+        else
+        this.setState({myException:error}); 
+    }   
+  }
+
+  /* ******** ####################### ********** */
+  evtCreate = () => {
+      this.setState({showEditModal:true,editMode:'I'});
+    }
+  /* ******** ####################### ********** */
+  evtEditSelected = () => {
+  }
+  /* ******** ####################### ********** */
+  evtRemove = () => {
+  }
+  /* ******** ####################### ********** */
+  evtFilter = () => {
+  }
+
+  /* ******** ####################### ********** */
+  evtActionEdit = async (i,item) =>  {
+   this.setState({showEditModal:true,editMode:'U',editKey:item._id});
+   if(this.props.onSelectItem) this.props.onSelectItem(item);
+  }
+
+  /* ******** ####################### ********** */
+  evtActionDelete = async (i,item) =>  {
+    var r=null;
+    try {
+      r=await this.props.api.removeByPK(item);
+      if(DEBUGAPICALL_UTIL)alert(JSON.stringify(r, null, 2));
+      this.evtRefresh();
+    }catch(error){
+        if(error instanceof PlatAPIReturnCodeError || 
+          error instanceof PlatAPIDBIntegrityConstraint ||
+          error instanceof PlatAPIAuthError ||
+          error instanceof PlatAPIError)
+        this.setState({myException:error}); 
+        else
+        this.setState({myException:error}); 
+    }   
+  }
+  /* ******** ####################### ********** */
+  evtEndEditMode = async (i,item) =>  {
+   this.setState({showEditModal:false});
+   if(this.props.onSelectItem) this.props.onSelectItem(null);
+   if(this.props.backEditURL) {
+    this.props.history.push(this.props.backEditURL);
+    return;
+   }
+
+   this.evtRefresh();
+  }
+
+  evtSend = async() => {
+    try{
+    this.setState({fileSelectedName:"Uploading..."});
+    await this.props.onSend(this.state.messageInput,this.state.fileSelected,this.state.fileData);
+    //this.setState({});
+    this.setState({messageInput:'asas',fileSelected:false,fileSelectedName:""});
+    await this.evtRefresh();
+    this.forceUpdate();
+  }catch(error){
+    if(error instanceof PlatAPIReturnCodeError || 
+      error instanceof PlatAPIDBIntegrityConstraint ||
+      error instanceof PlatAPIAuthError ||
+      error instanceof PlatAPIError)
+    this.setState({myException:error+': APIError'}); 
+    else
+    this.setState({myException:error+':'+error.msg}); 
+   }
+     }
+
+  evtAttach = async(e) => {
+    //alert('FielSel'+e.target.files[0])
+    this.setState({fileData:e.target.files[0],fileSelectedName:e.target.files[0].name,messageInput:'Arquivo: '+e.target.files[0].name, fileSelected:true});
+    this.forceUpdate();
+  }
+
+  /* ******** ####################### ********** */
+  render() {
+    if (this.state.myException) {
+      if(this.state.myException instanceof PlatAPIAuthError) 
+      return (<ErrorCardAuth/>)
+      else 
+       return (<ErrorCard myException={this.state.myException}/>)
+    } //if
+ 
+    const CustomEditComponent = this.props.customEditcomponent;
+
+    var showListTable=this.state.list&&(this.state.showEditModal==false);
+    if(this.state.showEditModal)
+      return  <CustomEditComponent _id={'FORM_'+this.props._id}  mode={this.state.editMode} api={this.props.api} apiContext={this.props.apiContext} editKey={this.state.editKey} editConfig={this.props.editConfig} onClose={this.evtEndEditMode}  />
+
+
+      //https://stackoverflow.com/questions/50891589/how-to-add-a-scroll-bar-to-a-component-in-react
+      //https://www.pluralsight.com/guides/scrolling-inside-a-div-in-react
+
+    //alert('v_util.JZListComponentImpl.render list:'+JSON.stringify(this.state.list,null,2))  ;
+    if(this.state.list!=null)
+      return (
+        <React.Fragment>
+            {/*this.state.showEditModal&&<CustomEditComponent _id={'FORM_'+this.props._id}  mode={this.state.editMode} api={this.props.api} apiContext={this.props.apiContext} editKey={this.state.editKey} editConfig={this.props.editConfig} onClose={this.evtEndEditMode}  />*/}
+
+            {showListTable&&<React.Fragment>
+              <h3>{this.props.listConfig.title}</h3>
+              {this.props.listConfig.hasInsert&&<XButton id={'Novo_'+this.props._id}  label={'Novo'+(DEBUG_ID&&'_'+this.props._id)} textlabel={(this.props.textlabels)?"New":null}  icon="fa fa-plus"  onClick={this.evtCreate}/>}<span> </span>
+              {true&&<XButton id={'Atualizar_'+this.props._id} label={'Atualizar'+(DEBUG_ID&&'_'+this.props._id)} textlabel={(this.props.textlabels)?"Refresh":null} icon={this.state.isLoading?'fa fa-spinner fa-spin':'fa fa-refresh'}  disabled={this.state.isLoading}  onClick={()=>{this.evtRefresh()}} />}<span> </span>
+              {false&&<XButton label='Edit'    icon="fa fa-edit"  onClick={this.evtEditSelected}/>} <span> </span>
+              {false&&<XButton label='Remove'  icon="fa fa-trash"  onClick={this.evtRemove}/>} <span> </span>
+              <span>&nbsp;</span>{this.props.listConfig.filterLov&&<XSelect3 isFilter={true} list={this.props.listConfig.filterLov}  width={110} onChange={this.evtRefresh}  ></XSelect3>}
+              {false&&<XButton label='Filter'  icon="fa fa-search"  onClick={this.evtFilter}/>} <span> </span>
+              <h5 style={{color:'red'}} >{this.state.message}</h5>
+
+              {<XTableRead
+                id={this.props._id}
+                metadata={this.props.listConfig}
+                list={this.state.list}
+                inPlaceEdit={false}
+                onAction={this.evtActionEdit}
+                onDelete={this.evtActionDelete}
+                noEdit={this.props.noEdit}
+                noDelete={this.props.noDelete}
+                textlabels={this.props.textlabels}
+              />}
+
+              {this.props.messengerMode&&<div>
+                {!this.state.fileSelected&&<XButton attachFile={true}  icon="fa fa-paperclip" onClick={this.evtAttach}  ></XButton>}<span>&nbsp;</span>
+                {this.state.fileSelected&&<span>{this.state.fileSelectedName}</span>}
+                {!this.state.fileSelected&&<XInputExternal  width={300} value={this.state.messageInput} label=''  readOnly={this.fileSelected}
+                onXG={(event)=>this.setState({messageInput: event.target.value})} cellStyle={true}  onEnterKey={this.evtSend} />}<span> </span>
+
+              {/*<input id={this.props.id+'_msg'}  xstyle={{/*this.style1(this.state.valid)* /}} readOnly={this.props.readOnly} 
+              defaultValue={this.state.messageInput} onChange={(e)=>{var value=e.target.value;this.setState({messageInput:value})}} 
+               onKeyDown ={(e)=>{if (e.keyCode === 13){console.log(e);this.evtSend();this.setState({messageInput:''}); }}} />*/}
+              
+              {<XButton  icon="fa fa-send" onClick={this.evtSend}   ></XButton> }
+               </div>}
+            </React.Fragment>}
+        </React.Fragment>
+      )
+    else
+      return (<p className="color--blue">Carregando lista...</p>);
+
+  }
+}
+
+//const JZListComponent = withRouter(JZListComponentNoRouter);
+const JZListComponent = (JZListComponentNoRouter);
+
+
+export {JZListComponent,JZListComponentNoRouter};

package/jzcomponents/XFormEdit.jsx

@@ -0,0 +1,105 @@
+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 { JZInPlaceListComponent } from "./JZInPlaceListComponent.jsx";
+
+
+
+const DEBUG_ID=false;
+const DEBUG_ID2=DEBUG_ID; 
+const DEBUG_ID3=false; 
+
+//TODO: tirar debug de celulas (DEBUF_2)
+//atualizar e refres
+//colocar ids corretos da pagetest
+//form
+
+
+/** *********************************************************
+ * XFormEdit: metadata, formData, btn0, btn0.label, btn0.evt
+ * altera diretamente a prop, por isso nao tem estado (via input external) 
+ * ********************************************************* */ 
+class XFormEdit extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+
+  inputChangeNew = (value,context) => {
+    console.log("u.XFormEdit.inputChgNew.context"+context);
+    var v=context.v;
+    var item=context.item;
+    console.log("u.XFormEdit.inputChgNew.value"+value);
+    item[v.attr]=value;
+    //this.evtRefresh();
+    //this.props.notifyChangeFn();
+  }
+
+
+  render () {
+    if(!this.props.metadata.fields)
+    return <h3>No metadata.fields on XFormEdit</h3>
+    else
+    return (
+      <React.Fragment>
+      <h6>{DEBUG_ID2&&'['+this.props.id+']'}</h6>  
+      <h3>{this.props.metadata.title}</h3>
+     
+      {this.props.metadata.fields.filter((item)=>{return(item.show)}).map((v,i)=> {
+        if(v.type==='l') /*list*/ {
+          return   <React.Fragment key={i}>
+                      <div xclassName="card">
+                      <div>{v.label}</div>
+                      <XSelect3 list={v.lov} value={this.props.formData[v.attr]}  disabled={v.readOnly}  onChange={(ev)=>this.props.formData[v.attr]=ev.target.value} />
+                      <br/>
+                      <p> </p>
+                      </div>
+                    </React.Fragment>
+        }
+        else {
+          if(v.type==='a') /* array */ {
+               return (  
+               <React.Fragment key={i}>
+                 <div xclassName="card"><div>{v.label}</div>
+                 <JZInPlaceListComponent _id={this.props.id+'_F'+i}   textlabels={true}  list={this.props.formData[v.attr]} listConfig={v.listConfig} newItemFN={v.newItemFN} />
+                 </div>
+              </React.Fragment>)
+          }
+          else         
+          if(v.type==='d') /* date */ {
+            return (  
+            <React.Fragment key={i}>
+                 <div className=""><div>{v.label}</div>
+              <XDateSelect id={this.props.id+'_F'+i}  width={v.width} label = {v.label}  disabled={v.readOnly}  value={this.props.formData[v.attr]} onChange={(v)=>this.props.formData[v.attr]=v} />
+              </div>
+           </React.Fragment>)
+       }
+       else         
+       if(v.type==='c') /* check */ {
+        return (  
+        <React.Fragment key={i}>
+                 <div className=""><div>{v.label}</div>
+          <XCheckbox id={this.props.id+'_F'+i}  width={v.width} label = {v.label}  disabled={v.readOnly}  value={this.props.formData[v.attr]} onChange={(v)=>this.props.formData[v.attr]=v} />
+          </div>
+         </React.Fragment>)
+   }
+   else         
+return (
+               <React.Fragment key={i} >{DEBUG_ID2&&'['+this.props.id+'_F'+i+']'}
+                  <XInputExternal type={v.type=='n'?'number':''}  id={this.props.id+'_F'+i}  width={v.width} label = {v.label}  readOnly={v.readOnly}  value={this.props.formData[v.attr]}  /*onChangeNew={(value)=>this.props.formData[v.attr]=ev.target.value}*/ onChangeNew={this.inputChangeNew} context={{item:this.props.formData,v:v}} />
+              </React.Fragment>)
+        }
+       })}
+       {this.props.btn0&& <XButton label = {this.props.btn0.label}  onClick={this.props.btn0.evt} />}
+      </React.Fragment>
+    );
+  }
+
+}
+
+
+export {XFormEdit};