From 54790c6c73d7c51ff22cf5e9722b141cdc0249df Mon Sep 17 00:00:00 2001
From: pacien
Date: Sat, 29 Feb 2020 16:39:55 +0100
Subject: compiler: add tagCategories setting to gallery.yaml

---
 viewer/src/@types/gallery.d.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'viewer')

diff --git a/viewer/src/@types/gallery.d.ts b/viewer/src/@types/gallery.d.ts
index 4fa544f..de1c0dd 100644
--- a/viewer/src/@types/gallery.d.ts
+++ b/viewer/src/@types/gallery.d.ts
@@ -23,7 +23,8 @@ declare namespace Gallery {
     }
 
     interface GalleryProperties {
-        galleryTitle: string
+        galleryTitle: string,
+        tagCategories: RawTag[]
     }
     interface Index {
         properties: GalleryProperties,
-- 
cgit v1.2.3


From 577f49ab6e1fd9cd8007804a13dea1471ee2fb1f Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 3 Apr 2020 03:42:35 +0200
Subject: viewer: tag categories implementation

GitHub: Resolves #29
---
 viewer/src/@types/tag.d.ts              |  5 ++++
 viewer/src/assets/scss/global.scss      |  4 +--
 viewer/src/assets/scss/theme.scss       |  4 +++
 viewer/src/components/LdProposition.vue | 47 ++++++++++++++++++++++-----------
 viewer/src/locales/en.json              |  5 ++--
 viewer/src/services/indexfactory.ts     | 19 +++++++++++++
 viewer/src/store/galleryStore.ts        | 15 ++++++++++-
 viewer/src/views/PanelLeft.vue          | 24 ++++++++++++-----
 8 files changed, 96 insertions(+), 27 deletions(-)

(limited to 'viewer')

diff --git a/viewer/src/@types/tag.d.ts b/viewer/src/@types/tag.d.ts
index a390c80..425a995 100644
--- a/viewer/src/@types/tag.d.ts
+++ b/viewer/src/@types/tag.d.ts
@@ -31,4 +31,9 @@ declare namespace Tag {
     }
     type SearchByOperation = { [index: string]: Tag.Search[] };
     type Index = { [index: string]: Node };
+
+    interface Category {
+        tag: string;
+        index: Index;
+    }
 }
diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index bd7a7e7..a8a42a1 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -85,8 +85,8 @@ button svg + span {
   overflow: auto;
 }
 .scrollbar::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
