1 files changed, 34 insertions, 38 deletions

diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue
index e75a37e..d148b9c 100644
--- a/viewer/src/views/GallerySearch.vue
+++ b/viewer/src/views/GallerySearch.vue
@@ -1,7 +1,7 @@
 <!-- ldgallery - A static generator which turns a collection of tagged
 --             pictures into a searchable web gallery.
 --
--- Copyright (C) 2019-2020  Guillaume FOUET
+-- Copyright (C) 2019-2022  Guillaume FOUET
 --
 -- This program is free software: you can redistribute it and/or modify
 -- it under the terms of the GNU Affero General Public License as
@@ -18,43 +18,39 @@
 -->
 
 <template>
-  <ld-gallery :items="items()" :noresult="noResult()" />
+  <GalleryTiles
+    :items="items.filteredByPath"
+    :noresult-message="noResult"
+  />
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
-import { Operation } from "@/@types/Operation";
-import IndexSearch from "@/services/indexsearch";
-
-@Component
-export default class GalleryPicture extends Vue {
-  @Prop(String) readonly path!: string;
-
-  otherCount: Number = 0;
-
-  mounted() {
-    this.$uiStore.toggleFullscreen(false);
-    this.$uiStore.toggleSearchMode(true);
-  }
-
-  destroyed() {
-    this.$uiStore.toggleSearchMode(false);
-    this.$galleryStore.setCurrentSearch([]);
-  }
-
-  items() {
-    const searchResult = IndexSearch.search(this.$galleryStore.currentSearch);
-    const filteredByPath = searchResult.filter(item => item.path.startsWith(this.path));
-    this.otherCount = searchResult.length - filteredByPath.length;
-    return filteredByPath;
-  }
-
-  noResult() {
-    const params = [this.otherCount, this.otherCount > 1 ? "s" : ""];
-    return this.$t("search.no-results.otherfolders", params);
-  }
-}
+<script setup lang="ts">
+import { useIndexSearch } from '@/services/indexSearch';
+import { useGalleryStore } from '@/store/galleryStore';
+import { useUiStore } from '@/store/uiStore';
+import { computed, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import GalleryTiles from './GalleryTiles.vue';
+
+const { t } = useI18n();
+const uiStore = useUiStore();
+const galleryStore = useGalleryStore();
+const indexSearch = useIndexSearch();
+
+uiStore.toggleFullscreen(false);
+uiStore.searchMode = true;
+onUnmounted(() => {
+  uiStore.searchMode = false;
+  galleryStore.currentSearch = [];
+});
+
+const items = computed(() => {
+  const { currentPath, currentSearch } = galleryStore;
+  if (!currentPath) return { searchResult: [], filteredByPath: [] };
+  const searchResult = indexSearch(currentSearch);
+  const filteredByPath = searchResult.filter(item => item.path.startsWith(currentPath));
+  return { searchResult, filteredByPath };
+});
+const otherCount = computed(() => items.value.searchResult.length - items.value.filteredByPath.length);
+const noResult = computed(() => t('search.no-result-fmt', [otherCount.value]));
 </script>
-
-<style lang="scss">
-</style>