Trees example missing

[michaelfliegner]

I would be very grateful for anything helpful, comprehensive example or just a hint, how to use the Trees module.

[AbhimanyuAryan]

I would be very grateful for anything helpful, comprehensive example or just a hint, how to use the Trees module.

I'll add api support for you including demo. Ping you in couple of hours. Tq

[hhaensel]

I've used trees un the past. Imight deduce a MWE

[AbhimanyuAryan]

@hhaensel that would be really nice. I was about to ping you. How did you get it to work? I'm mostly confused how to pair js object with Reactive model

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-tree
      :nodes="simple"
      node-key="label"
    />
  </div>
</template>

<script>
export default {
  data () {
    return {
      simple: [
        {
          label: 'Satisfied customers (with avatar)',
          avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
          children: [
            {
              label: 'Good food (with icon)',
              icon: 'restaurant_menu',
              children: [
                { label: 'Quality ingredients' },
                { label: 'Good recipe' }
              ]
            },
            {
              label: 'Good service (disabled node with icon)',
              icon: 'room_service',
              disabled: true,
              children: [
                { label: 'Prompt attention' },
                { label: 'Professional waiter' }
              ]
            },
            {
              label: 'Pleasant surroundings (with icon)',
              icon: 'photo',
              children: [
                {
                  label: 'Happy atmosphere (with image)',
                  img: 'https://cdn.quasar.dev/img/logo_calendar_128px.png'
                },
                { label: 'Good table presentation' },
                { label: 'Pleasing decor' }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

from: https://v1.quasar.dev/vue-components/tree#basic

You can pick this demo as starting point. Although I'm not sure how much of this is useful

Stipple Demo:

using Stipple
using StippleUI

@reactive mutable struct TreeModel <: ReactiveModel
  expanded::R{Vector{String}} = [ "Satisfied customers (with avatar)", "Good food (with icon)" ]
  children::R{Vector{Dict{String, String}}} = [
    Dict("label" => "Good food (with icon)", "label" => "Good recipe")
  ]
  simple::R{Vector{Vector{Dict{String, Union{String, Vector{Dict{String, String}}}}}}} = [
    [
     Dict( "label" => "Satisfied customers (with avatar)",
          "avatar" => "https://cdn.quasar.dev/img/boy-avatar.png",
          "children" => children)
    ],
  ]
end

function handlers(tree_model)

  tree_model
end

function ui(tree_model)
  page(
    tree_model,
    title = "Tree Components",
    class = "container",
    [
       tree(:simple, nodekey="label")
    ],
  )
end

function factory()
  tree_model = TreeModel |> init |> handlers
  tree_model
end

[michaelfliegner]

Thank You!!!!

Maybe tree is not exported?

julia> include("Trees.jl")
┌ Info:
└ Web Server starting at http://127.0.0.1:8000
Genie.AppServer.ServersCollection(Task (runnable) @0x00007fcef235c940, nothing)

julia> ┌ Error: UndefVarError: tree not defined
│ Stacktrace:
│ [1] ui(tree_model::TreeModel)
│ @ Main /workspace/StippleDemos/BasicExamples/Trees.jl:25

[AbhimanyuAryan]

Thank You!!!!

Maybe tree is not exported?

julia> include("Trees.jl")

┌ Info:

└ Web Server starting at http://127.0.0.1:8000

Genie.AppServer.ServersCollection(Task (runnable) @0x00007fcef235c940, nothing)

julia> ┌ Error: UndefVarError: tree not defined

│ Stacktrace:

│ [1] ui(tree_model::TreeModel)

│ @ Main /workspace/StippleDemos/BasicExamples/Trees.jl:25

it's not finished yet. It's not found because the API is not implemented to support Trees yet. Waiting for Helmut's MWE

[AbhimanyuAryan]

will add this in docs and close this @hhaensel ??

[hhaensel]

@AbhimanyuAryan Yes please!

[hhaensel]

@PGimenez are you responsible for this now?