safet.purkovic
/
PDFEngineDemoUI
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 0 Wiki Activité
Parcourir la source

Added redux

master
Igor_Budimski il y a 3 ans
Parent
4167d42634
révision
d634193ed4
8 fichiers modifiés avec 270 ajouts et 168 suppressions
Vue séparée Afficher les stats Diff
  1. 3
    2
      package.json
  2. 24
    0
      src/actions/index.js
  3. 12
    1
      src/index.js
  4. 10
    0
      src/reducers/index.js
  5. 11
    0
      src/reducers/isLogged.js
  6. 13
    0
      src/reducers/user.js
  7. 2
    2
      src/views/dashboard/Dashboard.js
  8. 195
    163
      src/views/demoComponent/DemoComponent1.js

+ 3
- 2
package.json Voir le fichier

@@ -38,9 +38,10 @@
"react": "^17.0.2",
"react-app-polyfill": "^2.0.0",
"react-dom": "^17.0.2",
"react-redux": "^7.2.3",
"react-redux": "^7.2.6",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1",
"sass": "^1.32.8"
},
"devDependencies": {

+ 24
- 0
src/actions/index.js Voir le fichier

@@ -0,0 +1,24 @@
export const setUserName =(value)=>{
return {
type: 'SET_USERNAME',
payload: value
}
}

export const getUserName =()=>{
return {
type: 'GET_USERNAME'
}
}

export const setLogged =()=>{
return {
type: 'SIGN_IN'
}
}

export const setNotLogged =()=>{
return {
type: 'SIGN_OUT'
}
}

+ 12
- 1
src/index.js Voir le fichier

@@ -10,10 +10,21 @@ import * as serviceWorker from './serviceWorker';
import { icons } from './assets/icons'

import { Provider } from 'react-redux'
import store from './store'
import { createStore, applyMiddleware } from 'redux';
import allReducer from './reducers/index.js';
import thunk from 'redux-thunk';

React.icons = icons


let store = createStore(
allReducer,
applyMiddleware(thunk)
+ window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

//store.subscribe(() => console.log(store.getState(allReducer)));

ReactDOM.render(
<Provider store={store}>
<App/>

+ 10
- 0
src/reducers/index.js Voir le fichier

@@ -0,0 +1,10 @@
import userReducer from "./user";
import isLoggedReducer from "./isLogged";
import { combineReducers } from "redux";

const allReducers = combineReducers({
user: userReducer,
isLogged: isLoggedReducer
})

export default allReducers;

+ 11
- 0
src/reducers/isLogged.js Voir le fichier

@@ -0,0 +1,11 @@
const loggedReducer = (state = false, action) => {
switch (action.type) {
case 'SIGN_IN':
return state = true
case 'SIGN_OUT':
return state = false;
default:
return state;
}
}
export default loggedReducer;

+ 13
- 0
src/reducers/user.js Voir le fichier

@@ -0,0 +1,13 @@
const userReducer = (state = null, action) => {
switch (action.type) {
case 'SET_USERNAME':
return state = action.payload;

case 'GET_USERNAME':
return state;

default:
return state;
}
}
export default userReducer;

+ 2
- 2
src/views/dashboard/Dashboard.js Voir le fichier

@@ -13,7 +13,7 @@ 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'

@@ -321,7 +321,7 @@ const Dashboard = () => {
</CRow>
<div code="br-hidechildren">
<br />
<button onClick={PDFEngine}>Test</button>
{/* <button onClick={PDFEngine}>Test</button> */}
<button>Test button 2</button>
<p className="br-color">Title</p>
<p className="br-color">first row</p>

+ 195
- 163
src/views/demoComponent/DemoComponent1.js Voir le fichier

@@ -1,4 +1,4 @@
import React, { lazy, useState } from 'react';
import React, { lazy, useState, useContext } from 'react';
import {
CBadge,
CButton,
@@ -15,6 +15,11 @@ import {
import CIcon from '@coreui/icons-react';
import { PDFEngine } from 'PDFEngine';

import { useDispatch } from 'react-redux';
import { setUserName, setLogged, setNotLogged } from '../../actions';
import { ReactReduxContext } from 'react-redux';


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

@@ -22,9 +27,22 @@ const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))
const DemoComponent1 = () => {

const list = [{ name: "Four Cards" }, { name: "Chart1" }, { name: "Chart1 Buttons" }, { name: "Chart1 Legend" }, { name: "Chart2" }, { name: "Table" }];

let textInput = React.createRef();
//const user = useSelector(state => state.user);
const dispach = useDispatch();
const { store } = useContext(ReactReduxContext);


const handleSubmit = (event) => {
event.preventDefault();
dispach(setUserName(textInput.current.value));
}

const [checkedState, setCheckedState] = useState(
new Array(list.length).fill(false)
);

const exec = () => {
const pdf = new PDFEngine();
pdf.execute();
@@ -41,6 +59,10 @@ const DemoComponent1 = () => {
setCheckedState(updatedCheckedState);
};

const GetStore = () => {
console.log(store.getState());//ovim pozivom dobijas podatke iz store-a
}

return (
<>
<div code="br-hide">
@@ -52,9 +74,19 @@ const DemoComponent1 = () => {
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Print view</button>
</div>
<form style={{margin: '15px'}} onSubmit={handleSubmit}>
<label>
Name:
<input ref={textInput} type="text" onChange={null} />
</label>
<input type="submit" value="Submit" />
<button onClick={() => dispach(setLogged())}>Log in</button>
<button onClick={() => dispach(setNotLogged())}>Log out</button>
<button onClick={() => GetStore()}>Log Store</button>
</form>
</div>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
<p style={{paddingTop: "5px", fontWeight: "bold"}}>Select Elements to hide</p>
<p style={{ paddingTop: "5px", fontWeight: "bold" }}>Select Elements to hide</p>
<ul>
{list.map(({ name }, index) => {
return (
@@ -118,9 +150,9 @@ const DemoComponent1 = () => {
</div>
</CCol>
</CRow>
<MainChartExample style={{ height: '300px', marginTop: '40px' }} />
</CCardBody>
<div code={checkedState[3] === true ? "br-hide" : null}>
<CCardFooter>
@@ -180,186 +212,186 @@ const DemoComponent1 = () => {
</CCard>
</div>
<CRow>
<CCol>
<div code={checkedState[4] === true ? "br-hide" : null}>
<CCard>
<CCardHeader>
Traffic {' & '} Sales
</CCardHeader>
<CCardBody>
<CRow>
<CCol xs="12" md="6" xl="6">
<div code={checkedState[4] === true ? "br-hide" : null}>
<CCard>
<CCardHeader>
Traffic {' & '} Sales
</CCardHeader>
<CCardBody>
<CRow>
<CCol xs="12" md="6" xl="6">

<CRow>
<CCol sm="6">
<CCallout color="info">
<small className="text-muted">New Clients</small>
<br />
<strong className="h4">9,123</strong>
</CCallout>
</CCol>
<CCol sm="6">
<CCallout color="danger">
<small className="text-muted">Recurring Clients</small>
<br />
<strong className="h4">22,643</strong>
</CCallout>
</CCol>
</CRow>
<CRow>
<CCol sm="6">
<CCallout color="info">
<small className="text-muted">New Clients</small>
<br />
<strong className="h4">9,123</strong>
</CCallout>
</CCol>
<CCol sm="6">
<CCallout color="danger">
<small className="text-muted">Recurring Clients</small>
<br />
<strong className="h4">22,643</strong>
</CCallout>
</CCol>
</CRow>

<hr className="mt-0" />
<hr className="mt-0" />

<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Monday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="34" />
<CProgress className="progress-xs" color="danger" value="78" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Tuesday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="56" />
<CProgress className="progress-xs" color="danger" value="94" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Wednesday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="12" />
<CProgress className="progress-xs" color="danger" value="67" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Thursday
</span>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Monday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="34" />
<CProgress className="progress-xs" color="danger" value="78" />
</div>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="43" />
<CProgress className="progress-xs" color="danger" value="91" />
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Tuesday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="56" />
<CProgress className="progress-xs" color="danger" value="94" />
</div>
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Friday
</span>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Wednesday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="12" />
<CProgress className="progress-xs" color="danger" value="67" />
</div>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="22" />
<CProgress className="progress-xs" color="danger" value="73" />
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Thursday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="43" />
<CProgress className="progress-xs" color="danger" value="91" />
</div>
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Saturday
</span>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Friday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="22" />
<CProgress className="progress-xs" color="danger" value="73" />
</div>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="53" />
<CProgress className="progress-xs" color="danger" value="82" />
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Saturday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="53" />
<CProgress className="progress-xs" color="danger" value="82" />
</div>
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Sunday
</span>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Sunday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="9" />
<CProgress className="progress-xs" color="danger" value="69" />
</div>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="9" />
<CProgress className="progress-xs" color="danger" value="69" />
<div className="legend text-center">
<small>
<sup className="px-1"><CBadge shape="pill" color="info">&nbsp;</CBadge></sup>
New clients
&nbsp;
<sup className="px-1"><CBadge shape="pill" color="danger">&nbsp;</CBadge></sup>
Recurring clients
</small>
</div>
</div>
<div className="legend text-center">
<small>
<sup className="px-1"><CBadge shape="pill" color="info">&nbsp;</CBadge></sup>
New clients
&nbsp;
<sup className="px-1"><CBadge shape="pill" color="danger">&nbsp;</CBadge></sup>
Recurring clients
</small>
</div>
</CCol>
</CCol>

<CCol xs="12" md="6" xl="6">
<CCol xs="12" md="6" xl="6">

<CRow>
<CCol sm="6">
<CCallout color="warning">
<small className="text-muted">Pageviews</small>
<br />
<strong className="h4">78,623</strong>
</CCallout>
</CCol>
<CCol sm="6">
<CCallout color="success">
<small className="text-muted">Organic</small>
<br />
<strong className="h4">49,123</strong>
</CCallout>
</CCol>
</CRow>
<CRow>
<CCol sm="6">
<CCallout color="warning">
<small className="text-muted">Pageviews</small>
<br />
<strong className="h4">78,623</strong>
</CCallout>
</CCol>
<CCol sm="6">
<CCallout color="success">
<small className="text-muted">Organic</small>
<br />
<strong className="h4">49,123</strong>
</CCallout>
</CCol>
</CRow>

<hr className="mt-0" />
<div className="progress-group mb-4">
<div className="progress-group-header">
<CIcon className="progress-group-icon" name="cil-user" />
<span className="title">Male</span>
<span className="ml-auto font-weight-bold">43%</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="warning" value="43" />
</div>
</div>
<div className="progress-group mb-5">
<div className="progress-group-header">
<CIcon className="progress-group-icon" name="cil-user-female" />
<span className="title">Female</span>
<span className="ml-auto font-weight-bold">37%</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="warning" value="37" />
<hr className="mt-0" />
<div className="progress-group mb-4">
<div className="progress-group-header">
<CIcon className="progress-group-icon" name="cil-user" />
<span className="title">Male</span>
<span className="ml-auto font-weight-bold">43%</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="warning" value="43" />
</div>
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<CIcon className="progress-group-icon" name="cil-globe-alt" />
<span className="title">Organic Search</span>
<span className="ml-auto font-weight-bold">191,235 <span className="text-muted small">(56%)</span></span>
<div className="progress-group mb-5">
<div className="progress-group-header">
<CIcon className="progress-group-icon" name="cil-user-female" />
<span className="title">Female</span>
<span className="ml-auto font-weight-bold">37%</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="warning" value="37" />
</div>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="success" value="56" />
<div className="progress-group">
<div className="progress-group-header">
<CIcon className="progress-group-icon" name="cil-globe-alt" />
<span className="title">Organic Search</span>
<span className="ml-auto font-weight-bold">191,235 <span className="text-muted small">(56%)</span></span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="success" value="56" />
</div>
</div>
</div>

<div className="divider text-center">
<CButton color="link" size="sm" className="text-muted">
<CIcon name="cil-options" />
</CButton>
</div>
<div className="divider text-center">
<CButton color="link" size="sm" className="text-muted">
<CIcon name="cil-options" />
</CButton>
</div>

</CCol>
</CRow>
</CCol>
</CRow>

</CCardBody>
</CCard>
</CCardBody>
</CCard>
</div>
<div>
<table className="table table-hover table-outline mb-0 d-sm-table" code={checkedState[5] === true ? "br-hide" : null}>

Écrire Aperçu
Chargement…
Annuler
Enregistrer