From 9c48c3646da7c9f5aad2dd2ad3194776c97ffbee Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Thu, 29 Oct 2020 21:44:22 +0100
Subject: [PATCH] page picker

---
 zero.Core/Api/PagesApi.cs                     |  12 ++
 .../components/pickers/pagePicker/overlay.vue | 116 ++++++++++
 .../pickers/pagePicker/pagepicker.vue         | 198 ++++++++++++++++++
 zero.Web.UI/App/core/editor-field.js          |  13 ++
 zero.Web.UI/App/editor/editor.scss            |  12 ++
 zero.Web.UI/App/editor/editor.vue             |   4 +-
 zero.Web.UI/App/editor/fields/pagepicker.vue  |  24 +++
 zero.Web.UI/App/resources/pages.js            |   5 +
 zero.Web/Controllers/PagesController.cs       |  20 ++
 .../Defaults/ZeroAssemblyDiscoveryRule.cs     |   1 -
 .../Resources/Localization/zero.en-us.json    |   5 +-
 11 files changed, 406 insertions(+), 4 deletions(-)
 create mode 100644 zero.Web.UI/App/components/pickers/pagePicker/overlay.vue
 create mode 100644 zero.Web.UI/App/components/pickers/pagePicker/pagepicker.vue
 create mode 100644 zero.Web.UI/App/editor/fields/pagepicker.vue

diff --git a/zero.Core/Api/PagesApi.cs b/zero.Core/Api/PagesApi.cs
index e7355352..b594bcf3 100644
--- a/zero.Core/Api/PagesApi.cs
+++ b/zero.Core/Api/PagesApi.cs
@@ -36,6 +36,13 @@ namespace zero.Core.Api
     }
 
 
