Problem getting this up and runing

[minedun6]

Hey,

I copied your code and tried to play with this a little bit as some study material. This is the problem I'm facing

I've tracked down the problem at some level in the TreeMixin file when initEvents is called, but I think I'm wrong.

I've pushed the code on github, if you wouldn't mind checking it.

Something else I'd like to know, in the repo, you'll find a data.json file that contains a tree structure that is coming from an api I'm working on, the node's icon is also in that tree structure. Is it possible to show the icon since it's part of the data structure and the actual node's data that can be accessed is "text" ?

Here's the rep link: sym-library

[amsik]

Hey! Check out my commit. It will help you

[amsik]

App.vue:

    import TreeRoot from '@/Tree/components/TreeRoot'
    import sourceData from "@/data";

    function fetchData() {
        return fetch('/static/data.json').then(r => r.json()).then(items => {
            return items.map(item => {
                item.data = item
                return item
            })
        })
    }

    export default {
        components: {
            'tree': TreeRoot
        },
        data() {
            return {
                items: fetchData(),
                query: '',
                options: {}
            }
        }
    };

Then you can use data property. Check this demo to add the icons: https://amsik.github.io/liquor-tree/#Custom-Node

[amsik]

Move your data.json file to the static directory.

[minedun6]

Much appreciated. So regarding the first problem in the Selection.js, works like a charm. The second part, I couldn't get it to work. I use the node:selected event to print the selected node's data, problem is that data only display the text property.

[amsik]

Could you show me the example in your repo? I didn't get you.

[minedun6]

<template>
    <div id="app">
        <div class="min-h-screen bg-grey-darker p-4">
            <div class="max-w-md mx-auto">
                <div class="mb-2 border-solid border-grey-light rounded border shadow-sm">
                    <div
                        class="flex justify-between items-center bg-grey-lighter px-2 py-3 border-solid border-grey-light border-b">
                        <span>List of existing assets</span>
                        <span class="relative">
                            <i class="absolute pin-r pin-t mt-055 mr-3 fas fa-search"></i>
                            <input type="text"
                                   class="border border-solid border-grey-light bg-grey-white leading-normal p-1 pr-8 rounded outline-0 shadow-inner"
                                   title=""
                                   v-model="query"
                            />
                        </span>
                    </div>
                    <div class="p-3 bg-white p-4">
                        <div class="tree bg-white p-4 rounded">
                            <tree
                                :data="items"
                                :filter="query"
                                ref="tree"
                                @node:selected="onSelectedNode"
                            >
                                <span class="tree-text" slot-scope="{ node }">
                                    <template v-if="!node.hasChildren()">
                                        <i :class="node.data.icon"></i>
                                        {{ node.text }}
                                    </template>

                                    <template v-else>
                                        <i :class="[node.expanded() ? 'far fa-folder-open' : 'far fa-folder']"></i>
                                        {{ node.text }}
                                    </template>
                                </span>
                            </tree>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import TreeRoot from '@/Tree/components/TreeRoot'

    function fetchData() {
        return fetch('/static/data.json').then(r => r.json()).then(items => {
            return items.map(item => {
                item.data = item
                return item
            })
        })
    }

    export default {
        components: {
            'tree': TreeRoot
        },
        data() {
            return {
                items: fetchData(),
                query: '',
                options: {}
            }
        },
        methods: {
            onSelectedNode(node) {
                console.log(node)
            }
        }
    };
</script>

<style lang="scss">
    /* Custom styles for scrollbar */
    ::-webkit-scrollbar-track {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    }

    ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track-piece {
        background-color: #d6dadc;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: darkgrey;
        -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
    }

    .outline-0 {
        outline: none;
    }

    .h-80 {
        height: 20rem;
    }

    .tree-node.matched > .tree-content {
        background: #f7f2e7;
    }

    .mt-055 {
        margin-top: 0.55rem;
    }
</style>

As shown in the first screenshot, on the root node, the data properties are set.

In the second screenshot, you can see that data property only contains 'text', the others are not set.

[amsik]

Sorry, it is my fault.

Try this one:

    function fetchData() {
        return fetch('/static/data.json').then(r => r.json()).then(items => {

            items.forEach(setData)

            function setData(item) {
                item.data = item

                if (item.children) {
                    item.children.forEach(setData)
                }
            }

            return items
        })
    }

[amsik]

By the way, you can load this library via npm:

npm i liquor-tree

App.vue:

import TreeRoot from 'liquor-tree'

It will work as well :)

[minedun6]

I'm doing that on the project I'm currently working on. But as I said, I'm use the source code as learning material. And to be honest, there are lots of things that are helping so far. And again, sorry for troubling to help me fix my code.

[amsik]

Do not worry, all is ok. Does the above code work for you? (fetchData fn)

[minedun6]

All good my friend.

By the way, through the code, I found some odd functions in the code like

function getAllChildren (source) {
    const result = []

    source.forEach(function collect (node) {
        result.push(node)

        if (node.children) {
            node.children.forEach(collect)
        }
    })

    return result
}

what does the collect do ?

and this one too

const preparedItems = data.map(function converter (item) {
            const convertedItem = convertNames(item, p)

            // Possible to receive 1 child like a simple object. It must be converted to an array
            // We do not have checks on the correctness of the format. A developer should pass correct format
            if (convertedItem.children && !Array.isArray(convertedItem.children)) {
                convertedItem.children = [convertedItem.children]
            }

            if (convertedItem.children) {
                convertedItem.children = convertedItem.children.map(converter)
            }

            return convertedItem
        })

the converter ?

sorry I've been going through your code like full speed since yesterday and I'm trying to piece out some of the API

[amsik]

1) This function is collecting all children (as named ... ) and it using only for find method. Example structure:

let treeData = [{
    text: 'Item 2.3',
    children: [{
            text: 'Item 2.2.3.1'
        },
        {
            text: 'Item 2.2.3.2'
        },
        {
            text: 'Item 2.2.3.3'
        },
        {
            text: 'Item 2.2.3.4',
            children: [{
                    text: 'Item 2.2.3.4.1'
                },
                {
                    text: 'Item 2.2.3.4.2'
                }
            ]
        }
    ]
}]

// --- some initialization and so on

new Vue({
  // ----
  // this is NOT real method... only for demo :)
  onTreeMounted() {
     const node = this.$refs.tree.find('Item 2.3');

     // print -> Item 2.2.3.4, Item 2.2.3.4.1, Item 2.2.3.4.2
     node.find(/Item 2.2.3.4/).map(n => console.log(n.text)) 

     // print -> Item 2.2.3.4
     node.find(/Item 2.2.3.4/, false).map(n => console.log(n.text)) 
  }
  // ----
})

2) See https://amsik.github.io/liquor-tree/#Redefine-Structure-Example