hrms-edm/Services/client/src/components/TreeExplorer.vue

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useTreeDataStore, type TreeDataFolder } from '@/stores/tree-data'
import { useSearchDataStore } from '@/stores/searched-data'
import { useFileInfoStore } from '@/stores/file-info-data'

const { isSearch } = storeToRefs(useSearchDataStore())
const { isFilePreview } = storeToRefs(useFileInfoStore())
const { getFolder } = useTreeDataStore()

const props = withDefaults(
  defineProps<{
    data: TreeDataFolder[]
    level: number
  }>(),
  {
    level: 0,
  }
)

const MAX_NAME_LENGTH = 20
</script>

<template>
  <div>
    <q-list v-for="folder in data" class="rounded-borders">
      <q-expansion-item
        @click="
          () => {
            getFolder(folder.pathname, false)
            isSearch = false
            isFilePreview = false
          }
        "
        :header-inset-level="level * 0.25"
        :group="level.toString()"
        :hide-expand-icon="level === 4"
        :icon="
          level === 1
            ? 'mdi-file-cabinet'
            : level === 2
            ? 'inbox'
            : 'o_folder_open'
        "
        :label="
          folder.name.length > MAX_NAME_LENGTH
            ? folder.name.slice(0, MAX_NAME_LENGTH) + '...'
            : folder.name
        "
        class="text-overflow-handle"
        v-model="folder.status"
      >
        <tree-explorer
          v-if="folder.folder"
          :data="folder.folder"
          :level="props.level + 1"
        />
      </q-expansion-item>
    </q-list>
  </div>
</template>

<style lang="scss">
.q-item[aria-expanded='true'] {
  color: $primary;
}

.q-item[aria-expanded='true'] .q-icon {
  color: $primary;
}

.text-overflow-handle {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>