aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views/GallerySearch.vue
diff options
context:
space:
mode:
authorpacien2022-09-03 01:34:26 +0200
committerpacien2022-09-03 01:34:26 +0200
commita8452594c6571e8003baa2aca14747eeeee08152 (patch)
treea894d99c22a601197869c7a6928d40bb4ae2c392 /viewer/src/views/GallerySearch.vue
parentdd9c9804e9e3da9880c711f53edb9c4a19d782f8 (diff)
parent00510820a2794efcadbc83f7f8b54318fe198ecb (diff)
downloadldgallery-a8452594c6571e8003baa2aca14747eeeee08152.tar.gz
Merge branch 'vue3-refactoring-staging' into develop
Reviewed-by: pacien <pacien.trangirard@pacien.net>
Diffstat (limited to 'viewer/src/views/GallerySearch.vue')
-rw-r--r--viewer/src/views/GallerySearch.vue60
1 files changed, 31 insertions, 29 deletions
diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue
index 5ab56e0..d148b9c 100644
--- a/viewer/src/views/GallerySearch.vue
+++ b/viewer/src/views/GallerySearch.vue
@@ -1,7 +1,7 @@
1<!-- ldgallery - A static generator which turns a collection of tagged 1<!-- ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery. 2-- pictures into a searchable web gallery.
3-- 3--
4-- Copyright (C) 2019-2020 Guillaume FOUET 4-- Copyright (C) 2019-2022 Guillaume FOUET
5-- 5--
6-- This program is free software: you can redistribute it and/or modify 6-- This program is free software: you can redistribute it and/or modify
7-- it under the terms of the GNU Affero General Public License as 7-- it under the terms of the GNU Affero General Public License as
@@ -18,37 +18,39 @@
18--> 18-->
19 19
20<template> 20<template>
21 <ld-gallery :items="items" :noresult="noResult" /> 21 <GalleryTiles
22 :items="items.filteredByPath"
23 :noresult-message="noResult"
24 />
22</template> 25</template>
23 26
24<script lang="ts"> 27<script setup lang="ts">
25import IndexSearch from "@/services/indexsearch"; 28import { useIndexSearch } from '@/services/indexSearch';
26import { Component, Prop, Vue } from "vue-property-decorator"; 29import { useGalleryStore } from '@/store/galleryStore';
30import { useUiStore } from '@/store/uiStore';
31import { computed, onUnmounted } from 'vue';
32import { useI18n } from 'vue-i18n';
33import GalleryTiles from './GalleryTiles.vue';
27 34
28@Component 35const { t } = useI18n();
29export default class GalleryPicture extends Vue { 36const uiStore = useUiStore();
30 @Prop(String) readonly path!: string; 37const galleryStore = useGalleryStore();
31 otherCount: number = 0; 38const indexSearch = useIndexSearch();
32 39
33 mounted() { 40uiStore.toggleFullscreen(false);
34 this.$uiStore.toggleFullscreen(false); 41uiStore.searchMode = true;
35 this.$uiStore.toggleSearchMode(true); 42onUnmounted(() => {
36 } 43 uiStore.searchMode = false;
44 galleryStore.currentSearch = [];
45});
37 46
38 destroyed() { 47const items = computed(() => {
39 this.$uiStore.toggleSearchMode(false); 48 const { currentPath, currentSearch } = galleryStore;
40 this.$galleryStore.setCurrentSearch([]); 49 if (!currentPath) return { searchResult: [], filteredByPath: [] };
41 } 50 const searchResult = indexSearch(currentSearch);
42 51 const filteredByPath = searchResult.filter(item => item.path.startsWith(currentPath));
43 get items() { 52 return { searchResult, filteredByPath };
44 const searchResult = IndexSearch.search(this.$galleryStore.currentSearch); 53});
45 const filteredByPath = searchResult.filter(item => item.path.startsWith(this.path)); 54const otherCount = computed(() => items.value.searchResult.length - items.value.filteredByPath.length);
46 this.otherCount = searchResult.length - filteredByPath.length; 55const noResult = computed(() => t('search.no-result-fmt', [otherCount.value]));
47 return filteredByPath;
48 }
49
50 get noResult() {
51 return this.$tc("search.no-result-fmt", this.otherCount, [this.otherCount]);
52 }
53}
54</script> 56</script>