From d744b94c28b6bdd2fcca44a0acea88ae3c3ba284 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Tue, 20 Oct 2020 16:00:55 +0200
Subject: [PATCH] fixes for modules

---
 zero.Core/Api/ModulesApi.cs                   | 18 +++++---
 zero.Core/Entities/Modules/ModuleType.cs      |  6 +++
 zero.Core/Options/ModuleOptions.cs            |  6 ++-
 zero.Debug/TestData/TestPlugin.cs             |  2 +-
 .../App/components/modules/edit-module.vue    |  7 ++-
 .../App/components/modules/module-preview.vue |  4 +-
 .../App/components/modules/modules-select.vue |  6 +--
 .../App/components/modules/modules.vue        | 19 +++++---
 .../pickers/datePicker/datepicker.vue         | 12 ++---
 .../dateRangePicker/daterangepicker.vue       | 20 ++++-----
 zero.Web.UI/App/core/editor-field.js          | 22 ++++++++-
 zero.Web.UI/App/editor/fields/datepicker.vue  | 45 +++++++++++++++++++
 .../App/editor/fields/daterangepicker.vue     | 41 +++++++++++++----
 zero.Web.UI/App/editor/fields/modules.vue     |  6 ++-
 zero.Web.UI/App/resources/modules.js          |  4 +-
 zero.Web/Controllers/ModulesController.cs     |  2 +-
 16 files changed, 169 insertions(+), 51 deletions(-)
 create mode 100644 zero.Web.UI/App/editor/fields/datepicker.vue

diff --git a/zero.Core/Api/ModulesApi.cs b/zero.Core/Api/ModulesApi.cs
index 7d4ad71c..64e09b10 100644
--- a/zero.Core/Api/ModulesApi.cs
+++ b/zero.Core/Api/ModulesApi.cs
@@ -1,4 +1,5 @@
-using System.Collections.Generic;
+using System;
+using System.Collections.Generic;
 using System.Linq;
 using zero.Core.Entities;
 using zero.Core.Options;
@@ -16,9 +17,16 @@ namespace zero.Core.Api
 
 
     /// <inheritdoc />
-    public IList<ModuleType> GetModuleTypes()
+    public IList<ModuleType> GetModuleTypes(string[] tags = default)
     {
-      return Options.Modules.GetAllItems().ToList();
+      IEnumerable<ModuleType> modules = Options.Modules.GetAllItems();
+
+      if (tags?.Length > 0)
+      {
+        modules = modules.Where(x => x.Tags.Any(t => tags.Contains(t, StringComparer.InvariantCultureIgnoreCase)));
+      }
+
+      return modules.ToList();
     }
 
 
@@ -33,9 +41,9 @@ namespace zero.Core.Api
   public interface IModulesApi
   {
     /// <summary>
-    /// Get all available module types
+    /// Get all available module types (can be limited to the passed tags)
     /// </summary>
-    IList<ModuleType> GetModuleTypes();
+    IList<ModuleType> GetModuleTypes(string[] tags = default);
 
     /// <summary>
     /// Get a specific module type by alias
diff --git a/zero.Core/Entities/Modules/ModuleType.cs b/zero.Core/Entities/Modules/ModuleType.cs
index 5dd54458..0f2cd5c8 100644
--- a/zero.Core/Entities/Modules/ModuleType.cs
+++ b/zero.Core/Entities/Modules/ModuleType.cs
@@ -47,6 +47,11 @@ namespace zero.Core.Entities
     /// </summary>
     public string Group { get; set; }
 
+    /// <summary>
+    /// Defining tags for a module type allows you to query for them
+    /// </summary>
+    public List<string> Tags { get; set; } = new List<string>();
+
     /// <summary>
     /// Page types where this module type is not allowed.
     /// This will only work when operating within the page context.
@@ -68,6 +73,7 @@ namespace zero.Core.Entities
         Description = model.Description,
         Icon = model.Icon,
         Group = model.Group,
+        Tags = model.Tags,
         DisallowedPageTypes = model.DisallowedPageTypes
       };
     }
diff --git a/zero.Core/Options/ModuleOptions.cs b/zero.Core/Options/ModuleOptions.cs
index 0869ca70..4703d921 100644
--- a/zero.Core/Options/ModuleOptions.cs
+++ b/zero.Core/Options/ModuleOptions.cs
@@ -18,7 +18,7 @@ namespace zero.Core.Options
     }
 
 
