frontend-elite-data-analysis/src/components/data-analysis/FileModal.vue

<template>
  <div>
    <va-modal v-model="show" :fixed-layout="true" size="large" @before-open="initLoad">
      <!-- File Container-->
      <div class="h-[75vh] w-[50vw]">
        <!-- Control Bar -->
        <div class="d-flex align-center">
          <va-input v-model="filter" placeholder="Filter..." class="mr-3" style="flex: 0 200px" clearable />
          <va-checkbox v-model="isFilterCaseSensitive" class="mr-3" label="Case sensitive" />
          <va-button-group class="mr-3">
            <va-button @click="changeFileView('time')">Time</va-button>
            <va-button @click="changeFileView('folder')">Folder</va-button>
            <va-button @click="changeFileView('project')">Project</va-button>
          </va-button-group>
          <va-button-group>
            <va-button @click="expandAll(true)">Expand</va-button>
            <va-button @click="expandAll(false)">Close</va-button>
          </va-button-group>
        </div>
        <!-- File Window-->
        <div class="grid grid-cols-4 gap-6">
          <!-- File View-->
          <div class="h-full col-span-3">
            <va-tree-view
              v-model:checked="selectedNodes"
              v-model:expanded="expanedNodes"
              :nodes="treeNodes"
              class="customizable-content"
              :filter="filter"
              :filter-method="customFilterMethod"
              :track-by="'idType'"
              :value-by="'idType'"
              selectable
            >
              <template #content="node">
                <div class="align-center">
                  <va-icon v-if="node.type === 'Folder' && node.expanded === false" class="fas fa-folder mr-2" />
                  <va-icon v-if="node.type === 'Folder' && node.expanded === true" class="fas fa-folder-open mr-2" />
                  <va-icon v-if="node.type === 'MetaFile'" class="fas fa-file mr-2" />
                  <template v-if="node.type !== 'MetaFile'">{{ node.name }}</template>
                  <template v-if="node.type === 'MetaFile'">
                    {{ node.name }}
                  </template>
                </div>
              </template>
            </va-tree-view>
          </div>
          <!-- Channel & Group setting-->
          <div class="h-full col-span-1">
            <div>
              X-Axis
              <va-select v-model="channel.xAxis" :text-by="'name'" :options="options"></va-select>
            </div>
            <div>
              Y-Axis
              <va-select v-model="channel.yAxis" :text-by="'name'" :options="options"></va-select>
            </div>
          </div>
        </div>
      </div>
    </va-modal>
  </div>
</template>
<script setup lang="ts">
  import { Ref, ref, computed, watch } from 'vue'
  import { FileView, Project, MetaFile, Folder, Time } from '@/utils/file'
  import configTable from '@/data/config-table/index'
  import { useChannelStore } from '@/stores/data-analysis/channel'
  import { useFileViewStore } from '@/stores/data-analysis/file-view'

  // emit
  const emit = defineEmits({
    filesSelected: ({ metas, channel }) => {
      return { metas, channel }
    },
  })

  function emitFilesSelected(meta: string[], channel: { x: object; y: object }) {
    emit('filesSelected', { meta, channel })
  }

  // filter function
  const customFilterMethod = computed(() => {
    return (node: Project | MetaFile, filterText: string) => {
      // console.log('customFilterMethod', node, filterText, key, node.name.includes(filterText))
      return node.name.includes(filterText)
    }
  })

  // handling show modal
  let show = ref(false)
  const showModal = function () {
    show.value = !show.value
  }

  // handling fileView
  const fileViewStore = useFileViewStore()
  const fileView = new FileView()

  // handling tree-view
  const filter = ref('')
  const isFilterCaseSensitive = ref(false)
  const selectedNodes: Ref<(never | string)[]> = ref([])
  const expanedNodes: Ref<(never | string)[]> = ref([])
  const treeNodes: Ref<(never | Project | Folder | Time | MetaFile)[]> = ref([])

  const initLoad = async function () {
    if (treeNodes.value.length === 0) {
      await initLoadFileView()
      initLoadNodes()
    }
  }

  const initLoadFileView = async function () {
    await fileView.appendChildren(1)
  }

  const initLoadNodes = function () {
    const files = fileView.getChildren()
    if (files.length > 0) {
      treeNodes.value.push(...files)
      expanedNodes.value.push(treeNodes.value[0].idType)
    }
  }

  const reset = function () {
    resetFileView()
    resetNodes()
  }

  const resetFileView = function () {
    fileView.reset()
  }

  const resetNodes = function () {
    selectedNodes.value.length = 0
    expanedNodes.value.length = 0
    treeNodes.value.length = 0
  }

  // handling modal header
  const changeFileView = async function (view: string) {
    // reset fileView
    fileView.changeView(view)
    await fileView.appendChildren(1)

    // reset treeNodes & expandedNodes & selectedNodes
    treeNodes.value.length = 0
    treeNodes.value.push(...fileView.getChildren())

    expanedNodes.value.length = 0
    expanedNodes.value.push(treeNodes.value[0].idType)

    // selectedNodes.value.length = 0
  }

  const expandAll = function (expandOrNot: boolean) {
    expanedNodes.value.length = 0
    if (!expandOrNot) return
    for (const node of treeNodes.value) {
      expanedNodes.value.push(node.idType)
    }
  }

  // handling channel options
  const channel = useChannelStore()
  let options: any[] = []

  // watch selectedNodes to decide axis options
  watch(selectedNodes, (newSelectedNodes, oldSelectedNodes) => {
    // update fileViewStore.filesSelected
    fileViewStore.filesSelected.length = 0
    fileViewStore.filesSelected.push(...newSelectedNodes.filter((x) => x.includes('MetaFile')))
    // 新的要filter掉舊的沒有的
    const newNodes = newSelectedNodes.filter((x) => x.includes('MetaFile') && !oldSelectedNodes.includes(x))
    const MetFileList = []
    for (const node of newNodes) {
      const meta = fileView.getMetaFile(node)
      MetFileList.push(meta)
    }

    console.log('MetFileList', MetFileList)
    if (MetFileList[0]) {
      // console.log(MetFileList[0].device.library_name, MetFileList[0].parameter.MODE)
      // console.log(configTable.getConfig(MetFileList[0].device.library_name))

      const config = configTable.getModeConfig(MetFileList[0].device.library_name, MetFileList[0].parameter.MODE)
      const channel = Object.values(config.channels)
      const channelOptions = channel.map((v: any, idx) => {
        v.id = idx
        return v
      })
      console.log('channelOptions', channelOptions)
      options.length = 0
      options.push(...channelOptions)
    }
  })

  defineExpose({
    emitFilesSelected,
    show,
    showModal,
    changeFileView,
    expandAll,
    reset,
    initLoad,
    treeNodes,
    expanedNodes,
    selectedNodes,
  })
</script>
<style lang="scss"></style>