Prestashop: Migrate "Catalog > Categories" page

[colinegin]

Type: page
Part of Symfony migration project

Page structure

1 listing (grid) with

• row actions: view, edit, delete, toggle activation
• bulk actions: enable, disable, delete
• rows can be sorted in any order (drag-and-drop positions)

When user clicks on a category, it shows another category tree.

Todo:

• [x] 1st PR to migrate most of the things https://github.com/PrestaShop/PrestaShop/pull/10160
• [x] 2nd PR to handle QA validation and Code Review feedbacks https://github.com/PrestaShop/PrestaShop/pull/13014
• [x] [this](https://github.com/PrestaShop/PrestaShop/issues/10193#issuecomment-425871180): @todo in JS
• [x] [position filter bug](https://github.com/PrestaShop/PrestaShop/issues/11545): when I filter for category with position 2, I see category with position 3 https://github.com/PrestaShop/PrestaShop/pull/13484
• [x] [and that](https://github.com/PrestaShop/PrestaShop/issues/10747): search bug
• [x] ps_themecusto update needed
• [x] Add Helper Card https://github.com/PrestaShop/PrestaShop/pull/13234
• [x] Add Empty state (cancelled)

[eternoendless]

@colinegin @TristanLDD We need design cues for drag and drop

[TristanLDD]

You'll find the mockups on invision: (https://invis.io/8KNTVHAQM35#/317552429_Drag_And_Drop_BO)
Design specs are on Zeplin, ask me for an invitation to access the project.

[marionf]

When this page will be migrated, we will need to update the link in the ps_themecusto module

[colinegin]

@mickaelandrieu we need a better drag & drop for the categories listing page (see above Tristan's mockups)

[mickaelandrieu]

See https://github.com/PrestaShop/PrestaShop/pull/10160

[sarjon]

_Note: after migration dont forget to update @todo part of category-position-extension.js._

[matks]

1st PR merged because too big, another is coming to handle unprocessed code review feedbacks and QA validation

[matks]

Waiting for https://github.com/PrestaShop/PrestaShop/pull/10408 before doing the 2nd PR

[matks]

Status: we can do 2nd PR now 😄

[marionf]

Is it possible to solve this issue during migraiton: #11545 ?

[sarjon]

@marionf, of course we can. :) actually this issue is caused because positions are counted from 0, however in list they are displayed as position + 1.

I think what we can do is subtract -1 from position entered in filter input that way we get visually correct results.
Another way would be to show positions as is, this means start from 0.

What option sounds better for you?

[marionf]

I think substract -1 from position entered in filter is better :)

[marionf]

Drag & Drop for categories listing should be like this:

Mockup https://zpl.io/aMvjjj7

Currently it looks like this:

[sarjon]

@matks blocking issues for this is (as i see):

1. Implementation of Drag & Drop, needs good CSS skills, i can give it a shot
2. Bulk action column needs updating (not sure if that would affect grid itself)

[matks]

@sarjon For the drag-and-drop, give it a try, but if you can't get it done in less than hours leave it aside. We'll see if someone can get it or let it for CSS elite devs 😄

I tried to find in this issue and the related PR what was the issue with bulk action column but could not find it, can you refresh my memory ?

[marionf]

@matks Do you think it's possible to solve this issue #10747 during the migration of this page ?

[matks]

@marionf probably :) so I add it to the todo-list

[matks]

Created an issue for ps_themecusto https://github.com/PrestaShop/ps_themecusto/issues/10

[matks]

This page needs an Helper card and an Empty State: https://github.com/PrestaShop/PrestaShop/issues/10434

[sarjon]

Empty State for Categories is not available in invision yet. :/ Or at least in "Empty States BO" project.

[matks]

Empty state has been cancelled by UX team as it was not relevant anymore

[matks]

@sarjon All of the items of this page are completed ✅ this page is fully migrated 🎉 !

[sarjon]

this page is fully migrated

I wish. :trollface: We still have to deal with tinymce editor, to make it translatable. Are we keeping this TinyMce editor or will we use alternative?

[matks]

this page is fully migrated

I wish. :trollface: We still have to deal with tinymce editor, to make it translatable. Are we keeping this TinyMce editor or will we use alternative?

I have tricked @jolelievre in taking this task from me :trollface: