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
Split 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

@@ -112,16 +112,6 @@ const _nav = [
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',
name: 'Dashboard',

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

@@ -13,13 +13,17 @@ import {
CCallout
} from '@coreui/react';
import CIcon from '@coreui/icons-react';
//import PDFEngine from 'PDFEngine';
import PDFEngine from 'PDFEngine';

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


const DemoComponent1 = () => {
const exec = () => {
PDFEngine();
window.print();
}
const apiCall = () => {
const url = encodeURIComponent("http://localhost:3000/#/DemoComponent2");
@@ -57,13 +61,24 @@ const DemoComponent1 = () => {
}
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 />
1
<br />
<br />
<WidgetsDropdown />
<CCard code="br-isolatedlandscape">
<CCard>
<CCardBody>
<CRow>
<CCol sm="5">

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

@@ -1,4 +1,4 @@
import React, { lazy } from 'react';
import React, { lazy, useState } from 'react';
import {
CBadge,
CButton,
@@ -20,20 +20,45 @@ const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))


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();
window.print();
}
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 />
11
<br />
<div>
<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">
<tr>
<th className="text-center"><CIcon name="cil-people" /></th>
@@ -521,6 +546,234 @@ const DemoComponent11 = () => {

</CCol>
</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="[email protected]" />
<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="[email protected]" />
<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="[email protected]" />
<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="[email protected]" />
<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="[email protected]" />
<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="[email protected]" />
<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>
</CCard>
</CCol>

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

@@ -33,7 +33,7 @@ const DemoComponent12 = () => {
<br />
<div>
<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">
<tr>
<th className="text-center"><CIcon name="cil-people" /></th>

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

@@ -20,13 +20,13 @@ const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))


const DemoComponent2 = () => {
const apiCall = () => {
const exec = () => {
const url = encodeURIComponent("http://localhost:3000/#/DemoComponent2");
const dateNow = new Date();
fetch('https://localhost:7285/api/PDFGenerator/' + url)
.then(async res => ({
filename: "John Doe - " + dateNow +" - report.pdf",
filename: "John Doe - " + dateNow + " - report.pdf",
blob: await res.blob()
}))
.then(resObj => {
@@ -41,12 +41,12 @@ const DemoComponent2 = () => {
} else {
// For other browsers: create a link pointing to the ObjectURL containing the blob.
const objUrl = window.URL.createObjectURL(newBlob);
let link = document.createElement('a');
link.href = objUrl;
link.download = resObj.filename;
link.click();
// For Firefox it is necessary to delay revoking the ObjectURL.
setTimeout(() => { window.URL.revokeObjectURL(objUrl); }, 250);
}
@@ -57,12 +57,23 @@ const DemoComponent2 = () => {
}
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>
<CCardBody>
<CRow>
@@ -324,7 +335,7 @@ const DemoComponent2 = () => {
</CCol>
</CRow>
<div>
<br />
<br />
<table className="table table-hover table-outline mb-0 d-sm-table" >
<thead className="thead-light">
<tr>

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

@@ -27,7 +27,18 @@ const DemoComponent3 = () => {
}
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 />
3
<br />

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

@@ -27,7 +27,18 @@ const DemoComponent4 = () => {
}
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 />
4
<br />

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

@@ -40,7 +40,7 @@ const DemoComponent5 = () => {
}
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', width: '50%', padding: '2px', marginBottom: '20px' }}>
<h4>PDFEngine</h4>

Write Preview
Loading…
Cancel
Save