From 6fd8d4a1447255ca5d95b27319d092d34d7fbcd7 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Thu, 4 Jun 2020 15:50:21 +0200
Subject: [PATCH] tree fixes

---
 zero.Core/Api/BackofficeApi.cs                |   2 +-
 zero.Core/Api/BackofficeStore.cs              |   8 +-
 zero.Core/Api/PageTreeApi.cs                  |   9 +-
 zero.Web.UI/App/components/tree/tree-item.vue | 219 ++++++++++++++++++
 .../App/components/{ => tree}/tree.vue        | 170 +-------------
 5 files changed, 237 insertions(+), 171 deletions(-)
 create mode 100644 zero.Web.UI/App/components/tree/tree-item.vue
 rename zero.Web.UI/App/components/{ => tree}/tree.vue (57%)

diff --git a/zero.Core/Api/BackofficeApi.cs b/zero.Core/Api/BackofficeApi.cs
index cc782638..af0f2b6c 100644
--- a/zero.Core/Api/BackofficeApi.cs
+++ b/zero.Core/Api/BackofficeApi.cs
@@ -37,7 +37,7 @@ namespace zero.Core.Api
 
     const string NEW_ID = "new:";
 
-    IBackofficeStore Backoffice;
+    protected IBackofficeStore Backoffice { get; private set; }
 
 
     public BackofficeApi(IBackofficeStore store)
diff --git a/zero.Core/Api/BackofficeStore.cs b/zero.Core/Api/BackofficeStore.cs
index d609f794..3e62befa 100644
--- a/zero.Core/Api/BackofficeStore.cs
+++ b/zero.Core/Api/BackofficeStore.cs
@@ -1,4 +1,5 @@
 using Raven.Client.Documents;
+using zero.Core.Options;
 
 namespace zero.Core.Api
 {
@@ -8,11 +9,14 @@ namespace zero.Core.Api
 
     public IApplicationContext AppContext { get; private set; }
 
+    public IZeroOptions Options { get; private set; }
 
-    public BackofficeStore(IDocumentStore raven, IApplicationContext appContext)
+
+    public BackofficeStore(IDocumentStore raven, IApplicationContext appContext, IZeroOptions options)
     {
       Raven = raven;
       AppContext = appContext;
+      Options = options;
     }
   }
 
@@ -22,5 +26,7 @@ namespace zero.Core.Api
     IDocumentStore Raven { get; }
 
     IApplicationContext AppContext { get; }
+
+    IZeroOptions Options { get; }
   }
 }
