start module output

zero.Core/Api/RevisionsApi.cs

@@ -28,11 +28,15 @@ namespace zero.Core.Api
     /// <summary>
     /// Get revision list for an entity
     /// </summary>
-    public async Task<ListResult<Revision>> GetPaged<T>(string id, int pageNumber = 1, int pageSize = 30, bool includeContent = false) where T : IZeroEntity
+    public async Task<ListResult<Revision>> GetPaged<T>(string id, int pageNumber = 1, int pageSize = 10, bool includeContent = false) where T : IZeroEntity
     {
       using IAsyncDocumentSession session = Raven.OpenAsyncSession();
 
       List<T> items = await session.Advanced.Revisions.GetForAsync<T>(id, pageNumber - 1, pageSize);
+
+      List<T> continuedItems = await session.Advanced.Revisions.GetForAsync<T>(id, pageNumber, 1);
+      bool hasMore = continuedItems.Count > 0;
+
       List<Revision> revisions = new List<Revision>();
 
       string[] userIds = items.Select(x => x.LastModifiedById).Distinct().ToArray();
@@ -62,7 +66,7 @@ namespace zero.Core.Api
         revisions.Add(revision);
       }
 
-      return new ListResult<Revision>(revisions, revisions.Count, pageNumber, pageSize);
+      return new ListResult<Revision>(revisions, hasMore ? revisions.Count + 1 : revisions.Count, pageNumber, pageSize);
     }
   }
 
@@ -72,6 +76,6 @@ namespace zero.Core.Api
     /// <summary>
     /// Get revision list (without content JSON) for an entity
     /// </summary>
-    Task<ListResult<Revision>> GetPaged<T>(string id, int pageNumber = 1, int pageSize = 30, bool includeContent = false) where T : IZeroEntity;
+    Task<ListResult<Revision>> GetPaged<T>(string id, int pageNumber = 1, int pageSize = 10, bool includeContent = false) where T : IZeroEntity;
   }
 }

zero.Core/Api/Token.cs

@@ -26,7 +26,7 @@ namespace zero.Core.Api
 
 
     /// <inheritdoc />
-    public bool Verify(IZeroEntity entity, string token)
+    public bool Verify(IZeroIdEntity entity, string token)
     {
       return Verify(entity?.Id, token);
     }
@@ -53,7 +53,7 @@ namespace zero.Core.Api
 
 
     /// <inheritdoc />
-    public string Get(IZeroEntity entity)
+    public string Get(IZeroIdEntity entity)
     {
       return Get(entity?.Id);
     }
@@ -90,7 +90,7 @@ namespace zero.Core.Api
     /// <summary>
     /// Verifies if the change token is valid for the entity
     /// </summary>
-    bool Verify(IZeroEntity entity, string token);
+    bool Verify(IZeroIdEntity entity, string token);
 
     /// <summary>
     /// Verifies if the change token is valid for the entity
@@ -100,7 +100,7 @@ namespace zero.Core.Api
     /// <summary>
     /// Get a new change token for the entity
     /// </summary>
-    string Get(IZeroEntity entity);
+    string Get(IZeroIdEntity entity);
 
     /// <summary>
     /// Get a new change token for the entity

zero.Core/Entities/ListResult.cs

@@ -23,6 +23,8 @@ namespace zero.Core.Entities
       {
         TotalPages = 1;
       }
+
+      HasMore = TotalPages > Page;
     }
 
     public ListResult(IList<T> items, long totalItems, long pageNumber, long pageSize) : this(totalItems, pageNumber, pageSize)
@@ -46,6 +48,8 @@ namespace zero.Core.Entities
 
     public long TotalItems { get; private set; }
 
+    public bool HasMore { get; private set; }
+
     public IList<T> Items { get; set; }
 
     public List<PagedResultStatistic> Statistics { get; set; } = new List<PagedResultStatistic>();

zero.Debug/Renderers/module.headline.js

