Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

PUI Template editor #6541

Merged
merged 33 commits into from
Mar 4, 2024
Merged

PUI Template editor #6541

merged 33 commits into from
Mar 4, 2024

Conversation

wolflu05
Copy link
Contributor

@wolflu05 wolflu05 commented Feb 21, 2024 •
edited

This is a first draft for a label editor. I tried to keep it generic so that it can be easily adapted when the API changes (ref #5841).

My goal in sometime also is to provide a visual label designer and maybe also a report designer so that people can easily setup their templates.

Here is a little sneak peak of what its looking like currently:

out.mp4

Warning

If you want to try the netlify preview, be aware that it won't work with the demo server due to cors issues with the /media path (ref #5948)

This PR now also contains a few minor fixes in other components:

  • Added a SplitButton component
  • ActionDropdown disabled was renamed to hidden and a real disabled state was added (was using that before, but now refactored that so I'm using the new SplitButton component now, but I think it makes sense to still keep that rename even that I'm not using it anymore)
  • DetailDrawerLink component was added to link between modals and keep track if there was a modal opened before to only then show the modal back button
  • RelatedModelField dont make an API request if the pk is an empty string
  • add a StandaloneField component to use API form fields without a form around, but just as a react controlled component

TODO

Edit tasklist title
Beta Give feedback Tasklist TODO, more options

Delete tasklist

Delete tasklist block?
Are you sure? All relationships in this tasklist will be removed.
  1. use a library for pdf previewing instead of iframe => seems like an iframe nevertheless provides the best control
    Options
  2. add template object item select
    Options
  3. improve code mirror syntax highlight
    Options
  4. fix icons
    Options
  5. rethink user experience; updating the preview also changes the template => for now a warning on the first preview is shown, later if there is an post api point where no schema modification is needed, that is used
    Options
  6. make label sizes adjustable via UI
    Options

Future ideas

Edit tasklist title
Beta Give feedback Tasklist Future ideas, more options

Delete tasklist

Delete tasklist block?
Are you sure? All relationships in this tasklist will be removed.
  1. add graphical label builder
    Options
  2. add graphical report builder
    Options
  3. easily upload report assest via drag and drop in code editor
    Options
  4. add ability to edit report snippets (maybe also the ability to switch between them)
    Options
  5. add custom template filters api form field component to visually edit template filters
    Options
  6. codemirror infer available django context variables
    Options
  7. add vertical resize drag handler
    Options
  8. add printcss preview type (https://printcss.live/)
    Options
  9. define a custom language for django templates to be more accurate (example: https://github.com/codemirror/lang-liquid)
    Options
  10. ??? maybe switch to monaco ???
    Options
  11. allow previewing without saving the template (ref: Refactor tables and API for reports and labels #5841 (comment))
    Options
  12. show warning if there are unsaved changes before closing the drawer
    Options

@netlify Netlify
Copy link

netlify bot commented Feb 21, 2024 •
edited

✅ Deploy Preview for inventree-web-pui-preview ready!

Name Link
🔨 Latest commit 32c1303
🔍 Latest deploy log https://app.netlify.com/sites/inventree-web-pui-preview/deploys/65e2f6635f98970008e9f455
😎 Deploy Preview https://deploy-preview-6541--inventree-web-pui-preview.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse		 1 paths audited
Performance: 100 (no change from production)
Accessibility: 86 (no change from production)
Best Practices: 92 (no change from production)
SEO: 70 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

@wolflu05 wolflu05 added Platform UI Related to the React based User Interface report Report generation labels Feb 21, 2024
@matmair
Copy link
Contributor

matmair commented Feb 21, 2024

This is very impressive @wolflu05! I was not aware of code mirror - is this editor able to provide code completion similar to IntelliSense?

@wolflu05
Copy link
Contributor Author

From what I read, it should be possible, but haven't taken a deep look yet, will do that tomorrow when trying to add a language parser for Django templates. But adding the available template context is a big task that I probably don't do in this PR. For that it would be good to have the the new API inplace. Maybe we then also have a way of exporting a report without overriding a template on disk, but provide the template in the body. We could then use the debug tag to get all available variables in context and somehow convert that to the codemirror code recommendations.

I was not aware of code mirror

Actually I was asking me if we should go with monaco or codemirror (you actually already suggested codemirror here 😃 #2777 (comment) ). The issue with Monaco is that it's pretty complex to setup and the bundle size also is huge, at least where I tried it about 1,5 years ago. And I read about codemirror a while ago and wanted to try it out, I'll see how it can be configured regarding language parsing tomorrow. But the way I setup the interface it will be really easy to swap codemirror out with Monaco or even provide both.

@matmair
Copy link
Contributor

matmair commented Feb 21, 2024

Sounds reasonable, this PR is already a very very good. Maybe we need to ship a few hints to get ppl to try PUI in 0.14.0 to use these great additions. The Admin Center is really shaping to be a great experience.

but provide the template in the body

That should probably be part of the refactor of labels/reports, should be simple.

you actually already suggested codemirror here

That must have been suggested by a former colleague who did UX design. He helped out with designing the PUI prototype and suggested a lot of things in that timeframe.

@wolflu05
Copy link
Contributor Author

The first draft of this is now finished, and I think it would make sense to deliver this already.

  • Regarding syntax highlighting, I'm now using the liquid language which already is supported by code mirror. It is very similar to django templates and provides us a good starting point without too much effort. We can later still decide to build our own code mirror language where the liquid language source code is a good starting point.
  • I now implemented a basic hover menu which adds some information to template tags (currently only qrcode and barcode) which can be extended. But for context, I think we definitely need to refactor the API, and provide a generic way to expose the available context via API to the frontend.
  • I now added a second button Reload Preview which does only the reload part and doesn't override the template on the server. But however optimally it would be good to have an API endpoint to send the template and get a pdf as response without needing to touch the templates, but that's again something for Refactor tables and API for reports and labels #5841

The only thing that doesn't work great is that templates get moved to the user custom folder when editing an inventree provided template, and on restart they are not present in the inventree folder, so they get copied again and we end up with duplicate templates, our modified ones and the newly initialized ones. @inventree/maintainer what should we do here for now?

So please let me know what you think about this, this would be ready for review now.

@wolflu05 wolflu05 marked this pull request as ready for review February 22, 2024 12:47
@matmair
Copy link
Contributor

matmair commented Feb 22, 2024

Seems like a bug in file handling; the whole template copy code is very manual and duplicated; I will try to address this in 0.15.0

@wolflu05
Copy link
Contributor Author

You want to trackl the label/report app refactor? I would really appreciate that. That would add so much possibilities for the template editor.

@matmair
Copy link
Contributor

matmair commented Feb 22, 2024

I am already doing the storages refactor and adding S3 so this is just a logical continuance

@SchrodingersGat
Copy link
Member

@wolflu05 INCREDIBLE! I have long dreamed of this (the linked issue was created way back in 2022) - but this was never going to be possible until we built out PUI to this point. I really like the layout and flow from your video (still have to test it myself). But it is pretty much exactly what I imagined.

This is going to be a huge improvement to the whole label / report process. Very well done :)

@SchrodingersGat SchrodingersGat added enhancement This is an suggested enhancement or new feature feature labels Feb 23, 2024
@SchrodingersGat
Copy link
Member

Even though there are large similarities between labels and reports, I think that it might be a good idea to separate them into separate panels, e.g. Label Templates and Report Templates rather than splitting at the secondary level?

@SchrodingersGat
Copy link
Member

This button seems unnecessary - the x on the right already closes the modal, as does clicking outside the modal:

image

@SchrodingersGat
Copy link
Member

@wolflu05 it would be great to add some documentation around using this new editor - and a good chance to start demonstrating the new interface in the docs too.

Before this is merged in (after 0.14.0) some docs would be appreciated ;)

@wolflu05
Copy link
Contributor Author

wolflu05 commented Mar 1, 2024

On what page should we put that?

@SchrodingersGat
Copy link
Member

You could just make a new sub-page here:

https://docs.inventree.org/en/latest/report/report/

Probably worth waiting until this is "feature complete" so you don't have to rework the docs

@LavissaWoW LavissaWoW mentioned this pull request Mar 2, 2024
Merged
5 tasks
@wolflu05
Copy link
Contributor Author

wolflu05 commented Mar 2, 2024

@SchrodingersGat I merged in master and added some basic documentation. Please let me know if that's sufficient for now to explain the basic working of the template editor until we add more features to it.

@SchrodingersGat
Copy link
Member

@wolflu05 looks like a great start, thanks :) I'm happy to proceed with that, and improve as we go where necessary!

@matmair
Copy link
Contributor

matmair commented Mar 4, 2024

So this can be merged into main?

@wolflu05
Copy link
Contributor Author

wolflu05 commented Mar 4, 2024

Yes 👍

@SchrodingersGat
Copy link
Member

@wolflu05 this is a significant and exciting new feature - would you like to write a short blog post about it? No pressure :)

@SchrodingersGat
Copy link
Member

Thanks for this amazing contribution 🙂

@SchrodingersGat SchrodingersGat merged commit e4d2e2f into inventree:master Mar 4, 2024
22 checks passed
@wolflu05
Copy link
Contributor Author

wolflu05 commented Mar 4, 2024

A blog post is a good idea, but not sure on how to write one. I never did this before.

And secondly, this is now only in latest. Does this make sense yet?

@matmair
Copy link
Contributor

matmair commented Mar 4, 2024

Blog posts are just markdown files here - if you create a PR you get a preview

@SchrodingersGat
Copy link
Member

And secondly, this is now only in latest. Does this make sense yet?

I think it is a good idea to get people interested in the new feature and PUI in general

@wolflu05 wolflu05 deleted the label-editor branch March 5, 2024 07:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@matmair matmair matmair left review comments

@SchrodingersGat SchrodingersGat Awaiting requested review from SchrodingersGat SchrodingersGat is a code owner

Assignees
No one assigned
Labels
enhancement This is an suggested enhancement or new feature feature Platform UI Related to the React based User Interface report Report generation
Projects
None yet
Milestone
0.15.0
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@wolflu05 @matmair @SchrodingersGat