Added dropdown

src/views/demoComponent/DemoComponent10.js

@@ -1,4 +1,4 @@
-import React, { lazy, useState } from 'react';
+import React, { lazy, useEffect, useState } from 'react';
 import {
     CBadge,
     CButton,
@@ -20,29 +20,27 @@ const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))
 
 
 const DemoComponent10 = () => {
-    const [paperFormat, setPaperFormat] = useState(0);
-    const [inputValue, setInputValue] = useState("");
+    const [checkValue, setCheckValue] = useState(false);
 
-    const handleChange = (event) => {
-        if (!isNaN(event.target.value)) {
-            setPaperFormat(event.target.value);
-            setInputValue(event.target.value);
-        } else {
-            alert('Not a number');
-            setInputValue("");
-        }
+    const handleChange = (e) => {       
+       setCheckValue(e.target.value);
     }
+
+    useEffect(()=>{
+        console.log(checkValue);
+    }, [checkValue])
+
     const exec = () => {
-    const query = [];
-        
-        // query.push("MarginTop=100 mm");
+        const query = [];
+
+        query.push(`Landscape=${checkValue}`);
         // query.push("PaperFormatType=A3");
-        const queryString = (query) ? `?${query.join('&')}` : ''; 
-        const url = ('https://localhost:7285/api/PDFGenerator/isolate/http%3A%2F%2Flocalhost%3A3000%2F%23%2FDemoComponent10'+queryString);
-        
+        const queryString = (query) ? `?${query.join('&')}` : '';
+        const url = ('https://localhost:7285/api/PDFGenerator/isolate/http%3A%2F%2Flocalhost%3A3000%2F%23%2FDemoComponent10' + queryString);
+
         let headers = new Headers();
         headers.append('Content-Type', 'application/pdf');
-        
+
         fetch(url, {
             method: 'GET',
             headers: headers
@@ -63,12 +61,12 @@ const DemoComponent10 = () => {
                 } 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);
                 }
@@ -79,22 +77,23 @@ const DemoComponent10 = () => {
     }
     return (
         <>
-        <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 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: '100%', 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 paper format" type="text" name="name" onChange={handleChange} />
+                        <select value={checkValue} onChange={handleChange}  style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px', width: '150px' }}>
+                            <option value="false">Portrait</option>
+                            <option value="true">Landscape</option>
+                        </select>
                         <button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button>
                     </div>
                 </div>
-                <div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
-                </div>
             </div>
-        <br/>
-        <br/>
-        <WidgetsDropdown />
+            <br />
+            <br />
+            <WidgetsDropdown />
             <CCard>
                 <CCardBody>
                     <CRow>
@@ -356,7 +355,7 @@ const DemoComponent10 = () => {
                                 </CCol>
                             </CRow>
                             <div>
-                                <br />                              
+                                <br />
                                 <table className="table table-hover table-outline mb-0 d-sm-table" isolate="true">
                                     <thead className="thead-light">
                                         <tr>

src/views/demoComponent/DemoComponent9.js

@@ -85,7 +85,7 @@ const DemoComponent9 = () => {
     return (
         <>
         <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: '70%', padding: '2px', margin: '5px' }}>
+                <div style={{ backgroundColor: 'white', minHeight: '100%', width: '100%', padding: '2px', margin: '5px' }}>
                     <div style={{ backgroundColor: 'white', width: '50%', padding: '2px', marginBottom: '20px' }}>
                         <h4>PDFEngine</h4>
                     </div>
@@ -96,8 +96,8 @@ const DemoComponent9 = () => {
                         <button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button>
                     </div>
                 </div>
-                <div style={{ backgroundColor: 'white', minHeight: '100%', width: '30%', padding: '5px' }}>
-                </div>
+                {/* <div style={{ backgroundColor: 'white', minHeight: '100%', width: '30%', padding: '5px' }}>
+                </div> */}
             </div>
         <br/>
         <br/>