+    /// <inheritdoc />
+    public async Task<Dictionary<string, IPage>> GetByIds(params string[] ids)
+    {
+      return await GetByIds<IPage>(ids);
+    }
+
+
     /// <inheritdoc />
     public IList<PageType> GetPageTypes()
     {
@@ -357,6 +364,11 @@ namespace zero.Core.Api
     /// </summary>
     Task<IPage> GetById(string id);
 
+    /// <summary>
+    /// Get pages by ids
+    /// </summary>
+    Task<Dictionary<string, IPage>> GetByIds(params string[] ids);
+
     /// <summary>
     /// Get all available page types
     /// </summary>
diff --git a/zero.Web.UI/App/components/pickers/pagePicker/overlay.vue b/zero.Web.UI/App/components/pickers/pagePicker/overlay.vue
new file mode 100644
index 00000000..0ca01789
--- /dev/null
+++ b/zero.Web.UI/App/components/pickers/pagePicker/overlay.vue
@@ -0,0 +1,116 @@
+<template>
+  <ui-overlay-editor class="ui-pagepicker-overlay">
+    <template v-slot:header>
+      <ui-header-bar :title="config.title" :back-button="false" :close-button="true" />
+    </template>
+    <template v-slot:footer>
+      <ui-button type="light onbg" :label="config.closeLabel" :parent="config.rootId" @click="config.hide"></ui-button>
+    </template>
+
+    <div v-if="opened" class="ui-box ui-pagepicker-overlay-items">
+      <ui-tree ref="tree" :get="getItems" :parent="config.rootId" @select="onSelect" />
+    </div>
+  </ui-overlay-editor>
+</template>
+
+
+<script>
+  import PageTreeApi from 'zero/resources/page-tree.js'
+
+  export default {
+
+    props: {
+      model: String,
+      config: Object
+    },
+
+    data: () => ({
+      opened: false
+    }),
+
+    computed: {
+      disabledIds()
+      {
+        return this.config.disabledIds || [];
+      }
+    },
+
+
+    mounted()
+    {
+      setTimeout(() => this.opened = true, 300);
+    },
+
+
+    methods: {
+
+      onSelect(item)
+      {
+        this.config.confirm(item);
+      },
+
+      // get tree items
+      getItems(parent)
+      {
+        return PageTreeApi.getChildren(parent, this.model).then(res =>
+        {
+          res = res.filter(x => x.id !== 'recyclebin');
+          
+          res.forEach(item =>
+          {
+            if (item.id === this.model)
+            {
+              item.isSelected = true;
+            }
+            if (this.disabledIds.indexOf(item.id) > -1)
+            {
+              item.disabled = true;
+            }
+            item.hasActions = false;
+          });
+
+          return res;
+        });
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .ui-pagepicker-overlay content
+  {
+    padding-top: 0;
+  }
+
+  .ui-box.ui-pagepicker-overlay-items
+  {
+    margin: 0;
+    padding: 20px 0;
+
+    .ui-tree-item.is-selected, .ui-tree-item:hover:not(.is-disabled)
+    {
+      background: var(--color-bg-xxlight);
+    }
+
+    & +.ui-box
+    {
+      margin-top: var(--padding);
+    }
+
+    .ui-tree-item.is-selected
+    {
+      &:after
+      {
+        font-family: "Feather";
+        content: "\e83e";
+        font-size: 16px;
+        color: var(--color-primary);
+      }
+      
+      .ui-tree-item-text
+      {
+        font-weight: bold;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/components/pickers/pagePicker/pagepicker.vue b/zero.Web.UI/App/components/pickers/pagePicker/pagepicker.vue
new file mode 100644
index 00000000..b4d719ff
--- /dev/null
+++ b/zero.Web.UI/App/components/pickers/pagePicker/pagepicker.vue
@@ -0,0 +1,198 @@
+<template>
+  <div class="ui-pagepicker" :class="{'is-disabled': disabled }">
+    <input ref="input" type="hidden" :value="value" />
+    <div class="ui-pagepicker-previews" v-if="previews.length > 0">
+      <div v-for="preview in previews" class="ui-pagepicker-preview">
+        <ui-select-button :icon="preview.icon" :label="preview.name" :description="preview.text" :disabled="disabled" @click="pick(preview.id)" :tokens="{ id: preview.id }" />
+        <ui-icon-button v-if="!disabled" @click="remove(preview.id)" icon="fth-x" title="@ui.close" />
+      </div>
+    </div>
+    <ui-select-button v-if="canAdd" icon="fth-plus" :label="limit > 1 ? '@ui.add' : '@ui.select'" @click="pick()" :disabled="disabled" />
+  </div>
+</template>
+
+
+<script>
+  import PageTreeApi from 'zero/resources/page-tree.js'
+  import PagesApi from 'zero/resources/pages.js'
+  import PageOverlay from './overlay';
+  import Overlay from 'zero/services/overlay';
+  import { extend as _extend, isArray as _isArray, isEmpty as _isEmpty, clone as _clone } from 'deps/underscore';
+
+  export default {
+    name: 'uiPagepicker',
+
+    props: {
+      value: {
+        type: [String, Array],
+        default: null
+      },
+      limit: {
+        type: Number,
+        default: 1
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      root: {
+        type: String,
+        default: null
+      },
+      options: {
+        type: Object,
+        default: () => {}
+      }
+    },
+
+    data: () => ({
+      previews: []
+    }),
+
+    watch: {
+      value()
+      {
+        this.updatePreviews();
+      }
+    },
+
+    computed: {
+      multiple()
+      {
+        return this.limit > 1;
+      },
+      canAdd()
+      {
+        let count = _isArray(this.value) ? this.value.length : (!this.value ? 0 : 1);
+        return !this.disabled && count < this.limit;
+      }
+    },
+
+    mounted()
+    {
+      this.updatePreviews();
+    },
+
+    methods: {
+
+      onChange(value)
+      {
+        this.$emit('change', value);
+        this.$emit('input', value);
+        // TODO this does not trigger the forms dirty flag
+      },
+
+
+      updatePreviews()
+      {
+        if (!this.value || _isEmpty(this.value))
+        {
+          this.previews = [];
+          return;
+        }
+
+        let ids = _isArray(this.value) ? this.value : [this.value];
+        PagesApi.getPreviews(ids).then(res =>
+        {
+          this.previews = res;
+        });
+      },
+
+
+      remove(id)
+      {
+        if (_isArray(this.value))
+        {
+          let index = this.value.indexOf(id);
+          this.value.splice(index, 1);
+          this.onChange(this.value);
+        }
+        else
+        {
+          this.onChange(this.limit > 1 ? [] : null);
+        }
+      },
+
+
+      pick(id)
+      {
+        if (this.disabled)
+        {
+          return;
+        }
+
+        let disabledIds = [];
+
+        if (!!this.value && !_isArray(this.value))
+        {
+          disabledIds = [this.value];
+        }
+        else if (_isArray(this.value))
+        {
+          disabledIds = this.value;
+        }
+
+        let options = _extend({
+          title: '@page.picker.headline',
+          closeLabel: '@ui.close',
+          component: PageOverlay,
+          display: 'editor',
+          model: this.multiple ? id : this.value,
+          rootId: this.root,
+          disabledIds: disabledIds
+        }, typeof this.options === 'object' ? this.options : {});
+
+        return Overlay.open(options).then(value =>
+        {
+          if (this.multiple)
+          {
+            if (!this.value || !_isArray(this.value))
+            {
+              this.onChange([value.id]);
+            }
+            else if (this.value.indexOf(value.id) < 0)
+            {
+              if (id)
+              {
+                this.remove(id);
+              }
+              this.value.push(value.id);
+              this.onChange(this.value);
+            }
+          }
+          else
+          {
+            this.onChange(value ? value.id : null);
+          }
+        });
+      }    
+    }
+  }
+</script>
+
+<style lang="scss">
+  .ui-pagepicker-preview
+  {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .ui-icon-button
+    {
+      height: 24px;
+      width: 24px;
+      //background: none;
+
+      i
+      {
+        font-size: 13px;
+      }
+    }
+  }
+
+  .ui-pagepicker-previews + .ui-select-button,
+  .ui-pagepicker-preview + .ui-pagepicker-preview
+  {
+    margin-top: 10px;
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/core/editor-field.js b/zero.Web.UI/App/core/editor-field.js
index ffeb135b..c594e7a6 100644
--- a/zero.Web.UI/App/core/editor-field.js
+++ b/zero.Web.UI/App/core/editor-field.js
@@ -16,6 +16,7 @@ import DatePicker from '../editor/fields/datepicker.vue';
 import DateRangePicker from '../editor/fields/daterangepicker.vue';
 import IconPicker from '../editor/fields/iconPicker.vue';
 import LanguagePicker from '../editor/fields/language.vue';
+import PagePicker from '../editor/fields/pagepicker.vue';
 import InputList from '../editor/fields/inputlist.vue';
 import Media from '../editor/fields/media.vue';
 import Modules from '../editor/fields/modules.vue';
@@ -351,6 +352,18 @@ class EditorField
   }
 
 
+  /**
+   * Renders a page picker
+   * @param {object} [options] - Custom options
+   * @param {number} [options.limit=1] - Limit of selection
+   * @returns {EditorField}
+   */
+  pagePicker(options)
+  {
+    return this._setComponent(PagePicker, { ...options });
+  }
+
+
   /**
    * Create a list of strings
    * @param {number} [limit=10] - Limit the inputs
diff --git a/zero.Web.UI/App/editor/editor.scss b/zero.Web.UI/App/editor/editor.scss
index d79a6f2e..10491c1d 100644
--- a/zero.Web.UI/App/editor/editor.scss
+++ b/zero.Web.UI/App/editor/editor.scss
@@ -11,6 +11,13 @@
   {
     padding-top: 0;
   }
+
+  .ui-tab > h3
+  {
+    border-bottom: 1px solid var(--color-line);
+    padding-bottom: var(--padding-m);
+    margin-bottom: var(--padding);
+  }
 }
 
 .editor-outer
@@ -190,4 +197,9 @@
   {
     margin-top: 0;
   }
+
+  .editor-infos
+  {
+    margin-top: 0;
+  }
 }
\ No newline at end of file
diff --git a/zero.Web.UI/App/editor/editor.vue b/zero.Web.UI/App/editor/editor.vue
index 6afec539..8aa9c6b0 100644
--- a/zero.Web.UI/App/editor/editor.vue
+++ b/zero.Web.UI/App/editor/editor.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <div class="editor-outer" v-if="loaded" :class="{ 'has-tabs': hasTabs, '-infos-aside': !nested, 'is-page': isPage, 'as-boxes': asBoxes }">
+    <div class="editor-outer" v-if="loaded" :class="{ 'has-tabs': hasTabs, '-infos-aside': !nested && infos != 'none', 'is-page': isPage, 'as-boxes': asBoxes }">
       <ui-tabs class="editor">
         <ui-tab v-if="!tab.disabled(value)" v-for="(tab, index) in tabs" class="ui-box" :class="tab.class" :label="tab.name" :count="tab.count(value)" :key="index">
-          <h3 v-if="asBoxes && index > 0" class="ui-headline" v-localize="tab.name"></h3>
+          <h3 v-if="asBoxes" class="ui-headline" v-localize="tab.name"></h3>
           <editor-component v-for="(field, fieldIndex) in tab.fields" :key="fieldIndex" :config="field" @input="onChange" :editor="editorConfig" :value="value" />
           <component v-if="tab.component" :is="tab.component" v-model="value" />
         </ui-tab>
diff --git a/zero.Web.UI/App/editor/fields/pagepicker.vue b/zero.Web.UI/App/editor/fields/pagepicker.vue
new file mode 100644
index 00000000..54c997a6
--- /dev/null
+++ b/zero.Web.UI/App/editor/fields/pagepicker.vue
@@ -0,0 +1,24 @@
+<template>
+  <ui-pagepicker :config="config" :value="value" @input="$emit('input', $event)" :disabled="disabled" :limit="1" />
+</template>
+
+
+<script>
+  export default {
+    props: {
+      value: {
+        type: [String, Array],
+        default: null
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      limit: {
+        type: Number,
+        default: 1
+      },
+      config: Object
+    },
+  }
+</script>
\ No newline at end of file
diff --git a/zero.Web.UI/App/resources/pages.js b/zero.Web.UI/App/resources/pages.js
index a82b943f..20dd137f 100644
--- a/zero.Web.UI/App/resources/pages.js
+++ b/zero.Web.UI/App/resources/pages.js
@@ -24,6 +24,11 @@ export default {
     return Axios.get(base + 'getEmpty', { params: { type, parent } }).then(res => Promise.resolve(res.data));
   },
 
+  getPreviews(ids)
+  {
+    return Axios.get(base + 'getPreviews', { params: { ids } }).then(res => Promise.resolve(res.data));
+  },
+
   getRevisions(id, page)
   {
     return Axios.get(base + 'getRevisions', { params: { id, page } }).then(res => Promise.resolve(res.data));
diff --git a/zero.Web/Controllers/PagesController.cs b/zero.Web/Controllers/PagesController.cs
index 03f41b17..4f81352c 100644
--- a/zero.Web/Controllers/PagesController.cs
+++ b/zero.Web/Controllers/PagesController.cs
@@ -1,6 +1,7 @@
 using Microsoft.AspNetCore.Mvc;
 using System;
 using System.Collections.Generic;
+using System.Linq;
 using System.Threading.Tasks;
 using zero.Core.Api;
 using zero.Core.Entities;
@@ -56,6 +57,25 @@ namespace zero.Web.Controllers
     }
 
 
+    public async Task<IList<PreviewModel>> GetPreviews([FromQuery] List<string> ids)
+    {
+      IReadOnlyCollection<PageType> pageTypes = Options.Pages.GetAllItems();
+
+      return Previews(await Api.GetByIds(ids.ToArray()), item =>
+      {
+        PageType pageType = pageTypes.FirstOrDefault(x => x.Alias == item.PageTypeAlias);
+
+        return new PreviewModel()
+        {
+          Id = item.Id,
+          Icon = pageType?.Icon ?? "fth-folder",
+          Name = item.Name,
+          //Text = item.
+        };
+      });
+    }
+
+
     public async Task<ListResult<Revision>> GetRevisions([FromQuery] string id, [FromQuery] int page = 1) => await RevisionsApi.GetPaged<IPage>(id, page);
 
 
diff --git a/zero.Web/Defaults/ZeroAssemblyDiscoveryRule.cs b/zero.Web/Defaults/ZeroAssemblyDiscoveryRule.cs
index 0dd3a5e6..66906d28 100644
--- a/zero.Web/Defaults/ZeroAssemblyDiscoveryRule.cs
+++ b/zero.Web/Defaults/ZeroAssemblyDiscoveryRule.cs
@@ -8,7 +8,6 @@ namespace zero.Web.Defaults
   {
     const string ZERO_PREFIX = "zero.";
 
-
     /// <inheritdoc />
     public bool IsValid(RuntimeLibrary library, AssemblyDiscoveryContext context)
     {
diff --git a/zero.Web/Resources/Localization/zero.en-us.json b/zero.Web/Resources/Localization/zero.en-us.json
index 35a1c04f..25cf981b 100644
--- a/zero.Web/Resources/Localization/zero.en-us.json
+++ b/zero.Web/Resources/Localization/zero.en-us.json
@@ -374,7 +374,6 @@
     "name": "Page",
     "type": "Type",
     "root": "Root",
-
     "info_tab": "Info",
 
     "overview": {
@@ -407,6 +406,10 @@
 
     "preview": {
       "title": "Preview"
+    },
+
+    "picker": {
+      "headline": "Select a page"
     }
   },