fix: tables to contain size + add menu in navbar

Co-authored-by: [email protected] <[email protected]>

frontend/index.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Vite + Vue + TS</title>
+  <title>flist</title>
   <link href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css" rel="stylesheet">
 </head>
 

frontend/src/components/CreateFlist.vue

@@ -161,7 +161,7 @@
                 v-model="flist.server_address"
                 variant="solo-filled"
                 density="compact"
-                placeholder="localhost:5000/ubuntu"
+                placeholder="localhost:5000"
               >
               </v-text-field>
             </div>
@@ -192,7 +192,7 @@
             </div>
 
             <v-btn
-              class="pr-5 rounded-pill background-green mb-8"
+              class="pr-5 rounded-pill background-green mb-8 mt-5"
               size="large"
               width="50%"
               @click="create"

frontend/src/components/Footer.vue

@@ -1,5 +1,10 @@
 <template>
   <v-footer class="bg-grey-darken-3 d-flex justify-center">
-    All rights reserved © 2024 - <span> ThreeFold</span>
+    All rights reserved © 2024 - <a href="https://threefold.io" style="color: inherit; text-decoration: none;">
+      ThreeFold <v-icon icon="mdi-link" style="font-size: 1em;"/>
+    </a>
+    <a href="https://github.com/threefoldtech" style="color: inherit; text-decoration: none;">
+      <v-icon icon="mdi-github" style="margin-left: 7px" />
+    </a>
   </v-footer>
-</template>
+</template>

frontend/src/components/Home.vue

@@ -3,12 +3,12 @@
     <Navbar></Navbar>
     <div class="w-100 position-relative" style="height: 30%">
       <v-img :src="image" cover style="z-index: 2"></v-img>
-      <div
+      <!-- <div
         class="position-absolute text-white"
         style="z-index: 4; top: 40%; left: 35%"
       >
         <h1>Create and Download Flist</h1>
-      </div>
+      </div> -->
     </div>
 
     <v-main class="d-flex justify-center mt-0" style="height: fit-content">
@@ -21,17 +21,9 @@
         <v-list>
           <v-list-item nav>
             <v-list-item-title class="text-h6"> Users</v-list-item-title>
-            <template v-slot:append>
-              <v-btn variant="text" @click.stop="collapsed = !collapsed">
-                <v-icon>{{
-                  !collapsed ? "mdi-chevron-up" : "mdi-chevron-down"
-                }}</v-icon></v-btn
-              >
-            </template>
           </v-list-item>
-          <v-divider v-if="!collapsed"></v-divider>
+          <v-divider></v-divider>
           <v-list-item
-            v-if="!collapsed"
             v-for="userName in userNameList"
             :key="userName"
             @click="username = userName"
@@ -59,9 +51,13 @@
           :headers="tableHeader"
           hover
           class="elevation-2"
+          items-per-page="25"  
         >
+        <template #item.size="{value}">
+          {{filesize(value, {standard: "jedec", precision: 3})}}
+        </template>
           <template #item.last_modified="{ value }">
-            {{ new Date(value * 1000).toString() }}
+            {{ new Date(value * 1000).toString().split("(")[0] }}
           </template>
           <template #item.path_uri="{ value }">
             <v-btn class="elevation-0">
@@ -94,9 +90,9 @@ import { FlistsResponseInterface, FlistBody } from "../types/Flists.ts";
 import { toast } from "vue3-toastify";
 import "vue3-toastify/dist/index.css";
 import { api } from "../client.ts";
+import {filesize} from "filesize";
 
 const baseURL = import.meta.env.VITE_API_URL;
