@andersonalmeidax0/webcomponents 0.1.12 → 0.1.14

package/RestAPIAdapter.js

@@ -151,14 +151,70 @@ X-Colocar o MetalMarlek em outro server AWS ... com docker... com outra conta de
         r=await this.getJSONResponse(response);
 
         //tag de dados pode ser nada,result, data 
-        if(this.tagData==null) return r;
+        if(this.tagData==null){
+          if(vo.fileData)
+            await uploadFile(vo.fileData);
+          return r;
+
+        } 
 
         var respBlock=this.tagData;  
         if(r[respBlock])
           r[respBlock].insertedId=r.insertedId;
-        if(r[respBlock])  return r[respBlock];
+        if(r[respBlock]) {
+          if(vo.fileData)
+            await uploadFile(vo.fileData);
+          return r[respBlock];
+        }  
         throw new PlatAPIError('Invalid payload response');
+
+
+           
     };
+
+     /** ***********************
+     * 
+      *********************** */
+         async uploadFile(fileData) { 
+            alert('UPLOAD start');
+            let formData = new FormData();
+            formData.append('file', fileData);
+            const response = await fetch(urlAPI+'/api/upload', {
+                method: 'POST',
+                body: formData,
+              })
+              if (!response.ok) {
+                if(response.status===404) 
+                  throw new PlatAPIDBNotFound( `An error has occured: ${response.status}`);
+                if(response.status===403) 
+                  throw new PlatAPIForbidden( `An error has occured: ${response.status}`);
+                if(response.status===401) 
+                  throw new PlatAPIAuthError( `An error has occured: ${response.status}`);
+                throw new PlatAPIReturnCodeError();
+              }
+              r=await response.json();
+              alert("upload response:"+JSON.stringify(r));  
+              return r;        
+            }
+      
+         
+    async downloadFile(f) {
+        var response=await fetch(urlAPI+'/api/download/'+f, {
+           method: 'GET'
+         })
+         if (!response.ok) {
+          if(response.status===404) 
+            throw new PlatAPIDBNotFound( `An error has occured: ${response.status}`);
+          if(response.status===403) 
+            throw new PlatAPIForbidden( `An error has occured: ${response.status}`);
+          if(response.status===401) 
+            throw new PlatAPIAuthError( `An error has occured: ${response.status}`);
+          throw new PlatAPIReturnCodeError();
+        }
+        var blob = await response.blob();
+        return blob;
+    }
+
     /** ***********************
      * 
       *********************** */

package/jzcomponents/JZListComponent.jsx

@@ -276,6 +276,7 @@ class JZListComponentNoRouter extends React.Component {
                 noEdit={this.props.noEdit}
                 noDelete={this.props.noDelete}
                 textlabels={this.props.textlabels}
+                api={this.props.api}
               />}
 
               {this.props.messengerMode&&<div>

package/jzcomponents/XFormEdit.jsx

@@ -1,18 +1,18 @@
 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 { 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; 
+const DEBUG_ID = false;
+const DEBUG_ID2 = DEBUG_ID;
+const DEBUG_ID3 = false;
 
 //TODO: tirar debug de celulas (DEBUF_2)
 //atualizar e refres
@@ -23,83 +23,92 @@ const DEBUG_ID3=false;
 /** *********************************************************
  * 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;
+  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>
+  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>
+      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==='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>
-    );
+                    </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
+                    if (v.type === 'file') /* file */ {
+                      return (
+                        <React.Fragment key={i}>
+                          <div className=""><div>{v.label}</div>
+                          <p>{this.props.formData[v.attr]?this.props.formData[v.attr]:"No file selected"}</p>
+                          <XButton id={this.props.id + '_F' + i}  attachFile={true}  disabled={v.readOnly} onClick={(e)=>{this.props.formData[v.attr]=e.target.files[0].name;this.props.formData.filedata=e.target.files[0]}} textlabel='Select File'></XButton>
+                          </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};
+export { XFormEdit };

package/jzcomponents/XTableRead.jsx

@@ -117,7 +117,7 @@ function nfmtM(n) {
           </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}  />   })}
+           return <XTableCell key={index}  item={item} index={index} lastIndex={arr.length} {...this.props} notifyChangeFn={this.cellChanged}  api={this.props.api}  />   })}
          </tbody>
       </table>
       </div>
@@ -134,7 +134,7 @@ function nfmtM(n) {
 //var XTableCell_ID=0;
 
 /**
- * 
+ * recebe "api"> só quando chamado de JZlist vem preenchido. Usa para download.
  */
 class XTableCell extends React.Component {
   constructor(props) {
@@ -186,6 +186,24 @@ class XTableCell extends React.Component {
     this.props.notifyChangeFn();
   }
 
+  evtDownload = async(f) => {
+    alert(f)
+    if(this.props.api) {
+    var blob=await this.props.api.download(urlAPI+'/api/download/'+f)
+       // 2. Create blob link to download
+       const url = window.URL.createObjectURL(new Blob([blob]));
+       const link = document.createElement('a');
+       link.href = url;
+       link.setAttribute('download', `${f}`);
+       // 3. Append to html page
+       document.body.appendChild(link);
+       // 4. Force download
+       link.click();
+       // 5. Clean up and remove the link
+       link.parentNode.removeChild(link);
+    }
+  }  
+
   renderListItem(item,p1,lastIndex) {
     //var kk='ASD'+(p1+1234);
     //XTableCell_ID=XTableCell_ID+1;
@@ -252,7 +270,9 @@ class XTableCell extends React.Component {
                         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>
                         }
-
+                        if(v.type=='file'){
+                          return <td key={i}  align={v.align} className={v.className} id={this.props.id+'_R'+p1+'_C'+i}><a onClick={()=>{self.evtDownload(cellFmt)}}>{cellFmt}</a>&nbsp;{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>
                       } 
        })}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@andersonalmeidax0/webcomponents",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "webcomponents",
   "main": "webcomponents",
   "scripts": {

package/releasenotes.txt

@@ -9,7 +9,9 @@
 0.1.9: doc fix
 0.1.10: add css
 0.0.11: no alert on update / XButton upload com text=true
-0.1.12: extract getStorage
+0.1.12: remove getStorage from APIAdapter
+0.1.13: new form type: "f"=file upload  (Part 1: UI CREATE)
+0.1.14: RestAPIAdapter => (Part 2: CREATE: file upload REST API / Part3: show fileField on list with download link
 
 npm login
 npm publish --access public