aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/views')
-rw-r--r--viewer/src/views/GalleryNavigation.vue103
-rw-r--r--viewer/src/views/GallerySearch.vue69
-rw-r--r--viewer/src/views/GalleryTiles.vue70
-rw-r--r--viewer/src/views/ItemThumbnail.vue99
-rw-r--r--viewer/src/views/MainLayout.vue159
-rw-r--r--viewer/src/views/PanelLeft.vue116
-rw-r--r--viewer/src/views/SplashScreen.vue75
-rw-r--r--viewer/src/views/item_handlers/AudioViewer.vue65
-rw-r--r--viewer/src/views/item_handlers/DirectoryViewer.vue42
-rw-r--r--viewer/src/views/item_handlers/DownloadViewer.vue66
-rw-r--r--viewer/src/views/item_handlers/MarkdownViewer.vue50
-rw-r--r--viewer/src/views/item_handlers/PdfViewer.vue48
-rw-r--r--viewer/src/views/item_handlers/PictureViewer.vue129
-rw-r--r--viewer/src/views/item_handlers/PlainTextViewer.vue69
-rw-r--r--viewer/src/views/item_handlers/VideoViewer.vue47
-rw-r--r--viewer/src/views/layout/left/LayoutCommandSearch.vue64
-rw-r--r--viewer/src/views/layout/left/LayoutInformation.vue99
-rw-r--r--viewer/src/views/layout/left/LayoutLeft.vue158
-rw-r--r--viewer/src/views/layout/left/LayoutProposition.vue208
-rw-r--r--viewer/src/views/layout/left/LayoutTagInput.vue141
-rw-r--r--viewer/src/views/layout/left/LayoutTagList.vue74
-rw-r--r--viewer/src/views/layout/top/LayoutBreadcrumb.vue130
-rw-r--r--viewer/src/views/layout/top/LayoutCommand.vue127
-rw-r--r--viewer/src/views/layout/top/LayoutCommandSort.vue85
-rw-r--r--viewer/src/views/layout/top/LayoutTop.vue (renamed from viewer/src/views/PanelTop.vue)22
25 files changed, 2023 insertions, 292 deletions
diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue
index fd1f19a..0869aaf 100644
--- a/viewer/src/views/GalleryNavigation.vue
+++ b/viewer/src/views/GalleryNavigation.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
@@ -19,62 +19,63 @@
19 19
20<template> 20<template>
21 <div> 21 <div>
22 <ld-error v-if="isError" icon="folder-open" :message="$t('gallery.unknown-resource')" /> 22 <LdNotice
23 <gallery-search v-else-if="isSearch" :path="path" /> 23 v-if="isError"
24 <component :is="componentName" v-else :item="$galleryStore.currentItem" /> 24 :icon="faFolderOpen"
25 :message="t('gallery.unknown-resource')"
26 />
27 <GallerySearch v-else-if="isSearch" />
28 <component
29 :is="componentName"
30 v-else
31 :key="componentKey"
32 :item="galleryStore.currentItem"
33 />
25 </div> 34 </div>
26</template> 35</template>
27 36
28<script lang="ts"> 37<script setup lang="ts">
29import { Component, Vue, Prop, Watch } from "vue-property-decorator"; 38import { ItemType } from '@/@types/itemType';
30import { ItemType } from "@/@types/ItemType"; 39import LdNotice from '@/components/LdNotice.vue';
31import Navigation from "@/services/navigation"; 40import { isDirectory } from '@/services/itemGuards';
32import GallerySearch from "@/views/GallerySearch.vue"; 41import { useGalleryStore } from '@/store/galleryStore';
42import { faFolderOpen } from '@fortawesome/free-solid-svg-icons';
43import { computedEager } from '@vueuse/shared';
44import { computed, watchEffect } from 'vue';
45import { useI18n } from 'vue-i18n';
46import GallerySearch from './GallerySearch.vue';
47import AudioViewer from './item_handlers/AudioViewer.vue';
48import DirectoryViewer from './item_handlers/DirectoryViewer.vue';
49import DownloadViewer from './item_handlers/DownloadViewer.vue';
50import MarkdownViewer from './item_handlers/MarkdownViewer.vue';
51import PdfViewer from './item_handlers/PdfViewer.vue';
52import PictureViewer from './item_handlers/PictureViewer.vue';
53import PlainTextViewer from './item_handlers/PlainTextViewer.vue';
54import VideoViewer from './item_handlers/VideoViewer.vue';
33 55
34@Component({ 56const props = defineProps({
35 components: { 57 path: { type: String, required: true },
36 GallerySearch, 58 query: { type: Array<string>, required: true },
37 }, 59});
38})
39export default class GalleryNavigation extends Vue {
40 @Prop(String) readonly path!: string;
41 @Prop(Array) readonly query!: string[];
42 60
43 readonly COMPONENT_BY_TYPE: Record<ItemType, string> = { 61const { t } = useI18n();
44 directory: "ld-directory", 62const galleryStore = useGalleryStore();
45 picture: "ld-picture",
46 plaintext: "ld-plain-text-viewer",
47 pdf: "ld-pdf-viewer",
48 video: "ld-video-viewer",
49 audio: "ld-audio-viewer",
50 other: "ld-download",
51 };
52 63
53 mounted() { 64const COMPONENT_BY_TYPE: Record<ItemType, unknown> = {
54 this.pathChanged(); 65 directory: DirectoryViewer,
55 } 66 picture: PictureViewer,
67 plaintext: PlainTextViewer,
68 markdown: MarkdownViewer,
69 pdf: PdfViewer,
70 video: VideoViewer,
71 audio: AudioViewer,
72 other: DownloadViewer,
73};
56 74
57 get isError() { 75const isError = computedEager(() => !galleryStore.currentItem?.properties.type);
58 return this.checkType(null); 76const isSearch = computedEager(() => isDirectory(galleryStore.currentItem) && props.query.length > 0);
59 } 77const componentName = computed(() => COMPONENT_BY_TYPE[galleryStore.currentItem?.properties.type ?? ItemType.OTHER]);
78const componentKey = computed(() => galleryStore.currentItem?.path ?? '');
60 79
61 get isSearch() { 80watchEffect(() => (galleryStore.currentPath = props.path));
62 return this.checkType(ItemType.DIRECTORY) && this.query.length > 0;
63 }
64
65 get componentName() {
66 return this.COMPONENT_BY_TYPE[this.$galleryStore.currentItem?.properties.type ?? ItemType.OTHER];
67 }
68
69 @Watch("path")
70 pathChanged() {
71 this.$galleryStore.setCurrentPath(this.path);
72 }
73
74 checkType(type: ItemType | null): boolean {
75 return Navigation.checkType(this.$galleryStore.currentItem, type);
76 }
77}
78</script> 81</script>
79
80<style lang="scss"></style>
diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue
index fec7216..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,40 +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 { Component, Vue, Prop } from "vue-property-decorator"; 28import { useIndexSearch } from '@/services/indexSearch';
26import { Operation } from "@/@types/Operation"; 29import { useGalleryStore } from '@/store/galleryStore';
27import IndexSearch from "@/services/indexsearch"; 30import { useUiStore } from '@/store/uiStore';
28 31import { computed, onUnmounted } from 'vue';
29@Component 32import { useI18n } from 'vue-i18n';
30export default class GalleryPicture extends Vue { 33import GalleryTiles from './GalleryTiles.vue';
31 @Prop(String) readonly path!: string; 34
32 otherCount: number = 0; 35const { t } = useI18n();
33 36const uiStore = useUiStore();
34 mounted() { 37const galleryStore = useGalleryStore();
35 this.$uiStore.toggleFullscreen(false); 38const indexSearch = useIndexSearch();
36 this.$uiStore.toggleSearchMode(true); 39
37 } 40uiStore.toggleFullscreen(false);
38 41uiStore.searchMode = true;
39 destroyed() { 42onUnmounted(() => {
40 this.$uiStore.toggleSearchMode(false); 43 uiStore.searchMode = false;
41 this.$galleryStore.setCurrentSearch([]); 44 galleryStore.currentSearch = [];
42 } 45});
43 46
44 get items() { 47const items = computed(() => {
45 const searchResult = IndexSearch.search(this.$galleryStore.currentSearch); 48 const { currentPath, currentSearch } = galleryStore;
46 const filteredByPath = searchResult.filter(item => item.path.startsWith(this.path)); 49 if (!currentPath) return { searchResult: [], filteredByPath: [] };
47 this.otherCount = searchResult.length - filteredByPath.length; 50 const searchResult = indexSearch(currentSearch);
48 return filteredByPath; 51 const filteredByPath = searchResult.filter(item => item.path.startsWith(currentPath));
49 } 52 return { searchResult, filteredByPath };
50 53});
51 get noResult() { 54const otherCount = computed(() => items.value.searchResult.length - items.value.filteredByPath.length);
52 return this.$tc("search.no-result-fmt", this.otherCount, [this.otherCount]); 55const noResult = computed(() => t('search.no-result-fmt', [otherCount.value]));
53 }