Login, Download and visuals update

cista-front/src/components/FileExplorer.vue

@@ -1,5 +1,6 @@
 <template>
     <main>
+      <context-holder />
       <!-- <h2 v-if="!documentStore.loading && documentStore.error"> {{ documentStore.error }} </h2> -->
       <div class="carousel-container"  v-if="!documentStore.loading && documentStore.mainDocument[0] && documentStore.mainDocument[0].type === 'file'">
         <FileCarousel></FileCarousel>
@@ -32,13 +33,27 @@
               <template #content>
                 <div class="more-action">
                   <div class="action-container">
-                    <a-button type="text" class="action-button" :icon="h(ImportOutlined)"/>Open
+                    <a :href="`${record.type === 'folder'? linkBasePath+'#' : filesBasePath}/${record.name}`">
+                      <a-button type="text" class="action-button" :icon="h(ImportOutlined)"/> 
+                    </a>
+                    Open
+                  </div>
+                  <div v-if="record.type === 'folder-file'" class="action-container">
+                    <a :href="`${filesBasePath}/${record.name}`" download>
+                      <a-button type="text" class="action-button" :icon="h(DownloadOutlined)"/> 
+                    </a>
+                    Download
                   </div>
                   <div class="action-container">
-                    <a-button type="text" class="action-button" :icon="h(EditOutlined)"/> Rename
+                    <a-button type="text" class="action-button" @click="edit(record.key)" :icon="h(EditOutlined)"/> Rename
                   </div>
                   <div class="action-container">
-                    <a-button type="text" class="action-button" :icon="h(LinkOutlined)"/> Share
+                    <a-button 
+                      type="text" 
+                      class="action-button" 
+                      @click="share(`${record.type === 'folder'? linkBasePath+'/#' : filesBasePath}/${record.name}`)" 
+                      :icon="h(LinkOutlined)"
+                    /> Share
                   </div>
                   <div class="action-container">
                     <a-button type="text" class="action-button" :icon="h(CopyOutlined)"/> Copy
@@ -69,14 +84,14 @@
   import { EditOutlined, ImportOutlined, CheckOutlined,CopyOutlined, ScissorOutlined, LinkOutlined, DownloadOutlined, DeleteOutlined, EllipsisOutlined } from '@ant-design/icons-vue'
   import type { TableColumnsType } from 'ant-design-vue';
   import Router from '@/router/index';
+  import { message } from 'ant-design-vue';
   import type { Document, FolderDocument } from '@/repositories/Document';
   import FileCarousel from './FileCarousel.vue';
 
+  const [messageApi, contextHolder] = message.useMessage();
+
   type Key = string | number;
   const documentStore = useDocumentStore()
-  watchEffect(()=>{
-    console.log(documentStore.mainDocument)
-  })
   const editableData: UnwrapRef<Record<string, Document>> = reactive({});
   const state = reactive<{
     selectedRowKeys: Key[];
@@ -143,7 +158,10 @@
     Object.assign(documentStore.mainDocument.filter(item => key === item.key)[0], editableData[key]);
     delete editableData[key];
   };
-
+  const share = async (url : string) => {
+    await navigator.clipboard.writeText(location.origin + url)
+    messageApi.success("Link successfully copied to the clipboard");
+  }
   </script>
 
   <style>