@@ -0,0 +1,34 @@
+export default {
+  alias: 'module.headline',
+
+  // define layouts users can switch between
+  layouts: [
+    {
+      label: 'Default',
+      preview: '/images/rte-layout1.png'
+    },
+    {
+      label: 'Big',
+      preview: '/images/rte-layout2.png'
+    },
+  ],
+
+  // define a preview which is rendered in the overview
+  preview: {
+    template: '<div v-html="model.text"></div>'
+  },
+
+  fields: [
+    {
+      field: 'headline',
+      display: 'text',
+      label: 'Headline',
+      required: true
+    },
+    {
+      field: 'subline',
+      display: 'text',
+      label: 'Subline'
+    },
+  ]
+};

zero.Debug/Renderers/module.textwithimage.js

@@ -0,0 +1,34 @@
+export default {
+  alias: 'module.textWithImage',
+
+  // define a preview which is rendered in the overview
+  preview: {
+    template: '<div v-html="model.text"></div>'
+  },
+
+  fields: [
+    {
+      field: 'headline',
+      display: 'text',
+      label: 'Headline',
+      required: true
+    },
+    {
+      field: 'text',
+      display: 'rte',
+      label: 'Text',
+      description: 'Enter a long-form text',
+      required: true
+    },
+    {
+      field: 'isLeftAligned',
+      display: 'toggle',
+      label: 'Is left aligned'
+    },
+    {
+      field: 'imageId',
+      display: 'media',
+      label: 'Image'
+    }
+  ]
+};

zero.Debug/Renderers/modules/headline.module.js

@@ -1,51 +0,0 @@
-import MetaFields from '../meta.partial';
-
-export default {
-  alias: 'module.headline',
-
-  // define layouts users can switch between
-  layouts: [
-    {
-      label: 'Default',
-      preview: '/images/rte-layout1.png'
-    },
-    {
-      label: 'Big',
-      preview: '/images/rte-layout2.png'
-    },
-  ],
-
-  // define a preview which is rendered in the overview
-  preview: {
-    template: '<div v-html="model.text"></div>'
-  },
-
-  tabs: [
-    {
-      name: 'general',
-      label: '@ui.tab_content',
-      class: 'is-blank'
-    },
-    {
-      name: 'meta',
-      label: 'Meta'
-    }
-  ],
-
-  fields: [
-    //{
-    //  field: 'name',
-    //  display: 'text',
-    //  label: '@ui.name',
-    //  required: true
-    //},
-    {
-      field: 'name',
-      display: 'modules',
-      label: '@ui.name',
-      required: true,
-      hideLabel: true,
-      class: 'ui-modules'
-    }
-  ].concat(MetaFields)
-};

zero.Debug/Renderers/page.content.js

@@ -16,14 +16,8 @@ export default {
   ],
 
   fields: [
-    //{
-    //  field: 'name',
-    //  display: 'text',
-    //  label: '@ui.name',
-    //  required: true
-    //},
     {
-      field: 'name',
+      field: 'modules',
       display: 'modules',
       label: '@ui.name',
       required: true,

zero.Debug/TestData/Pages/ContentPage.cs

@@ -1,4 +1,5 @@
 using System;
+using System.Collections.Generic;
 using zero.Core.Entities;
 
 namespace zero.TestData
@@ -10,5 +11,7 @@ namespace zero.TestData
     public OptionsPagePartial Options { get; set; } = new OptionsPagePartial();
 
     public string Text { get; set; }
+
+    public List<Module> Modules { get; set; } = new List<Module>();
   }
 }

zero.Web.UI/App/components/forms/property.vue

@@ -50,8 +50,9 @@
   .ui-split + .ui-property,
   .ui-property + .ui-property
   {
-    padding-top: 30px;
-    margin-top: 30px;
+    margin-top: 50px;
+    //padding-top: 30px;
+    //margin-top: 30px;
     //border-top: 1px solid var(--color-line);
   }
 

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

@@ -1,11 +1,18 @@
 <template>
-  <i class="ui-loading"></i>
+  <i class="ui-loading" :class="{'is-big': isBig }"></i>
 </template>
 
 
 <script>
   export default {
-    name: 'uiLoading'
+    name: 'uiLoading',
+
+    props: {
+      isBig: {
+        type: Boolean,
+        default: false
+      }
+    }
   }
 </script>
 
@@ -16,12 +23,17 @@
   width: 28px;
   height: 28px;
   border-radius: 40px;
