auto open tree when an item is active

zero.Web.UI/App/components/tree.vue

@@ -11,15 +11,22 @@
           <i v-if="item.modifier" :title="item.modifier.name" class="ui-tree-item-modifier" :class="item.modifier.icon"></i>
           {{item.name | localize}}
         </router-link>
-        <ui-dot-button class="ui-tree-item-actions" />
+        <ui-dot-button class="ui-tree-item-actions" v-if="configuration.onActionsRequested" />
       </div>
-      <ui-tree v-if="item.hasChildren && item.isOpen" :get="get" :parent="item.id" :depth="depth + 1" />
+      <ui-tree v-if="item.hasChildren && item.isOpen" :get="get" :parent="item.id" :depth="depth + 1" :active="active" :config="config" />
     </template>
   </div>
 </template>
 
 
 <script>
+  import { each as _each, extend as _extend, debounce as _debounce, isArray as _isArray } from 'underscore';
+
+  const defaultConfig = {
+    // return actions for an item
+    onActionsRequested: null
+  };
+
   export default {
     name: 'uiTree',
 
@@ -28,6 +35,10 @@
         type: Number,
         default: 0
       },
+      active: {
+        type: String,
+        default: null
+      },
       parent: {
         type: String,
         default: null
@@ -35,27 +46,49 @@
       get: {
         type: Function,
         required: true
+      },
+      config: {
+        type: Object,
+        default: () =>
+        {
+          return defaultConfig;
+        }
+      }
+    },
+
+    watch: {
+      active(val)
+      {
+        console.info('active: ' + val);
       }
     },
 
     data: () => ({
       items: [],
-      status: 'none'
+      status: 'none',
+      actions: [],
+      configuration: {}
     }),
 
-    created ()
+    mounted()
     {
+      this.initialize();
       this.load(this.parent);
     },
 
     methods: {
 
+      initialize()
+      {
+        this.configuration = _extend(defaultConfig, this.config);
+      },
+
       // loads children of the given parent id or on root if empty
       load(parent)
       {
         this.setStatus('loading', this.items);
 
-        let promise = this.get(parent);
+        let promise = this.get(parent, this.active);
 
         promise.then(response =>
         {

zero.Web.UI/App/pages/pages/page.vue

@@ -3,11 +3,11 @@
     <ui-header-bar :title="'Page ' + $route.params.id" :on-back="onBack">
       <ui-dropdown>
         <template v-slot:button>
-          <ui-button type="light" label="Actions" caret="down" />
+          <ui-button type="white" label="Actions" caret="down" />
         </template>
         <ui-dropdown-list v-model="actions" :action="actionSelected" />
       </ui-dropdown>
-      <ui-button type="light" label="Preview" icon="fth-eye" />
+      <ui-button type="white" label="Preview" icon="fth-eye" />
       <ui-button label="Save" />
     </ui-header-bar>
   </div>

zero.Web.UI/App/pages/pages/pages.vue

@@ -4,7 +4,7 @@
       <ui-header-bar title="Pages" :back-button="false">
         <ui-dot-button />
       </ui-header-bar>
-      <ui-tree :get="getItems" />
+      <ui-tree :get="getItems" :config="treeConfig" :active="id" />
       <div class="page-container-tree-resizable ui-resizable"></div>
     </div>
 
@@ -39,11 +39,18 @@
         save: 'page-tree',
         handle: '.ui-resizable'
       },
-      actions: []
+      actions: [],
+      treeConfig: {
+
+      }
     }),
 
 
     computed: {
+      id()
+      {
+        return this.$route.params.id;
+      },
       isOverview()
       {
         return !this.$route.params.id && this.$route.name !== 'recyclebin';
@@ -77,6 +84,42 @@
           name: 'history'
         }
       });
+
+      this.treeConfig.onActionsRequested = item =>
+      {
+        let actions = [];
+
+        actions.push({
+          name: 'Create',
+          icon: 'fth-plus'
+        });
+        actions.push({
+          name: 'Move',
+          icon: 'fth-corner-down-right'
+        });
+        actions.push({
+          name: 'Copy',
+          icon: 'fth-copy',
+          disabled: true
+        });
+        actions.push({
+          name: 'Sort',
+          icon: 'fth-arrow-down'
+        });
+        actions.push({
+          type: 'separator'
+        });
+        actions.push({
+          name: 'Delete',
+          icon: 'fth-x',
+          action(item, dropdown)
+          {
+            dropdown.hide();
+          }
+        });
+
+        return actions;
+      };
     },
 
 
@@ -91,7 +134,7 @@
           return Promise.resolve(this.cache[key]);
         }
 
-        return PageTreeApi.getChildren(parent).then(response =>
+        return PageTreeApi.getChildren(parent, this.id).then(response =>
         {
           response.forEach(item =>
           {

zero.Web.UI/App/resources/page-tree.js

@@ -3,11 +3,12 @@ import Axios from 'axios';
 export default {
 
   // get all pages with a certain parent (can be empty)
-  getChildren(parent)
+  getChildren(parent, active)
   {
     return Axios.get('pageTree/getChildren', {
       params: {
-        parent: parent
+        parent: parent,
+        active: active
       }
     }).then(res => Promise.resolve(res.data));
   }