update page tree when page changes

zero.Web.UI/App/components/forms/form-header.vue

@@ -5,6 +5,7 @@
         <ui-button type="white" label="<span>Language:</span> English" caret="down" />
       </template>
     </ui-dropdown>-->
+    <slot></slot>
     <ui-dropdown v-if="!isCreate" align="right">
       <template v-slot:button>
         <ui-button type="white" label="@ui.actions" caret="down" />

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

@@ -7,7 +7,7 @@
     <span v-if="status === 'loading'" class="ui-tree-item-loading"><i></i></span>
     <template v-for="item in items">
       <ui-tree-item :value="item" @rightclick="onRightClicked" @click="onSelect(item, $event)" @actions="onActionsClicked" @open="toggle" />
-      <ui-tree v-if="item.hasChildren && item.isOpen" :get="get" :parent="item.id" :depth="depth + 1" :active="active" :config="config" @select="onSelect" />
+      <ui-tree v-if="item.hasChildren && item.isOpen && status != 'loading'" :get="get" :parent="item.id" :depth="depth + 1" :active="active" :config="config" @select="onSelect" />
     </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">

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

@@ -1,17 +1,12 @@
 <template>
-  <ui-form ref="form" class="page page-editor" v-slot="form" @submit="onSubmit" @load="onLoad">
-    <ui-header-bar :title="title" :on-back="onBack">
-      <ui-button type="white" icon="fth-eye" title="Preview" />
-      <ui-dropdown align="right">
-        <template v-slot:button>
-          <ui-button type="white" label="Actions" caret="down" />
-        </template>
-        <ui-dropdown-list v-model="actions" :action="actionSelected" />
-      </ui-dropdown>
-      <ui-button :submit="true" label="Save" />
-    </ui-header-bar>
+  <ui-form ref="form" class="page page-editor" v-slot="form" @submit="onSubmit" @load="onLoad" :route="route">
+    <ui-form-header v-model="model" title="@page.name" :disabled="disabled" :is-create="!id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete">
+      <template v-slot:actions>
+        <ui-dropdown-button label="Preview" icon="fth-eye" :disabled="disabled" />
+      </template>
+    </ui-form-header>
 
-    <ui-editor v-if="!loading" :config="renderer" v-model="model" :meta="meta" :is-page="true" infos="none" :on-configure="onEditorConfigure" :active-tab="2" />
+    <ui-editor v-if="!loading" :config="renderer" v-model="model" :meta="meta" :is-page="true" infos="none" :on-configure="onEditorConfigure" />
   </ui-form>
 </template>
 
@@ -19,6 +14,7 @@
 <script>
   import UiEditor from 'zero/editor/editor';
   import PagesApi from 'zero/resources/pages';
+  import EventHub from 'zero/services/eventhub';
   import InfoTab from './page-info';
 
   export default {
@@ -29,10 +25,12 @@
 
     data: () => ({
       loading: true,
+      disabled: false,
       renderer: null,
       actions: [],
       meta: {},
       pageType: {},
+      route: 'page',
       model: {
         name: null,
         options: {
@@ -47,10 +45,6 @@
       isCreate()
       {
         return this.$route.name === 'page-create';
-      },
-      title()
-      {
-        return this.isCreate ? 'Create new page' : this.model.name;
       }
     },
 
@@ -100,16 +94,24 @@
 
       onSubmit(form)
       {
-        //this.fullModel.model = this.model;
-
-       //console.info(JSON.parse(JSON.stringify(this.model)));
         form.handle(PagesApi.save(this.model)).then(response =>
         {
-          console.info(response);
+          if (response.success)
+          {
+            EventHub.$emit('page.update', response.model);
+            this.model = response.model;
+          }
         });
       },
 
 
+      onDelete(item, opts)
+      {
+        opts.hide();
+        this.$refs.form.onDelete(PagesApi.delete.bind(this, this.id));
+      },
+
+
       onEditorConfigure(editor)
       {
         editor.tabs.push({

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

@@ -1,7 +1,7 @@
 <template>
   <div class="page-container">
     <div class="page-container-tree" v-resizable="resizable">
-      <ui-tree :get="getItems" :config="treeConfig" :active="id" header="Pages" />
+      <ui-tree ref="tree" :get="getItems" :config="treeConfig" :active="id" header="Pages" />
       <div class="page-container-tree-resizable ui-resizable"></div>
     </div>
 
@@ -25,6 +25,7 @@
   import PageTreeApi from 'zero/resources/page-tree.js'
   import Overlay from 'zero/services/overlay.js'
   import CreateOverlay from './create'
+  import EventHub from 'zero/services/eventhub'
 
   export default {
 
@@ -138,6 +139,12 @@
 
         return actions;
       };
+
+      EventHub.$on('page.update', page =>
+      {
+        this.cache = [];
+        this.$refs.tree.refresh();
+      });
     },
 
 

zero.Web/Resources/Localization/zero.en-us.json

@@ -295,6 +295,8 @@
   },
 
   "page": {
+    "name": "Page",
+
     "overview": {
       "actions": {
         "continue": "Continue",