-  border: 2px solid var(--color-bg-mid);
+  border: 2px solid var(--color-bg-bright-two);
   border-left-color: var(--color-fg);
-  opacity: 1;
   will-change: transform;
-  animation: loadingRotation .8s linear infinite;
-  transition: opacity .25s ease;
+  animation: loadingRotation 0.8s linear infinite;
+
+  &.is-big
+  {
+    width: 36px;
+    height: 36px;
+    border-width: 2px;
+  }
 }
 
 @keyframes loadingRotation

zero.Web.UI/App/components/modules/edit-module.vue

@@ -1,46 +1,66 @@
 <template>
-  <ui-overlay-editor class="ui-module-overlay">
-    <template v-slot:header>
-      <ui-header-bar title="Richtext" :back-button="false" :close-button="true" />
-    </template>
-    <template v-slot:footer>
-      <ui-button type="white" label="@ui.close" @click="config.hide"></ui-button>
-      <ui-button label="Confirm" @click="onSave" :state="state"></ui-button>
-    </template>
+  <ui-form ref="form" v-slot="form" @submit="onSubmit" @load="onLoad">
+    <ui-overlay-editor class="ui-module-overlay">
 
-    <div class="ui-module-overlay-editor">
-      <ui-editor :config="config.renderer" v-model="model" :meta="meta" :is-page="false" infos="none" />
-    </div>
-  </ui-overlay-editor>
+      <template v-slot:header>
+        <ui-header-bar :title="config.module.name" :back-button="false" :close-button="true" />
+      </template>
+
+      <template v-slot:footer>
+        <ui-button type="white" label="@ui.close" @click="config.hide"></ui-button>
+        <ui-button :submit="true" label="Confirm" :state="form.state" :disabled="loading || disabled"></ui-button>
+      </template>
+
+      <ui-loading v-if="loading" :is-big="true" />
+
+      <div v-if="!loading" class="ui-module-overlay-editor">
+        <ui-editor :config="config.renderer" v-model="model" :meta="meta" :is-page="false" infos="none" />
+      </div>
+
+    </ui-overlay-editor>
+  </ui-form>
 </template>
 
 
 <script>
+  import ModulesApi from 'zero/resources/modules.js';
   import UiEditor from 'zero/editor/editor';
 
   export default {
 
     props: {
-      model: Object,
       config: Object
     },
 
     components: { UiEditor },
 
     data: () => ({
+      disabled: false,
+      id: null,
+      loading: true,
       state: 'default',
-      meta: {
-
-      }
+      meta: {},
+      model: {}
     }),
 
 
     methods: {
 
-      onSave()
+      onLoad(form)
       {
-        //this.state = 'loading';
-        //this.config.confirm(res.model);
+        form.load(!this.id ? ModulesApi.getEmpty(this.config.module.alias) : null).then(response =>
+        {
+          this.disabled = !response.meta.canEdit;
+          this.meta = response.meta;
+          this.model = response.entity;
+          this.loading = false;
+        });
+      },
+
+
+      onSubmit(form)
+      {
+        this.config.confirm(this.model);
       }
     }
   }
@@ -51,6 +71,7 @@
   {
     > content
     {
+      position: relative;
       padding-top: 0 !important;
     }
 
@@ -75,5 +96,13 @@
     {
       display: block;
     }
+
+    .ui-loading
+    {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      margin: -14px 0 0 -14px;
+    }
   }
 </style>

zero.Web.UI/App/components/modules/modules-select.vue

@@ -32,17 +32,18 @@
 
 
 <script>
-  import ModulesApi from 'zero/resources/modules.js';
-  import EditModuleOverlay from './edit-module';
-  import Overlay from 'zero/services/overlay.js';
   import { groupBy as _groupBy, keys as _keys, each as _each } from 'underscore';
 
   export default {
     name: 'uiModulesSelect',
 
     props: {
-      value: [String, Object, Array],
-      config: Object
+      value: Array,
+      config: Object,
+      types: {
+        type: Array,
+        default: () => []
+      }
     },
 
 
@@ -54,11 +55,25 @@
     }),
 
 
