search

GroceriStar / showcase

Simple page with Grocery List cards
https://boring-benz-76e55f.netlify.com/
GNU General Public License v3.0
1 stars 5 forks source link

pdf export v2 #141

Closed atherdon closed 5 years ago

atherdon commented 5 years ago

so we have our current version and i'm ok with that. but i want to have a second pdf generator that will draw a borders for each of deparment with ingredients.

basically i want something similar to this: http://templatelab.com/wp-content/uploads/2018/03/grocery-list-template-25.jpg https://cdn.vertex42.com/ExcelTemplates/Images/grocery-checklist.png

you don't need to delete the previous version. i want to have 2 buttons for generate pdf, that will have 2 different pdf files in the end

atherdon commented 5 years ago

81

atherdon commented 5 years ago

143

atherdon commented 5 years ago

@vadim9999 i like how the second version of pdf file looks. we should keep it. But i also want to have a "boxes" related to departments, because this will make look it similar to default shopping lists and will reduce number of pages. as this package created with help of using flexboxes - you can easily manipulate this boxes.

again, i create a course about it - so maybe i need to share it with you and you'll learn how it works.

tell me what do you think.

bth, here a few simple examples of how flexboxes works, so you can incorporate it into a third, separated layout. it's should be hard, if you'll stuck - buzz me, please. https://codepen.io/machal/pen/JoqxJe https://codepen.io/imohkay/pen/gpard

vadim9999 commented 5 years ago

I think it's a bug image margin of blocks is 0 px

atherdon commented 5 years ago

by bug you mean that it's creating lines instead of boxes, right?

atherdon commented 5 years ago

i also see that you generate a lot of pdfs so far :) i'll commit soon a solution that might help us with debugging

atherdon commented 5 years ago

can you also create a PR with your changes?

vadim9999 commented 5 years ago

appear space between boxes

atherdon commented 5 years ago

just published an update, where we can render(i.e. preview) layout that we can have in our pdf file. just navigate to '/pdf' route. i just copy-pasted basic layout, so feel free to replace it with the layout that you're trying to do

atherdon commented 5 years ago

please move pdf layout that you're working on to '/pdf' view and i'll be able to debug it too

vadim9999 commented 5 years ago

Ok, In https://github.com/GroceriStar/showcase/pull/145

atherdon commented 5 years ago

i also reading issues at react-pdf package, so maybe you're right and we catch a bug. diego currently working on come "crazy borders", you can see example here: https://github.com/diegomura/react-pdf/pull/433 so if we'll not be able to solve it soon - we'll just wait for the next release

and i also see that other people reporting bugs too. as this report: Quote1546612053568.pdf

atherdon commented 5 years ago

ok, i can view your changes right now. btw, open a dev console and you'll see that we have some errors here

atherdon commented 5 years ago

let's split this task into sections. instead of rendering all items(departments) by using RenderList3 component - can we render 2 blocks with static text, in order to see where we have an issue?

atherdon commented 5 years ago

