🌲 tree widget, for a self referencing table?

21

Can you point me in the direction on how GPT can fix this code?
After 2 hours, Claude and ChatGPT got this far:
Zight 2024-5-3 at 6.48.04 PM

doctype html
html(lang="en")
  head
    link(href="https://cdn.jsdelivr.net/npm/datatables@1.10.18/media/css/jquery.dataTables.min.css", rel="stylesheet")
    link(href="https://cdn.jsdelivr.net/npm/treetables@1.2.1/tree-table.min.css", rel="stylesheet")
    script(src="/grist-plugin-api.js")
    script(src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js")
    script(type="text/javascript", src="https://cdn.jsdelivr.net/npm/datatables@1.10.18/media/js/jquery.dataTables.min.js")
    script(type="text/javascript", src="https://cdn.jsdelivr.net/npm/treetables@1.2.1/treeTable.min.js")
  
  body
    #err
    button#collapse Collapse
    table#tree(style="display:none;")
      thead
        tr#columns
      script.
        const TABLE = "YourTable"
        const COLUMNS = ["description", "customSku", "MfnSku", "MfnName", "qoh", "Price", "upc", "ImageURL"]
        const REF = "MfnName"
        const COLLAPSED = false

        const cols = $("#columns")
        let selected_line

        COLUMNS.forEach(col => cols.append($("<th></th>").text(col)))

        grist.docApi.fetchTable(TABLE).then(data => {
          const tree = data.id.map((id, i) => {
            return {
              tt_key: id,
              tt_parent: data[REF][i],
              ...Object.fromEntries(COLUMNS.map(col => [col, data[col][i]]))
            }
          }).sort((a, b) => {
            if (a.tt_key < b.tt_parent) return -1
            if (a.tt_key > b.tt_parent) return 1
            if (a.tt_parent < b.tt_key) return 1
            if (a.tt_parent > b.tt_key) return -1
            return 0
          })

          try {
            $('#tree').treeTable({
              "data": tree,
              "columns": COLUMNS.map(col => ({ data: col })),
              "order": [[1, "asc"]],
              "collapsed": COLLAPSED,
            }).show()

            const lines = $('#tree').children("tbody").eq(0).children()
            const select_line = (line_id, selected) => {
              if (line_id) {
                selected_line = $(`#${line_id}`)
                if (!selected) grist.setCursorPos({"rowId": parseInt(line_id)})
                lines.css("background-color", "")
                selected_line.css("background-color", "lightgray")
              }
            }

            $(document).keydown((e) => {
              console.log("KEY", e.which)
              if (selected_line) {
                switch (e.which) {
                  case 38: select_line(selected_line.prev()[0].id); break
                  case 40: select_line(selected_line.next()[0].id); break
                  case 37: case 39:
                    if (e.ctrlKey) $('#collapse').trigger("click")
                    else selected_line.children("td.tt-details-control").trigger("click")
                    break
                }
              } else select_line(lines[0].id)
            })

            lines.on('click', (evt) => select_line($(evt.target).parent()[0].id))

            grist.onRecord((rec) => select_line(rec.id, true))

            let collapse, expand
            collapse = () => {
              $('#tree').data('treeTable').collapseAllRows().redraw()
              $('#collapse').html("Expand").on("click", expand)
            }

            expand = () => {
              $('#tree').data('treeTable').expandAllRows().redraw()
              $('#collapse').html("Collapse").on("click", collapse)
            }

            $('#collapse').on("click", collapse)

          } catch (e) {
            console.error(e)
            $('#err').html("Infinite recursion: there should be a chief who doesn’t depend on anyone!")
          }
        })

        grist.onRecords(() => location.reload())

Thank you

22

Sorry, I never use any GPT engine… But why do you want one in first place? To use Tree widget, you should only have to adapt the TABLE, COLUMNS, REF and COLLAPSED variables:

TABLE: the table name;
COLUMNS: which columns should be shown within the widget;
REF: which field contains the reference to the parent record;
COLLAPSED: wether the view should be collapsed by default.

1 Like