lowdefy: 3.23.3
name: Todo App

connections:
  - id: graphql_api
    type: AxiosHttp
    properties:
      baseURL: https://<your-company>.airsequel.com

pages:
  - id: todos
    type: PageHeaderMenu
    requests:
      - id: todos_request
        type: AxiosHttp
        connectionId: graphql_api
        properties:
          url: /dbs/<database-id>/graphql
          method: post
          data:
            query: "{ todos { title, completed } }"

    events:
      onEnter:
        - id: fetch_todos
          type: Request
          params: todos_request

        - id: set_todos
          type: SetState
          params:
            todo_list:
              _request: todos_request.data.data.todos

    blocks:
      - id: title_main
        type: Title
        properties:
          content: Todos

      - id: todo_list
        type: List
        blocks:
          - id: todo_container_$
            type: Box
            style:
              background: LightGray
              margin: 0.5rem
              padding: 1rem 2rem
            blocks:
              - id: todo_list.$.completed
                type: CheckboxSwitch
                layout:
                  size: 2em
                  align: middle
                properties:
                  label:
                    disabled: true

              - id: todo_title_$
                type: Span
                layout:
                  grow: 1
                  align: middle
                properties:
                  content:
                    _state: todo_list.$.title
