From 378864bc7e4bc5506f04ea57d402a9f3f40a73e5 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Wed, 2 Sep 2020 16:22:02 +0200
Subject: [PATCH] output breadcrumb navigation for media

---
 zero.Core/Api/MediaFolderApi.cs               |   5 +-
 .../Indexes/MediaFolder_ByHierarchy.cs        |   4 +-
 zero.Web.UI/App/components/header-bar.vue     |  12 +-
 zero.Web.UI/App/pages/media/media.vue         | 110 +++++++++++++-----
 zero.Web.UI/App/resources/media-folder.js     |   6 +
 zero.Web/Controllers/MediaFolderController.cs |   5 +-
 6 files changed, 105 insertions(+), 37 deletions(-)

diff --git a/zero.Core/Api/MediaFolderApi.cs b/zero.Core/Api/MediaFolderApi.cs
index f71dff89..fd011c75 100644
--- a/zero.Core/Api/MediaFolderApi.cs
+++ b/zero.Core/Api/MediaFolderApi.cs
@@ -136,7 +136,10 @@ namespace zero.Core.Api
           return new List<IMediaFolder>();
         }
 
-        return (await session.LoadAsync<IMediaFolder>(result.Path.Select(x => x.Id))).Select(x => x.Value).ToList();
+        List<string> ids = result.Path.Select(x => x.Id).ToList();
+        ids.Add(id);
+
+        return (await session.LoadAsync<IMediaFolder>(ids)).Select(x => x.Value).ToList();
       }
     }
 
diff --git a/zero.Core/Database/Indexes/MediaFolder_ByHierarchy.cs b/zero.Core/Database/Indexes/MediaFolder_ByHierarchy.cs
index 7dd67c27..5692aca3 100644
--- a/zero.Core/Database/Indexes/MediaFolder_ByHierarchy.cs
+++ b/zero.Core/Database/Indexes/MediaFolder_ByHierarchy.cs
@@ -6,7 +6,7 @@ using zero.Core.Entities;
 
 namespace zero.Core.Database.Indexes
 {
-  public class MediaFolder_ByHierarchy : AbstractIndexCreationTask<MediaFolder, MediaFolder_ByHierarchy.Result>
+  public class MediaFolder_ByHierarchy : AbstractIndexCreationTask<IMediaFolder, MediaFolder_ByHierarchy.Result>
   {
     public class Result : IZeroIdEntity, IAppAwareEntity, IZeroDbConventions
     {
@@ -35,7 +35,7 @@ namespace zero.Core.Database.Indexes
         Id = item.Id,
         Name = item.Name,
         AppId = item.AppId,
-        Path = Recurse(item, x => LoadDocument<MediaFolder>(x.ParentId))
+        Path = Recurse(item, x => LoadDocument<IMediaFolder>(x.ParentId))
                 .Where(x => x != null && x.Id != null && x.Id != item.Id)
                 .Reverse()
                 .Select(current => new PathResult()
diff --git a/zero.Web.UI/App/components/header-bar.vue b/zero.Web.UI/App/components/header-bar.vue
index 482eeac8..372c8ec1 100644
--- a/zero.Web.UI/App/components/header-bar.vue
+++ b/zero.Web.UI/App/components/header-bar.vue
@@ -4,11 +4,13 @@
       <div class="ui-header-bar-main">
         <ui-icon-button v-if="backButton" type="white" @click="onBack" />
         <div>
-          <h2 class="ui-header-bar-title" :class="{'is-empty': !title && titleEmpty}">
-            <span v-if="prefix" class="-minor" v-localize:html="prefix"></span>
-            <span v-localize="title || titleEmpty"></span>
-            <span v-if="suffix" class="-minor" v-localize:html="suffix"></span>
-          </h2>
+          <slot name="title">
+            <h2 class="ui-header-bar-title" :class="{'is-empty': !title && titleEmpty}">
+              <span v-if="prefix" class="-minor" v-localize:html="prefix"></span>
+              <span v-localize="title || titleEmpty"></span>
+              <span v-if="suffix" class="-minor" v-localize:html="suffix"></span>
+            </h2>
+          </slot>
           <p v-if="description" class="ui-header-bar-description" v-localize="description"></p>
         </div>
       </div>
diff --git a/zero.Web.UI/App/pages/media/media.vue b/zero.Web.UI/App/pages/media/media.vue
index 5439efb1..ad60c07d 100644
--- a/zero.Web.UI/App/pages/media/media.vue
+++ b/zero.Web.UI/App/pages/media/media.vue
@@ -3,13 +3,21 @@
     <router-view v-if="!isOverview"></router-view>
 
     <div v-if="isOverview" class="media-content">
-      <ui-header-bar :title="title" :back-button="!!id">
-        <ui-search />
-        <ui-button type="white" label="Add folder" @click="addFolder(id)" />
-        <div type="button" class="ui-button has-state type-action state-default has-icon">
-          <span class="ui-button-text">Add</span>
-          <input class="media-item-upload" type="file" multiple @change="onUpload" />
-        </div>
+      <ui-header-bar :back-button="!!id">
+        <template v-slot:title>
+          <h2 class="ui-header-bar-title">
+            <router-link :to="{ name: 'media' }" class="media-items-hierarchy-item" v-if="!!id"><i class="fth-home"></i></router-link>
+            <router-link :to="{ name: 'mediafolder', params: { id: item.id } }" v-for="(item, index) in hierarchy" :key="item.id" class="media-items-hierarchy-item" v-localize="item.name"></router-link>
+          </h2>
+        </template>
+        <template>
+          <ui-search />
+          <ui-button type="white" label="Add folder" @click="addFolder(id)" />
+          <div type="button" class="ui-button has-state type-action state-default has-icon">
+            <span class="ui-button-text">Add</span>
+            <input class="media-item-upload" type="file" multiple @change="onUpload" />
+          </div>
+        </template>
       </ui-header-bar>
 
       <div class="ui-view-box">
@@ -23,7 +31,8 @@
 
 
 <script>
-  import MediaApi from 'zero/resources/media.js'
+  import MediaApi from 'zero/resources/media.js';
+  import MediaFolderApi from 'zero/resources/media-folder.js';
   import Overlay from 'zero/services/overlay.js';
   import AddFolderOverlay from './folder';
   import MediaItemOverlay from './media-overlay-item';
@@ -33,9 +42,11 @@
 
   export default {
 
+    props: ['id'],
+
     data: () => ({
-      items: [],
-      current: null
+      current: null,
+      hierarchy: []
     }),
 
     created()
@@ -48,22 +59,9 @@
         component: MediaItem,
         items: this.getItems
       };
-
-      if (!this.id)
-      {
-        this.getItems();
-      }
     },
 
     computed: {
-      id()
-      {
-        return this.$route.params.id;
-      },
-      title()
-      {
-        return this.current ? this.current.name : '@media.list';
-      },
       isOverview()
       {
         return this.$route.name !== 'mediaitem' && this.$route.name !== 'recyclebin';
@@ -82,14 +80,45 @@
 
         query.folderId = this.$route.params.id;
 
+        this.getFolderHierarchy(query.folderId);
+
         return MediaApi.getListByQuery(query).then(response =>
         {
-          this.items = response.items;
           return Promise.resolve(response);
         });
       },
 
 
+      getFolderHierarchy(id)
+      {
+        if (!id)
+        {
+          this.current = {
+            id: null,
+            name: '@media.list'
+          };
+          this.hierarchy = [this.current];
+          return;
+        }
+
+        MediaFolderApi.getHierarchy(id).then(res =>
+        {
+          this.hierarchy = res;
+          this.current = res[res.length - 1];
+        });
+      },
+
+
+      // navigate to a folder
+      goToFolder(id)
+      {
+        this.$router.push({
+          name: 'mediafolder',
+          params: !id ? {} : { id: id }
+        });
+      },
+
+
       // adds a new folder
       addFolder(parentId)
       {
@@ -97,10 +126,7 @@
           component: AddFolderOverlay,
           model: { parentId },
           theme: 'dark'
-        }).then(item =>
-        {
-          this.$router.push({ name: 'mediafolder', params: { id: item.model.id } });
-        }, () => { });
+        }).then(item => this.goToFolder(item.model.id));
       },
 
 