+    watch: {
+      types(val)
+      {
+        this.rebuildGroups(val);
+      }
+    },
+
+
     created()
     {
-      ModulesApi.getModuleTypes().then(res =>
+      this.rebuildGroups(this.types);
+    },
+
+
+    methods: {
+
+      rebuildGroups(value)
       {
-        let groups = _groupBy(res, val => val.group);
+        let groups = _groupBy(value, val => val.group);
         let index = 0;
 
         _each(groups, (items, key) =>
@@ -73,11 +88,7 @@
         });
 
         this.activeGroup = this.moduleTypes[0];
-      });
-    },
-
-
-    methods: {
+      },
 
       selectGroup(group)
       {
@@ -87,17 +98,11 @@
 
       editModule(module, isAdd)
       {
-        return Overlay.open({
-          component: EditModuleOverlay,
-          display: 'editor',
-          module: module,
-          renderer: 'module.' + module.alias,
-          model: {},
-          width: 1100
-        }).then(value =>
+        this.$emit('selected', module, isAdd);
+        if (isAdd)
         {
-          
-        });
+          this.isSelecting = false;
+        }
       }
 
     }

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

@@ -1,36 +1,92 @@
 <template>
   <div class="ui-modules-inner">
-    <ui-modules-select v-if="canAdd" />
+    <div class="ui-module-item" v-for="item in items">
+      <header class="ui-module-item-header"><i :class="getModule(item.moduleTypeAlias).icon"></i> {{getModule(item.moduleTypeAlias).name}}</header>
+    </div>
+    <ui-modules-select :types="moduleTypes" :value="value" v-if="canAdd" @selected="onSelected" />
   </div>
 </template>
 
 
 <script>
   import ModulesApi from 'zero/resources/modules.js';
+  import EditModuleOverlay from './edit-module';
+  import Overlay from 'zero/services/overlay.js';
+  import { find as _find } from 'underscore';
 
   export default {
     name: 'uiModules',
 
     props: {
-      value: [String, Object, Array],
+      value: {
+        type: Array,
+        default: () => []
+      },
       config: Object
     },
 
 
     data: () => ({
+      items: [],
       canAdd: true,
-      isSelecting: false,
       moduleTypes: []
     }),
 
 
+    watch: {
+      value(val)
+      {
+        this.setup(val);
+      }
+    },
+
+
+    created()
+    {
+      this.setup(this.value);
+
+      ModulesApi.getModuleTypes().then(res =>
+      {
+        this.moduleTypes = res;
+      });
+    },
+
+
     methods: {
 
-      start()
+      setup(value)
       {
-        this.isSelecting = true;
-      }
+        this.items = JSON.parse(JSON.stringify(value || []));
+      },
 
+
+      getModule(alias)
+      {
+        return _find(this.moduleTypes, x => x.alias == alias);
+      },
+
+
+      onSelected(module, isAdd)
+      {
+        return Overlay.open({
+          component: EditModuleOverlay,
+          display: 'editor',
+          module: module,
+          renderer: 'module.' + module.alias,
+          model: {},
+          width: 1100
+        }).then(value =>
+        {
+          this.items.push(value);
+          this.onChange();
+        });
+      },
+
+
+      onChange()
+      {
+        this.$emit('input', this.items);
+      }
     }
   }
 </script>
@@ -45,7 +101,7 @@
     margin-top: var(--padding);
   }
 
-  .ui-modules-start
+  .ui-modules-start, .ui-module-item
   {
     margin: 0;
     padding: var(--padding);
@@ -56,6 +112,17 @@
     justify-content: center;
   }
 
+  .ui-module-item
+  {
+    display: block;
+  }
+
+  .ui-module-item + .ui-module-item,
+  .ui-module-item + .ui-modules-start
+  {
+    margin-top: 3px;
+  }
+
   .ui-modules-start-button
   {
     color: var(--color-fg);

zero.Web.UI/App/navigation.vue

@@ -38,7 +38,7 @@
           <button type="button" class="app-nav-account-button">
             <img class="-image" v-if="userAvatar" :src="userAvatar" :alt="user.name" />
             <span class="-image" v-if="!userAvatar"><i class="fth-user"></i></span>
-            <p class="-text"><strong>{{user.name}}</strong><br>{{user.email}}</p>
+            <p class="-text"><strong>{{user.name}}</strong></p>
             <i class="-arrow fth-chevron-down"></i>
           </button>
         </template>

zero.Web.UI/App/resources/modules.js

@@ -12,5 +12,10 @@ export default {
   getModuleType(alias)
   {
     return Axios.get(base + 'getModuleType', { params: { alias } }).then(res => Promise.resolve(res.data));
-  }
+  },
+
+  getEmpty(alias)
+  {
+    return Axios.get(base + 'getEmpty', { params: { alias } }).then(res => Promise.resolve(res.data));
+  },
 };