-    public void Add<T>(string alias, string name, string description, string icon, string group = null, List<string> disallowedPageTypes = null) where T : Module, new()
+    public void Add<T>(string alias, string name, string description, string icon, string group = null, List<string> tags = null, List<string> disallowedPageTypes = null) where T : Module, new()
     {
       Items.Add(new ModuleType(typeof(T))
       {
@@ -27,12 +27,13 @@ namespace zero.Core.Options
         Description = description,
         Icon = icon,
         Group = group,
+        Tags = tags ?? new List<string>(),
         DisallowedPageTypes = disallowedPageTypes ?? new List<string>()
       });
     }
 
 
-    public void Add(Type type, string alias, string name, string description, string icon, string group = null, List<string> disallowedPageTypes = null)
+    public void Add(Type type, string alias, string name, string description, string icon, string group = null, List<string> tags = null, List<string> disallowedPageTypes = null)
     {
       Items.Add(new ModuleType(type)
       {
@@ -41,6 +42,7 @@ namespace zero.Core.Options
         Description = description,
         Icon = icon,
         Group = group,
+        Tags = tags ?? new List<string>(),
         DisallowedPageTypes = disallowedPageTypes ?? new List<string>()
       });
     }
diff --git a/zero.Debug/TestData/TestPlugin.cs b/zero.Debug/TestData/TestPlugin.cs
index 42049a68..6947aad3 100644
--- a/zero.Debug/TestData/TestPlugin.cs
+++ b/zero.Debug/TestData/TestPlugin.cs
@@ -38,7 +38,7 @@ namespace zero.TestData
 
       zero.Modules.Add<RichtextModule>("richtext", "Richtext", "Simple richtext block editor", "fth-align-left", "Texts");
       zero.Modules.Add<HeadlineModule>("headline", "Headline", "Headline with optional subline", "fth-underline", "Texts");
-      zero.Modules.Add<TextWithImageModule>("textWithImage", "Text with image", "Short textblock with image", "fth-layers", "Texts", new List<string>() { "root" });
+      zero.Modules.Add<TextWithImageModule>("textWithImage", "Text with image", "Short textblock with image", "fth-layers", "Texts", disallowedPageTypes: new List<string>() { "root" });
       zero.Modules.Add<GalleryModule>("gallery", "Gallery", "Image gallery grid", "fth-image", "Media");
       zero.Modules.Add<DownloadModule>("download", "Downloads", "List containing downloads", "fth-download", "Misc");
       zero.Modules.Add<OffsetModule>("offset", "Offset", "Offset between two modules", "fth-code", "Misc");
diff --git a/zero.Web.UI/App/components/modules/edit-module.vue b/zero.Web.UI/App/components/modules/edit-module.vue
index e840b857..d9e9df4b 100644
--- a/zero.Web.UI/App/components/modules/edit-module.vue
+++ b/zero.Web.UI/App/components/modules/edit-module.vue
@@ -14,7 +14,7 @@
       <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" :disabled="disabled" />
+        <ui-editor :config="editor" v-model="model" :meta="meta" :is-page="false" infos="none" :disabled="disabled" />
       </div>
 
     </ui-overlay-editor>
@@ -41,9 +41,14 @@
       loading: true,
       state: 'default',
       meta: {},
+      editor: null,
       model: {}
     }),
 
