julbrs / montessori-ressources

Montessori Ressource web frontend based on ReactJS

Hi there 👋

montessori-ressources's Issues

No way to edit a nomenclature even if connected

Actually the auth header is not sent with the PUT request:

This case is linked with #28 because we must use the client in tools/ to do all backend request (it handle correctly the auth token)

Create the validation screens

Based on the issue montessori-ressources/api#4 we want to create dedicated screens and views for the validation process.

An idea can be to have a admin section with:

• the list of draft nomenclature
• for each draft nomenclature a validate action (when clicked the nomenclature is removed from the draft collection)
• accessible only for ADMIN user of the platform.

(Blocked by montessori-ressources/api#4)

Show Admin menu link only if your role is ADMIN

Actually all users logged in see the 'Admin' menu link.

I want only user with role=ADMIN to see this link.

we cannot delete multiple nomenclature at once

Here:

Result in dev tools:

Deploy application on the correct URL

Actually the webapp is deployed on https://montessori-ressources.surge.sh.

We want to deploy the application on https://montessori-ressources.net, for the Montessori conference end of March.

Documentation:

• Surge custom domain https://surge.sh/help/adding-a-custom-domain
• DNS Zone Editor for montessori-ressources.net is available on the cpanel tool (I have access to that)

@Allan-Nguyen agree with that ? Go for a deploy mid-March ?

Changes images

As a banner:

In 'a propos' instead of existing one:

Replace fetch() calls by axios call

Card count must be correct

On nomenclature list the card count must show the number of cards

Here it show 6 but it must show 1 because there is only one card/image in this case.

PDF: Clean up the 13x13 format

Goal is to have a clean PDF output:

• images must be shown in a 13cm x 13cm card (correctly resized, and the card must be always this size even if the image is not square. the image must be resized only not cropped and keep aspect ratio)
• the crops marks must crop outside of the image (actuallyit take 10px of the image, so it 'remove' a piece of the image on left and right side !)
• change the PDF size to Letter instead of A4 (because it is the most common paper in QC, and it's bigger than A4 more used in Europe)

Check if we can generate a pdf directly on React

Instead of having a endpoint that send a pdf, can we generate the pdf locally in React ?

Not possible to login on google anymore :D

Because facebookId must be unique event on google account and null is not unique !

study https://cloudinary.com/

to deliver lower res images

Check if we can render low size image for nomenclature list instead of full size

Actually we render full size image

Can we render low size (150X150px) to speed up ?

Hide not-yet developed part

The text section on the right is not yet developed. Maybe we can hide it for the first release ?

Thanks !

Thumbnail - show other image when hover

Currenlty the nomenclature list show only the first image as thumbnail.

The goal of this enhancement is to be able to show to the user the others images when hovering with the mouse.

Good idea of Sonia ;)

If issue during nomenclature creation then no warning

We must advise the user that an issue has occured during the nomenclature creation.

I am suggesting to add a notification if there is an issue, like the one we can see in admin panel:

Take for example the case #62

Render correctly on mobile

Currently on iphone8:

It must be usable

• fit the image
• fit the nomenclature box

Make a responsive template.

Modify the pdf output

Following Sonia screenshot:

• cutting line instead of black border
• an image with text
• same image without text
• a text cell below

https://www.ciaco.coop/imprimerie/traits-de-coupe-et-bords-perdus-trucs-astuces

Change meta description field

Currently:

Instead I suggest: Le site des ressources Montessori: nomenclatures...

Modify the download button (allow pdf customization)

Actually each nomenclature have a single download button.

We want to change that in order to allow customization of the rendered pdf.

In the documentation, we describe the 5 levels.

I suggest a template like that to select the desired level before getting the pdf:

The backend may need to be modified.

Implement the Download Counter

The goal is to implement the Download Counter:

It must start at 0, and add 1 each time the nomenclature pdf is shown.

The backend must be modified to allow this.

PDF: Setup a 14x14 format

Once the #85 is done we will have a clean 13x13 format.

We want to allow the end-user to be able to choose a 14cmx14cm card size for PDF generation:

• add a drop down list before generating the PDF to choose the size (13cmx13cm or 14cmx14cm)
• only 1 image per page with the 14x14 format
• keep the letter size

handle png image with alpha layer

We want to handle png image with alpha layer.

today the alpha layer is shown as black.

Example image:

PDF rendering / CORS issue

On my computer when sowing a PDF to print a nomenclature, using Safari 13 browser:

But it work after cleaning the cache.

I have the same issue with Chrome.

I don't have the same behavior with Firefox

Render better the nomenclature listing

Actually we have that:

We want that:

Show nomenclature by default in creation order

Most recent first !

Bonus: seems that clicking on Created Date to change the order does not work.

It may be needed to modify backend.

Add an analytic tracker

google analytics !

Add a Contact page with our email

New page "Contact"

text to define with Sonia

email is [email protected]

define if we need a mail box or mail transfer

check if the email is working (not working actually it seems)

Issue on image preview before upload

Sometimes it goes out 😄

Add Image Label + Nomenclature Name at creation

Currently the nomenclature creation is basically only the dropzone:

We suggest to add a way to:

• add a label on each image (currently always blob)
• add a nomenclature name

It will be probably necessary to modify the backend.

Add authentication layer

• Only auth user can download content
• Only auth user can create new content
• Only auth user can edit content

Depend on authentication implemented on the backend (see here)

improve mobile view

text must be put below image on listing if mobile view.

How users can edit a nomenclature to add / remove images ?

Do we want to allow that ?

Image Cropping

On the index page we show the image as a square:

If the image is not already with a 1:1 ratio then it is stretched.

We can implement a crop tool to force a 1:1 ratio at nomenclature creation

https://www.npmjs.com/package/react-image-crop

Do we want to force 1:1 ratio ?

Change for responsive images (mobile)

Images and cards don't fit in mobile

Rethink the admin painel for mobile devices

Currently the admin page doesn't fit in the mobile viewport:

Should we resize or think about a compact version?

Route to path /add is not working

When we click in "Créer" in navbar, it comes back to nomenclature page

Fleur scientifique out of the box !

We want to have the text in the box !

Rework the header and the footer

Now we are using bulma let's clean up the header and the footer.

Let's use a navbar for the header, and a footer for the footer.

Let's inspire yourself with the actual app here

Thanks !

If more than 10 nomenclatures we can't go on page 2

Here:

Probably something to do on backend.

Message "element does not exist" when deleting one nomenclature

Here:

it works but we have a message: "Element does not exist"

Allow edition of content

• At least names
• Not speaking of images.

Blocked by montessori-ressources/api#3

Hamburger navbar doesn't work (mobile)

The Storybook shows a onClick handler that sets the state to change the hamburger into a cross. We need to have some kind of handler that sets the active prop to true. That will change the hamburger to a cross whenever you click the component.

Something like this:
state = { active : false }

handleClick = () => { 
    const { active } = this.state;
    this.setState({ active: !active }); 

<Navbar.Burger
              active={this.state.active}
              onClick={this.handleClick} />

Info page

Add content to info page. Check with Sonia.

Switch text to FRENCH

All content must be in french ;)

Check if we can resize an image before upload

Does react is able to resize on the fly an image to max 1650x1650 (300dpi 14cm) ?

Finish a google auth button like the Facebook one

Actually we can connect using FB.

Can we do the same with Google ? check the package react-google-login to generate the google link.

Implement the like counter

The goal is to implement the like counter:

Each time a auth user is pressing a like then it add +1 to the nomenclature like. Each user must be able to like only once a nomenclature. (like star a project on github)

The backend must be modified for this.

Render correctly the Download button

How to reproduce

List nomenclatures

Current behaviour

• You see the pdf when you click on Print me

Expected behaviour

• See the pdf when click on Download
• Remove the Print me link

Think about implement a global state

Need to think about it. Is it mandatory ?