Categories: Improved Management

[NicolasSiver]

Changes:

• Tree view
• Tree sorting

Summary:

• Added vendor script for sortable (License MIT)
• Redesigned Categories presentation
• Improved overall user experience
• Render responsibility moved from server to client side (Recursion)
• Changes: filter filter:admin.categories.get now is coming through socket, not http server, so It doesn't carry request and response objects.

Known bugs:

• Dragging full tree (not just single element) could produce non-critical JS console error: Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent. for onDragOver event. It's just a small destruction to whom like to investigate developer tools ;)

Preview:

[julianlam]

Woo hoo! This is exciting, thanks @NicolasSiver! Going to check this out tonight. 😄

[julianlam]

@psychobunny @NicolasSiver added a vars.less file. Do you approve of this, or should he add these values to bootstrap/variables.less?

[julianlam]

This inline HTML should be in a partial. I noticed you actally removed it from categories.tpl because it is parsed on the client-side, but especially in this case, we should keep it in a partial. templates.parse accepts a path as well, so you can just do templates.parse('partials/admin/categoryRow.tpl');, for example.

[NicolasSiver]

Yes, It will be much better to have template in external file. I didn't know about such option.
Does template.js use cache for template fetching? Is there any type of pre-fetching of template?
My concern, will it work Ok in iteration? I mean, if this solution produce 20 HTTP requests for list of 20 items... current solution will be better still.

[julianlam]

There is caching in the template engines, yes :)

On Tue, 2 Jun 2015 01:11 Nicolas Siver notifications@github.com wrote:

In public/src/admin/manage/categories.js
#3199 (comment):

•    list.appendTo(container);
  

•   sortables[parentId] = Sortable.create(list[0], {
  

•       group: 'cross-categories',
  

•       animation: 150,
  

•       handle: '.icon',
  

•        dataIdAttr: 'data-cid',
  

•       ghostClass: "placeholder",
  

•       onAdd: itemDidAdd,
  

•       onEnd: itemDragDidEnd
  

•   });
  

• }

• function renderListItem(categoryEntity){

•    var listItem = $(templates.parse(
  

•        '<div class="row">' +
  

Yes, It will be much better to have template in external file. I didn't
know about such option.
Does template.js use cache for template fetching? Is there any type of
pre-fetching of template?
My concern, will it work Ok in iteration? I mean, if this solution produce
20 HTTP requests for list of 20 items... current solution will be better
still.

—
Reply to this email directly or view it on GitHub
https://github.com/NodeBB/NodeBB/pull/3199/files#r31493243.

[NicolasSiver]

@julianlam are you sure, that It accepts urls?

Uncaught Error: Syntax error, unrecognized expression: admin/partials/categories/category-item.tpl

[julianlam]

are you passing in a string?

On Tue, 2 Jun 2015 13:43 Nicolas Siver notifications@github.com wrote:

In public/src/admin/manage/categories.js
#3199 (comment):

•    list.appendTo(container);
  

•   sortables[parentId] = Sortable.create(list[0], {
  

•       group: 'cross-categories',
  

•       animation: 150,
  

•       handle: '.icon',
  

•        dataIdAttr: 'data-cid',
  

•       ghostClass: "placeholder",
  

•       onAdd: itemDidAdd,
  

•       onEnd: itemDragDidEnd
  

•   });
  

• }

• function renderListItem(categoryEntity){

•    var listItem = $(templates.parse(
  

•        '<div class="row">' +
  

@julianlam https://github.com/julianlam are you sure, that It accepts
urls?

Uncaught Error: Syntax error, unrecognized expression:
admin/partials/categories/category-item.tpl

—
Reply to this email directly or view it on GitHub
https://github.com/NodeBB/NodeBB/pull/3199/files#r31549747.

[NicolasSiver]

    var listItem = $(templates.parse(
        '/admin/partials/categories/category-item.tpl',
        categoryEntity
    ));

[NicolasSiver]

Also what link is correct? Partial template placed under:

src/views/admin/partials/categories/category-item.tpl

For now, for major amount of links, I'm receiving 404 (I'm trying different ones, to find correct path...). Is it really possible to get template from client-side?

[julianlam]

Yes. My apologies for the bad linking as I'm afk:

https://github.com/NodeBB/NodeBB/blob/master/public/src/admin/manage/category.js

See line 200

On Tue, 2 Jun 2015 13:59 Nicolas Siver notifications@github.com wrote:

In public/src/admin/manage/categories.js
#3199 (comment):

•    list.appendTo(container);
  

•   sortables[parentId] = Sortable.create(list[0], {
  

•       group: 'cross-categories',
  

•       animation: 150,
  

•       handle: '.icon',
  

•        dataIdAttr: 'data-cid',
  

•       ghostClass: "placeholder",
  

•       onAdd: itemDidAdd,
  

•       onEnd: itemDragDidEnd
  

•   });
  

• }

• function renderListItem(categoryEntity){

•    var listItem = $(templates.parse(
  

•        '<div class="row">' +
  

Also what link is correct? Partial template placed under:

src/views/admin/partials/categories/category-item.tpl

For now, for major amount of links, I'm receiving 404. Is it really
possible to get template from client-side?

—
Reply to this email directly or view it on GitHub
https://github.com/NodeBB/NodeBB/pull/3199/files#r31551352.

[julianlam]

I noticed "sortable" got added as a library. We already have sortable as introduced via jQuery UI... does that not work?

[NicolasSiver]

@julianlam variables.less in Bootstrap, is part of Bootstrap, not for 3-rd party editing.
I don't think that jQuery UI Sortable is capable to provide same UX with same amount of efforts (animation, etc.)

[NicolasSiver]

@julianlam Template has been moved to external file under partials directory.

[NicolasSiver]

Guys, would be great, if we speed-up process ;)

[julianlam]

@NicolasSiver

[julianlam]

Just kidding 😄 let me wrap up a couple of things first

[julianlam]

Sortable lags a ton when there are 700+ categories 😆 ... just saying.

[julianlam]

Currently rewriting a portion of your code to use templates.js partials asynchronously, stand by 😄

[NicolasSiver]

Will these partial calls produce HTTP requests?

[julianlam]

Just the initial load, so... 1.

[julianlam]

The changes I made: 478850a