feat: preview flist page

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

frontend/src/client.ts

@@ -1,4 +1,7 @@
 import axios from "axios";
+import { useClipboard } from "@vueuse/core";
+import { toast } from "vue3-toastify";
+const { copy } = useClipboard();
 
 export const api = axios.create({
   baseURL: import.meta.env.VITE_API_URL,
@@ -7,3 +10,8 @@ export const api = axios.create({
     Authorization: "Bearer " + sessionStorage.getItem("token"),
   },
 });
+
+export const copyLink = (url: string) => {
+  copy(url);
+  toast.success("Link Copied to Clipboard");
+};

frontend/src/components/Home.vue

@@ -60,10 +60,12 @@
               <v-icon icon="mdi-text-box" class="mr-1"  color="grey"/>
               <span class="file-name">{{ value }}</span>
         </template>
-        <template #item.preview = "">
-          <v-btn @click="" class="elevation-0">
-                <v-icon icon="mdi-eye-outline" color="grey"></v-icon>
-          </v-btn>
+        <template v-slot:item.preview = "{index}" >
+          <a :href="`/` + filteredFlist[index].path_uri + `.md`">
+            <v-btn class="elevation-0">
+                  <v-icon icon="mdi-eye-outline" color="grey"></v-icon>
+            </v-btn>
+          </a>
         </template>
         <template #item.size="{value}">
           {{filesize(value, {standard: "jedec", precision: 3})}}
@@ -97,20 +99,14 @@ import { onMounted, ref, watch } from "vue";
 import Navbar from "./Navbar.vue";
 import Footer from "./Footer.vue";
 import image from "../assets/home.png";
-import { useClipboard } from "@vueuse/core";
 import { FlistsResponseInterface, FlistBody } from "../types/Flists.ts";
 import { toast } from "vue3-toastify";
 import "vue3-toastify/dist/index.css";
-import { api } from "../client.ts";
+import { api, copyLink } from "../client.ts";
 import {filesize} from "filesize";
-import { title } from "process";
 
 const baseURL = import.meta.env.VITE_API_URL;
 
-const copyLink = (url: string) => {
-  copy(url);
-  toast.success("Link Copied to Clipboard");
-};
 
 const tableHeader = [
   { title: "File Name", key: "name" },
@@ -123,7 +119,6 @@ var flists = ref<FlistsResponseInterface>({});
 const username = ref("");
 const userNameList = ref<string[]>([]);
 let filteredFlist = ref<FlistBody[]>([]);
-const { copy } = useClipboard();
 const filteredFlistFn = () => {
   filteredFlist.value = [];
   const map = flists.value;

frontend/src/components/Navbar.vue

@@ -28,7 +28,7 @@
         </template>
         <v-list>
           <v-list-item>
-            <v-btn to="Flists">My FLists</v-btn>
+            <v-btn><a href="/flists" class="text-black" style="text-decoration:none;">My FLists</a></v-btn>
           </v-list-item>
           <v-list-item>
             <v-btn @click="logout"

frontend/src/components/PreviewFlist.vue

@@ -1,28 +1,91 @@
 <template>
-
+  <v-app>
+    <Navbar></Navbar>
+    <div class="w-100 position-relative">
+      <v-img :src="image" cover style="z-index: 2"></v-img>
+      <div
+        class="position-absolute w-100 text-white d-flex justify-content align-content "
+        style="z-index: 4; top: 55%;left:40%;"
+      >
+        <h1 class="text-h4">{{id}}</h1>
+      </div>
+    </div>
+    <v-main class="mn-height">
+      <v-container class="m-0 pa-0">
+        <v-row>
+          <div>
+            <h2 class="text-h4">{{
+              id
+              }}</h2>
+            <p>This Flist was created by <v-chip color="#1aa18f" label>{{ username }} </v-chip> </p>
+          </div>
+        </v-row>
+        <v-row class="d-flex flex-column">
+            <h3 class="text-h5">Source file</h3>
+            <v-text-field rounded="20" variant="outlined" density="compact" readonly class="text-grey-darken-1 mr-0">
+              {{ url }}
+              <template #append>
+        <v-btn
+            color="#1aa18f"
+            value="Copy"
+            class="Btn"
+            @click="copyLink(url)">
+        Copy
+        </v-btn>
+    </template>
+            </v-text-field>
+        </v-row>
+          <v-row class="d-flex flex-column">
+            <h3 class="text-h5">Content</h3>
+            <v-textarea :model-value="showContent" variant="outlined" readonly class="text-grey-darken-1" auto-grow width="98.5%">
+            </v-textarea>
+        </v-row>
+      </v-container>
+    </v-main>
+    <Footer />
+  </v-app>
 </template>
 
 <script setup lang="ts">
 
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref } from "vue";
 import Navbar from "./Navbar.vue";
 import Footer from "./Footer.vue";
 import image from "../assets/home.png";
-import { useClipboard } from "@vueuse/core";
 import { toast } from "vue3-toastify";
 import "vue3-toastify/dist/index.css";
 import { api } from "../client.ts";
-import {filesize} from "filesize";
+import { copyLink } from "../client.ts";
+
 
+const content = ref<string[]>([]);
+  const urlPartition = window.location.href.split("/")
+  const id = ref<string>(urlPartition[urlPartition.length - 1])
+  const username = ref<string>(urlPartition[urlPartition.length - 2])
+  const baseURL = import.meta.env.VITE_API_URL;
+const url = baseURL + "/flists" + "/" + username.value + "/" + id.value
 
+const showContent = ref<string>()
 onMounted(async () => {
   try {
-    //flists.value = (await api.get<FlistsResponseInterface>("/v1/api/fl")).data;
+    content.value = (await api.get(url)).data;
+    content.value = content.value.slice(1)
+    showContent.value = content.value.join("\n")
 
   } catch (error: any) {
     console.error("Failed to fetch flists", error);
     toast.error(error.response?.data);
   }
 });
 
-</script>
+</script>
+
+<style scoped>
+.Btn{
+  position: relative;
+  left: -18px;
+  height: 50px;
+  width: 110px;
+  margin-left:0px;
+}
+</style>

frontend/src/components/UserFlist.vue

@@ -25,6 +25,13 @@
               <v-icon icon="mdi-text-box" class="mr-1" color="grey" />
               <span class="file-name">{{ value }}</span>
             </template>
+              <template v-slot:item.preview = "{index}" >
+          <a :href="`/` + currentUserFlists[index].path_uri + `.md`">
+            <v-btn class="elevation-0">
+                  <v-icon icon="mdi-eye-outline" color="grey"></v-icon>
+            </v-btn>
+          </a>
+        </template>
             <template #item.size="{ value }">
               {{ filesize(value, { standard: "jedec", precision: 3 }) }}
             </template>
@@ -85,13 +92,14 @@ import Footer from "./Footer.vue";
 import { FlistsResponseInterface } from "../types/Flists.ts";
 import { computed } from "vue";
 import { onMounted, ref } from "vue";
-import { useClipboard } from "@vueuse/core";
 import { toast } from "vue3-toastify";
-import { api } from "../client.ts";
+import { api, copyLink } from "../client.ts";
 import { filesize } from "filesize";
 
+
 const tableHeader = [
   { title: "File Name", key: "name" },
+  { title: "Preview", key:"preview"},
   { title: "Size", key: "size" },
   { title: "Last Modified", key: "last_modified" },
   { title: "Download", key: "path_uri", sortable: false },
@@ -103,12 +111,6 @@ const baseURL = import.meta.env.VITE_API_URL;
 let currentUserFlists = computed(() => {
   return loggedInUser?.length ? flists.value[loggedInUser] : [];
 });
-const { copy } = useClipboard();
-
-const copyLink = (url: string) => {
-  copy(url);
-  toast.success("Link Copied to Clipboard");
-};
 
 onMounted(async () => {
   try {

frontend/src/router/index.ts

@@ -4,6 +4,7 @@ import CreateFlist from "../components/CreateFlist.vue";
 import Home from "../components/Home.vue";
 import UserFlist from "../components/UserFlist.vue";
 import FollowUp from "../components/FollowUp.vue";
+import PreviewFlist from "../components/PreviewFlist.vue";
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -34,6 +35,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "Home",
     component: Home,
   },
+  {
+    path: "/flists/:username/:id",
+    name: "PreviewFlist",
+    component: PreviewFlist,
+  },
 ];
 
 const router = createRouter({