Multiselect with selected nodes always open (vue)

[jago86]

Hi, I'm trying to build a folders system. Nodes with children are my folders and nodes without children are my files. I need to open multiple folder nodes (multiselection ), but with only one file item selected at the same time.

So I tried to made some strategies to acomplish these behaivor:

{
    selection: [
        'multiple',
        (item, selection) => {
            // Take only folders
            var modifiedSelection = selection.filter((node) => {
                return node.children ? true : false;
            });

            if (!item.children) {
                modifiedSelection.push(item);
            }

            return modifiedSelection;
        }
    ],
    click: ['select'],
    fold: [
        (item) => {

            var recurseCheck = node => {
                return this.isSelected(node)
                || node['children']
                && node['children'] instanceof Array
                && node['children'].some(recurseCheck);
            }

            return !recurseCheck(item)
        }
    ]
}

The isSelected method:

isSelected(item) {

    var found = this.selection.filter((selectionItem) => {
        if (selectionItem.id == item.id && selectionItem.children == item.children) {
            return true;
        }
        return false;
    });

    return found.length > 0 ? true : false;
}

This works more or less how I expected. However lets say that I'm having these structure

--folder A
----item A1
----item A2

--folder B
----item B1
----item B2

When the folder A is selected I can open/close folder B and select any of the items inside. But when for example item A1 is selected and I pick folder B or any other element inside of B, the folder A is closed because the selection losts any reference to A or any of it's items.

Any idea about how I can mantain the folder A opened?

[elbywan]

Hi @jago86,

I need to open multiple folder nodes (multiselection ), but with only one file item selected at the same time.

Do you mean being able to select multiple folders, plus with a maximum of one file selected inside each folder?

If so, I think that you try to use the neighbours arguments in the selection strategy to achieve what you want:

strategies: {
    selection: [
        'multiple',
        (item, selection, neighbours) => {
            // If deselected
            if(!selection.includes(item)) {
                return selection
            }
            if (!item.children && neighbours) {
                return [
                    // Exclude file siblings
                    ...selection.filter(
                        node => node.children || !(neighbours.includes(node))
                    ),
                    item
                ]
            }
            return [
                ...selection,
                item
            ]

        }
    ],
    click: ['select'],
    fold: ['no-child-selection'],
}

I made a little fiddle to demonstrate. Hope that will help!

[jago86]

Thanks @elbywan !! Is more or less what I want. I added some changes to adjust to my needs:

strategies() {
    return {
        selection: [
            'multiple',
            (item, selection, neighbours, ancestors) => {
                // If deselected
                if(!selection.includes(item)) {
                    return [
                        ...selection,
                        ...ancestors,
                    ];
                }

                return [
                    // Exclude file siblings
                    ...selection.filter(
                        node => node.children || !(neighbours.includes(node))
                    ),
                    // Include item itself
                    item,
                    // Include the ancestors
                    ...ancestors
                ];

          },

          (item, selection, neighbours, ancestors) => {
            // If deselected
            if(!selection.includes(item)) {
                // If deselected item is a file, don't allow deselection
                if(!item.children) {
                    return [
                        ...selection,
                        item,
                    ];
                }

                // If deselected item is a folder, exclude their children
                if (item.children) {

                    return [
                        ...selection.filter((node) => {
                            return !item.children.includes( node );
                        }),
                    ];
                }
            }

            return selection;
          },

        ],
        click: ['select'],
        fold: [
            // 'not-selected',
            'no-child-selection',
        ]
    };
}

Thanks a lot