Merge pull request #7397 from christianbeeznest/GH-7391

Dropbox: Improve Dropbox UI: single upload button + received description + bulk actions - refs #7391

Author: christianbeeznest

assets/vue/components/dropbox/DropboxLayout.vue

@@ -1,22 +1,25 @@
 <template>
   <div class="dbx">
-    <BaseToolbar class="dbx-toolbar" :showTopBorder="true">
+    <BaseToolbar
+      class="dbx-toolbar"
+      :showTopBorder="true"
+    >
       <template #start>
-        <h2 class="text-lg font-semibold m-0">Dropbox</h2>
+        <h2 class="text-lg font-semibold m-0">{{ t("Dropbox") }}</h2>
       </template>
 
       <template #end>
         <RouterLink
           class="nav-link"
-          :to="{ name:'DropboxListSent', params:$route.params, query:$route.query }"
+          :to="{ name: 'DropboxListReceived', params: $route.params, query: { ...$route.query, tab: 'received' } }"
         >
-          Sent
+          {{ t("Received") }}
         </RouterLink>
         <RouterLink
           class="nav-link"
-          :to="{ name:'DropboxListReceived', params:$route.params, query:$route.query }"
+          :to="{ name: 'DropboxListSent', params: $route.params, query: { ...$route.query, tab: 'sent' } }"
         >
-          Received
+          {{ t("Sent") }}
         </RouterLink>
       </template>
     </BaseToolbar>
@@ -29,7 +32,11 @@
 
 <script setup>
 import BaseToolbar from "../basecomponents/BaseToolbar.vue"
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
 </script>
+
 <style scoped>
 .dbx {
   width: 100%;

assets/vue/router/dropbox.js

@@ -7,7 +7,7 @@ export default {
   name: "dropbox",
   component: () => import("../components/dropbox/DropboxLayout.vue"),
   redirect: (to) => ({
-    name: "DropboxListSent",
+    name: "DropboxListReceived",
     params: to.params,
     query: to.query,
   }),

assets/vue/views/dropbox/DropboxCreate.vue

@@ -9,7 +9,7 @@
         </div>
       </template>
       <template #end>
-        <RouterLink :to="{ name: 'DropboxListSent', params: $route.params, query: $route.query }">
+        <RouterLink :to="returnRoute">
           <BaseButton
             type="black"
             icon="arrow-left"
@@ -130,7 +130,7 @@
             </div>
 
             <div class="flex justify-end gap-2 mt-6">
-              <RouterLink :to="{ name: 'DropboxListSent', params: $route.params, query: $route.query }">
+              <RouterLink :to="returnRoute">
                 <BaseButton
                   type="black"
                   icon="xmark"
@@ -178,6 +178,8 @@ import service from "../../services/dropbox"
 const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
+const returnRouteName = computed(() => (route.query?.from === "received" ? "DropboxListReceived" : "DropboxListSent"))
+const returnRoute = computed(() => ({ name: returnRouteName.value, params: route.params, query: route.query }))
 const uppy = shallowRef(null)
 
 const pickedFiles = ref([])
@@ -304,7 +306,7 @@ async function submit() {
     pickedFiles.value = []
 
     // Navigate back to list (sent)
-    router.push({ name: "DropboxListSent", params: route.params, query: route.query })
+    router.push(returnRoute.value)
   } catch (e) {
     console.error(e)
     alert(t("Upload failed"))