safet.purkovic
/
PDFEngineDemoUI
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Code reafctoring and adding panels

master
Igor_Budimski 4 years ago
parent
d2543e48f3
commit
585f66133e
8 changed files with 325 additions and 34 deletions
Unified View Show Diff Stats
  1. 0
    10
      src/containers/_nav.js
  2. 18
    3
      src/views/demoComponent/DemoComponent1.js
  3. 258
    5
      src/views/demoComponent/DemoComponent11.js
  4. 1
    1
      src/views/demoComponent/DemoComponent12.js
  5. 23
    12
      src/views/demoComponent/DemoComponent2.js
  6. 12
    1
      src/views/demoComponent/DemoComponent3.js
  7. 12
    1
      src/views/demoComponent/DemoComponent4.js
  8. 1
    1
      src/views/demoComponent/DemoComponent5.js

+ 0
- 10
src/containers/_nav.js View File

text: '', text: '',
} }
}, },
{
_tag: 'CSidebarNavItem',
name: 'Show number rows',
to: '/DemoComponent11',
// icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>,
badge: {
color: 'info',
text: '',
}
},
{ {
_tag: 'CSidebarNavItem', _tag: 'CSidebarNavItem',
name: 'Dashboard', name: 'Dashboard',

+ 18
- 3
src/views/demoComponent/DemoComponent1.js View File

CCallout CCallout
} from '@coreui/react'; } from '@coreui/react';
import CIcon from '@coreui/icons-react'; import CIcon from '@coreui/icons-react';
//import PDFEngine from 'PDFEngine';
import PDFEngine from 'PDFEngine';


import MainChartExample from '../charts/MainChartExample.js'; import MainChartExample from '../charts/MainChartExample.js';
const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js')) const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))




