Group export files by folder, fix #95

CHANGELOG.md

@@ -19,7 +19,7 @@ As this project is a user-facing application, the places in the semantic version
 
 ### Changed
 
-- Export files are sorted alphabetically
+- Group export files by folder [#95](https://github.com/spraakbanken/mink-frontend/issues/95)
 
 ### Fixed
 

src/corpus/exports/CorpusResult.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from "vue";
+import groupBy from "lodash/groupBy";
 import useExports from "@/corpus/exports/exports.composable";
 import useCorpusIdParam from "@/corpus/corpusIdParam.composable";
 import ActionButton from "@/components/ActionButton.vue";
@@ -17,6 +19,12 @@ const {
   getDownloadFilename,
 } = useExports(corpusId);
 
+const exportsByFolder = computed(() =>
+  exports.value
+    ? groupBy(exports.value, (meta) => meta.path.split("/").shift())
+    : undefined,
+);
+
 loadExports();
 </script>
 
@@ -54,17 +62,22 @@ loadExports();
           </tr>
         </thead>
         <tbody>
-          <tr v-for="file in exports" :key="file.name">
-            <td>
-              <a href="#" @click.prevent="downloadResultFile(file.path)">
-                <icon :icon="['fas', 'download']" />
-                {{ file.path }}
-              </a>
-            </td>
-            <td class="text-right whitespace-nowrap">
-              {{ filesize(file.size) }}
-            </td>
-          </tr>
+          <template v-for="(exports_, folder) in exportsByFolder" :key="folder">
+            <tr>
+              <td colspan="2">{{ folder }}/</td>
+            </tr>
+            <tr v-for="file in exports_" :key="file.name">
+              <td class="!pl-6">
+                <a href="#" @click.prevent="downloadResultFile(file.path)">
+                  <icon :icon="['fas', 'download']" />
+                  {{ file.path.split("/").slice(1).join("/") }}
+                </a>
+              </td>
+              <td class="text-right whitespace-nowrap">
+                {{ filesize(file.size) }}
+              </td>
+            </tr>
+          </template>
         </tbody>
       </table>
     </LayoutSection>