From 00a25271513647f4a7e5509b19845c045df9999d Mon Sep 17 00:00:00 2001
From: "kissudad@outlook.com" <kissudad@outlook.com>
Date: Wed, 10 Apr 2024 23:22:41 +0800
Subject: [PATCH] fix: (Share Page)

- Fixed the pagination logic in `filelisting`.
- Restored the original functionality of `header-bar`.
---
 .../files/FileListing.vue                     | 20 +++--
 frontend/src/css/_share.css                   |  2 +-
 frontend/src/stores/router.ts                 | 14 ----
 frontend/src/views/Files.vue                  |  2 +-
 frontend/src/views/Share.vue                  | 80 ++++++++-----------
 5 files changed, 50 insertions(+), 68 deletions(-)
 rename frontend/src/{views => components}/files/FileListing.vue (98%)
 delete mode 100644 frontend/src/stores/router.ts

diff --git a/frontend/src/views/files/FileListing.vue b/frontend/src/components/files/FileListing.vue
similarity index 98%
rename from frontend/src/views/files/FileListing.vue
rename to frontend/src/components/files/FileListing.vue
index 0a1bb991..a2387348 100644
--- a/frontend/src/views/files/FileListing.vue
+++ b/frontend/src/components/files/FileListing.vue
@@ -1,15 +1,17 @@
 <template>
   <div>
     <header-bar showMenu showLogo>
-      <search />
+      <search v-if="enableSearch" />
       <title />
       <action
+        v-if="enableSearch"
         class="search-button"
         icon="search"
         :label="t('buttons.search')"
         @action="openSearch()"
       />
 
+      <slot />
       <template #actions>
         <template v-if="!isMobile">
           <action
@@ -74,7 +76,7 @@
         />
         <action icon="info" :label="t('buttons.info')" show="info" />
         <action
-          v-if="authStore.isLoggedIn"
+          v-if="showMultipleSelectionButton"
           icon="check_circle"
           :label="t('buttons.selectMultiple')"
           @action="toggleMultipleSelection"