const DemoComponent1 = () => { const DemoComponent1 = () => {
const exec = () => {
PDFEngine();
window.print();
}
const apiCall = () => { const apiCall = () => {
const url = encodeURIComponent("http://localhost:3000/#/DemoComponent2"); const url = encodeURIComponent("http://localhost:3000/#/DemoComponent2");
} }
return ( return (
<> <>
<button className="float-right btn btn-primary" onClick={() => window.print()}>Execute</button>
<div code="br-hide" style={{ display: 'flex', flexDirection: 'row', border: '1px solid #dedede', width: '50%', height: '200px', backgroundColor: 'white', padding: '5px', borderRadius: '10px' }}>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '2px', margin: '5px' }}>
<div style={{ backgroundColor: 'white', width: '50%', padding: '2px', marginBottom: '20px' }}>
<h4>PDFEngine</h4>
</div>
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Print view</button>
</div>
</div>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div>
<br /> <br />
1 1
<br /> <br />
<br /> <br />
<WidgetsDropdown /> <WidgetsDropdown />
<CCard code="br-isolatedlandscape">
<CCard>
<CCardBody> <CCardBody>
<CRow> <CRow>
<CCol sm="5"> <CCol sm="5">

+ 258
- 5
src/views/demoComponent/DemoComponent11.js View File

import React, { lazy } from 'react';
import React, { lazy, useState } from 'react';
import { import {
CBadge, CBadge,
CButton, CButton,




const DemoComponent11 = () => { const DemoComponent11 = () => {
const exec = () =>
{

const [colNum, setColNum] = useState(0);
const [inputValue, setInputValue] = useState("");

const handleChange = (event) => {
if (!isNaN(event.target.value)) {
setColNum(event.target.value);
setInputValue(event.target.value);
} else {
alert('Not a number');
setInputValue("");
}
}

const exec = () => {
PDFEngine(); PDFEngine();
window.print(); window.print();
} }
return ( return (
<> <>
<button className="float-right btn btn-primary" onClick={exec}>Execute</button>
<div code="br-hide" style={{ display: 'flex', flexDirection: 'row', border: '1px solid #dedede', width: '50%', height: '200px', backgroundColor: 'white', padding: '5px', borderRadius: '10px' }}>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '2px', margin: '5px' }}>
<div style={{ backgroundColor: 'white', width: '50%', padding: '2px', marginBottom: '20px' }}>
<h4>PDFEngine</h4>
</div>
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
<input value={inputValue} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px' }} placeholder=" Enter column number" type="text" name="name" onChange={handleChange} />
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Remove</button>
</div>
</div>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div>
<br /> <br />
11 11
<br /> <br />
<div> <div>
<br /> <br />
<table className="table table-hover table-outline mb-0 d-sm-table" code="br-shownumberrows-2">
<table className="table table-hover table-outline mb-0 d-sm-table" code={`br-removecolumn-${colNum}`}>
<thead className="thead-light"> <thead className="thead-light">
<tr> <tr>
<th className="text-center"><CIcon name="cil-people" /></th> <th className="text-center"><CIcon name="cil-people" /></th>


</CCol> </CCol>
</CRow> </CRow>
<div>
<br />
<table className="table table-hover table-outline mb-0 d-sm-table" >
<thead className="thead-light">
<tr>
<th className="text-center"><CIcon name="cil-people" /></th>
<th>User</th>
<th className="text-center">Country</th>
<th>Usage</th>
<th className="text-center">Payment Method</th>
<th>Activity</th>
</tr>
</thead>
<tbody>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/1.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-success"></span>
</div>
</td>
<td>
<div>Yiorgos Avraamu</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-us" title="us" id="us" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>50%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="success" value="50" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-cc-mastercard" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>10 sec ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/2.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-danger"></span>
</div>
</td>
<td>
<div>Avram Tarasios</div>
<div className="small text-muted">

<span>Recurring</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-br" title="br" id="br" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>10%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="info" value="10" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-cc-visa" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>5 minutes ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/3.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-warning"></span>
</div>
</td>
<td>
<div>Quintin Ed</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-in" title="in" id="in" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>74%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="warning" value="74" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-stripe" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>1 hour ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/4.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-secondary"></span>
</div>
</td>
<td>
<div>Enéas Kwadwo</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-fr" title="fr" id="fr" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>98%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="danger" value="98" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-paypal" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last month</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/5.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-success"></span>
</div>
</td>
<td>
<div>Agapetus Tadeáš</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-es" title="es" id="es" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>22%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="info" value="22" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-google-pay" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last week</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/6.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-danger"></span>
</div>
</td>
<td>
<div>Friderik Dávid</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-pl" title="pl" id="pl" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>43%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="success" value="43" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-cc-amex" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Yesterday</strong>
</td>
</tr>
</tbody>
</table>
</div>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

+ 1
- 1
src/views/demoComponent/DemoComponent12.js View File

<br /> <br />
<div> <div>
<br /> <br />
<table className="table table-hover table-outline mb-0 d-sm-table" code="br-removerow-0">
<table className="table table-hover table-outline mb-0 d-sm-table" code="br-removecolumn-0">
<thead className="thead-light"> <thead className="thead-light">
<tr> <tr>
<th className="text-center"><CIcon name="cil-people" /></th> <th className="text-center"><CIcon name="cil-people" /></th>

+ 23
- 12
src/views/demoComponent/DemoComponent2.js View File





const DemoComponent2 = () => { const DemoComponent2 = () => {
const apiCall = () => {
const exec = () => {
const url = encodeURIComponent("http://localhost:3000/#/DemoComponent2"); const url = encodeURIComponent("http://localhost:3000/#/DemoComponent2");
const dateNow = new Date(); const dateNow = new Date();
fetch('https://localhost:7285/api/PDFGenerator/' + url) fetch('https://localhost:7285/api/PDFGenerator/' + url)
.then(async res => ({ .then(async res => ({
filename: "John Doe - " + dateNow +" - report.pdf",
filename: "John Doe - " + dateNow + " - report.pdf",
blob: await res.blob() blob: await res.blob()
})) }))
.then(resObj => { .then(resObj => {
} else { } else {
// For other browsers: create a link pointing to the ObjectURL containing the blob. // For other browsers: create a link pointing to the ObjectURL containing the blob.
const objUrl = window.URL.createObjectURL(newBlob); const objUrl = window.URL.createObjectURL(newBlob);
let link = document.createElement('a'); let link = document.createElement('a');
link.href = objUrl; link.href = objUrl;
link.download = resObj.filename; link.download = resObj.filename;
link.click(); link.click();
// For Firefox it is necessary to delay revoking the ObjectURL. // For Firefox it is necessary to delay revoking the ObjectURL.
setTimeout(() => { window.URL.revokeObjectURL(objUrl); }, 250); setTimeout(() => { window.URL.revokeObjectURL(objUrl); }, 250);
} }
} }
return ( return (
<> <>
<button className="float-right btn btn-primary" onClick={()=> apiCall()}>Execute</button>
<br/>
2
<br/>
<br/>
<WidgetsDropdown />
<div code="br-hide" style={{ display: 'flex', flexDirection: 'row', border: '1px solid #dedede', width: '50%', height: '200px', backgroundColor: 'white', padding: '5px', borderRadius: '10px' }}>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '2px', margin: '5px' }}>
<div style={{ backgroundColor: 'white', width: '50%', padding: '2px', marginBottom: '20px' }}>
<h4>PDFEngine</h4>
</div>
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Initiate export</button>
</div>
</div>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div>
<br />
2
<br />
<br />
<WidgetsDropdown />
<CCard> <CCard>
<CCardBody> <CCardBody>
<CRow> <CRow>
</CCol> </CCol>
</CRow> </CRow>
<div> <div>
<br />
<br />
<table className="table table-hover table-outline mb-0 d-sm-table" > <table className="table table-hover table-outline mb-0 d-sm-table" >
<thead className="thead-light"> <thead className="thead-light">
<tr> <tr>

+ 12
- 1
src/views/demoComponent/DemoComponent3.js View File

} }
return ( return (
<> <>
<button className="float-right btn btn-primary" onClick={exec}>Execute</button>
<div code="br-hide" style={{ display: 'flex', flexDirection: 'row', border: '1px solid #dedede', width: '50%', height: '200px', backgroundColor: 'white', padding: '5px', borderRadius: '10px' }}>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '2px', margin: '5px' }}>
<div style={{ backgroundColor: 'white', width: '50%', padding: '2px', marginBottom: '20px' }}>
<h4>PDFEngine</h4>
</div>
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Hide table buttons</button>
</div>
</div>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div>
<br /> <br />
3 3
<br /> <br />

+ 12
- 1
src/views/demoComponent/DemoComponent4.js View File

} }
return ( return (
<> <>
<button className="float-right btn btn-primary" onClick={exec}>Execute</button>
<div code="br-hide" style={{ display: 'flex', flexDirection: 'row', border: '1px solid #dedede', width: '50%', height: '200px', backgroundColor: 'white', padding: '5px', borderRadius: '10px' }}>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '2px', margin: '5px' }}>
<div style={{ backgroundColor: 'white', width: '50%', padding: '2px', marginBottom: '20px' }}>
<h4>PDFEngine</h4>
</div>
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Remove table style</button>
</div>
</div>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div>
<br /> <br />
4 4
<br /> <br />

+ 1
- 1
src/views/demoComponent/DemoComponent5.js View File

} }
return ( return (
<> <>
<div style={{ display: 'flex', flexDirection: 'row', border: '1px solid #dedede', width: '50%', height: '200px', backgroundColor: 'white', padding: '5px', borderRadius: '10px' }}>
<div code="br-hide" style={{ display: 'flex', flexDirection: 'row', border: '1px solid #dedede', width: '50%', height: '200px', backgroundColor: 'white', padding: '5px', borderRadius: '10px' }}>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '2px', margin: '5px' }}> <div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '2px', margin: '5px' }}>
<div style={{ backgroundColor: 'white', width: '50%', padding: '2px', marginBottom: '20px' }}> <div style={{ backgroundColor: 'white', width: '50%', padding: '2px', marginBottom: '20px' }}>
<h4>PDFEngine</h4> <h4>PDFEngine</h4>

Write Preview
Loading…
Cancel
Save