[update] build file system for data analysis

2022-12-29 10:49:19 +08:00
parent 2b4f9bb90c
commit 42f5a37e4d
13 changed files with 684 additions and 81 deletions
@@ -0,0 +1,23 @@
+<template>
+  <va-card class="">
+    <div class="h-200px">
+      <va-button @click="showModal">FILE</va-button>
+      <Suspense>
+        <FileModal ref="file_modal_ref"></FileModal>
+      </Suspense>
+    </div>
+  </va-card>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import FileModal from '@/components/data-analysis/FileModal.vue'
+
+  // file modal control
+  let file_modal_ref = ref<InstanceType<typeof FileModal> | null>(null)
+  const showModal = function () {
+    file_modal_ref.value?.showModal()
+  }
+
+  defineExpose({ file_modal_ref, showModal })
+</script>
@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <va-modal v-model="show" :fixed-layout="true" size="large">
+      <!-- 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" 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="nodes"
+              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" />
+                  <va-icon v-if="node.type === 'Folder' && node.expanded === true" class="fas fa-folder-open" />
+                  <va-icon v-if="node.type === 'MetaFile'" class="fas fa-file" />
+                  {{ node.name }}
+                </div>
+              </template>
+            </va-tree-view>
+            <!-- <p class="mt-4">Expanded nodes: {{ expanedNodes.join(',') || 'none' }}</p> -->
+            <p class="mt-4">Selected nodes: {{ selectedNodes.join(',') || 'none' }}</p>
+          </div>
+          <!-- Channel & Group setting-->
+          <div class="h-full col-span-1">XY</div>
+        </div>
+      </div>
+    </va-modal>
+  </div>
+</template>
+<script setup lang="ts">
+  import { Ref, ref, computed } from 'vue'
+  import { FileView, Project, MetaFile, Folder, Time } from '@/utils/file'
+
+  const customFilterMethod = computed(() => {
+    return (node: Project | MetaFile, filterText: string, key: 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 init file
+  const fileView = new FileView()
+  await fileView.appendChildren(1)
+  let fileViewChildrenForNodes = fileView.getChildren()
+
+  // handling modal header
+  const changeFileView = async function (view: string) {
+    fileView.changeView(view)
+    await fileView.appendChildren(1)
+    fileViewChildrenForNodes = fileView.getChildren()
+    nodes.value.length = 0
+    nodes.value.push(...fileViewChildrenForNodes)
+    expanedNodes.value.length = 0
+    expanedNodes.value.push(nodes.value[0].idType)
+  }
+
+  const expandAll = function (expandOrNot: boolean) {
+    expanedNodes.value.length = 0
+    if (!expandOrNot) return
+    for (const node of nodes.value) {
+      expanedNodes.value.push(node.idType)
+    }
+  }
+
+  // handling tree view
+  const filter = ref('')
+  const isFilterCaseSensitive = ref(false)
+  const selectedNodes = ref([])
+  const expanedNodes: Ref<(never | string)[]> = ref([])
+  const nodes: Ref<(never | Project | Folder | Time | MetaFile)[]> = ref([])
+
+  nodes.value.push(...fileViewChildrenForNodes)
+  expanedNodes.value.push(nodes.value[0].idType)
+  console.log('nodes', nodes)
+
+  defineExpose({ show, showModal, nodes, expanedNodes, selectedNodes })
+</script>
+<style lang="scss"></style>