Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How can I access the config of each tabNode together from any node?? #371

Open
hieutt2-ssi opened this issue Feb 13, 2023 · 3 comments
Open

Comments

@hieutt2-ssi
Copy link

My problem:
In each component, every time I perform an action I save my data in that node's config using

 state.model.doAction(
      Actions.updateNodeAttributes(id, {
        config: { ...config }
      })
    )

Question: After reloading the previously saved json, how can I retrieve all the config while I'm in a certain component?

My json:

{
    "global": {
        "splitterSize": 4,
        "tabEnableRename": false,
        "tabSetHeaderHeight": 24,
        "tabSetTabStripHeight": 24,
        "tabSetMinWidth": 300,
        "tabSetMinHeight": 200
    },
    "borders": [],
    "layout": {
        "type": "row",
        "id": "#873e83c2-dd28-42d7-a512-0b8141bed2f1",
        "children": [
            {
                "type": "tabset",
                "id": "#3ed1da82-71e4-422e-918e-8664a858e60b",
                "weight": 25,
                "children": [
                    {
                        "type": "tab",
                        "id": "#f826f71d-59ed-4931-9691-f6f0ef18baa2",
                        "name": "Index Chart",
                        "component": "indexChart",
                        "config": {
                            "indexValue": "HNXIndex"
                        }
                    }
                ]
            },
            {
                "type": "row",
                "id": "#dddea999-64d8-414d-8e29-d78949301840",
                "weight": 25,
                "children": [
                    {
                        "type": "tabset",
                        "id": "#d27c405d-cace-4c61-bd7f-749249b82384",
                        "weight": 50,
                        "children": [
                            {
                                "type": "tab",
                                "id": "#1a3e6176-6118-43e5-ab87-9e506919b2cd",
                                "name": "Matched Price",
                                "component": "matchedPrice",
                                "config": {
                                    "stockNo": "hose:3853",
                                    "symbol": "VND"
                                }
                            }
                        ],
                        "active": true
                    },
                    {
                        "type": "tabset",
                        "id": "#ce35a408-e556-48ed-a668-eb597dd29c1b",
                        "weight": 50,
                        "children": [
                            {
                                "type": "tab",
                                "id": "#1e4f92c7-62c4-45a0-a0ac-add1b9289d20",
                                "name": "marketDepthPrice",
                                "component": "marketDepthPrice"
                            }
                        ]
                    }
                ]
            }
        ]
    }
}
@nealus
Copy link
Collaborator

nealus commented Feb 13, 2023

The factory function receives the tabnode object, so you can do node.getConfig() and pass that
to the component

@hieutt2-ssi
Copy link
Author

Hi nealus,

Looks like I haven't fully expressed my intentions.
I will make a example.

My layout has 3 components IndexChart , MatchedPrice , MarketDepthPrice

{
     "type": "tab",
     "id": "#f826f71d-59ed-4931-9691-f6f0ef18baa2",
     "name": "Index Chart",
     "component": "indexChart",
     "config": {
         "indexValue": "HNXIndex"
     }
}
{
     "type": "tab",
     "id": "#1a3e6176-6118-43e5-ab87-9e506919b2cd",
     "name": "Matched Price",
     "component": "matchedPrice",
     "config": {
         "stockNo": "hose:3853",
         "symbol": "VND"
     }
}
  {
     "type": "tab",
     "id": "#1e4f92c7-62c4-45a0-a0ac-add1b9289d20",
     "name": "marketDepthPrice",
     "component": "marketDepthPrice",
     "config": {
         "stockNo": "hose:1543",
         "symbol": "HAG"
     }
   }

Inside the IndexChart component, I can get the config using node.getConfig().
config = {"indexValue": "HNXIndex"}
But I also want to get the config of MatchedPrice and MarketDepthPrice components in IndexChart component.

(Components and configs are subject to change)

Best regards.

@nealus
Copy link
Collaborator

nealus commented Feb 15, 2023

you can use node.getModel().visitNodes() to visit all the nodes in the layout tree and hence gather their config.

Also if you gave those nodes unique ids (rather than the auto generated ones) then you could access them using node.getModel().getNodeById()

https://rawgit.com/caplin/FlexLayout/demos/demos/v0.7/typedoc/classes/Model.html#visitNodes
https://rawgit.com/caplin/FlexLayout/demos/demos/v0.7/typedoc/classes/Model.html#getNodeById

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants