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/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 +++++++++++++++++++++++++++++++++++
 8 files changed, 119 insertions(+), 53 deletions(-)
 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/src/views')

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