Paperless: Front-end

[gabrielps]

Hi!

I was looking to change my personal paperless's front-end and while inspecting the code, I stumbled across this bit:
{# One day someone (maybe even myself) is going to write a proper web front-end for Paperless, and this is where it'll start. #}

Im willing to contibute with this. Im a full stack web developer (mainly focused on Java) with a fair share of knowledge in front-end development. Where should I start? Any guidelines?

Cheers!

[danielquinn]

Hey thanks for offering to help out! My primary concern is only that the UI be an improvement on what's there already. That is to say, so long as the UI doesn't do all the stuff the current UI does, it can't replace the current UI.

That's not to say that it has to be an all-or-nothing thing. Rather we could set it up so that as the new UI is being developed, Paperless could be released bit-by-bit with the new UI at /new-ui/ until we have feature parity, at which point the new UI would be moved to / and the old one restored to where it really should be, /admin/. At which point we can remove all the UI hackery I stuffed in there :-)

You should know that we have a fully functional REST API already setup that should go a long way to getting you set up. There's also paperless-desktop, which is react-based and written as a desktop application if you're looking for inspiration.

[danielquinn]

Oh, and in terms of pointers, you will at the very least want to be acquainted with how Django serves up pages. The comment you noted here is in documents/index.html which is pulled in by IndexView. That view however doesn't have a URL attached to it because it's not in use.

To set it up so that the view is actually visible somewhere, you'll need to wire it up in urls.py. Probably something like this will do the trick:

from documents.views import IndexView
...
url_patterns = [
  ....
  url(r"^new-ui/", IndexView.as_view()),
]

[gabrielps]

My primary concern is only that the UI be an improvement on what's there already

Absolutely. There are a some improvements that I'd like to see, but they would only extend the current functionality.

You should know that we have a fully functional REST API already setup

Yummy.

I'd like to build a SPA with Vue and Brunch if that's ok with everybody. I've developed with AngularJS and played a bit with React, but I still prefer Vue. I haven't thought of a css framework yet. If you have any preference just say it :)

you will at the very least want to be acquainted with how Django serves up pages

Probably. Is there another way to communicate in case I need some advice?

[danielquinn]

When choosing a framework, I generally opt for things that have stood the test of time. Understandably that's a difficult thing to do in the constantly changing world of javascript, but with CSS, it's probably best to stick with Sass.

Given the interest in having multiple translations, whatever choice you go with should also support some standardised method of submitting translations. The easiest way to do this is probably with Django's built-in support for i18n, where you can use tags like {% trans %} and {% blocktrans %}. You could probably just have Django dump relevant values into a hidden DOM element and then have your js reference these values when rendering the page.

One last note: Javascript and I go way back, but we've never been friends. If you're going to introduce frameworks and modules like Vue & Brunch, please include documentation regarding how to keep these bits up to date. I mean, documentation for non-Javascript people if you can. If you write something glorious and then disappear (as is common in Free software) it'd be nice if there were ample docs available to those who might pick up the mantle -- especially if that person is me.

[gabrielps]

it's probably best to stick with Sass

Oh. When I said framework I was thinking on something like Bootstrap. Althought I don't really like Bootstrap xD. I was a huge Boostrap fan in the old days but it feels too bloated right now. I will propose some frameworks and you can choose the one you aesthetically prefer :)

Regarding JS, I'll have no problem in making a MD document for installing and deploying.
Cheers :)

[schemen]

While I cannot help with it, I greatly support it :)

[stgarf]

This was starting to sound like the beginning of a nice new frontend UI for paperless, any partial progress to commit to a feature branch @gabrielps ?

[gabrielps]

Yeah, it sounded promising. But I'm having sooo little time :(
I'll try to push something in the next months, but can't promise anything.
If someone wants to start it, I'll join asap :D

El dom., 3 mar. 2019 a las 21:40, stgarf ([e-mail])
escribió:

This was starting to sound like the beginning of a nice new frontend UI
for paperless, any partial progress to commit to a feature branch
@gabrielps https://github.com/gabrielps ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/the-paperless-project/paperless/issues/330#issuecomment-469061864,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABLRiItDuJmvAlDIpVl_XSuK0TdcQl1_ks5vTDNAgaJpZM4S5qOI
.

[lbischof]

I found this: https://github.com/LukaszSolo/paperless-vue
I will try and get it running in the next few days and maybe we can all work together.

[stgarf]

@LukaszSolo do you feel it's worth sharing yet?