+    created()
+    {
+      this.editor = this.config.editor;
+    },
 
     methods: {
 
diff --git a/zero.Web.UI/App/components/modules/module-preview.vue b/zero.Web.UI/App/components/modules/module-preview.vue
index 5eda7488..afb5364a 100644
--- a/zero.Web.UI/App/components/modules/module-preview.vue
+++ b/zero.Web.UI/App/components/modules/module-preview.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="ui-module-item" v-if="!loading" :data-module="alias" :class="{'can-edit': canEdit }">
     <div class="ui-module-item-content" v-if="module" @click="emit('edit')">
-      <span v-if="!hasPreviewSettings || renderer.preview.label !== false" class="ui-module-item-header">{{module.name}}</span>
+      <span v-if="!hasPreviewSettings || renderer.preview.label !== false" class="ui-module-item-header" v-localize="module.name"></span>
       <ui-module-preview-inner v-if="tryRender" :template="renderer.preview.template" :value="value" />
     </div>
     <div class="ui-module-item-content" v-else>
@@ -97,7 +97,7 @@
       {
         this.loading = true;
         this.module = _find(this.types, x => x.alias == this.alias);
-        this.renderer = zero.renderers['module.' + this.alias];
+        this.renderer = null; // TODO zero.renderers['module.' + this.alias];
         this.$nextTick(() => this.loading = false);
       },
 
diff --git a/zero.Web.UI/App/components/modules/modules-select.vue b/zero.Web.UI/App/components/modules/modules-select.vue
index 49386b92..63834496 100644
--- a/zero.Web.UI/App/components/modules/modules-select.vue
+++ b/zero.Web.UI/App/components/modules/modules-select.vue
@@ -16,8 +16,8 @@
                   <i :class="item.icon"></i>
                 </div>
                 <div class="ui-modules-select-item-text">
-                  <strong>{{item.name}}</strong>
-                  <span class="is-minor">{{item.description}}</span>
+                  <strong v-localize="item.name"></strong>
+                  <span class="is-minor" v-localize="item.description"></span>
                 </div>
                 <span v-if="item.isDisabled" class="ui-modules-select-item-disabled">Not allowed <i class="fth-slash"></i></span>
               </button>
@@ -82,7 +82,7 @@
         _each(groups, (items, key) =>
         {
           this.moduleTypes.push({
-            name: key || '@modules.default_group',
+            name: !key || key === 'null' ? '@modules.default_group' : key,
             index: index++,
             count: items.length,
             items: items,
diff --git a/zero.Web.UI/App/components/modules/modules.vue b/zero.Web.UI/App/components/modules/modules.vue
index 789bcebf..72fb236b 100644
--- a/zero.Web.UI/App/components/modules/modules.vue
+++ b/zero.Web.UI/App/components/modules/modules.vue
@@ -26,6 +26,10 @@
         type: Boolean,
         default: false
       },
+      tags: {
+        type: Array,
+        default: () => []
+      },
       config: Object
     },
 
@@ -54,7 +58,7 @@
 
     created()
     {
-      ModulesApi.getModuleTypes().then(res =>
+      ModulesApi.getModuleTypes(this.tags).then(res =>
       {
         this.moduleTypes = res;
         this.setup(this.value);
@@ -87,11 +91,16 @@
 
       edit(module, model, isAdd)
       {
-        const alias = 'module.' + module.alias;
-        let renderer = zero.renderers[alias];
+        const alias = 'modules.' + module.alias;
+        const editor = this.zero.getEditor(alias);
+
+        if (!editor)
+        {
+          // TODO throw error
+        }
 
         // some modules can have no fields for editing, so we add them directly
-        if (!renderer.fields || renderer.fields.length < 1)
+        if (!editor.fields || editor.fields.length < 1)
         {
           return ModulesApi.getEmpty(module.alias).then(res =>
           {
@@ -106,7 +115,7 @@
           component: EditModuleOverlay,
           display: 'editor',
           module: module,
-          renderer: alias,
+          editor: editor,
           model: model,
           width: 1100
         }).then(value =>
diff --git a/zero.Web.UI/App/components/pickers/datePicker/datepicker.vue b/zero.Web.UI/App/components/pickers/datePicker/datepicker.vue
index b7182192..f2e59b55 100644
--- a/zero.Web.UI/App/components/pickers/datePicker/datepicker.vue
+++ b/zero.Web.UI/App/components/pickers/datePicker/datepicker.vue
@@ -46,21 +46,17 @@
         type: Boolean,
         default: false,
       },
-      max: {
+      maxDate: {
         type: [String, Date],
         default: null
       },
-      min: {
+      minDate: {
         type: [String, Date],
         default: null
       },
       amPm: {
         type: Boolean,
         default: false
-      },
-      options: {
-        type: Object,
-        default: () => { }
       }
     },
 
@@ -104,8 +100,8 @@
       {
         this.pickerOptions = {
           enableTime: this.time,
-          maxDate: this.max,
-          minDate: this.min,
+          maxDate: this.maxDate,
+          minDate: this.minDate,
           time_24hr: !this.amPm
         };
       },
diff --git a/zero.Web.UI/App/components/pickers/dateRangePicker/daterangepicker.vue b/zero.Web.UI/App/components/pickers/dateRangePicker/daterangepicker.vue
index a1888960..b3fb2a5e 100644
--- a/zero.Web.UI/App/components/pickers/dateRangePicker/daterangepicker.vue
+++ b/zero.Web.UI/App/components/pickers/dateRangePicker/daterangepicker.vue
@@ -4,12 +4,12 @@
     <div v-if="inline" class="ui-daterangepicker-inline">
       <div class="ui-split">
         <div class="ui-daterangepicker-group">
-          <ui-property :label="fromText" :vertical="true">
+          <ui-property :label="fromLabel" :vertical="true">
             <ui-datepicker v-model="value.from" :time="time" />
           </ui-property>
         </div>
         <div class="ui-daterangepicker-group">
-          <ui-property :label="toText" :vertical="true">
+          <ui-property :label="toLabel" :vertical="true">
             <ui-datepicker v-model="value.to" :time="time" />
           </ui-property>
         </div>
@@ -54,19 +54,19 @@
         type: Boolean,
         default: false,
       },
-      max: {
+      maxDate: {
         type: [String, Date],
         default: null
       },
-      min: {
+      minDate: {
         type: [String, Date],
         default: null
       },
-      fromText: {
+      fromLabel: {
         type: String,
         default: '@page.schedule.publish'
       },
-      toText: {
+      toLabel: {
         type: String,
         default: '@page.schedule.unpublish'
       },
@@ -123,10 +123,10 @@
           options: {
             format: this.format,
             time: this.time,
-            max: this.max,
-            min: this.min,
-            fromText: this.fromText,
-            toText: this.toText,
+            max: this.maxDate,
+            min: this.minDate,
+            fromText: this.fromLabel,
+            toText: this.toLabel,
             amPm: this.amPm
           },
           model: {
diff --git a/zero.Web.UI/App/core/editor-field.js b/zero.Web.UI/App/core/editor-field.js
index dcaa06e1..1b9d7087 100644
--- a/zero.Web.UI/App/core/editor-field.js
+++ b/zero.Web.UI/App/core/editor-field.js
@@ -12,6 +12,7 @@ import Checklist from '../editor/fields/checklist.vue';
 import ColorPicker from '../editor/fields/colorpicker.vue';
 import CountryPicker from '../editor/fields/countrypicker.vue';
 import CulturePicker from '../editor/fields/culturepicker.vue';
+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';
@@ -275,6 +276,22 @@ class EditorField
   }
 
 
+  /**
+   * Renders a date picker
+   * @param {object} [options] - Custom options
+   * @param {string} [options.format] - Format the date output
+   * @param {boolean} [options.time=false] - Allow time input 
+   * @param {string|Date} [options.maxDate] - Maximum selectable date
+   * @param {string|Date} [options.minDate] - Minimum selectable date
+   * @param {string} [options.amPm] - Render time as AM/PM
+   * @returns {EditorField}
+   */
+  datePicker(options)
+  {
+    return this._setComponent(DatePicker, { ...options });
+  }
+
+
   /**
    * Renders a date range picker
    * @param {object} [options] - Custom options
@@ -342,11 +359,12 @@ class EditorField
 
   /**
    * Display a module renderer which allows you to select from defined modules
+   * @param {string[]} [tags] - Only allow selection of modules which match defined tags
    * @returns {EditorField}
    */
-  modules()
+  modules(tags)
   {
-    return this._setComponent(Modules);
+    return this._setComponent(Modules, { tags });
   }
 
 
diff --git a/zero.Web.UI/App/editor/fields/datepicker.vue b/zero.Web.UI/App/editor/fields/datepicker.vue
new file mode 100644
index 00000000..10c28479
--- /dev/null
+++ b/zero.Web.UI/App/editor/fields/datepicker.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="ui-box">
+    <ui-datepicker :value="value" @input="$emit('input', $event.target.value)" :disabled="disabled"
+      v-bind="{ format, time, maxDate, minDate, amPm }" />
+  </div>
+</template>
+
+
+<script>
+  export default {
+    props: {
+      value: {
+        type: [String, Date],
+        default: {
+          from: null,
+          to: null
+        }
+      },
+      format: {
+        type: String,
+        default: null
+      },
+      time: {
+        type: Boolean,
+        default: false,
+      },
+      maxDate: {
+        type: [String, Date],
+        default: null
+      },
+      minDate: {
+        type: [String, Date],
+        default: null
+      },
+      amPm: {
+        type: Boolean,
+        default: false
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/zero.Web.UI/App/editor/fields/daterangepicker.vue b/zero.Web.UI/App/editor/fields/daterangepicker.vue
index 45e96ebe..2b842073 100644
--- a/zero.Web.UI/App/editor/fields/daterangepicker.vue
+++ b/zero.Web.UI/App/editor/fields/daterangepicker.vue
@@ -1,13 +1,7 @@
 <template>
   <div class="ui-box">
     <ui-daterangepicker :value="value" @input="$emit('input', $event.target.value)" :disabled="disabled"
-      :format="config.format"
-      :time="config.time || false"
-      :max ="config.max" :min="config.min"
-      :from-text="config.fromText || '@ui.date.range_from'"
-      :to-text="config.toText || '@ui.date.range_to'"
-      :amPm="config.amPm || false"
-      :inline="config.inline || false" />
+      v-bind="{ format, time, maxDate, minDate, fromLabel, toLabel, amPm, inline }" />
   </div>
 </template>
 
@@ -22,7 +16,38 @@
           to: null
         }
       },
-      config: Object,
+      format: {
+        type: String,
+        default: null
+      },
+      time: {
+        type: Boolean,
+        default: false,
+      },
+      maxDate: {
+        type: [String, Date],
+        default: null
+      },
+      minDate: {
+        type: [String, Date],
+        default: null
+      },
+      fromLabel: {
+        type: String,
+        default: null
+      },
+      toLabel: {
+        type: String,
+        default: null
+      },
+      amPm: {
+        type: Boolean,
+        default: false
+      },
+      inline: {
+        type: Boolean,
+        default: false
+      },
       disabled: {
         type: Boolean,
         default: false
diff --git a/zero.Web.UI/App/editor/fields/modules.vue b/zero.Web.UI/App/editor/fields/modules.vue
index cd963131..e4db9789 100644
--- a/zero.Web.UI/App/editor/fields/modules.vue
+++ b/zero.Web.UI/App/editor/fields/modules.vue
@@ -1,5 +1,5 @@
 <template>
-  <ui-modules :value="value" @input="$emit('input', $event)" :config="config" :disabled="disabled" />
+  <ui-modules :value="value" @input="$emit('input', $event)" :config="config" :tags="tags" :disabled="disabled" />
 </template>
 
 
@@ -13,6 +13,10 @@
         type: Boolean,
         default: false
       },
+      tags: {
+        type: Array,
+        default: () => []
+      },
       config: Object
     }
   }
diff --git a/zero.Web.UI/App/resources/modules.js b/zero.Web.UI/App/resources/modules.js
index b324772e..8d7652dd 100644
--- a/zero.Web.UI/App/resources/modules.js
+++ b/zero.Web.UI/App/resources/modules.js
@@ -4,9 +4,9 @@ const base = 'modules/';
 
 export default {
 
-  getModuleTypes()
+  getModuleTypes(tags)
   {
-    return Axios.get(base + 'getModuleTypes').then(res => Promise.resolve(res.data));
+    return Axios.get(base + 'getModuleTypes', { params: { tags } }).then(res => Promise.resolve(res.data));
   },
 
   getModuleType(alias)
diff --git a/zero.Web/Controllers/ModulesController.cs b/zero.Web/Controllers/ModulesController.cs
index 9ee587d9..f3ee8fe7 100644
--- a/zero.Web/Controllers/ModulesController.cs
+++ b/zero.Web/Controllers/ModulesController.cs
@@ -17,7 +17,7 @@ namespace zero.Web.Controllers
     }
 
 
-    public IActionResult GetModuleTypes() => Json(Api.GetModuleTypes());
+    public IActionResult GetModuleTypes([FromQuery] string[] tags = default) => Json(Api.GetModuleTypes(tags));
  
     public IActionResult GetModuleType([FromQuery] string alias) => Json(Api.GetModuleType(alias));