Proyectos de Subversion Moodle

// This file is part of Moodle - http://moodle.org/

//

// Moodle is free software: you can redistribute it and/or modify

// it under the terms of the GNU General Public License as published by

// the Free Software Foundation, either version 3 of the License, or

// (at your option) any later version.

//

// Moodle is distributed in the hope that it will be useful,

// but WITHOUT ANY WARRANTY; without even the implied warranty of

// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

// GNU General Public License for more details.

//

// You should have received a copy of the GNU General Public License

// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/**

 * The category component.

 *

 * @module     qbank_managecategories/category

 * @class      qbank_managecategories/category

 */

import {BaseComponent, DragDrop} from 'core/reactive';

import {categorymanager} from 'qbank_managecategories/categorymanager';

import Templates from 'core/templates';

import Modal from "core/modal";

import {get_string as getString} from "core/str";

export default class extends BaseComponent {

    create(descriptor) {

        this.name = descriptor.element.id;

        this.selectors = {

            CATEGORY_LIST: '.qbank_managecategories-categorylist',

            CATEGORY_ITEM: '.qbank_managecategories-item[data-categoryid]',

            CATEGORY_CONTENTS: '.qbank_managecategories-item > .container',

            EDIT_BUTTON: '[data-action="addeditcategory"]',

            MOVE_BUTTON: '[role="menuitem"][data-actiontype="move"]',

            CONTEXT: '.qbank_managecategories-categorylist[data-contextid]',

            MODAL_CATEGORY_ITEM: '.modal_category_item[data-movingcategoryid]',

            CONTENT_AREA: '.qbank_managecategories-details',

            CATEGORY_ID: id => `#category-${id}`,

            CONTENT_CONTAINER: id => `#category-${id} .qbank_managecategories-childlistcontainer`,

            CHILD_LIST: id => `ul[data-categoryid="${id}"]`,

            PREVIOUS_SIBLING: sortorder => `:scope > [data-sortorder="${sortorder}"]`,

        };

        this.classes = {

            NO_BOTTOM_PADDING: 'pb-0',

            DRAGHANDLE: 'draghandle',

            DROPTARGET: 'qbank_managecategories-droptarget-before',

        };

        this.ids = {

            CATEGORY: id => `category-${id}`,

        };

    }

    stateReady() {

        this.initDragDrop();

        this.addEventListener(this.getElement(this.selectors.EDIT_BUTTON), 'click', categorymanager.showEditModal);

        const moveButton = this.getElement(this.selectors.MOVE_BUTTON);

        this.addEventListener(moveButton, 'click', this.showMoveModal);

    }

    destroy() {

        // The draggable element must be unregistered.

        this.deInitDragDrop();

    }

    /**

     * Remove any existing DragDrop component, and create a new one.

     */

    initDragDrop() {

        this.deInitDragDrop();

        // If the element is currently draggable, register the getDraggableData method.

        if (this.element.classList.contains(this.classes.DRAGHANDLE)) {

            this.getDraggableData = this._getDraggableData;

        }

        this.dragdrop = new DragDrop(this);

    }

    /**

     * If the DragDrop component is currently registered, unregister it.

     */

    deInitDragDrop() {

        if (this.dragdrop !== undefined) {

            if (this.getDraggableData !== undefined) {

                this.dragdrop.setDraggable(false);

                this.getDraggableData = undefined;

            }

            this.dragdrop.unregister();

            this.dragdrop = undefined;

        }

    }

    /**

     * Static method to create a component instance.

     *

     * @param {string} target the DOM main element or its ID

     * @param {object} selectors optional css selector overrides

     * @return {Component}

     */

    static init(target, selectors) {

        return new this({

            element: document.querySelector(target),

            selectors,

            reactive: categorymanager,

        });

    }

    /**

     * Return the category ID from the component's element.

     *

     * This method is referenced as getDraggableData when the component can be dragged.

     *

     * @return {{id: string}}

     * @private

     */

    _getDraggableData() {

        return {

            id: this.getElement().dataset.categoryid

        };

    }

    validateDropData() {

        return true;

    }

    /**

     * Highlight the top border of the category item.

     *

     * @param {Object} dropData

     */

    showDropZone(dropData) {

        if (this.getElement().closest(this.selectors.CATEGORY_ID(dropData.id))) {

            // Can't drop onto itself or its own child.

            return false;

        }

        this.getElement().classList.add(this.classes.DROPTARGET);

        return true;

    }

    /**

     * Remove highlighting.

     */

    hideDropZone() {

        this.getElement().classList.remove(this.classes.DROPTARGET);

    }

    /**

     * Find the new position of the dropped category, and trigger the move.

     *

     * @param {Object} dropData The category being moved.

     * @param {Event} event The drop event.

     */

