From 89bcb2dbe5b5e6eb8e8ba13ceecee2770dfe4cd4 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Thu, 9 Jan 2020 02:10:35 +0100
Subject: viewer: Changed "image" type to "picture". Adapted the code to the
 current compiler output format. The currentItem and currentPath are
 calculated in the store for easier multi-component access. Breadcrumb for
 current's position and navigation.

---
 viewer/src/@types/gallery/index.d.ts    | 22 ++++-------
 viewer/src/assets/scss/theme.scss       | 10 +++++
 viewer/src/components/LdProposition.vue |  1 -
 viewer/src/locales/en.json              |  3 +-
 viewer/src/plugins/fontawesome.ts       |  2 +
 viewer/src/store/galleryStore.ts        | 31 +++++++++++----
 viewer/src/views/Gallery.vue            | 36 +++++++++---------
 viewer/src/views/GalleryDirectory.vue   |  1 -
 viewer/src/views/GalleryImage.vue       | 22 -----------
 viewer/src/views/GalleryPicture.vue     | 21 +++++++++++
 viewer/src/views/GallerySearch.vue      |  2 +-
 viewer/src/views/GalleryThumbnail.vue   |  4 +-
 viewer/src/views/MainLayout.vue         | 19 +++++-----
 viewer/src/views/PanelTop.vue           | 67 +++++++++++++++++++++++++++++++++
 14 files changed, 165 insertions(+), 76 deletions(-)
 create mode 100644 viewer/src/assets/scss/theme.scss
 delete mode 100644 viewer/src/views/GalleryImage.vue
 create mode 100644 viewer/src/views/GalleryPicture.vue
 create mode 100644 viewer/src/views/PanelTop.vue

(limited to 'viewer')

