From d82cf45417e7512ea9374d1f5d67f7d11dca73cd Mon Sep 17 00:00:00 2001
From: oat <oatkub402@gmail.com>
Date: Tue, 28 Nov 2023 18:05:46 +0700
Subject: [PATCH] refactor: tree-ex ellipsis + listview style

---
 Services/client/src/components/ListView.vue     |  4 +++-
 Services/client/src/components/TreeExplorer.vue | 17 ++++++++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/Services/client/src/components/ListView.vue b/Services/client/src/components/ListView.vue
index 3a71744..5041dc1 100644
--- a/Services/client/src/components/ListView.vue
+++ b/Services/client/src/components/ListView.vue
@@ -166,7 +166,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
         class="cursor"
       >
         <template v-slot:body-cell-name="nameRow">
-          <q-td>
+          <q-td style="width: 50%">
             <q-icon :name="currentIcon" size="2em" color="primary" />
             {{ nameRow.row.name }}
           </q-td>
@@ -257,9 +257,11 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
         row-key="name"
         hide-bottom
         :rows-per-page-options="[0]"
+        class="cursor"
       >
         <template v-slot:body-cell-name="nameRow">
           <q-td
+            style="width: 50%"
             @click="
               () => {
                 getFolder(nameRow.row.pathname)
diff --git a/Services/client/src/components/TreeExplorer.vue b/Services/client/src/components/TreeExplorer.vue
index 51be85e..7b17bf6 100644
--- a/Services/client/src/components/TreeExplorer.vue
+++ b/Services/client/src/components/TreeExplorer.vue
@@ -3,6 +3,8 @@ 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'
+import { computed } from '@vue/reactivity'
+import FolderForm from './FolderForm.vue'
 
 const { isSearch } = storeToRefs(useSearchDataStore())
 const { isPreview } = storeToRefs(useFileInfoStore())
@@ -17,6 +19,8 @@ const props = withDefaults(
     level: 0,
   }
 )
+
+const MAX_NAME_LENGTH = 20
 </script>
 
 <template>
@@ -40,7 +44,12 @@ const props = withDefaults(
             ? 'inbox'
             : 'o_folder_open'
         "
-        :label="folder.name"
+        :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
@@ -61,4 +70,10 @@ const props = withDefaults(
 .q-item[aria-expanded='true'] .q-icon {
   color: $primary;
 }
+
+.text-overflow-handle {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 </style>