diff options
Diffstat (limited to 'viewer/src')
-rw-r--r-- | viewer/src/@types/gallery/index.d.ts | 9 | ||||
-rw-r--r-- | viewer/src/router/index.ts | 2 | ||||
-rw-r--r-- | viewer/src/tools.ts | 17 | ||||
-rw-r--r-- | viewer/src/views/GalleryDirectory.vue | 8 | ||||
-rw-r--r-- | viewer/src/views/MainGallery.vue (renamed from viewer/src/views/Gallery.vue) | 28 |
5 files changed, 49 insertions, 15 deletions
diff --git a/viewer/src/@types/gallery/index.d.ts b/viewer/src/@types/gallery/index.d.ts index 25407e8..b112b6d 100644 --- a/viewer/src/@types/gallery/index.d.ts +++ b/viewer/src/@types/gallery/index.d.ts | |||
@@ -18,6 +18,9 @@ | |||
18 | */ | 18 | */ |
19 | 19 | ||
20 | declare namespace Gallery { | 20 | declare namespace Gallery { |
21 | interface Other extends Item { | ||
22 | properties: OtherProperties, | ||
23 | } | ||
21 | interface Picture extends Item { | 24 | interface Picture extends Item { |
22 | properties: PictureProperties, | 25 | properties: PictureProperties, |
23 | } | 26 | } |
@@ -31,7 +34,10 @@ declare namespace Gallery { | |||
31 | tags: RawTag[], | 34 | tags: RawTag[], |
32 | path: string, | 35 | path: string, |
33 | thumbnail?: string, | 36 | thumbnail?: string, |
34 | properties: PictureProperties | DirectoryProperties, | 37 | properties: OtherProperties | PictureProperties | DirectoryProperties, |
38 | } | ||
39 | interface OtherProperties { | ||
40 | type: "other", | ||
35 | } | 41 | } |
36 | interface PictureProperties { | 42 | interface PictureProperties { |
37 | type: "picture", | 43 | type: "picture", |
@@ -42,4 +48,5 @@ declare namespace Gallery { | |||
42 | items: Item[] | 48 | items: Item[] |
43 | } | 49 | } |
44 | type RawTag = string; | 50 | type RawTag = string; |
51 | type ItemType = "other" | "picture" | "directory"; | ||
45 | } \ No newline at end of file | 52 | } \ No newline at end of file |
diff --git a/viewer/src/router/index.ts b/viewer/src/router/index.ts index 55b4b6c..0f3d2c7 100644 --- a/viewer/src/router/index.ts +++ b/viewer/src/router/index.ts | |||
@@ -19,7 +19,7 @@ | |||
19 | 19 | ||
20 | import Vue from "vue"; | 20 | import Vue from "vue"; |
21 | import VueRouter from "vue-router"; | 21 | import VueRouter from "vue-router"; |
22 | import Gallery from "@/views/Gallery.vue"; | 22 | import Gallery from "@/views/MainGallery.vue"; |
23 | 23 | ||
24 | Vue.use(VueRouter); | 24 | Vue.use(VueRouter); |
25 | 25 | ||
diff --git a/viewer/src/tools.ts b/viewer/src/tools.ts index 5eb287e..57a889d 100644 --- a/viewer/src/tools.ts +++ b/viewer/src/tools.ts | |||
@@ -27,4 +27,21 @@ export default class Tools { | |||
27 | .toLowerCase(); | 27 | .toLowerCase(); |
28 | } | 28 | } |
29 | 29 | ||
30 | |||
31 | public static checkType(item: Gallery.Item | null, type: Gallery.ItemType): boolean { | ||
32 | return item?.properties.type === type ?? false; | ||
33 | } | ||
34 | |||
35 | public static directoriesFirst(items: Gallery.Item[]) { | ||
36 | return [ | ||
37 | ...items | ||
38 | .filter(child => Tools.checkType(child, "directory")) | ||
39 | .sort((a, b) => a.title.localeCompare(b.title)), | ||
40 | |||
41 | ...items | ||
42 | .filter(child => !Tools.checkType(child, "directory")), | ||
43 | ]; | ||
44 | } | ||
45 | |||
46 | |||
30 | } \ No newline at end of file | 47 | } \ No newline at end of file |
diff --git a/viewer/src/views/GalleryDirectory.vue b/viewer/src/views/GalleryDirectory.vue index 1df0c4d..d01032d 100644 --- a/viewer/src/views/GalleryDirectory.vue +++ b/viewer/src/views/GalleryDirectory.vue | |||
@@ -19,7 +19,7 @@ | |||
19 | 19 | ||
20 | <template> | 20 | <template> |
21 | <div class="thumbnail-tiles"> | 21 | <div class="thumbnail-tiles"> |
22 | <div v-for="(item) in directory.properties.items" :key="item.path"> | 22 | <div v-for="(item) in orderedItems" :key="item.path"> |
23 | <router-link :to="item.path"> | 23 | <router-link :to="item.path"> |
24 | <gallery-thumbnail :item="item" /> | 24 | <gallery-thumbnail :item="item" /> |
25 | </router-link> | 25 | </router-link> |
@@ -32,13 +32,19 @@ | |||
32 | 32 | ||
33 | <script lang="ts"> | 33 | <script lang="ts"> |
34 | import { Component, Vue, Prop } from "vue-property-decorator"; | 34 | import { Component, Vue, Prop } from "vue-property-decorator"; |
35 | import Tools from "@/tools"; | ||
35 | import GalleryThumbnail from "./GalleryThumbnail.vue"; | 36 | import GalleryThumbnail from "./GalleryThumbnail.vue"; |
37 | import Gallery from "./Gallery.vue"; | ||
36 | 38 | ||
37 | @Component({ | 39 | @Component({ |
38 | components: { GalleryThumbnail }, | 40 | components: { GalleryThumbnail }, |
39 | }) | 41 | }) |
40 | export default class GalleryDirectory extends Vue { | 42 | export default class GalleryDirectory extends Vue { |
41 | @Prop({ required: true }) readonly directory!: Gallery.Directory; | 43 | @Prop({ required: true }) readonly directory!: Gallery.Directory; |
44 | |||
45 | get orderedItems() { | ||
46 | return Tools.directoriesFirst(this.directory.properties.items); | ||
47 | } | ||
42 | } | 48 | } |
43 | </script> | 49 | </script> |
44 | 50 | ||
diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/MainGallery.vue index fad7cc3..06cf512 100644 --- a/viewer/src/views/Gallery.vue +++ b/viewer/src/views/MainGallery.vue | |||
@@ -28,7 +28,8 @@ | |||
28 | 28 | ||
29 | <script lang="ts"> | 29 | <script lang="ts"> |
30 | import { Component, Vue, Prop, Watch } from "vue-property-decorator"; | 30 | import { Component, Vue, Prop, Watch } from "vue-property-decorator"; |
31 | import { Operation } from '@/@types/tag/Operation'; | 31 | import { Operation } from "@/@types/tag/Operation"; |
32 | import Tools from "@/tools"; | ||
32 | import GallerySearch from "./GallerySearch.vue"; | 33 | import GallerySearch from "./GallerySearch.vue"; |
33 | import GalleryDirectory from "./GalleryDirectory.vue"; | 34 | import GalleryDirectory from "./GalleryDirectory.vue"; |
34 | import GalleryPicture from "./GalleryPicture.vue"; | 35 | import GalleryPicture from "./GalleryPicture.vue"; |
@@ -40,7 +41,7 @@ export default class Gallery extends Vue { | |||
40 | @Prop(String) readonly pathMatch!: string; | 41 | @Prop(String) readonly pathMatch!: string; |
41 | 42 | ||
42 | mounted() { | 43 | mounted() { |
43 | this.pathChanged() | 44 | this.pathChanged(); |
44 | } | 45 | } |
45 | 46 | ||
46 | @Watch("pathMatch") | 47 | @Watch("pathMatch") |
@@ -59,14 +60,15 @@ export default class Gallery extends Vue { | |||
59 | 60 | ||
60 | // --- | 61 | // --- |
61 | 62 | ||
62 | private checkType(type: string): boolean { | 63 | private checkType(type: Gallery.ItemType): boolean { |
63 | return this.$galleryStore.currentItem?.properties.type === type ?? false; | 64 | return Tools.checkType(this.$galleryStore.currentItem, type); |
64 | } | 65 | } |
65 | 66 | ||
66 | private extractTagsByOperation(currentTags: Tag.Search[]): Tag.SearchByOperation { | 67 | private extractTagsByOperation(currentTags: Tag.Search[]): Tag.SearchByOperation { |
67 | let byOperation: Tag.SearchByOperation = {}; | 68 | let byOperation: Tag.SearchByOperation = {}; |
68 | Object.values(Operation) | 69 | Object.values(Operation).forEach( |
69 | .forEach(operation => byOperation[operation] = currentTags.filter(tag => tag.operation === operation)); | 70 | operation => (byOperation[operation] = currentTags.filter(tag => tag.operation === operation)) |
71 | ); | ||
70 | return byOperation; | 72 | return byOperation; |
71 | } | 73 | } |
72 | 74 | ||
@@ -75,8 +77,8 @@ export default class Gallery extends Vue { | |||
75 | if (byOperation[Operation.INTERSECTION].length > 0) { | 77 | if (byOperation[Operation.INTERSECTION].length > 0) { |
76 | byOperation[Operation.INTERSECTION] | 78 | byOperation[Operation.INTERSECTION] |
77 | .map(tag => tag.items) | 79 | .map(tag => tag.items) |
78 | .reduce((a,b) => a.filter(c => b.includes(c))) | 80 | .reduce((a, b) => a.filter(c => b.includes(c))) |
79 | .flatMap(items=>items) | 81 | .flatMap(items => items) |
80 | .forEach(item => intersection.add(item)); | 82 | .forEach(item => intersection.add(item)); |
81 | } | 83 | } |
82 | return intersection; | 84 | return intersection; |
@@ -85,14 +87,16 @@ export default class Gallery extends Vue { | |||
85 | private extractSubstraction(byOperation: Tag.SearchByOperation): Set<Gallery.Item> { | 87 | private extractSubstraction(byOperation: Tag.SearchByOperation): Set<Gallery.Item> { |
86 | let substraction = new Set<Gallery.Item>(); | 88 | let substraction = new Set<Gallery.Item>(); |
87 | if (byOperation[Operation.SUBSTRACTION].length > 0) { | 89 | if (byOperation[Operation.SUBSTRACTION].length > 0) { |
88 | byOperation[Operation.SUBSTRACTION] | 90 | byOperation[Operation.SUBSTRACTION].flatMap(tag => tag.items).forEach(item => substraction.add(item)); |
89 | .flatMap(tag => tag.items) | ||
90 | .forEach(item => substraction.add(item)); | ||
91 | } | 91 | } |
92 | return substraction; | 92 | return substraction; |
93 | } | 93 | } |
94 | 94 | ||
95 | private aggregateAll(byOperation: Tag.SearchByOperation, intersection: Set<Gallery.Item>, substraction: Set<Gallery.Item>): Gallery.Item[] { | 95 | private aggregateAll( |
96 | byOperation: Tag.SearchByOperation, | ||
97 | intersection: Set<Gallery.Item>, | ||
98 | substraction: Set<Gallery.Item> | ||
99 | ): Gallery.Item[] { | ||
96 | byOperation[Operation.ADDITION].flatMap(tag => tag.items).forEach(item => intersection.add(item)); | 100 | byOperation[Operation.ADDITION].flatMap(tag => tag.items).forEach(item => intersection.add(item)); |
97 | substraction.forEach(item => intersection.delete(item)); | 101 | substraction.forEach(item => intersection.delete(item)); |
98 | return [...intersection]; | 102 | return [...intersection]; |