zero.Web.UI/App/resources/pages.js

@@ -24,9 +24,9 @@ export default {
     return Axios.get(base + 'getEmpty', { params: { type, parent } }).then(res => Promise.resolve(res.data));
   },
 
-  getRevisions(id)
+  getRevisions(id, page)
   {
-    return Axios.get(base + 'getRevisions', { params: { id } }).then(res => Promise.resolve(res.data));
+    return Axios.get(base + 'getRevisions', { params: { id, page } }).then(res => Promise.resolve(res.data));
   },
 
   getAll(query)

zero.Web.UI/Sass/Canvas/_navigation.scss

@@ -164,14 +164,14 @@ a.app-nav-child
 
   .-image
   {
-    height: 36px;
-    width: 36px;
+    height: 32px;
+    width: 32px;
     border-radius: 18px;
     position: relative;
     top: -1px;
     background: var(--color-bg-bright-two);
     text-align: center;
-    line-height: 37px;
+    line-height: 33px;
     font-size: 16px;
   }
 
@@ -182,7 +182,7 @@ a.app-nav-child
 
     strong
     {
-      font-weight: 700;
+      font-weight: 400;
       color: var(--color-fg);
     }
   }

zero.Web.UI/Sass/Modules/Buttons/_button.scss

@@ -41,6 +41,8 @@ button::-moz-focus-inner
   padding: 0 20px;
   height: 42px;
   border-radius: var(--radius);
+  //border-bottom-left-radius: 15px;
+  //border-top-right-radius: 15px;
   font-size: var(--font-size);
   font-weight: 700;
   margin: 0;

zero.Web/Controllers/BackofficeController.cs

@@ -57,7 +57,7 @@ namespace zero.Web.Controllers
     /// <summary>
     /// Creates an edit model with appropriate options and permissions
     /// </summary>
-    public JsonResult Edit<T>(T data, bool typed = true, Action<dynamic> transform = null) where T : IZeroEntity
+    public JsonResult Edit<T>(T data, bool typed = true, Action<dynamic> transform = null) where T : IZeroIdEntity
     {
       Type type = typeof(T);
       bool canBeShared = AppAwareShareableType.IsAssignableFrom(type);

zero.Web/Controllers/ModulesController.cs

@@ -1,5 +1,8 @@
 using Microsoft.AspNetCore.Mvc;
+using System;
 using zero.Core.Api;
+using zero.Core.Entities;
+using zero.Core.Utils;
 
 namespace zero.Web.Controllers
 {
@@ -16,5 +19,17 @@ namespace zero.Web.Controllers
     public IActionResult GetModuleTypes() => Json(Api.GetModuleTypes());
  
     public IActionResult GetModuleType([FromQuery] string alias) => Json(Api.GetModuleType(alias));
+
+    public IActionResult GetEmpty(string alias)
+    {
+      ModuleType moduleType = Api.GetModuleType(alias);
+      IModule module = Activator.CreateInstance(moduleType.ContentType) as IModule;
+
+      module.ModuleTypeAlias = moduleType.Alias;
+      module.Id = IdGenerator.Create(8);
+      module.IsActive = true;
+
+      return Edit(module);
+    }
   }
 }

zero.Web/Controllers/PagesController.cs

@@ -30,7 +30,7 @@ namespace zero.Web.Controllers
       ParentId = parent
     });
 
-    public async Task<IActionResult> GetRevisions([FromQuery] string id) => Json(await RevisionsApi.GetPaged<T>(id));
+    public async Task<IActionResult> GetRevisions([FromQuery] string id, [FromQuery] int page = 1) => Json(await RevisionsApi.GetPaged<T>(id, page));
 
     public async Task<IActionResult> Save([FromBody] T model) => Json(await Api.Save(model));