OneAuth/oaer/lib/components/fstree.ts

/*
 * fstree.ts
 * Copyright (C) 2024 veypi <i@veypi.com>
 * 2024-11-04 17:18
 * Distributed under terms of the GPL license.
 */

import v, { proxy, vfor } from "../v2dom"
import fs, { FileStat } from '../fs'
import { vif } from "../v2dom/v2dom"
import logic from "../logic"
import api from "../api"

const dirTree = (root: string | FileStat, depth = 0): HTMLElement => {
  let url = ''
  let name = ''
  if (typeof root === 'string') {
    url = root
    name = root
  } else {
    url = root.filename
    name = root.basename
  }
  let treeItems = proxy.Watch([] as FileStat[])
  let expand = proxy.Watch({ value: false })
  let child = v({
    class: 'fsdir-body',
    children: vfor(treeItems,
      (item) => {
        if (item.type === 'directory') {
          return dirTree(item, depth + 1)
        }
        return v({
          class: 'fsdir-item',
          style: `padding-left: ${depth * 1 + 1}rem`,
          children: [v('div', '🔤'), v('div', item.basename)],
          onclick: () => {
            api.token.Post({ refresh: logic.token.refresh.raw(), typ: 'ufs' }).then(e => {

              logic.goto(fs.user.urlwrap(item.filename), undefined, true)
            })
          }
        })
      }
    ),
  })
  return v('fsdir', [
    v({
      class: 'fsdir-header',
      children: [v('div', () => expand.value ? '📂' : '📁'), v('div', name)],
      style: `padding-left: ${depth * 1}rem`,
      onclick: () => {
        expand.value = !expand.value
        if (expand.value) {
          fs.user.getDirectoryContents(url).then((e: any) => {
            e.sort((a: FileStat, b: FileStat) => {
              if (a.type === b.type) {
                return a.filename.localeCompare(b.filename)
              }
              return a.type === 'directory' ? -1 : 1
            })
            treeItems.splice(0)
            treeItems.push(...e)
          })
        }
      }
    }),
    vif([() => expand.value, () => child])
  ])
}


export default dirTree