diff --git a/viewer/src/@types/gallery/index.d.ts b/viewer/src/@types/gallery/index.d.ts
index 310c865..97cc207 100644
--- a/viewer/src/@types/gallery/index.d.ts
+++ b/viewer/src/@types/gallery/index.d.ts
@@ -1,28 +1,22 @@
 declare namespace Gallery {
-    interface Image extends Item {
-        properties: ImageProperties,
+    interface Picture extends Item {
+        properties: PictureProperties,
     }
     interface Directory extends Item {
         properties: DirectoryProperties,
     }
     interface Item {
         title: string,
-        date: string,
+        datetime: string,
         description: string,
         tags: RawTag[],
         path: string,
-        thumbnail: {
-            path: string,
-        },
-        properties: ImageProperties | DirectoryProperties,
+        thumbnail?: string,
+        properties: PictureProperties | DirectoryProperties,
     }
-    interface ImageProperties {
-        type: "image",
-        filesize: number,
-        resolution: {
-            width: number,
-            height: number,
-        }
+    interface PictureProperties {
+        type: "picture",
+        resource: string,
     }
     interface DirectoryProperties {
         type: "directory",
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
new file mode 100644
index 0000000..a8ee0be
--- /dev/null
+++ b/viewer/src/assets/scss/theme.scss
@@ -0,0 +1,10 @@
+// === Theme
+
+$layout-top: 70px;
+$layout-left: 250px;
+
+$panel-top-bgcolor: #225;
+$panel-top-txtcolor: white;
+$panel-left-bgcolor: $panel-top-bgcolor;
+$panel-left-txtcolor: $panel-top-txtcolor;
+$content-bgcolor: #1e1e1e;
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index b23c14a..9e8d9dd 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -13,7 +13,6 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import { Operation } from "@/@types/tag/Operation";
-import Gallery from '../views/Gallery.vue';
 
 @Component
 export default class LdTagInput extends Vue {
diff --git a/viewer/src/locales/en.json b/viewer/src/locales/en.json
index 4c9f5d4..d44a116 100644
--- a/viewer/src/locales/en.json
+++ b/viewer/src/locales/en.json
@@ -6,5 +6,6 @@
   "mode.navigation": "Navigation",
   "mode.search": "Search",
   "search.no-results": "No results",
-  "panelLeft.propositions": "Proposed tags"
+  "panelLeft.propositions": "Proposed tags",
+  "gallery.unknowntype": "Unknown item type"
 }
\ No newline at end of file
diff --git a/viewer/src/plugins/fontawesome.ts b/viewer/src/plugins/fontawesome.ts
index 7308afe..3bd7d08 100644
--- a/viewer/src/plugins/fontawesome.ts
+++ b/viewer/src/plugins/fontawesome.ts
@@ -9,6 +9,7 @@ import {
     faTag,
     faPlus,
     faMinus,
+    faImage,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -18,6 +19,7 @@ library.add(
     faTag,
     faPlus,
     faMinus,
+    faImage,
 );
 
 Vue.component("fa-icon", FontAwesomeIcon);
diff --git a/viewer/src/store/galleryStore.ts b/viewer/src/store/galleryStore.ts
index 179fbe2..2d17fd6 100644
--- a/viewer/src/store/galleryStore.ts
+++ b/viewer/src/store/galleryStore.ts
@@ -9,6 +9,7 @@ export default class GalleryStore extends VuexModule {
 
     galleryItemsRoot: Gallery.Item | null = null;
     tags: Tag.Index = {};
+    currentPath: string = "/";
 
     // ---
 
@@ -20,6 +21,22 @@ export default class GalleryStore extends VuexModule {
         this.tags = tags;
     }
 
+    @mutation setCurrentPath(currentPath: string) {
+        this.currentPath = currentPath;
+    }
+
+    get currentItemPath(): Gallery.Item[] {
+        const galleryItemsRoot = this.galleryItemsRoot;
+        if (galleryItemsRoot)
+            return GalleryStore.searchCurrentItemPath(galleryItemsRoot, this.currentPath);
+        return [];
+    }
+
+    get currentItem(): Gallery.Item | null {
+        const currentItemPath = this.currentItemPath;
+        return currentItemPath.length > 0 ? currentItemPath[currentItemPath.length - 1] : null;
+    }
+
     // ---
 
     // Fetches the gallery's JSON metadata
@@ -61,14 +78,14 @@ export default class GalleryStore extends VuexModule {
     }
 
     // Searches for an item by path from a root item (navigation)
-    static searchCurrentItem(item: Gallery.Item, path: string): Gallery.Item | null {
-        if (path === item.path) return item;
+    private static searchCurrentItemPath(item: Gallery.Item, path: string): Gallery.Item[] {
+        if (path === item.path) return [item];
         if (item.properties.type === "directory" && path.startsWith(item.path)) {
-            const itemFound = item.properties.items
-                .map(item => this.searchCurrentItem(item, path))
-                .find(item => Boolean(item));
-            return itemFound ?? null;
+            const itemChain = item.properties.items
+                .map(item => this.searchCurrentItemPath(item, path))
+                .find(itemChain => itemChain.length > 0);
+            if (itemChain) return [item, ...itemChain];
         }
-        return null;
+        return [];
     }
 }
\ No newline at end of file
diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
index 4deb937..a53df3d 100644
--- a/viewer/src/views/Gallery.vue
+++ b/viewer/src/views/Gallery.vue
@@ -1,32 +1,41 @@
 <template>
   <div>
     <gallery-search v-if="$uiStore.isModeSearch" :items="currentSearch" />
-    <gallery-directory v-else-if="isDirectory" :directory="currentItem" />
-    <gallery-image v-else-if="isImage" :image="currentItem" />
-    <div v-else>Unknown type</div>
+    <gallery-directory v-else-if="isDirectory" :directory="$galleryStore.currentItem" />
+    <gallery-picture v-else-if="isPicture" :picture="$galleryStore.currentItem" />
+    <div v-else>{{$t("gallery.unknowntype")}}</div>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
+import { Component, Vue, Prop, Watch } from "vue-property-decorator";
 import { Operation } from '@/@types/tag/Operation';
 import GallerySearch from "./GallerySearch.vue";
 import GalleryDirectory from "./GalleryDirectory.vue";
-import GalleryImage from "./GalleryImage.vue";
-import GalleryStore from "../store/galleryStore";
+import GalleryPicture from "./GalleryPicture.vue";
 
 @Component({
-  components: { GallerySearch, GalleryDirectory, GalleryImage },
+  components: { GallerySearch, GalleryDirectory, GalleryPicture },
 })
 export default class Gallery extends Vue {
   @Prop(String) readonly pathMatch!: string;
 
+  mounted() {
+    this.pathChanged()
+  }
+
+  @Watch("pathMatch")
+  pathChanged() {
+    console.log("Path: ", this.pathMatch);
+    this.$galleryStore.setCurrentPath(this.pathMatch);
+  }
+
   get isDirectory(): boolean {
     return this.checkType("directory");
   }
 
-  get isImage(): boolean {
-    return this.checkType("image");
+  get isPicture(): boolean {
+    return this.checkType("picture");
   }
 
   // Results of the search (by tags)
@@ -37,17 +46,10 @@ export default class Gallery extends Vue {
     return this.aggregateAll(byOperation, intersection, substraction);
   }
 
-  // Item pointed by the URL (navigation)
-  get currentItem(): Gallery.Item | null {
-    const galleryItemsRoot = this.$galleryStore.galleryItemsRoot;
-    if (galleryItemsRoot) return GalleryStore.searchCurrentItem(galleryItemsRoot, this.pathMatch);
-    return null;
-  }
-
   // ---
 
   private checkType(type: string): boolean {
-    return this.currentItem?.properties.type === type ?? false;
+    return this.$galleryStore.currentItem?.properties.type === type ?? false;
   }
 
   private extractTagsByOperation(currentTags: Tag.Search[]): Tag.SearchByOperation {
diff --git a/viewer/src/views/GalleryDirectory.vue b/viewer/src/views/GalleryDirectory.vue
index d464a07..ada22c0 100644
--- a/viewer/src/views/GalleryDirectory.vue
+++ b/viewer/src/views/GalleryDirectory.vue
@@ -1,6 +1,5 @@
 <template>
   <div>
-    <strong>Directory: {{directory.path}}</strong>
     <div class="flex">
       <div v-for="(item) in directory.properties.items" :key="item.path">
         <router-link :to="item.path">
diff --git a/viewer/src/views/GalleryImage.vue b/viewer/src/views/GalleryImage.vue
deleted file mode 100644
index 04d29d9..0000000
--- a/viewer/src/views/GalleryImage.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div>
-    <strong>Image: {{image.path}}</strong>
-    <img :src="imageSrc" />
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
-
-@Component
-export default class GalleryImage extends Vue {
-  @Prop({ required: true }) readonly image!: Gallery.Image;
-
-  get imageSrc() {
-    return `${process.env.VUE_APP_DATA_URL}${this.image.path}`;
-  }
-}
-</script>
-
-<style lang="scss">
-</style>
diff --git a/viewer/src/views/GalleryPicture.vue b/viewer/src/views/GalleryPicture.vue
new file mode 100644
index 0000000..b655162
--- /dev/null
+++ b/viewer/src/views/GalleryPicture.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <img :src="pictureSrc" />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component
+export default class GalleryPicture extends Vue {
+  @Prop({ required: true }) readonly picture!: Gallery.Picture;
+
+  get pictureSrc() {
+    return `${process.env.VUE_APP_DATA_URL}${this.picture.properties.resource}`;
+  }
+}
+</script>
+
+<style lang="scss">
+</style>
diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue
index 887c1a3..44f312b 100644
--- a/viewer/src/views/GallerySearch.vue
+++ b/viewer/src/views/GallerySearch.vue
@@ -16,7 +16,7 @@ import GalleryThumbnail from "./GalleryThumbnail.vue";
 @Component({
   components: { GalleryThumbnail },
 })
-export default class GalleryImage extends Vue {
+export default class GalleryPicture extends Vue {
   @Prop({ required: true }) readonly items!: Gallery.Item[];
 }
 </script>
diff --git a/viewer/src/views/GalleryThumbnail.vue b/viewer/src/views/GalleryThumbnail.vue
index fdfd9d3..d7ef44c 100644
--- a/viewer/src/views/GalleryThumbnail.vue
+++ b/viewer/src/views/GalleryThumbnail.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <img v-if="item.thumbnail" class="thumbnail" :src="imageSrc" :title="item.path" />
+    <img v-if="item.thumbnail" class="thumbnail" :src="pictureSrc" :title="item.path" />
     <div v-else class="flex-column flex-center">
       <fa-icon icon="folder" class="fa-4x" />
       {{item.path}}
@@ -15,7 +15,7 @@ import { Component, Vue, Prop } from "vue-property-decorator";
 export default class GalleryThumbnail extends Vue {
   @Prop({ required: true }) readonly item!: Gallery.Item;
 
-  get imageSrc() {
+  get pictureSrc() {
     return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail}`;
   }
 }
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 2a87ff1..d643e66 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="{fullscreen: $uiStore.fullscreen}">
-    <div class="layout layout-top">header</div>
+    <panel-top class="layout layout-top" />
     <panel-left class="layout layout-left" />
     <router-view class="layout layout-content" />
     <ld-button-fullscreen />
@@ -11,9 +11,10 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import PanelLeft from "./PanelLeft.vue";
+import PanelTop from "./PanelTop.vue";
 
 @Component({
-  components: { PanelLeft },
+  components: { PanelLeft, PanelTop },
 })
 export default class MainLayout extends Vue {
   isLoading: boolean = false;
@@ -44,8 +45,7 @@ export default class MainLayout extends Vue {
 </script>
 
 <style lang="scss">
-$layout-top: 30px;
-$layout-left: 250px;
+@import "@/assets/scss/theme.scss";
 
 body,
 html {
@@ -86,18 +86,17 @@ html {
   }
 }
 
-// temp colors
 .layout {
   &.layout-top {
-    background-color: darkslategray;
-    color: white;
+    background-color: $panel-top-bgcolor;
+    color: $panel-top-txtcolor;
   }
   &.layout-left {
-    background-color: darkblue;
-    color: white;
+    background-color: $panel-left-bgcolor;
+    color: $panel-left-txtcolor;
   }
   &.layout-content {
-    background-color: lightcyan;
+    background-color: $content-bgcolor;
   }
 }
 </style>
\ No newline at end of file
diff --git a/viewer/src/views/PanelTop.vue b/viewer/src/views/PanelTop.vue
new file mode 100644
index 0000000..eb8e6ed
--- /dev/null
+++ b/viewer/src/views/PanelTop.vue
@@ -0,0 +1,67 @@
+<template>
+  <div v-if="isReady">
+    <b-steps
+      v-model="activeStep"
+      class="pathBreadcrumb"
+      type="is-info"
+      :has-navigation="false"
+      :animated="false"
+      @input="onStepClick"
+    >
+      <b-step-item
+        v-for="item in $galleryStore.currentItemPath"
+        :key="item.path"
+        :label="item.title"
+        :icon="getIcon(item)"
+        :to="item.path"
+      />
+    </b-steps>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from "vue-property-decorator";
+import Gallery from "./Gallery.vue";
+
+@Component
+export default class PanelTop extends Vue {
+  activeStep: number = -1;
+
+  mounted() {
+    this.currentItemPathChanged();
+  }
+
+  get isReady() {
+    return this.activeStep >= 0;
+  }
+
+  @Watch("$galleryStore.currentItemPath")
+  currentItemPathChanged() {
+    this.activeStep = -1;
+    this.$nextTick(() => (this.activeStep = this.$galleryStore.currentItemPath.length - 1));
+  }
+
+  getIcon(item: Gallery.Item) {
+    switch (item.properties.type) {
+      case "picture":
+        return "image";
+      case "directory":
+        return "folder";
+    }
+  }
+
+  onStepClick(index: number) {
+    const item = this.$galleryStore.currentItemPath[index];
+    if (item) this.$router.push(item.path);
+  }
+}
+</script>
+
+<style lang="scss">
+.pathBreadcrumb {
+  margin: 3px;
+}
+.step-title {
+  color: white;
+}
+</style>
-- 
cgit v1.2.3