at RenderList3 i see 2 components with same name import List3, { Item } from '../List3/List3'; and const Lists3 = ({

vadim9999 commented 5 years ago

It's not the same there List3 and there Lists3

atherdon commented 5 years ago

gotcha. just was confused... hold on for some time - i'll check it on my own side

vadim9999 commented 5 years ago

I also see errors 

 Warning: <TEXT /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
    in TEXT (at PDFView.js:41)
    in VIEW (at PDFView.js:40)
    in PAGE (at PDFView.js:39)
    in DOCUMENT (created by Document$$1)
    in Document$$1 (at PDFView.js:38)
    in MyDocument (created by Route)
    in Route (at Router.js:32)
    in Switch (at Router.js:28)
    in Router (created by BrowserRouter)
    in BrowserRouter (at Router.js:27)
    in Router (at src/index.js:14)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:13)
function.console.(anonymous function) @ index.js:1446
warningWithoutStack @ react-dom.development.js:520
warning @ react-dom.development.js:2742
createElement @ react-dom.development.js:7914
createInstance @ react-dom.development.js:9117
completeWork @ react-dom.development.js:16540
completeUnitOfWork @ react-dom.development.js:18925
performUnitOfWork @ react-dom.development.js:19132
workLoop @ react-dom.development.js:19143
renderRoot @ react-dom.development.js:19228
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
scheduleRootUpdate @ react-dom.development.js:20415
updateContainerAtExpirationTime @ react-dom.development.js:20441
updateContainer @ react-dom.development.js:20509
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20820
(anonymous) @ react-dom.development.js:20974
unbatchedUpdates @ react-dom.development.js:20292
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20970
render @ react-dom.development.js:21037
./src/index.js @ index.js:12
__webpack_require__ @ bootstrap:782
fn @ bootstrap:150
0 @ PDFView.js:71
__webpack_require__ @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1446 Warning: The tag <TEXT> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
    in TEXT (at PDFView.js:41)
    in VIEW (at PDFView.js:40)
    in PAGE (at PDFView.js:39)
    in DOCUMENT (created by Document$$1)
    in Document$$1 (at PDFView.js:38)
    in MyDocument (created by Route)
    in Route (at Router.js:32)
    in Switch (at Router.js:28)
    in Router (created by BrowserRouter)
    in BrowserRouter (at Router.js:27)
    in Router (at src/index.js:14)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:13)
atherdon commented 5 years ago

to be honest - i think it's not a bug, but our stuff. we just need to go by simple steps and see how it'll be displayed.

we just have a lot of wrappers. Like View inside View, inside View inside Text, etc.

I'm sure if we'll update it and apply right styles - everything will work. because at your example - we're applying flex styles, without display:flex and also you set flex-direction not to child, but to grandchild and this wouldn't work.

try to figure it our on much simple example. and fetch my latest changes - maybe it'll make

and this is my course, if you need it. with cool examples: https://chickenkyiv.github.io/flexbox/demo.html#/

atherdon commented 5 years ago

buzz me if you'll need my help - i'm switching into other task

vadim9999 commented 5 years ago

For rendering pdf in DOM is component PDFViewer but when I add in code it's completly stuck my computer, RAM space is full and continue swapping on hdd.

atherdon commented 5 years ago

ok, understand - this project is loading very slow i agree. we can set it on pause if you want. tell me what do you think

vadim9999 commented 5 years ago

yes we can pause

atherdon commented 5 years ago

ok - let's do it. maybe we'll make it render quickly in next few days

atherdon commented 5 years ago

if you have changes - push them in PR

vadim9999 commented 5 years ago

ok, I have fixed rendering problem in PR https://github.com/GroceriStar/showcase/pull/146

atherdon commented 5 years ago

a bit confused - all is working fine?

vadim9999 commented 5 years ago

No, I just fixed pdf rendering, the issue with space between boxes is not fixed

atherdon commented 5 years ago

got it, thanks for clarifying

atherdon commented 5 years ago

tell me if you need some other task. we can try to find out why this project loading slow..

vadim9999 commented 5 years ago

ok, lets finding why it's so slow. but how?

atherdon commented 5 years ago

check the issues - i leave some clues :)

atherdon commented 5 years ago

i think we both agree that it's hard to manage all code inside of this repository. right now i'm moving away files, related to pdf functionality into separated places. where we'll be able to test it without big issues or without complex project structure. components will be here: https://github.com/GroceriStar/pdf-export-component create-react-app here: https://github.com/GroceriStar/react-print-pdf

vadim9999 commented 5 years ago

ok

atherdon commented 5 years ago

@vadim9999 i was bored during moving components between projects - if you want to jump into it - tell me

vadim9999 commented 5 years ago

ok, I can help you

vadim9999 commented 5 years ago

@atherdon what components left to move?

atherdon commented 5 years ago

replying at https://github.com/GroceriStar/pdf-export-component/issues/7#issuecomment-452322702

atherdon commented 5 years ago

i propose to close this task and continue to chat at that separated place, tell me if this is ok for you

vadim9999 commented 5 years ago

yes