    drop(dropData, event) {

        const dropTarget = event.target.closest(this.selectors.CATEGORY_ITEM);

        if (!dropTarget) {

            return;

        }

        if (dropTarget.closest(this.selectors.CATEGORY_ID(dropData.id))) {

            // Can't drop onto your own child.

            return;

        }

        const source = document.getElementById(this.ids.CATEGORY(dropData.id));

        if (!source) {

            return;

        }

        const targetParentId = dropTarget.dataset.parent;

        const parentList = dropTarget.closest(this.selectors.CATEGORY_LIST);

        let precedingSibling;

        if (dropTarget === parentList.firstElementChild) {

            // Dropped at the top of the list.

            precedingSibling = null;

        } else {

            precedingSibling = dropTarget.previousElementSibling;

        }

        // Insert the category after the target category

        categorymanager.moveCategory(dropData.id, targetParentId, precedingSibling?.dataset.categoryid);

    }

    getWatchers() {

        return [

            // After any update to this category, move it to the new position.

            {watch: `categories[${this.element.dataset.categoryid}]:updated`, handler: this.updatePosition},

            // When the template context is added or updated, re-render the content.

            {watch: `categories[${this.element.dataset.categoryid}].templatecontext:created`, handler: this.rerender},

            {watch: `categories[${this.element.dataset.categoryid}].templatecontext:updated`, handler: this.rerender},

            // When a new category is created, check whether we need to add a child list to this category.

            {watch: `categories:created`, handler: this.checkChildList},

        ];

    }

    /**

     * Re-render the category content.

     *

     * @param {Object} args

     * @param {Element} args.element

     * @return {Promise<Array>}

     */

    async rerender({element}) {

        const {html, js} = await Templates.renderForPromise(

            'qbank_managecategories/category_details',

            element.templatecontext

        );

        return Templates.replaceNodeContents(this.getElement(this.selectors.CONTENT_AREA), html, js);

    }

    /**

     * Render and append a new child list.

     *

     * @param {Object} context Template context, must include at least categoryid.

     * @return {Promise<Element>}

     */

    async createChildList(context) {

        const {html, js} = await Templates.renderForPromise(

            'qbank_managecategories/childlist',

            context,

        );

        const parentContainer = document.querySelector(this.selectors.CONTENT_CONTAINER(context.categoryid));

        await Templates.appendNodeContents(parentContainer, html, js);

        const childList = document.querySelector(this.selectors.CHILD_LIST(context.categoryid));

        childList.closest(this.selectors.CATEGORY_CONTENTS).classList.add(this.classes.NO_BOTTOM_PADDING);

        return childList;

    }

    /**

     * Move a category to its new position.

     *

     * A category may change its parent, sortorder and draghandle independently or at the same time. This method will resolve those

     * changes and move the element to the new position. If the parent doesn't already have a child list, one will be created.

     *

     * If the parent has changed, this will also update the state with the new child count of the old and new parents.

     *

     * @param {Object} args

     * @param {Object} args.element

     * @return {Promise<void>}

     */

    async updatePosition({element}) {

        // Move to a new parent category.

        let newParent;

        const originParent = document.querySelector(this.selectors.CHILD_LIST(this.getElement().dataset.parent));

        if (parseInt(this.getElement().dataset.parent) !== element.parent) {

            newParent = document.querySelector(this.selectors.CHILD_LIST(element.parent));

            if (!newParent) {

                // The target category doesn't have a child list yet. We'd better create one.

                newParent = await this.createChildList({categoryid: element.parent});

            }

            this.getElement().dataset.parent = element.parent;

        } else {

            newParent = this.getElement().parentElement;

        }

        // Move to a new position within the parent.

        let previousSibling;

        let nextSibling;

        if (newParent.firstElementChild && parseInt(element.sortorder) <= parseInt(newParent.firstElementChild.dataset.sortorder)) {

            // Move to the top of the list.

            nextSibling = newParent.firstElementChild;

        } else {

            // Move later in the list.

            previousSibling = newParent.querySelector(this.selectors.PREVIOUS_SIBLING(element.sortorder - 1));

            nextSibling = previousSibling?.nextElementSibling;

        }

        // Check if this has actually moved, or if it's just having its sortorder updated due to another element moving.

        const moved = (newParent !== this.getElement().parentElement || nextSibling !== this.getElement());

        if (moved) {

            if (nextSibling) {

                // Move to the specified position in the list.

                newParent.insertBefore(this.getElement(), nextSibling);

            } else {

                // Move to the end of the list (may also be the top of the list is empty).

                newParent.appendChild(this.getElement());

            }

        }

        if (originParent !== newParent) {

            // Update child count of old and new parent.

            this.reactive.stateManager.processUpdates([

                {

                    name: 'categoryLists',

                    action: 'put',

                    fields: {

                        id: originParent.dataset.categoryid,

                        childCount: originParent.querySelectorAll(this.selectors.CATEGORY_ITEM).length

                    }

                },

                {

                    name: 'categoryLists',

                    action: 'put',

                    fields: {

                        id: newParent.dataset.categoryid,

                        childCount: newParent.querySelectorAll(this.selectors.CATEGORY_ITEM).length

                    }

                }

            ]);

        }

        this.element.dataset.sortorder = element.sortorder;

        // Enable/disable dragging.

        const isDraggable = this.element.classList.contains(this.classes.DRAGHANDLE);

        if (isDraggable && !element.draghandle) {

            this.element.classList.remove(this.classes.DRAGHANDLE);

            this.initDragDrop();

        } else if (!isDraggable && element.draghandle) {

            this.element.classList.add(this.classes.DRAGHANDLE);

            this.initDragDrop();

        }

    }

