feat: show

frontend/src/component/file/list_file.tsx

@@ -6,6 +6,7 @@ import {useStoreBucket} from "../../store/bucket";
 import {Bucket, S3File} from "../../interfaces/connection";
 import {useStoreFile} from "../../store/file";
 import {useStoreConnection} from "../../store/connection";
+import {TrimSuffix} from "../../hook/strings";
 
 const useStyles = makeStyles({
     container: {
@@ -38,11 +39,15 @@ export function ListFileComponent() {
     const {conn_active} = useStoreConnection();
     const {bucket_active} = useStoreBucket()
     const {prefix, files_get, files_list} = useStoreFile()
+    const filename = (key:string) => {
+        let strs = TrimSuffix(key, "/").split("/")
+        return strs[strs.length - 1]
+    }
 
     async function handleClick(item: S3File) {
         if (item.type === 1) {
             console.log(`[DEBUG] click prefix = ${prefix} item.key = ${item.key}`)
-            files_get(conn_active!, bucket_active!, prefix + item.key)
+            files_get(conn_active!, bucket_active!, item.key)
             return
         }
     }
@@ -69,7 +74,7 @@ export function ListFileComponent() {
                     <MenuItem className={styles.item}
                               icon={files_list[idx].type ? <FolderRegular/> : <DocumentBulletListRegular/>}>
                         <Text truncate wrap={false} className={styles.text}>
-                            {files_list[idx].name}
+                            {filename(files_list[idx].key)}
                         </Text>
                     </MenuItem>
                 </div>

frontend/src/component/file/path.tsx

@@ -20,6 +20,10 @@ const useStyles = makeStyles({
         display: 'flex',
         alignItems: 'center',
     },
+    show_line: {
+        display: 'flex',
+        alignItems: 'center',
+    },
     show_text: {
         backgroundColor: tokens.colorNeutralBackground1Hover,
         padding: '0.5rem 0.5rem',
@@ -69,11 +73,11 @@ export function Path() {
                     <Text className={styles.show_text}><ArchiveRegular
                         style={{marginRight: '0.5rem'}}/>{bucket_active.name}</Text>
                     {prefix && (
-                        prefix.split("/").filter(item => item).map(item => {
-                            return <>
+                        prefix.split("/").filter(item => item).map((item, idx) => {
+                            return <div className={styles.show_line} key={idx}>
                                 <Text style={{marginLeft: '0.5rem'}}>/</Text>
                                 <Text className={styles.show_text}>{item}</Text>
-                            </>
+                            </div>
                         })
                     )}
                 </div>

frontend/src/hook/strings.ts

@@ -0,0 +1,6 @@
+export function TrimSuffix(str: string, suffix: string) {
+    if (str.lastIndexOf(suffix) === str.length - suffix.length) {
+        return str.substring(0, str.length - suffix.length);
+    }
+    return str;
+}