From 8badbc4a22b9ec72b4464a748f0c913b2bd5fde4 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Wed, 29 Nov 2023 15:27:25 +0700
Subject: [PATCH] feat: truncate long name

---
 .../client/src/components/TreeExplorer.vue    | 25 ++++++-------------
 1 file changed, 8 insertions(+), 17 deletions(-)

diff --git a/Services/client/src/components/TreeExplorer.vue b/Services/client/src/components/TreeExplorer.vue
index df684c6..5f39987 100644
--- a/Services/client/src/components/TreeExplorer.vue
+++ b/Services/client/src/components/TreeExplorer.vue
@@ -15,10 +15,8 @@ const props = withDefaults(
   }>(),
   {
     level: 0,
-  }
+  },
 )
-
-const MAX_NAME_LENGTH = 20
 </script>
 
 <template>
@@ -39,14 +37,10 @@ const MAX_NAME_LENGTH = 20
           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
+              ? 'inbox'
+              : 'o_folder_open'
         "
+        :label="folder.name"
         class="text-overflow-handle"
         v-model="folder.status"
       >
@@ -60,16 +54,13 @@ const MAX_NAME_LENGTH = 20
   </div>
 </template>
 
-<style lang="scss">
-.q-item[aria-expanded='true'] {
+<style lang="scss" scoped>
+:deep(.q-item[aria-expanded='true']) {
   color: $primary;
 }
 
-.q-item[aria-expanded='true'] .q-icon {
-  color: $primary;
-}
-
-.text-overflow-handle {
+.text-overflow-handle,
+:deep(.q-item__label) {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;