From 6f35af6aeb6c71a7f6dc07c4b094e9849b2f92c3 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Fri, 17 Dec 2021 01:41:56 +0300
Subject: [PATCH] client: folder view improvements

---
 src/assets/icons/file.svg                 |  6 +++++
 src/assets/icons/info.svg                 |  4 ++++
 src/components/FolderView/SearchBox.vue   | 22 +++++++++++++----
 src/components/FolderView/SongList.vue    | 29 ++++++++++++++---------
 src/components/LeftSidebar/Navigation.vue |  4 ++--
 src/views/FolderView.vue                  | 12 ++++++----
 6 files changed, 55 insertions(+), 22 deletions(-)
 create mode 100644 src/assets/icons/file.svg
 create mode 100644 src/assets/icons/info.svg

diff --git a/src/assets/icons/file.svg b/src/assets/icons/file.svg
new file mode 100644
index 00000000..4a2a516d
--- /dev/null
+++ b/src/assets/icons/file.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8.342C20 8.07556 19.9467 7.81181 19.8433 7.56624C19.7399 7.32068 19.5885 7.09824 19.398 6.912L14.958 2.57C14.5844 2.20466 14.0826 2.00007 13.56 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V4Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 13H15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 17H12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 2V6C14 6.53043 14.2107 7.03914 14.5858 7.41421C14.9609 7.78929 15.4696 8 16 8H20" stroke="white" stroke-width="2" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/info.svg b/src/assets/icons/info.svg
new file mode 100644
index 00000000..8c62247e
--- /dev/null
+++ b/src/assets/icons/info.svg
@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 1.875C7.75195 1.875 1.875 7.75195 1.875 15C1.875 22.248 7.75195 28.125 15 28.125C22.248 28.125 28.125 22.248 28.125 15C28.125 7.75195 22.248 1.875 15 1.875ZM15 25.8984C8.98242 25.8984 4.10156 21.0176 4.10156 15C4.10156 8.98242 8.98242 4.10156 15 4.10156C21.0176 4.10156 25.8984 8.98242 25.8984 15C25.8984 21.0176 21.0176 25.8984 15 25.8984Z" fill="white"/>
+<path d="M13.5938 9.84375C13.5938 10.2167 13.7419 10.5744 14.0056 10.8381C14.2694 11.1018 14.627 11.25 15 11.25C15.373 11.25 15.7306 11.1018 15.9944 10.8381C16.2581 10.5744 16.4062 10.2167 16.4062 9.84375C16.4062 9.47079 16.2581 9.1131 15.9944 8.84938C15.7306 8.58566 15.373 8.4375 15 8.4375C14.627 8.4375 14.2694 8.58566 14.0056 8.84938C13.7419 9.1131 13.5938 9.47079 13.5938 9.84375V9.84375ZM15.7031 13.125H14.2969C14.168 13.125 14.0625 13.2305 14.0625 13.3594V21.3281C14.0625 21.457 14.168 21.5625 14.2969 21.5625H15.7031C15.832 21.5625 15.9375 21.457 15.9375 21.3281V13.3594C15.9375 13.2305 15.832 13.125 15.7031 13.125Z" fill="white"/>
+</svg>
diff --git a/src/components/FolderView/SearchBox.vue b/src/components/FolderView/SearchBox.vue
index 3554cf34..2b929be2 100644
--- a/src/components/FolderView/SearchBox.vue
+++ b/src/components/FolderView/SearchBox.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="folder-top flex">
     <div class="fname">
-      <span>Oldies Volume 1</span>
+      <div>
+        <div class="ellip">{{ path.split('/').splice(-1) + "" }}</div>
+      </div>
     </div>
     <div class="fsearch">
       <div>
@@ -12,10 +14,12 @@
 </template>
 
 <script>
-export default {};
+export default {
+  props: ["path"]
+};
 </script>
 