\ No newline at end of file
diff --git a/zero.Core/Api/PageTreeApi.cs b/zero.Core/Api/PageTreeApi.cs
index cd336996..b0492ea0 100644
--- a/zero.Core/Api/PageTreeApi.cs
+++ b/zero.Core/Api/PageTreeApi.cs
@@ -14,19 +14,14 @@ namespace zero.Core.Api
 {
   public class PageTreeApi<T> : AppAwareBackofficeApi, IPageTreeApi<T> where T : IPage
   {
-    protected IZeroOptions Options { get; private set; }
-
-    public PageTreeApi(IZeroOptions options, IBackofficeStore store) : base(store)
-    {
-      Options = options;
-    }
+    public PageTreeApi(IBackofficeStore store) : base(store) { }
 
 
     /// <inheritdoc />
     public async Task<IList<TreeItem>> GetChildren(string parentId = null, string activeId = null)
     {
       IList<TreeItem> items = new List<TreeItem>();
-      IReadOnlyCollection<PageType> pageTypes = Options.Pages.GetAllItems();
+      IReadOnlyCollection<PageType> pageTypes = Backoffice.Options.Pages.GetAllItems();
       string[] openIds = new string[0] { };
 
       using (IAsyncDocumentSession session = Raven.OpenAsyncSession())
diff --git a/zero.Web.UI/App/components/tree/tree-item.vue b/zero.Web.UI/App/components/tree/tree-item.vue
new file mode 100644
index 00000000..daf88b2a
--- /dev/null
+++ b/zero.Web.UI/App/components/tree/tree-item.vue
@@ -0,0 +1,219 @@
+<template>
+  <div class="ui-tree-item" :class="getClasses(value)" v-on:contextmenu="onRightClicked(value, $event)">
+    <button v-if="value.hasChildren" @click="toggle(value)" type="button" class="ui-tree-item-toggle">
+      <i class="ui-tree-item-arrow" :class="['fth-chevron-' + (value.isOpen ? 'up' : 'down')]"></i>
+    </button>
+    <component :is="tag" type="button" :to="value.url" class="ui-tree-item-link" @click="onClick(value, $event)">
+      <i class="ui-tree-item-icon" :class="value.icon"></i>
+      <i v-if="value.modifier" :title="value.modifier.name" class="ui-tree-item-modifier" :class="value.modifier.icon"></i>
+      <span class="ui-tree-item-text">{{value.name | localize}}</span>
+    </component>
+    <ui-dot-button class="ui-tree-item-actions" v-if="value.hasActions" @click="onActionsClicked(value, $event)" />
+  </div>
+</template>
+
+
+<script>
+  import { each as _each, extend as _extend, debounce as _debounce, isArray as _isArray } from 'underscore';
+
+  export default {
+    name: 'uiTreeItem',
+
+    props: {
+      value: {
+        type: Object,
+        required: true
+      }
+    },
+
+    computed: {
+      isLink()
+      {
+        return this.value && this.value.url;
+      },
+      tag()
+      {
+        return this.isLink ? 'router-link' : 'button';
+      }
+    },
+
+    methods: {
+      onClick(item, ev)
+      {
+        if (this.isLink)
+        {
+          return;
+        }
+        else
+        {
+          this.$emit('click', item, ev);
+        }
+      },
+
+      // get all classes for a tree item
+      getClasses(item)
+      {
+        return {
+          'has-children': item.hasChildren,
+          'is-inactive': item.isInactive,
+          'is-open': item.isOpen
+        };
+      },
+
+      // toggles children of an item
+      toggle(item)
+      {
+        this.$emit('open', item);
+      },
+
+      // right clicked on an item
+      onRightClicked(item, ev)
+      {
+        this.$emit('rightclick', item, ev);
+      },
+
+      // actions button clicked on item
+      onActionsClicked(item, ev)
+      {
+        this.$emit('actions', item, ev);
+      }
+    }
+  }
+</script>
+
+
+<style lang="scss">
+
+  .ui-tree-item
+  {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    font-size: var(--font-size);
+    padding: 0 var(--padding);
+    height: 50px;
+    color: var(--color-fg);
+    position: relative;
+    transition: color 0.2s ease;
+
+    &.is-inactive .ui-tree-item-text
+    //&.is-inactive .ui-tree-item-icon
+    {
+      opacity: .5;
+    }
+
+    .ui-tree-item-arrow
+    {
+      transition: transform 0.2s ease;
+    }
+
+    &:hover > .ui-tree-item-actions
+    {
+      transition-delay: 0.2s;
+      opacity: 1;
+    }
+    
+
+    &.is-open > .ui-tree-item-toggle .ui-tree-item-arrow
+    {
+      transform: rotate(180deg);
+    }
+  }
+
+  .ui-tree-item-link
+  {
+    display: grid;
+    grid-template-columns: 30px 1fr auto;
+    grid-gap: 6px;
+    height: 100%;
+    align-items: center;
+    position: relative;
+    color: var(--color-fg);
+
+    &.is-active
+    {
+      font-weight: bold;
+    }
+  }
+
+  .ui-tree-item-toggle
+  {
+    position: absolute;
+    color: var(--color-fg-mid);
+    height: 100%;
+    top: 0;
+    left: 0;
+    width: 30px;
+    text-align: right;
+    padding-right: 5px;
+    outline: none !important;
+    transition: color 0.2s ease;
+
+    &:hover
+    {
+      color: var(--color-fg);
+    }
+  }
+
+  .ui-tree-item-icon
+  {
+    font-size: 18px;
+    line-height: 1;
+    font-weight: 400;
+    position: relative;
+    top: -2px;
+    color: var(--color-fg-reverse-mid);
+    transition: color 0.2s ease;
+  }
+
+  .ui-tree-item-loading
+  {
+    display: block;
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 2px;
+
+    i
+    {
+      background-color: var(--color-line);
+      transform: translateX(-100%) scaleX(1);
+      animation: treeitemloading 1s linear infinite;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+  }
+
+  @keyframes treeitemloading
+  {
+    0%  { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+  }
+
+  .ui-tree-item-modifier
+  {
+    position: absolute;
+    left: 10px;
+    bottom: 12px;
+    background: var(--color-bg-light);
+    border-radius: 50%;
+    width: 14px;
+    height: 14px;
+    /*color: var(--color-fg-mid);*/
+    font-size: 11px;
+    font-style: normal;
+    text-align: center;
+    line-height: 14px;
+  }
+
+  .ui-tree-item-actions
+  {
+    transition: opacity 0.2s ease 0;
+    opacity: 0;
+    color: var(--color-fg-mid);
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/components/tree.vue b/zero.Web.UI/App/components/tree/tree.vue
similarity index 57%
rename from zero.Web.UI/App/components/tree.vue
rename to zero.Web.UI/App/components/tree/tree.vue
index 59373b53..31a18315 100644
--- a/zero.Web.UI/App/components/tree.vue
+++ b/zero.Web.UI/App/components/tree/tree.vue
@@ -6,19 +6,10 @@
     <slot></slot>
     <span v-if="status === 'loading'" class="ui-tree-item-loading"><i></i></span>
     <template v-for="item in items">
-      <div class="ui-tree-item" :class="getClasses(item)" v-on:contextmenu="onRightClicked(item, $event)">
-        <button v-if="item.hasChildren" @click="toggle(item)" type="button" class="ui-tree-item-toggle">
-          <i class="ui-tree-item-arrow" :class="['fth-chevron-' + (item.isOpen ? 'up' : 'down')]"></i>
-        </button>
-        <router-link :to="item.url" class="ui-tree-item-link">
-          <i class="ui-tree-item-icon" :class="item.icon"></i>
-          <i v-if="item.modifier" :title="item.modifier.name" class="ui-tree-item-modifier" :class="item.modifier.icon"></i>
-          <span class="ui-tree-item-text">{{item.name | localize}}</span>
-        </router-link>
-        <ui-dot-button class="ui-tree-item-actions" v-if="configuration.onActionsRequested && item.hasActions" @click="onActionsClicked(item, $event)" />
-      </div>
+      <ui-tree-item :value="item" @rightclick="onRightClicked" @actions="onActionsClicked" @open="toggle" />
       <ui-tree v-if="item.hasChildren && item.isOpen" :get="get" :parent="item.id" :depth="depth + 1" :active="active" :config="config" />
     </template>
+    <slot name="bottom"></slot>
     <div ref="dropdown" class="ui-dropdown ui-tree-dropdown theme-dark align-top" role="dialog" v-click-outside="hideActions" v-if="actionsOpen">
       <ui-dropdown-list v-model="actions" @hide="hideActions" />
     </div>
@@ -122,24 +113,6 @@
         this.$emit('onStatusChange', status);
       },
 
-
-      // toggles children of an item
-      toggle(item)
-      {
-        item.isOpen = !item.isOpen;
-      },
-
-
-      // get all classes for a tree item
-      getClasses(item)
-      {
-        return {
-          'has-children': item.hasChildren,
-          'is-inactive': item.isInactive,
-          'is-open': item.isOpen
-        };
-      },
-
       // hide actions overlay
       hideActions()
       {
@@ -149,6 +122,12 @@
         }
       },
 
+      // toggles children of an item
+      toggle(item)
+      {
+        item.isOpen = !item.isOpen;
+      },
+
       // right clicked on an item
       onRightClicked(item, ev)
       {
@@ -227,139 +206,6 @@
     margin-top: -18px;
   }
 
-  .ui-tree-item
-  {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    align-items: center;
-    font-size: var(--font-size);
-    padding: 0 var(--padding);
-    height: 50px;
-    color: var(--color-fg);
-    position: relative;
-    transition: color 0.2s ease;
-
-    &.is-inactive .ui-tree-item-text
-    //&.is-inactive .ui-tree-item-icon
-    {
-      opacity: .5;
-    }
-
-    .ui-tree-item-arrow
-    {
-      transition: transform 0.2s ease;
-    }
-
-    &:hover > .ui-tree-item-actions
-    {
-      transition-delay: 0.2s;
-      opacity: 1;
-    }
-    
-
-    &.is-open > .ui-tree-item-toggle .ui-tree-item-arrow
-    {
-      transform: rotate(180deg);
-    }
-  }
-
-  .ui-tree-item-link
-  {
-    display: grid;
-    grid-template-columns: 30px 1fr auto;
-    grid-gap: 6px;
-    height: 100%;
-    align-items: center;
-    position: relative;
-    color: var(--color-fg);
-
-    &.is-active
-    {
-      font-weight: bold;
-    }
-  }
-
-  .ui-tree-item-toggle
-  {
-    position: absolute;
-    color: var(--color-fg-mid);
-    height: 100%;
-    top: 0;
-    left: 0;
-    width: 30px;
-    text-align: right;
-    padding-right: 5px;
-    outline: none !important;
-    transition: color 0.2s ease;
-
-    &:hover
-    {
-      color: var(--color-fg);
-    }
-  }
-
-  .ui-tree-item-icon
-  {
-    font-size: 18px;
-    line-height: 1;
-    font-weight: 400;
-    position: relative;
-    top: -2px;
-    color: var(--color-fg-reverse-mid);
-    transition: color 0.2s ease;
-  }
-
-  .ui-tree-item-loading
-  {
-    display: block;
-    overflow: hidden;
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: 2px;
-
-    i
-    {
-      background-color: var(--color-line);
-      transform: translateX(-100%) scaleX(1);
-      animation: treeitemloading 1s linear infinite;
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-    }
-  }
-
-  @keyframes treeitemloading
-  {
-    0%  { transform: translateX(-100%); }
-    100% { transform: translateX(100%); }
-  }
-
-  .ui-tree-item-modifier
-  {
-    position: absolute;
-    left: 10px;
-    bottom: 12px;
-    background: var(--color-bg-light);
-    border-radius: 50%;
-    width: 14px;
-    height: 14px;
-    /*color: var(--color-fg-mid);*/
-    font-size: 11px;
-    font-style: normal;
-    text-align: center;
-    line-height: 14px;
-  }
-
-  .ui-tree-item-actions
-  {
-    transition: opacity 0.2s ease 0;
-    opacity: 0;
-    color: var(--color-fg-mid);
-  }
-
   .ui-tree-dropdown
   {
     position: fixed;