@@ -313,9 +315,17 @@ import {
 import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { storeToRefs } from "pinia";
-const { headerStickyTop } = defineProps<{
-  headerStickyTop?: string;
-}>();
+const { headerStickyTop } = withDefaults(
+  defineProps<{
+    headerStickyTop?: string;
+    enableSearch: boolean;
+    showMultipleSelectionButton: boolean;
+  }>(),
+  {
+    enableSearch: true,
+    showMultipleSelectionButton: true,
+  }
+);
 
 const showLimit = ref<number>(50);
 const columnWidth = ref<number>(280);
diff --git a/frontend/src/css/_share.css b/frontend/src/css/_share.css
index f6a19a5f..7bb8e8c0 100644
--- a/frontend/src/css/_share.css
+++ b/frontend/src/css/_share.css
@@ -56,7 +56,7 @@
 
 .share__box__items {
   text-align: left;
-  flex: 10 0 25em;
+  flex: 10 0 32em;
 }
 
 .share__box__items #listing.list .item {
diff --git a/frontend/src/stores/router.ts b/frontend/src/stores/router.ts
deleted file mode 100644
index e598824c..00000000
--- a/frontend/src/stores/router.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { defineStore } from "pinia";
-
-/**
- * Dummy store for exposing router to be used in other stores
- * @example
- *  // route: () => {
- *  //   const routerStore = useRouterStore();
- *  //   return routerStore.router.currentRoute;
- *  // },
- */
-export const useRouterStore = defineStore("routerStore", () => {
-  // can be an empty definition
-  return {};
-});
diff --git a/frontend/src/views/Files.vue b/frontend/src/views/Files.vue
index aa5edd87..03be4d8f 100644
--- a/frontend/src/views/Files.vue
+++ b/frontend/src/views/Files.vue
@@ -47,7 +47,7 @@ import Breadcrumbs from "@/components/Breadcrumbs.vue";
 import Errors from "@/views/Errors.vue";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
-import FileListing from "@/views/files/FileListing.vue";
+import FileListing from "@/components/files/FileListing.vue";
 import { StatusError } from "@/api/utils";
 const Editor = defineAsyncComponent(() => import("@/views/files/Editor.vue"));
 const Preview = defineAsyncComponent(() => import("@/views/files/Preview.vue"));
diff --git a/frontend/src/views/Share.vue b/frontend/src/views/Share.vue
index 1e38fd1d..a070c2f2 100644
--- a/frontend/src/views/Share.vue
+++ b/frontend/src/views/Share.vue
@@ -1,31 +1,5 @@
 <template>
   <div>
-    <header-bar showMenu showLogo>
-      <title />
-
-      <action
-        v-if="fileStore.selectedCount"
-        icon="file_download"
-        :label="t('buttons.download')"
-        @action="download"
-        :counter="fileStore.selectedCount"
-      />
-      <button
-        v-if="isSingleFile()"
-        class="action copy-clipboard"
-        :aria-label="t('buttons.copyDownloadLinkToClipboard')"
-        :data-title="t('buttons.copyDownloadLinkToClipboard')"
-        @click="copyToClipboard(linkSelected())"
-      >
-        <i class="material-icons">content_paste</i>
-      </button>
-      <action
-        icon="check_circle"
-        :label="t('buttons.selectMultiple')"
-        @action="toggleMultipleSelection"
-      />
-    </header-bar>
-
     <breadcrumbs :base="'/share/' + hash" />
 
     <div v-if="layoutStore.loading">
@@ -77,12 +51,10 @@
       <div class="share">
         <div
           class="share__box share__box__info"
-          style="
-            position: -webkit-sticky;
-            position: sticky;
-            top: -25.6em;
-            z-index: 999;
-          "
+          style="position: -webkit-sticky; position: sticky; z-index: 999"
+          :style="{
+            top: isMobile ? '-25.6em' : '4em',
+          }"
         >
           <div class="share__box__header" style="height: 3em">
             {{
@@ -233,10 +205,32 @@
           style="background-color: transparent"
         >
           <FileListing
-            :header-sticky-top="
-              useMediaQuery('min-width: 916px') ? '19em' : '0'
-            "
-          />
+            :header-sticky-top="isMobile ? '19em' : '4em'"
+            :enable-search="false"
+            :show-multiple-selection-button="false"
+          >
+            <action
+              v-if="fileStore.selectedCount"
+              icon="file_download"
+              :label="t('buttons.download')"
+              @action="download"
+              :counter="fileStore.selectedCount"
+            />
+            <button
+              v-if="isSingleFile()"
+              class="action copy-clipboard"
+              :aria-label="t('buttons.copyDownloadLinkToClipboard')"
+              :data-title="t('buttons.copyDownloadLinkToClipboard')"
+              @click="copyToClipboard(linkSelected())"
+            >
+              <i class="material-icons">content_paste</i>
+            </button>
+            <action
+              icon="check_circle"
+              :label="t('buttons.selectMultiple')"
+              @action="toggleMultipleSelection"
+            />
+          </FileListing>
         </div>
         <div
           v-else-if="req.isDir && req.items.length === 0"
@@ -257,12 +251,11 @@ import { pub as api } from "@/api";
 import { filesize } from "@/utils";
 import dayjs from "dayjs";
 
-import HeaderBar from "@/components/header/HeaderBar.vue";
 import Action from "@/components/header/Action.vue";
 import Breadcrumbs from "@/components/Breadcrumbs.vue";
 import Errors from "@/views/Errors.vue";
 import QrcodeVue from "qrcode.vue";
-import FileListing from "@/views/files/FileListing.vue";
+import FileListing from "@/components/files/FileListing.vue";
 
 import { useFileStore } from "@/stores/file";
 import { useAuthStore } from "@/stores/auth";
@@ -276,6 +269,7 @@ import { copy } from "@/utils/clipboard";
 import { storeToRefs } from "pinia";
 import { useMediaQuery } from "@vueuse/core";
 
+const isMobile = useMediaQuery("(max-width: 1125px)");
 const error = ref<StatusError | null>(null);
 const showLimit = ref<number>(100);
 const password = ref<string>("");
@@ -415,6 +409,7 @@ const keyEvent = (event: KeyboardEvent) => {
 
 const toggleMultipleSelection = () => {
   fileStore.toggleMultiple();
+  layoutStore.closeHovers();
 };
 
 const isSingleFile = () =>
@@ -489,12 +484,3 @@ onBeforeUnmount(() => {
   window.removeEventListener("keydown", keyEvent);
 });
 </script>
-
-<style scoped>
-@media (min-width: 916px) {
-  .share__box__items {
-    height: calc(100vh - 9.8em);
-    overflow-y: auto;
-  }
-}
-</style>