Removing stuff, refactoring for simplicity

cista-front/src/components/FileCarousel.vue

@@ -1,137 +0,0 @@
-<template>
-  <div class="carousel" ref="fileCarousel"> 
-    <a-page-header :style="{ visibility: idle ? 'hidden' : 'visible' }">
-      <template #extra>
-        <a-button type="text" class="action-button" :onclick="toggle" :icon="h(isFullscreen? FullscreenExitOutlined: FullscreenOutlined)" />
-        <a-button type="text" class="action-button" :onclick="redirectBack" :icon="h(CloseOutlined)" />
-      </template>
-    </a-page-header>
-    <a-row class="slider">
-      <a-col :span="2" class="centered-vertically">
-        <div class="custom-slick-arrow slick-arrow slick-prev centered" @click="next(-1)" style="left: 10px; z-index: 1">
-          <LeftOutlined v-show="!idle" />
-        </div>
-      </a-col>
-      <a-col :span="20" class="centered">
-        <FileViewer v-if="!documentStore.loading" :visibleImg="visible" @visibleImg="setVisible" :type="fileType"></FileViewer>
-      </a-col>
-      <a-col :span="2" class="centered-vertically right">
-        <div class="custom-slick-arrow slick-arrow slick-prev centered" @click="next(1)" style="right: 10px">
-          <RightOutlined v-show="!idle" />
-        </div>
-      </a-col>
-    </a-row>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { h, ref, watchEffect } from 'vue'
-import { useDocumentStore } from '@/stores/documents'
-import { useIdle, useFullscreen } from '@vueuse/core'
-import { LeftOutlined, RightOutlined, FullscreenOutlined, FullscreenExitOutlined, CloseOutlined } from '@ant-design/icons-vue';
-import { getFileType } from '@/utils'
-import Router from '@/router/index';
-import FileViewer from './FileViewer.vue';
-
-const fileCarousel = ref<HTMLElement | null>(null)
-const { isFullscreen, toggle } = useFullscreen(fileCarousel)
-const visible = ref<boolean>(false);
-const documentStore = useDocumentStore()
-const fileType = ref<string| undefined>(undefined);
-watchEffect(() => {
-  if(documentStore.mainDocument[0] && documentStore.mainDocument[0].type === 'file'){
-    const fileExt =  documentStore.mainDocument[0].ext 
-    fileType.value = getFileType(fileExt)
-  }
-})
-function setVisible(value: boolean) {
-  visible.value = value;
-}
-
-const { idle } = useIdle(2000)
-
-function redirectBack() {
-  const currentPath = Router.currentRoute.value.path;
-  const pathParts = currentPath.split('/').filter(part => part); // Remove empty parts
-  // Ensure there's always at least one part in the path
-  if (pathParts.length <= 1) {
-    // If it's empty, set it to the base URL
-    pathParts[0] = '/';
-  } else {
-    pathParts.pop();
-  }
-  const newPath = pathParts.join('/');
-  Router.push(newPath);
-}
-function next(direction: number){
-  const path = decodeURIComponent(new String(Router.currentRoute.value.path) as string)
-  const name = documentStore.getNextDocumentInRoute(direction, path)
-  let nextFileLocation : string[] | string = path.split('/')
-  nextFileLocation.pop()
-  nextFileLocation.push(name)
-  nextFileLocation = nextFileLocation.join('/')
-  Router.push(nextFileLocation)
-}
-
-
-</script>
-<style scoped>
-:deep(.slick-arrow.custom-slick-arrow) {
-  width: 60px;
-  height: 60px;
-  font-size: 60px;
-  color: var(--primary-color);
-  transition: ease-in all 0.3s;
-  opacity: 0.3;
-  z-index: 1;
-}
-
-:deep(.slick-arrow.custom-slick-arrow:before) {
-  display: none;
-}
-
-:deep(.slick-arrow.custom-slick-arrow:hover) {
-  color: var(--primary-color);
-  opacity: 1;
-}
-
-.slider {
-  height: 80vh;
-  background-color: inherit;
-}
-
-.centered {
-  display: flex;
-  justify-content: center;
-  align-content: center;
-}
-
-.centered-vertically {
-  display: flex;
-  align-items: center;
-}
-
-.right {
-  flex-direction: row-reverse;
-}
-
-.action-button {
-  padding: 0;
-  font-size: 1.5em;
-  opacity: 0.5;
-  color: var(--secondary-color);
-
-  &:hover {
-    color: var(--blue-color);
-  }
-}
-
-.ant-page-header {
-  padding: 0;
-}
-.carousel{
-  margin: 0;
-  height: inherit;
-  background-color: var(--table-background);
-}
-</style>

