@andersonalmeidax0/webcomponents 0.1.13 → 0.1.15

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

@@ -88,11 +88,11 @@ class XFormEdit extends React.Component {
                       </React.Fragment>)
                   }
                   else
-                    if (v.type === 'f') /* file */ {
+                    if (v.type === 'file') /* file */ {
                       return (
                         <React.Fragment key={i}>
                           <div className=""><div>{v.label}</div>
-                          <p>{this.props.formData[v.attr]}</p>
+                          <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>)

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={()=>{this.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.13",
+  "version": "0.1.15",
   "description": "webcomponents",
   "main": "webcomponents",
   "scripts": {

package/releasenotes.txt

@@ -10,9 +10,9 @@
 0.1.10: add css
 0.0.11: no alert on update / XButton upload com text=true
 0.1.12: remove getStorage from APIAdapter
-0.1.13: new form type: "f"=file upload
-
-
+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
+0.1.15: fix bug
 npm login
 npm publish --access public