-<style>
+<style lang="scss">
 .folder-top {
   padding-bottom: 1rem;
   margin-bottom: 1rem;
@@ -28,6 +32,16 @@ export default {};
   text-transform: uppercase;
   display: flex;
   align-items: center;
+  // border: solid;
+  // height: 4rem;
+
+  // .name {
+  //   font-size: large;
+  // }
+
+  // .path {
+  //   font-size: $small;
+  // }
 }
 
 .folder-top .fsearch {
@@ -44,7 +58,7 @@ export default {};
 .folder-top .fsearch input {
   width: 30rem;
   border: none;
-  border-radius: .5rem;
+  border-radius: 0.5rem;
   padding-left: 1rem;
   background-color: #4645456c;
   color: rgba(255, 255, 255, 0.521);
diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index 2f0056f2..59466776 100644
--- a/src/components/FolderView/SongList.vue
+++ b/src/components/FolderView/SongList.vue
@@ -12,7 +12,9 @@
           <td :style="{ width: songTitleWidth + 'px' }" class="flex">
             <div
               class="album-art rounded image"
-              :style='{ backgroundImage: `url("${image_path + song.image}")` }'
+              :style="{
+                backgroundImage: `url(&quot;${image_path + song.image}&quot;)`,
+              }"
             ></div>
             <div>
               <span class="ellipsis">{{ song.title }}</span>
@@ -28,7 +30,7 @@
             :style="{ width: songTitleWidth + 'px' }"
             v-if="songTitleWidth > minWidth"
           >
-            {{ song.length/60 }}
+            {{ `${Math.trunc(song.length / 60)} min` }}
           </td>
         </tr>
       </table>
@@ -45,6 +47,7 @@ export default {
   props: ["songs"],
   setup() {
     const songtitle = ref(null);
+    console.log(songtitle);
     const songTitleWidth = ref(null);
     const image_path = "http://127.0.0.1:8900/images/thumbnails/";
 
@@ -79,7 +82,7 @@ export default {
 .table {
   width: 100%;
   height: calc(100%);
-  background: transparent;
+  background-color: rgba(56, 56, 56, 0.363);
   overflow-y: auto;
 
   &::-webkit-scrollbar {
@@ -89,17 +92,24 @@ export default {
 
 .folder .table table {
   border-collapse: collapse;
-  width: 100%;
   text-transform: capitalize;
   position: relative;
+  margin: 1rem;
+
+  tr {
+    &:hover {
+      td {
+        background-color: rgba(255, 174, 0, 0.534);
+      }
+    }
+  }
 }
 
 .folder .table table td .album-art {
   width: 3rem;
   height: 3rem;
   margin-right: 1rem;
-  // background-color: rgb(194, 67, 67);
-  // background-image: url(../../assets/images/jw.jpeg);
+  background-image: url(../../assets/icons/file.svg);
 }
 
 .folder .table .flex {
@@ -112,22 +122,19 @@ export default {
   bottom: 1.5rem;
   width: calc(100% - 6rem);
 }
-
 td,
 th {
-  text-align: left;
   padding: 8px;
+  text-align: left;
 }
 
 th {
   height: 3rem;
 }
+
 tr:nth-child(even) {
   background-color: rgba(29, 29, 29, 0.767);
 }
-tr:nth-child(odd) {
-  background-color: rgba(56, 56, 56, 0.363);
-}
 
 th {
   text-transform: uppercase;
diff --git a/src/components/LeftSidebar/Navigation.vue b/src/components/LeftSidebar/Navigation.vue
index ce0f37c7..44d8fc7d 100644
--- a/src/components/LeftSidebar/Navigation.vue
+++ b/src/components/LeftSidebar/Navigation.vue
@@ -45,7 +45,7 @@
       </div>
     </router-link>
     <hr />
-    <router-link :to="{ name: 'FolderView', params: { path: ' ' } }">
+    <router-link :to="{ name: 'FolderView', params: { path: '/' } }">
       <div class="nav-button" id="folders-button">
         <div class="in">
           <div class="nav-icon image" id="folders-icon"></div>
@@ -54,7 +54,7 @@
       </div>
     </router-link>
     <hr />
-    <router-link :to="{ name: 'FolderView', params: { path: ' ' } }">
+    <router-link :to="{ name: 'FolderView', params: { path: '/' } }">
       <div class="nav-button" id="folders-button">
         <div class="in">
           <div class="nav-icon image" id="settings-icon"></div>
diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue
index 9110ec8a..f3217f9c 100644
--- a/src/views/FolderView.vue
+++ b/src/views/FolderView.vue
@@ -1,11 +1,11 @@
 <template>
   <div id="f-view-parent" class="rounded">
     <div class="fixed">
-      <SearchBox />
+      <SearchBox :path="path"/>
     </div>
     <div id="scrollable">
-      <SongList :songs="songs" />
       <FolderList :folders="folders" />
+      <SongList :songs="songs" />
     </div>
   </div>
 </template>
@@ -36,6 +36,7 @@ export default {
 
     const getPathFolders = (path) => {
       getData(path).then((data) => {
+        document.getElementById('scrollable').scrollTop = 0;
         songs.value = data.songs.value;
         folders.value = data.folders.value;
       });
@@ -44,13 +45,14 @@ export default {
     getPathFolders(path.value);
 
     watch(route, (new_route) => {
-      const path = ref(new_route.params.path);
-      getPathFolders(path.value);
+      path.value = new_route.params.path;
+      getPathFolders(encodeURI(path.value));
     });
 
     return {
       songs,
       folders,
+      path
     };
   },
 };
@@ -76,6 +78,6 @@ export default {
 #scrollable {
   overflow-y: scroll;
   height: 100%;
-  padding-right: 1rem;
+  padding: $small 1rem 0 0;
 }
 </style>
\ No newline at end of file