+  width: $scrollbar_width;
+  height: $scrollbar_width;
 }
 .scrollbar::-webkit-scrollbar-corner {
   background-color: transparent;
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index 26cb355..35983a7 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -42,6 +42,8 @@ $radius: 0;
 $loading-background: $palette-800;
 $title-color: $palette-200;
 $title-size: $size-5;
+$subtitle-color: $palette-200;
+$subtitle-size: $size-5;
 $tag-background-color: $palette-800;
 $button-color: $palette-100;
 $button-active-color: $palette-100;
@@ -61,11 +63,13 @@ $panel-left-txtcolor: $primary;
 $command-buttons-bgcolor: $palette-700;
 $content-bgcolor: $palette-900;
 $scrollbar-color: $palette-300;
+$scrollbar_width: 10px;
 $loader-color: $palette-800;
 $input-tag-delete-background-color: $palette-700;
 $breadcrumb-margins: 12px;
 $breadcrumb-overflow-mask-size: $breadcrumb-margins + 60px;
 $thumbnail-other-size: 120px;
+$proposed-category-bgcolor: $palette-700;
 
 // Layout
 
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 3357777..1a1d387 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -19,8 +19,12 @@
 -->
 
 <template>
-  <div>
-    <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition">
+  <div class="proposition">
+    <h2
+      v-if="showTitle && proposedTags.length"
+      class="subtitle category"
+    >{{title || $t('panelLeft.propositions.other')}}</h2>
+    <div v-for="proposed in proposedTags" :key="proposed.rawTag">
       <a
         class="operation-btns link"
         :title="$t('tag-propositions.substraction')"
@@ -54,6 +58,8 @@ import { Operation } from "@/@types/Operation";
 
 @Component
 export default class LdProposition extends Vue {
+  @Prop({ type: String, required: true }) readonly title!: string;
+  @Prop({ type: Boolean, required: true }) readonly showTitle!: boolean;
   @Prop({ type: Array, required: true }) readonly currentTags!: string[];
   @Prop({ required: true }) readonly tagsIndex!: Tag.Index;
   @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[];
@@ -69,13 +75,14 @@ export default class LdProposition extends Vue {
       this.extractDistinctItems(this.model)
         .flatMap(item => item.tags)
         .map(this.rightmost)
-        .filter(rawTag => !this.model.find(search => search.tag === rawTag))
+        .filter(rawTag => this.tagsIndex[rawTag] && !this.model.find(search => search.tag === rawTag))
         .forEach(rawTag => (propositions[rawTag] = (propositions[rawTag] ?? 0) + 1));
     } else {
       // Tags count from the current directory
       this.currentTags
         .flatMap(tag => tag.split(":"))
         .map(tag => this.tagsIndex[tag])
+        .filter(Boolean)
         .forEach(tagindex => (propositions[tagindex.tag] = tagindex.items.length));
     }
 
@@ -105,19 +112,29 @@ export default class LdProposition extends Vue {
 @import "@/assets/scss/theme.scss";
 
 .proposition {
-  display: flex;
-  align-items: center;
-  padding-right: 7px;
-  .operation-tag {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    flex-grow: 1;
-    cursor: pointer;
+  .subtitle {
+    background-color: $proposed-category-bgcolor;
+    width: 100%;
+    padding: 0 0 6px 0;
+    margin: 0;
+    text-align: center;
+    font-variant: small-caps;
   }
-  .operation-btns {
-    padding: 2px 7px;
-    cursor: pointer;
+  > div {
+    display: flex;
+    align-items: center;
+    padding-right: 7px;
+    .operation-tag {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      flex-grow: 1;
+      cursor: pointer;
+    }
+    .operation-btns {
+      padding: 2px 7px;
+      cursor: pointer;
+    }
   }
 }
 </style>
diff --git a/viewer/src/locales/en.json b/viewer/src/locales/en.json
index 58adcd2..4209a67 100644
--- a/viewer/src/locales/en.json
+++ b/viewer/src/locales/en.json
@@ -14,5 +14,6 @@
   "command.search.search": "Search",
   "command.back": "Go back",
   "command.parent": "Go to parent directory",
-  "directory.no-results": "Empty directory"
-}
+  "directory.no-results": "Empty directory",
+  "panelLeft.propositions.other": "other filters"
+}
\ No newline at end of file
diff --git a/viewer/src/services/indexfactory.ts b/viewer/src/services/indexfactory.ts
index a31f3ef..466b509 100644
--- a/viewer/src/services/indexfactory.ts
+++ b/viewer/src/services/indexfactory.ts
@@ -112,4 +112,23 @@ export default class IndexFactory {
     if (strict) return node.tagfiltered === filter;
     return node.tagfiltered.includes(filter)
   }
+
+  // ---
+
+  public static generateCategories(tagsIndex: Tag.Index, tags?: Gallery.RawTag[]): Tag.Category[] {
+    if (!tags?.length) return [{ tag: "", index: tagsIndex }];
+
+    const tagsCategories: Tag.Category[] = [];
+    const tagsRemaining = new Map(Object.entries(tagsIndex));
+    tags
+      .map(tag => ({ tag, index: tagsIndex[tag]?.children }))
+      .filter(category => category.index && Object.keys(category.index).length)
+      .forEach(category => {
+        tagsCategories.push(category);
+        tagsRemaining.delete(category.tag);
+        Object.values(category.index).map(node => node.tag).forEach(tag => tagsRemaining.delete(tag));
+      });
+    tagsCategories.push({ tag: "", index: Object.fromEntries(tagsRemaining) });
+    return tagsCategories;
+  }
 }
diff --git a/viewer/src/store/galleryStore.ts b/viewer/src/store/galleryStore.ts
index 4a5de0f..352a266 100644
--- a/viewer/src/store/galleryStore.ts
+++ b/viewer/src/store/galleryStore.ts
@@ -31,6 +31,7 @@ export default class GalleryStore extends VuexModule {
     config: Gallery.Config | null = null;
     galleryIndex: Gallery.Index | null = null;
     tagsIndex: Tag.Index = {};
+    tagsCategories: Tag.Category[] = [];
     currentPath: string = "/";
     currentSearch: Tag.Search[] = [];
 
@@ -48,6 +49,10 @@ export default class GalleryStore extends VuexModule {
         this.tagsIndex = Object.freeze(tagsIndex);
     }
 
+    @mutation private setTagsCategories(tagsCategories: Tag.Category[]) {
+        this.tagsCategories = tagsCategories;
+    }
+
     @mutation setCurrentPath(currentPath: string) {
         this.currentPath = currentPath;
     }
@@ -89,7 +94,8 @@ export default class GalleryStore extends VuexModule {
         return fetch(`${process.env.VUE_APP_DATA_URL}${root}index.json`, { cache: "no-cache" })
             .then(response => response.json())
             .then(this.setGalleryIndex)
-            .then(this.indexTags);
+            .then(this.indexTags)
+            .then(this.indexTagCategories);
     }
 
     // Indexes the gallery
@@ -100,6 +106,13 @@ export default class GalleryStore extends VuexModule {
         return index;
     }
 
+    // Indexes the proposed categories
+    @action async indexTagCategories() {
+        const categories = IndexFactory.generateCategories(this.tagsIndex, this.galleryIndex?.properties.tagCategories);
+        this.setTagsCategories(categories);
+        return categories;
+    }
+
     // Searches for tags
     @action async search(filters: string[]) {
         const results = filters.flatMap(filter => IndexFactory.searchTags(this.tagsIndex, filter, true));
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index 9e9a600..824d1ae 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -22,12 +22,17 @@
     <ld-tag-input :search-filters.sync="searchFilters" :tags-index="$galleryStore.tagsIndex" />
     <ld-command-search @clear="clear" @search="search" />
     <h1 class="title">{{$t('panelLeft.propositions')}}</h1>
-    <ld-proposition
-      :search-filters.sync="searchFilters"
-      :tags-index="$galleryStore.tagsIndex"
-      :current-tags="currentTags()"
-      class="scrollbar no-scroll-x"
-    />
+    <div v-dragscroll class="scrollbar no-scroll-x">
+      <ld-proposition
+        v-for="(category) in $galleryStore.tagsCategories"
+        :key="category.tag"
+        :title="category.tag"
+        :show-title="$galleryStore.tagsCategories.length > 1"
+        :search-filters.sync="searchFilters"
+        :tags-index="category.index"
+        :current-tags="currentTags()"
+      />
+    </div>
   </div>
 </template>
 
@@ -76,9 +81,14 @@ export default class PanelLeft extends Vue {
 </script>
 
 <style lang="scss">
+@import "@/assets/scss/theme.scss";
+
 .sidebar {
   .title {
-    margin: 0.2em 0.5em !important;
+    background-color: $proposed-category-bgcolor;
+    padding: 0.2em 0.5em;
+    margin: 0 0 1px 0;
+    font-variant: small-caps;
   }
 }
 </style>
-- 
cgit v1.2.3


From 09ec37a772802980d68264f2fed040be36e14c82 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 3 Apr 2020 21:57:19 +0200
Subject: viewer: tag categories implementation

fixed disambiguation by categories following code review

GitHub: Resolves #29
---
 viewer/src/assets/scss/global.scss      |  4 ++--
 viewer/src/assets/scss/theme.scss       |  2 +-
 viewer/src/components/LdProposition.vue | 17 +++++++++--------
 viewer/src/components/LdTagInput.vue    |  9 ++++++++-
 viewer/src/views/PanelLeft.vue          |  4 ++--
 5 files changed, 22 insertions(+), 14 deletions(-)

(limited to 'viewer')

diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index a8a42a1..9e61b8b 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -85,8 +85,8 @@ button svg + span {
   overflow: auto;
 }
 .scrollbar::-webkit-scrollbar {
-  width: $scrollbar_width;
-  height: $scrollbar_width;
+  width: $scrollbar-width;
+  height: $scrollbar-width;
 }
 .scrollbar::-webkit-scrollbar-corner {
   background-color: transparent;
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index 35983a7..feb8543 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -63,7 +63,7 @@ $panel-left-txtcolor: $primary;
 $command-buttons-bgcolor: $palette-700;
 $content-bgcolor: $palette-900;
 $scrollbar-color: $palette-300;
-$scrollbar_width: 10px;
+$scrollbar-width: 10px;
 $loader-color: $palette-800;
 $input-tag-delete-background-color: $palette-700;
 $breadcrumb-margins: 12px;
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 1a1d387..c69a7c3 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -20,10 +20,7 @@
 
 <template>
   <div class="proposition">
-    <h2
-      v-if="showTitle && proposedTags.length"
-      class="subtitle category"
-    >{{title || $t('panelLeft.propositions.other')}}</h2>
+    <h2 v-if="showCategory && proposedTags.length" class="subtitle category">{{title}}</h2>
     <div v-for="proposed in proposedTags" :key="proposed.rawTag">
       <a
         class="operation-btns link"
@@ -58,8 +55,8 @@ import { Operation } from "@/@types/Operation";
 
 @Component
 export default class LdProposition extends Vue {
-  @Prop({ type: String, required: true }) readonly title!: string;
-  @Prop({ type: Boolean, required: true }) readonly showTitle!: boolean;
+  @Prop() readonly category?: Tag.Node;
+  @Prop({ type: Boolean, required: true }) readonly showCategory!: boolean;
   @Prop({ type: Array, required: true }) readonly currentTags!: string[];
   @Prop({ required: true }) readonly tagsIndex!: Tag.Index;
   @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[];
@@ -91,6 +88,10 @@ export default class LdProposition extends Vue {
       .map(entry => ({ rawTag: entry[0], count: entry[1] }));
   }
 
+  get title() {
+    return this.category?.tag ?? this.$t("panelLeft.propositions.other");
+  }
+
   extractDistinctItems(currentTags: Tag.Search[]): Gallery.Item[] {
     return [...new Set(currentTags.flatMap(tag => tag.items))];
   }
@@ -102,8 +103,8 @@ export default class LdProposition extends Vue {
 
   add(operation: Operation, rawTag: Gallery.RawTag) {
     const node = this.tagsIndex[rawTag];
-    const search: Tag.Search = { ...node, operation, display: `${operation}${node.tag}` };
-    this.model.push(search);
+    const display = this.category ? `${operation}${this.category.tag}:${node.tag}` : `${operation}${node.tag}`;
+    this.model.push({ ...node, parent: this.category, operation, display });
   }
 }
 </script>
diff --git a/viewer/src/components/LdTagInput.vue b/viewer/src/components/LdTagInput.vue
index bdb07bc..865db96 100644
--- a/viewer/src/components/LdTagInput.vue
+++ b/viewer/src/components/LdTagInput.vue
@@ -54,9 +54,16 @@ export default class LdTagInput extends Vue {
     return `${option.display} (${option.items.length})`;
   }
 
+  filterAlreadyPresent(newSearch: Tag.Search) {
+    return !this.model.find(
+      currentSearch =>
+        currentSearch.tag === newSearch.tag && (!currentSearch.parent || currentSearch.parent === newSearch.parent)
+    );
+  }
+
   searchTags(filter: string) {
     this.filteredTags = IndexFactory.searchTags(this.tagsIndex, filter, false)
-      .filter(newSearch => !this.model.find(currentSearch => currentSearch.tag === newSearch.tag))
+      .filter(this.filterAlreadyPresent)
       .sort((a, b) => b.items.length - a.items.length);
   }
 
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index 824d1ae..3fc62be 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -26,8 +26,8 @@
       <ld-proposition
         v-for="(category) in $galleryStore.tagsCategories"
         :key="category.tag"
-        :title="category.tag"
-        :show-title="$galleryStore.tagsCategories.length > 1"
+        :category="$galleryStore.tagsIndex[category.tag]"
+        :show-category="$galleryStore.tagsCategories.length > 1"
         :search-filters.sync="searchFilters"
         :tags-index="category.index"
         :current-tags="currentTags()"
-- 
cgit v1.2.3


From ce04802f300ba627a3b9e9612d938b825045e63f Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 4 Apr 2020 01:36:34 +0200
Subject: viewer: tag categories implementation

fixed single tags not appearing in the "Other filters" special category, following code review

GitHub: Resolves #29
---
 viewer/src/@types/tag.d.ts          |  1 +
 viewer/src/services/indexfactory.ts | 19 +++++++++++++------
 2 files changed, 14 insertions(+), 6 deletions(-)

(limited to 'viewer')

diff --git a/viewer/src/@types/tag.d.ts b/viewer/src/@types/tag.d.ts
index 425a995..229c418 100644
--- a/viewer/src/@types/tag.d.ts
+++ b/viewer/src/@types/tag.d.ts
@@ -21,6 +21,7 @@ declare namespace Tag {
     interface Node {
         tag: Gallery.RawTag;
         tagfiltered: Gallery.RawTag;
+        rootPart: boolean;
         items: Gallery.Item[];
         children: Index;
     }
diff --git a/viewer/src/services/indexfactory.ts b/viewer/src/services/indexfactory.ts
index 466b509..0a84951 100644
--- a/viewer/src/services/indexfactory.ts
+++ b/viewer/src/services/indexfactory.ts
@@ -38,18 +38,19 @@ export default class IndexFactory {
       const parts = tag.split(':');
       let lastPart: string | null = null;
       for (const part of parts) {
-        tagsIndex[part] = IndexFactory.pushPartToIndex(tagsIndex[part], part, item);
+        tagsIndex[part] = IndexFactory.pushPartToIndex(tagsIndex[part], part, item, !Boolean(lastPart));
         if (lastPart) {
           const children = tagsIndex[lastPart].children;
-          children[part] = IndexFactory.pushPartToIndex(children[part], part, item);
+          children[part] = IndexFactory.pushPartToIndex(children[part], part, item, false);
         }
         lastPart = part;
       }
     }
   }
 
-  private static pushPartToIndex(index: Tag.Node, part: string, item: Gallery.Item): Tag.Node {
-    if (!index) index = { tag: part, tagfiltered: Navigation.normalize(part), items: [], children: {} };
+  private static pushPartToIndex(index: Tag.Node, part: string, item: Gallery.Item, rootPart: boolean): Tag.Node {
+    if (!index) index = { tag: part, tagfiltered: Navigation.normalize(part), rootPart, items: [], children: {} };
+    else if (rootPart) index.rootPart = true;
     if (!index.items.includes(item)) index.items.push(item);
     return index;
   }
@@ -125,8 +126,14 @@ export default class IndexFactory {
       .filter(category => category.index && Object.keys(category.index).length)
       .forEach(category => {
         tagsCategories.push(category);
-        tagsRemaining.delete(category.tag);
-        Object.values(category.index).map(node => node.tag).forEach(tag => tagsRemaining.delete(tag));
+
+        if (!tagsIndex[category.tag].rootPart)
+          tagsRemaining.delete(category.tag);
+
+        Object.values(category.index)
+          .map(node => node.tag)
+          .filter(tag => !tagsIndex[tag].rootPart)
+          .forEach(tag => tagsRemaining.delete(tag));
       });
     tagsCategories.push({ tag: "", index: Object.fromEntries(tagsRemaining) });
     return tagsCategories;
-- 
cgit v1.2.3


From 84090e0f534cfa8bf601ae6df21e5df695fd149a Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 4 Apr 2020 02:24:10 +0200
Subject: viewer: tag categories implementation

code cleaning

GitHub: Resolves #29
---
 viewer/src/services/indexfactory.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

(limited to 'viewer')

diff --git a/viewer/src/services/indexfactory.ts b/viewer/src/services/indexfactory.ts
index 0a84951..25027f3 100644
--- a/viewer/src/services/indexfactory.ts
+++ b/viewer/src/services/indexfactory.ts
@@ -127,11 +127,7 @@ export default class IndexFactory {
       .forEach(category => {
         tagsCategories.push(category);
 
-        if (!tagsIndex[category.tag].rootPart)
-          tagsRemaining.delete(category.tag);
-
-        Object.values(category.index)
-          .map(node => node.tag)
+        [category.tag, ...Object.values(category.index).map(node => node.tag)]
           .filter(tag => !tagsIndex[tag].rootPart)
           .forEach(tag => tagsRemaining.delete(tag));
       });
-- 
cgit v1.2.3