    /**

     * Recursively create a list of all valid destinations for a current category within a parent category.

     *

     * @param {Element} item

     * @param {Number} movingCategoryId

     * @return {Array<Object>}

     */

    createMoveCategoryList(item, movingCategoryId) {

        const categories = [];

        if (item.children) {

            let precedingSibling = null;

            item.children.forEach(category => {

                const categoryId = parseInt(category.dataset.categoryid);

                // Don't create a target for the category that's moving.

                if (categoryId === movingCategoryId) {

                    return;

                }

                // Create a target to move before this child.

                let child = {

                    categoryid: categoryId,

                    movingcategoryid: movingCategoryId,

                    precedingsiblingid: precedingSibling?.dataset.categoryid ?? 0,

                    parent: category.dataset.parent,

                    categoryname: category.dataset.categoryname,

                    categories: null,

                    current: categoryId === movingCategoryId,

                };

                const childList = category.querySelector(this.selectors.CATEGORY_LIST);

                if (childList) {

                    // If the child has its own children, recursively make a list of those.

                    child.categories = this.createMoveCategoryList(childList, movingCategoryId);

                } else {

                    // Otherwise, create a target to move as a new child of this one.

                    child.categories = [

                        {

                            movingcategoryid: movingCategoryId,

                            precedingsiblingid: 0,

                            parent: categoryId,

                            categoryname: category.dataset.categoryname,

                            categories: null,

                            newchild: true,

                        }

                    ];

                }

                categories.push(child);

                precedingSibling = category;

            });

            if (precedingSibling) {

                const precedingId = parseInt(precedingSibling.dataset.categoryid);

                if (precedingId !== movingCategoryId) {

                    // If this is the last child of its parent, also create a target to move the category after this one.

                    categories.push({

                        movingcategoryid: movingCategoryId,

                        precedingsiblingid: precedingId,

                        parent: precedingSibling.dataset.parent,

                        categoryname: precedingSibling.dataset.categoryname,

                        categories: null,

                        lastchild: true,

                    });

                }

            }

        }

        return categories;

    }

    /**

     * Displays a modal containing links to move the category to a new location.

     *

     * @param {Event} e Button click event.

     */

    async showMoveModal(e) {

        // Return if it is not menu item.

        const item = e.target.closest(this.selectors.MOVE_BUTTON);

        if (!item) {

            return;

        }

        // Return if it is disabled.

        if (item.getAttribute('aria-disabled') === 'true') {

            return;

        }

        // Prevent addition click on the item.

        item.setAttribute('aria-disabled', true);

        // Build the list of move links.

        let moveList = {contexts: []};

        const contexts = document.querySelectorAll(this.selectors.CONTEXT);

        contexts.forEach(context => {

            const moveContext = {

                contextname: context.dataset.contextname,

                categories: [],

                hascategories: false,

            };

            moveContext.categories = this.createMoveCategoryList(context, parseInt(item.dataset.categoryid));

            moveContext.hascategories = moveContext.categories.length > 0;

            moveList.contexts.push(moveContext);

        });

        const modal = await Modal.create({

            title: getString('movecategory', 'qbank_managecategories', item.dataset.categoryname),

            body: Templates.render('qbank_managecategories/move_context_list', moveList),

            footer: '',

            show: true,

            large: true,

        });

        // Show modal and add click event for list items.

        modal.getBody()[0].addEventListener('click', e => {

            const target = e.target.closest(this.selectors.MODAL_CATEGORY_ITEM);

            if (!target) {

                return;

            }

            categorymanager.moveCategory(target.dataset.movingcategoryid, target.dataset.parent, target.dataset.precedingsiblingid);

            modal.destroy();

        });

        item.setAttribute('aria-disabled', false);

    }

    /**

     * Check and add a child list if needed.

     *

     * Check whether the category that has just been added has this category as its parent. If it does,

     * check that this category has a child list, and if not, add one.

     *

     * @param {Object} args

     * @param {Element} args.element The new category.

     * @return {Promise<Element>}

     */

    async checkChildList({element}) {

        if (element.parent !== this.getElement().dataset.categoryid) {

            return null; // Not for me.

        }

        let childList = this.getElement(this.selectors.CATEGORY_LIST);

        if (childList) {

            return null; // List already exists, it will handle adding the new category.

        }

        // Render and add a new child list containing the new category.

        return this.createChildList({

            categoryid: element.parent,

            children: [

                element.templatecontext,

            ]

        });

    }

}