-const collapsed = ref<boolean>(true);
 
 const copyLink = (url: string) => {
   copy(url);
@@ -105,8 +101,9 @@ const copyLink = (url: string) => {
 
 const tableHeader = [
   { title: "Name", key: "name" },
+  { title: "Size", key: "size" },
   { title: "Last Modified", key: "last_modified" },
-  { title: "Download Link", key: "path_uri", sortable: false },
+  { title: "Download", key: "path_uri", sortable: false },
 ];
 var flists = ref<FlistsResponseInterface>({});
 const username = ref("");
@@ -136,13 +133,14 @@ const getUserNames = () => {
   const list: string[] = [];
   const map = flists.value;
   for (var flistMap in map) {
-    list.push(flistMap)
+    list.push(flistMap);
   }
-  userNameList.value=list
+  userNameList.value = list;
 };
 onMounted(async () => {
   try {
     flists.value = (await api.get<FlistsResponseInterface>("/v1/api/fl")).data;
+    console.log(flists.value)
     getUserNames();
     filteredFlistFn();
   } catch (error: any) {
@@ -154,8 +152,12 @@ watch(username, () => {
   filteredFlistFn();
 });
 </script>
-<style lang="css" scoped>
+<style lang="css">
 .mx-height {
   max-height: 600px;
 }
+
+.v-data-table-footer__items-per-page {
+  display: none !important; 
+}
 </style>

frontend/src/components/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app-bar color="#1aa18f" >
+  <v-app-bar color="#1aa18f">
     <v-app-bar-nav-icon to="/" class="ml-8">
       <v-img :src="whiteLogo" contain height="50px" width="50px"></v-img>
     </v-app-bar-nav-icon>
@@ -12,13 +12,49 @@
         ><v-icon icon="mdi-plus-circle-outline" class="mr-2"></v-icon>Create
         flist</v-btn
       >
-      <v-btn to="/Flists">My FLists</v-btn>
+      <v-menu class="white">
+        <template v-slot:activator="{ props }">
+          <v-btn
+            class="align-self-center me-4"
+            height="100%"
+            rounded="50%"
+            variant="plain"
+            v-bind="props"
+            style="font-size: 20px"
+          >
+            <v-icon icon="mdi-menu-down" end></v-icon>
+          </v-btn>
+        </template>
+        <v-list>
+          <v-list-item>
+            <v-btn to="Flists">My FLists</v-btn>
+          </v-list-item>
+          <v-list-item>
+            <v-btn @click="logout"
+              ><v-icon icon="mdi-logout" style="font-size: 20px" />log
+              out</v-btn
+            >
+          </v-list-item>
+        </v-list>
+      </v-menu>
     </div>
   </v-app-bar>
 </template>
 
 <script setup lang="ts">
 import whiteLogo from "../assets/logo_white.png";
 import "../../public/theme.css";
+import { toast } from "vue3-toastify";
 const auth: string | null = sessionStorage.getItem("token");
+
+const logout = async () => {
+  try {
+    sessionStorage.removeItem("token")
+    sessionStorage.removeItem("username")
+    window.location.href = "/"
+  } catch (error: any) {
+    console.error("Failed to logout", error);
+    toast.error(error.response?.data || "error occured");
+  }
+};
 </script>

frontend/src/components/UserFlist.vue

@@ -2,53 +2,74 @@
   <v-app>
     <Navbar />
     <v-main>
-      <div>
-        <h2 class="ml-5 mt-5">
-          <v-icon icon="mdi-account" color="#1aa18f"></v-icon
-          >{{ loggedInUser }}
-        </h2>
-      </div>
-      <v-data-table
-        v-if="loggedInUser"
-        :items="currentUserFlists"
-        :headers="tableHeader"
-        hover
-      >
-        <template v-slot:item.path_uri="{ index, value }">
-          <template v-if="currentUserFlists[index].progress === 100">
-            <v-btn class="elevation-0">
-              <a :href="baseURL + `/` + value" download>
-                <v-icon icon="mdi-download" color="grey"></v-icon
-              ></a>
-              <v-tooltip activator="parent" location="start"
-                >Download flist</v-tooltip
-              >
-            </v-btn>
-            <v-btn @click="copyLink(baseURL + `/` + value)" class="elevation-0">
-              <v-icon icon="mdi-content-copy" color="grey"></v-icon>
-              <v-tooltip activator="parent">Copy Link</v-tooltip>
-            </v-btn>
-          </template>
-          <template v-else>
-            <span>loading... </span>
-          </template>
-        </template>
+      <v-container>
+        <v-row>
+          <div class="user">
+            <h2 class="mt-5 mb-5 text-h4 text-grey-darken-2">
+              <v-icon icon="mdi-account" color="#1aa18f"></v-icon
+              >{{ loggedInUser }}
+            </h2>
+          </div>
+        </v-row>
+        <v-row>
+          <v-data-table
+            v-if="loggedInUser"
+            :items="currentUserFlists"
+            :headers="tableHeader"
+            hover
+            items-per-page="25"
+            class = "thick-border"
+          >
+            <template #item.size="{ value }">
+              {{ filesize(value, { standard: "jedec", precision: 3 }) }}
+            </template>
+            <template v-slot:item.path_uri="{ index, value }">
+              <template v-if="currentUserFlists[index].progress === 100">
+                <v-btn class="elevation-0">
+                  <a :href="baseURL + `/` + value" download>
+                    <v-icon icon="mdi-download" color="grey"></v-icon
+                  ></a>
+                  <v-tooltip activator="parent" location="start"
+                    >Download flist</v-tooltip
+                  >
+                </v-btn>
+                <v-btn
+                  @click="copyLink(baseURL + `/` + value)"
+                  class="elevation-0"
+                >
+                  <v-icon icon="mdi-content-copy" color="grey"></v-icon>
+                  <v-tooltip activator="parent">Copy Link</v-tooltip>
+                </v-btn>
+              </template>
+              <template v-else>
+                <span>loading... </span>
+              </template>
+            </template>
 
-        <template #item.last_modified="{ value }">
-          {{ new Date(value * 1000).toString() }}
-        </template>
+            <template #item.last_modified="{ value }">
+              {{ new Date(value * 1000).toString() }}
+            </template>
 
-        <template v-slot:item.progress="{ value }">
-          <template v-if="value != 100">
-            <v-progress-linear :model-value="value" color="purple-darken-1">
-            </v-progress-linear>
-            <span> {{ Math.floor(value) }}% </span>
-          </template>
-          <template v-else>
-            <v-chip color="green">finished</v-chip>
-          </template>
-        </template>
-      </v-data-table>
+            <template v-slot:item.progress="{ value }" class="w-25">
+              <template v-if="value != 100">
+                <v-progress-linear
+                  :model-value="value"
+                  color="#1aa18f"
+                  height="20"
+                  rounded="sm"
+                >
+                  <template v-slot:default="{ value }">
+                    <span class="text-white">{{ Math.floor(value) }}%</span>
+                  </template>
+                </v-progress-linear>
+              </template>
+              <template v-else>
+                <v-chip color="#1aa18f">finished</v-chip>
+              </template>
+            </template>
+          </v-data-table>
+        </v-row>
+      </v-container>
     </v-main>
     <Footer />
   </v-app>
@@ -62,16 +83,18 @@ import { onMounted, ref } from "vue";
 import { useClipboard } from "@vueuse/core";
 import { toast } from "vue3-toastify";
 import { api } from "../client.ts";
+import { filesize } from "filesize";
 
 const tableHeader = [
   { title: "Name", key: "name" },
+  { title: "Size", key: "size" },
   { title: "Last Modified", key: "last_modified" },
-  { title: "Download Link", key: "path_uri", sortable: false },
-  { title: "Progress", key: "progress" },
+  { title: "Download", key: "path_uri", sortable: false },
+  { title: "Progress", key: "progress", width: "20%" },
 ];
 const loggedInUser = sessionStorage.getItem("username");
 var flists = ref<FlistsResponseInterface>({});
-const baseURL = import.meta.env.VITE_API_URL
+const baseURL = import.meta.env.VITE_API_URL;
 let currentUserFlists = computed(() => {
   return loggedInUser?.length ? flists.value[loggedInUser] : [];
 });
@@ -88,9 +111,20 @@ onMounted(async () => {
     currentUserFlists = computed(() => {
       return loggedInUser?.length ? flists.value[loggedInUser] : [];
     });
-  } catch (error:any) {
+  } catch (error: any) {
     console.error("Failed to fetch flists", error);
-    toast.error(error.response?.data)
+    toast.error(error.response?.data);
   }
 });
 </script>
+
+<style>
+.user {
+  .v-icon--size-default {
+    font-size: 25px;
+  }
+}
+.thick-border .v-data-table__wrapper {
+  border: 3px solid #000; 
+}
+</style>

frontend/src/types/Flists.ts

@@ -4,6 +4,7 @@ export interface FlistBody {
   name: string;
   path_uri: string;
   progress: number;
+  size: number;
 }
 
 export interface FlistsResponseInterface {