Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Categories editing interface improvment

From MoodleDocs
Revision as of 13:51, 24 June 2022 by Andrew Nicols (talk | contribs) (Note about plan not to migrate this page to the new developer resources. See template for more info.)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)


Warning: This page is no longer in use. The information contained on the page should NOT be seen as relevant or reliable.


Moodle have quite good interface for editing of long lists in topic/weekly course format. However, category editing interface sadly missing this. In particular, moving categories around is very awkward. So the idea is to implement in category list editing interface similar to that of topic/weekly course format.

@ deprecated

Implementation

Here are the probable changes to remove this issue: Changes in moodle_list class from listlib.php:

  1. mark method process_actions($left, $right, $moveup, $movedown) as obsolete;
  2. create new method process_action($action, $value) which will handle all moodle_list actions. $action can be:
    • move at the first place in context,
    • move at the place after any category,
    • move into category as first sub-categoty;
  3. make the same changes in question_category_list class (child of moodle_list);
  4. create property "moving" which will signals that list elements can be moved.


It will be displayed like:

Before moove categories editing.jpg

After pushing button "move" Moving categories editing.jpg

New suggestions

  1. use AJAX for changing order of catgories
  2. use drag-and-drop technique

For having the same style of editing courses in management and editing categories, I think, there should be an icon for drag-and-drop(watch at images). It will work as it works in courses' management. Implementation of changing order of categories will be like as changing order of courses, but with painting the areas where user can place the category.

All opportunities of replacing:

All.jpg

While moving mouse user will see different opportunities, it will be depends on beetween which categories he is dragging the category at that moment. For example, if we want to replace category 1 between 1.1.1 and 1.2 (cursor mouse is between these categories at the moment which is shown in the picture), we will see 3 opportunities of replacing as at image.

Replace between 1.1.1 and 1.2 :

Changing the position.png

User will see all places for categories that can be in that situation, but only place which corresponts to his mouse's cursor will be more brightly. Of course, replacing between context will be too. if user choose new category's place he should drop it in one of rectangles.

Choice.png

I think, that when user stop the mouse at the space between some categories, it should ne counted the height of space by the number of possible categorie's locations. And user should point at the string (first, second or third as in the image) and then the rectangle will be painted. I supposed that it should be the 1,5 * height of category.

About implementation. Work with the categories' tree will be similar with Skarupa's decision. About drag-and-drop, as I understood in management only javaScript was used for implementation, but not jQuery method sortable. I think, that I should use only javaScript too for having the same style.

Tests

I think that the method change_category_list should be tested with unit-tests. There are some tests situations in embedded file.

File:Tests.pdf