cista-front/src/components/FileExplorer.vue

@@ -1,12 +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>
-    </div>
-
-    <table v-else-if="!documentStore.loading && documentStore.mainDocument">
+    <table v-if="documentStore.mainDocument.length">
       <thead>
         <tr>
           <th class="selection"><input type="checkbox" v-model="allSelected" :indeterminate="selectionIndeterminate"></th>
@@ -17,7 +11,9 @@
       </thead>
       <tbody>
         <tr v-for="doc of sorted(documentStore.mainDocument as FolderDocument[])" :key="doc.key" :class="doc.type === 'folder' ? 'folder' : 'file'">
-          <td class="selection"><input type="checkbox" v-model="doc.selected"></td>
+          <td class="selection">
+            <input type="checkbox" :checked="doc.key in documentStore.selected" @change="documentStore.selected.add(doc.key)">
+          </td>
           <td class="name">
             <template v-if="editing === doc"><FileRenameInput :doc="doc" :rename="rename" :exit="() => { editing = null}"/></template>
             <template v-else>
@@ -39,7 +35,6 @@ import { ref, computed } from 'vue'
 import { useDocumentStore } from '@/stores/documents'
 import Router from '@/router/index';
 import type { Document, FolderDocument } from '@/repositories/Document';
-import FileCarousel from './FileCarousel.vue';
 import FileRenameInput from './FileRenameInput.vue'
 import createWebSocket from '@/repositories/WS';
 
@@ -93,17 +88,21 @@ const sorted = (documents: FolderDocument[]) => {
 }
 const selectionIndeterminate = computed({
   get: () => {
-    return documentStore.mainDocument && documentStore.mainDocument.length > 0 && documentStore.mainDocument.some((doc: Document) => doc.selected) && !allSelected.value
+    return documentStore.mainDocument && documentStore.mainDocument.length > 0 && documentStore.mainDocument.some((doc: Document) => doc.key in documentStore.selected) && !allSelected.value
   },
   set: (value: boolean) => {}
 })
 const allSelected = computed({
   get: () => {
-    return documentStore.mainDocument && documentStore.mainDocument.length > 0 && documentStore.mainDocument.every((doc: Document) => doc.selected)
+    return documentStore.mainDocument && documentStore.mainDocument.length > 0 && documentStore.mainDocument.every((doc: Document) => doc.key in documentStore.selected)
   },
   set: (value: boolean) => {
-    if (documentStore.mainDocument) {
-      documentStore.mainDocument.forEach((doc: Document) => doc.selected = value)
+    for (const doc of documentStore.mainDocument) {
+      if (value) {
+        documentStore.selected.add(doc.key)
+      } else {
+        documentStore.selected.delete(doc.key)
+      }
     }
   }
 })

cista-front/src/components/HeaderMain.vue

@@ -48,11 +48,7 @@ function about() {
   console.log("About ...")
 }
 function deleteHandler(){
-  if(documentStore.selectedDocuments){
-    documentStore.selectedDocuments.forEach(document => {
-      documentStore.deleteDocument(document)
-    })
-  }
+  console.log("Delete ...")
 }
 function share(){
   console.log("Share ...")
@@ -80,7 +76,7 @@ function download(){
         <a-button @click="createFolderHandler" type="text" class="action-button" :icon="h(FolderFilled)" />
       </a-tooltip>
       <!-- TODO ADD CONDITIONAL RENDER -->
-      <template v-if="documentStore.selectedDocuments && documentStore.selectedDocuments.length > 0">
+      <template v-if="documentStore.selected.size > 0">
         <a-tooltip title="Share">
           <a-button type="text" @click="share" class="action-button" :icon="h(LinkOutlined)" />
         </a-tooltip>