@@ -180,4 +206,32 @@
     opacity: 0.001;
     cursor: pointer;
   }
+
+  .media-items-hierarchy-item
+  {
+    font-family: var(--font);
+    margin: 0;
+    font-size: var(--font-size-l);
+    font-weight: 400;
+    color: var(--color-fg-dim);
+
+    &:last-child
+    {
+      font-weight: 700;
+      color: var(--color-fg);
+    }
+
+    & + .media-items-hierarchy-item:before
+    {
+      content: '/';
+      margin: 0 0.5em;
+      color: var(--color-fg-dim);
+      font-weight: 400;
+    }
+
+    &:hover
+    {
+      color: var(--color-fg);
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/resources/media-folder.js b/zero.Web.UI/App/resources/media-folder.js
index 71333d62..1548ee64 100644
--- a/zero.Web.UI/App/resources/media-folder.js
+++ b/zero.Web.UI/App/resources/media-folder.js
@@ -16,6 +16,12 @@ export default {
     return Axios.get(base + 'getEmpty').then(res => Promise.resolve(res.data));
   },
 
+  // get media folder hierarchy by id
+  getHierarchy(id)
+  {
+    return Axios.get(base + 'getHierarchy', { params: { id } }).then(res => Promise.resolve(res.data));
+  },
+
   // get all folder with a certain parent (can be empty) as tree
   getAllAsTree(parent, active)
   {
diff --git a/zero.Web/Controllers/MediaFolderController.cs b/zero.Web/Controllers/MediaFolderController.cs
index f3526602..bff475b1 100644
--- a/zero.Web/Controllers/MediaFolderController.cs
+++ b/zero.Web/Controllers/MediaFolderController.cs
@@ -22,7 +22,10 @@ namespace zero.Web.Controllers
 
     public IActionResult GetEmpty([FromServices] IMediaFolder blueprint) => Edit(blueprint);
 
- 
+
+    public async Task<IActionResult> GetHierarchy([FromQuery] string id) => Json(await Api.GetHierarchy(id));
+
+
     public async Task<IActionResult> GetAllAsTree([FromQuery] string parent = null, [FromQuery] string active = null) => Json(await Api.GetAllAsTree(parent, active));