Oh-repeater with oh-button issue

maxmaximax · January 14, 2023, 6:08pm

Hi,

I’m trying to build a widget that shows different item lists depending on the button pressed.
I managed to get the basic functionality in place - now struggling with some final tweaks.

Animated GIF:
repeater_buttons

Issue #1:
It takes 2 clicks to show the first list - this should go with the first click

Issue #2:

Current behaviour:
Button 1 clicked → Item List 1 visible → Button 2 clicked → Item List 1 unvisible → Button 2 second click → Item List 2 visible

Wanted behaviour:
Button 1 clicked → Item List 1 visible → Button 2 clicked → Item List 1 unvisible AND Item List 2 visible

In general, the button shall always be filled when the corresponding item list is visible.

widget code:

uid: repeater_button_test
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Jan 14, 2023, 6:38:05 PM
component: f7-card
config: {}
slots:
  default:
    - component: f7-segmented
      slots:
        default:
          - component: oh-repeater
            config:
              for: buttons
              fragment: true
              in:
                - button_number: 1
                  title: Button 1
                - button_number: 2
                  title: Button 2
                - button_number: 3
                  title: Button 3
                - button_number: 4
                  title: Button 4
            slots:
              default:
                - component: oh-button
                  config:
                    outline: true
                    action: variable
                    actionVariable: button
                    actionVariableValue: "=vars.button || vars.button === undefined ? false : (loop.buttons.button_number)"
                    fill: "=(vars.button == loop.buttons.button_number) ? true : false"
                    text: =loop.buttons.title
    - component: f7-row
      config: {}
      slots:
        default:
          - component: oh-repeater
            config:
              for: groups
              fragment: true
              in:
                - button_pressed: 1
                  group: gButton1
                - button_pressed: 2
                  group: gButton2
                - button_pressed: 3
                  group: gButton3
                - button_pressed: 4
                  group: gButton4
            slots:
              default:
                - component: f7-col
                  config:
                    width: "100"
                  slots:
                    default:
                      - component: f7-card-content
                        config:
                          visible: =vars.button == loop.groups.button_pressed
                        slots:
                          default:
                            - component: oh-list
                              config: {}
                              slots:
                                default:
                                  - component: oh-repeater
                                    config:
                                      for: item
                                      fragment: true
                                      groupItem: =loop.groups.group
                                      sourceType: itemsInGroup
                                    slots:
                                      default:
                                        - component: oh-list-item
                                          config:
                                            item: =loop.item.name
                                            title: =loop.item.label

Hope someone has a smart idea how to solve these issues.
Thanks in advance.

maxmaximax

edit 2023-01-15:

Now working as planned with the correction as suggested by @JustinG:

repeater_buttons_updated

Updated code:

uid: repeater_button_test
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Jan 14, 2023, 8:50:25 PM
component: f7-card
config: {}
slots:
  default:
    - component: f7-segmented
      slots:
        default:
          - component: oh-repeater
            config:
              for: buttons
              fragment: true
              in:
                - button_number: 1
                  title: Button 1
                - button_number: 2
                  title: Button 2
                - button_number: 3
                  title: Button 3
                - button_number: 4
                  title: Button 4
            slots:
              default:
                - component: oh-button
                  config:
                    outline: true
                    action: variable
                    actionVariable: button
                    actionVariableValue: "=(vars.button == loop.buttons.button_number) ? false : (loop.buttons.button_number)"
                    fill: "=(vars.button == loop.buttons.button_number) ? true : false"
                    text: =loop.buttons.title
    - component: f7-row
      config: {}
      slots:
        default:
          - component: oh-repeater
            config:
              for: groups
              fragment: true
              in:
                - button_pressed: 1
                  group: gButton1
                - button_pressed: 2
                  group: gButton2
                - button_pressed: 3
                  group: gButton3
                - button_pressed: 4
                  group: gButton4
            slots:
              default:
                - component: f7-col
                  config:
                    width: "100"
                  slots:
                    default:
                      - component: f7-card-content
                        config:
                          visible: =vars.button == loop.groups.button_pressed
                        slots:
                          default:
                            - component: oh-list
                              config: {}
                              slots:
                                default:
                                  - component: oh-repeater
                                    config:
                                      for: item
                                      fragment: true
                                      groupItem: =loop.groups.group
                                      sourceType: itemsInGroup
                                    slots:
                                      default:
                                        - component: oh-list-item
                                          config:
                                            item: =loop.item.name
                                            title: =loop.item.label

JustinG · January 14, 2023, 7:31pm

All the issues stem from your actionVariableValue definition.

actionVariableValue: "=vars.button || vars.button === undefined ? false : (loop.buttons.button_number)"

First - the two clicks to start: When the widget loads vars.button is undefined (you seem to have anticipated this because you’ve added an undefined check to the expression). So on the first click the vars.button === undefined is true which causes return of the first ternary result, so vars.button goes from undefined → false. On the second click, vars.button is now false and var.button === undefined is false which causes the return of the second ternary result, so vars.button goes from false → loop.buttons.button_number

Second - click any other button closes old list doesn’t open new list: if vars.button equals any non-zero number, that is a true value so the vars.button part of the OR test is true which causes return of the first ternary result, so vars.button goes from non-zero number → false.

You actually only need simpler logic in the ternary test expression to make this work. There is only one situation where you want a click of a button to set vars.button to false, and that is if that button’s list is already the one that is open. All other situations, no matter what vars.button currently is (undefined or not) you want the new value to be the button number. So your expression should look something like this:

actionVariableValue: "=(vars.button == loop.buttons.button_number) ? false : (loop.buttons.button_number)"

maxmaximax · January 14, 2023, 7:57pm

Thank you so much for explaing so well how this should be fixed.
Very much appreciated, indeed!!