aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/views')
-rw-r--r--viewer/src/views/GalleryDirectory.vue43
-rw-r--r--viewer/src/views/GalleryNavigation.vue38
-rw-r--r--viewer/src/views/GallerySearch.vue15
-rw-r--r--viewer/src/views/MainLayout.vue30
-rw-r--r--viewer/src/views/PanelLeft.vue34
-rw-r--r--viewer/src/views/PanelTop.vue8
6 files changed, 73 insertions, 95 deletions
diff --git a/viewer/src/views/GalleryDirectory.vue b/viewer/src/views/GalleryDirectory.vue
deleted file mode 100644
index 30f651c..0000000
--- a/viewer/src/views/GalleryDirectory.vue
+++ /dev/null
@@ -1,43 +0,0 @@
1<!-- ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2019-2020 Guillaume FOUET
5--
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
8-- published by the Free Software Foundation, either version 3 of the
9-- License, or (at your option) any later version.
10--
11-- This program is distributed in the hope that it will be useful,
12-- but WITHOUT ANY WARRANTY; without even the implied warranty of
13-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14-- GNU Affero General Public License for more details.
15--
16-- You should have received a copy of the GNU Affero General Public License
17-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18-->
19
20<template>
21 <ld-gallery :items="orderedItems()" :noresult="$t('directory.no-results')" />
22</template>
23
24<script lang="ts">
25import { Component, Vue, Prop } from "vue-property-decorator";
26import Navigation from "@/services/navigation";
27
28@Component
29export default class GalleryDirectory extends Vue {
30 @Prop({ required: true }) readonly directory!: Gallery.Directory;
31
32 mounted() {
33 this.$uiStore.toggleFullscreen(false);
34 }
35
36 orderedItems() {
37 return Navigation.directoriesFirst(this.directory.properties.items);
38 }
39}
40</script>
41
42<style lang="scss">
43</style>
diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue
index 7c6d11b..fd1f19a 100644
--- a/viewer/src/views/GalleryNavigation.vue
+++ b/viewer/src/views/GalleryNavigation.vue
@@ -19,23 +19,20 @@
19 19
20<template> 20<template>
21 <div> 21 <div>
22 <gallery-search v-if="query.length" :path="path" /> 22 <ld-error v-if="isError" icon="folder-open" :message="$t('gallery.unknown-resource')" />
23 <gallery-directory v-else-if="checkType('directory')" :directory="$galleryStore.currentItem" /> 23 <gallery-search v-else-if="isSearch" :path="path" />
24 <ld-picture v-else-if="checkType('picture')" :picture="$galleryStore.currentItem" /> 24 <component :is="componentName" v-else :item="$galleryStore.currentItem" />
25 <div v-else>{{$t("gallery.unknowntype")}}</div>
26 </div> 25 </div>
27</template> 26</template>
28 27
29<script lang="ts"> 28<script lang="ts">
30import { Component, Vue, Prop, Watch } from "vue-property-decorator"; 29import { Component, Vue, Prop, Watch } from "vue-property-decorator";
31import { Operation } from "@/@types/Operation"; 30import { ItemType } from "@/@types/ItemType";
32import Navigation from "@/services/navigation"; 31import Navigation from "@/services/navigation";
33import GalleryDirectory from "./GalleryDirectory.vue";
34import GallerySearch from "@/views/GallerySearch.vue"; 32import GallerySearch from "@/views/GallerySearch.vue";
35 33
36@Component({ 34@Component({
37 components: { 35 components: {
38 GalleryDirectory,
39 GallerySearch, 36 GallerySearch,
40 }, 37 },
41}) 38})
@@ -43,20 +40,41 @@ export default class GalleryNavigation extends Vue {
43 @Prop(String) readonly path!: string; 40 @Prop(String) readonly path!: string;
44 @Prop(Array) readonly query!: string[]; 41 @Prop(Array) readonly query!: string[];
45 42
43 readonly COMPONENT_BY_TYPE: Record<ItemType, string> = {
44 directory: "ld-directory",
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
46 mounted() { 53 mounted() {
47 this.pathChanged(); 54 this.pathChanged();
48 } 55 }
49 56
57 get isError() {
58 return this.checkType(null);
59 }
60
61 get isSearch() {
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
50 @Watch("path") 69 @Watch("path")
51 pathChanged() { 70 pathChanged() {
52 this.$galleryStore.setCurrentPath(this.path); 71 this.$galleryStore.setCurrentPath(this.path);
53 } 72 }
54 73
55 private checkType(type: Gallery.ItemType): boolean { 74 checkType(type: ItemType | null): boolean {
56 return Navigation.checkType(this.$galleryStore.currentItem, type); 75 return Navigation.checkType(this.$galleryStore.currentItem, type);
57 } 76 }
58} 77}
59</script> 78</script>
60 79
61<style lang="scss"> 80<style lang="scss"></style>
62</style>
diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue
index e75a37e..fec7216 100644
--- a/viewer/src/views/GallerySearch.vue
+++ b/viewer/src/views/GallerySearch.vue
@@ -18,7 +18,7 @@
18--> 18-->
19 19
20<template> 20<template>
21 <ld-gallery :items="items()" :noresult="noResult()" /> 21 <ld-gallery :items="items" :noresult="noResult" />
22</template> 22</template>
23 23
24<script lang="ts"> 24<script lang="ts">
@@ -29,8 +29,7 @@ import IndexSearch from "@/services/indexsearch";
29@Component 29@Component
30export default class GalleryPicture extends Vue { 30export default class GalleryPicture extends Vue {
31 @Prop(String) readonly path!: string; 31 @Prop(String) readonly path!: string;
32 32 otherCount: number = 0;
33 otherCount: Number = 0;
34 33
35 mounted() { 34 mounted() {
36 this.$uiStore.toggleFullscreen(false); 35 this.$uiStore.toggleFullscreen(false);
@@ -42,19 +41,17 @@ export default class GalleryPicture extends Vue {
42 this.$galleryStore.setCurrentSearch([]); 41 this.$galleryStore.setCurrentSearch([]);
43 } 42 }
44 43
45 items() { 44 get items() {
46 const searchResult = IndexSearch.search(this.$galleryStore.currentSearch); 45 const searchResult = IndexSearch.search(this.$galleryStore.currentSearch);
47 const filteredByPath = searchResult.filter(item => item.path.startsWith(this.path)); 46 const filteredByPath = searchResult.filter(item => item.path.startsWith(this.path));
48 this.otherCount = searchResult.length - filteredByPath.length; 47 this.otherCount = searchResult.length - filteredByPath.length;
49 return filteredByPath; 48 return filteredByPath;
50 } 49 }
51 50
52 noResult() { 51 get noResult() {
53 const params = [this.otherCount, this.otherCount > 1 ? "s" : ""]; 52 return this.$tc("search.no-result-fmt", this.otherCount, [this.otherCount]);
54 return this.$t("search.no-results.otherfolders", params);
55 } 53 }
56} 54}
57</script> 55</script>
58 56
59<style lang="scss"> 57<style lang="scss"></style>
60</style>
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index bcd2249..6ef9a3b 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -18,13 +18,10 @@
18--> 18-->
19 19
20<template> 20<template>
21 <div :class="{'fullscreen': $uiStore.fullscreen, 'fullwidth': $uiStore.fullWidth}"> 21 <div :class="{ fullscreen: $uiStore.fullscreen, fullwidth: $uiStore.fullWidth }">
22 <ld-title 22 <ld-title :gallery-title="$galleryStore.galleryTitle" :current-item="$galleryStore.currentItem" />
23 :gallery-title="$galleryStore.galleryTitle" 23 <panel-top v-if="isReady" class="layout layout-top" />
24 :current-item="$galleryStore.currentItem" 24 <panel-left v-if="isReady" class="layout layout-left" />
25 />
26 <panel-top v-if="!isLoading" class="layout layout-top" />
27 <panel-left v-if="!isLoading" class="layout layout-left" />
28 <router-view v-if="!isLoading" ref="content" class="layout layout-content scrollbar" /> 25 <router-view v-if="!isLoading" ref="content" class="layout layout-content scrollbar" />
29 <b-loading :active="isLoading" is-full-page /> 26 <b-loading :active="isLoading" is-full-page />
30 <ld-key-press :keycode="27" @action="$uiStore.toggleFullscreen(false)" /> 27 <ld-key-press :keycode="27" @action="$uiStore.toggleFullscreen(false)" />
@@ -67,14 +64,19 @@ export default class MainLayout extends Vue {
67 this.isLoading = true; 64 this.isLoading = true;
68 this.$galleryStore 65 this.$galleryStore
69 .fetchConfig() 66 .fetchConfig()
67 .then(this.$uiStore.initFromConfig)
70 .then(this.$galleryStore.fetchGalleryItems) 68 .then(this.$galleryStore.fetchGalleryItems)
71 .finally(() => (this.isLoading = false)) 69 .finally(() => (this.isLoading = false))
72 .catch(this.displayError); 70 .catch(this.displayError);
73 } 71 }
74 72
73 get isReady() {
74 return !this.isLoading && this.$galleryStore.config && this.$galleryStore.currentPath !== null;
75 }
76
75 displayError(reason: any) {