From d5f73ed74e26db0e5315d009a053451dea950372 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Sun, 23 Aug 2020 22:33:08 +0200
Subject: [PATCH] output module config errors + add directly when only one
 module is available

---
 .../App/components/modules/module-preview.vue | 53 +++++++++++++++----
 .../App/components/modules/modules-select.vue | 20 ++++++-
 .../App/components/modules/modules.vue        |  9 +++-
 .../notifications/notification-holder.vue     | 11 ++++
 zero.Web.UI/App/services/notification.js      | 12 ++---
 zero.Web/Controllers/ModulesController.cs     |  1 +
 6 files changed, 87 insertions(+), 19 deletions(-)

diff --git a/zero.Web.UI/App/components/modules/module-preview.vue b/zero.Web.UI/App/components/modules/module-preview.vue
index d64e1cef..f7afd588 100644
--- a/zero.Web.UI/App/components/modules/module-preview.vue
+++ b/zero.Web.UI/App/components/modules/module-preview.vue
@@ -1,21 +1,25 @@
 <template>
-  <div class="ui-module-item" v-if="!loading" :data-module="module.alias">
-    <button type="button" class="ui-module-item-header" @click="$emit('edit', module, value)"><i :class="module.icon"></i> {{module.name}}</button>
-    <ui-module-preview-inner v-if="renderer.preview && renderer.preview.template" :template="renderer.preview.template" :value="value" />
+  <div class="ui-module-item" v-if="!loading" :data-module="alias">
+    <button type="button" v-if="module" class="ui-module-item-header" @click="$emit('edit', module, value)"><i :class="module.icon"></i> {{module.name}}</button>
+    
+    <button v-if="!module" type="button" class="ui-module-item-header is-error" disabled><i class="fth-alert-circle"></i> {{alias}}</button>
+    <p v-if="!module" class="ui-module-item-error">Could not find a registered module <code>[{{alias}}]</code> in the code.</p>
+
+    <ui-module-preview-inner v-if="tryRender" :template="renderer.preview.template" :value="value" />
+
     <div v-if="!value.isActive" class="ui-module-item-disabled"></div>
-    <!--<pre><code>{{value}}</code></pre>-->
+
     <div class="ui-module-item-actions">
       <ui-dropdown align="right">
         <template v-slot:button>
           <ui-icon-button v-if="!value.isActive" class="ui-module-item-disabled-icon" icon="fth-lock" title="Disabled" />
           <ui-icon-button v-else icon="fth-more-horizontal" title="Actions" />
         </template>
-        <ui-dropdown-button label="Edit" icon="fth-edit-2" @click="$emit('edit', module, value)" />
+        <ui-dropdown-button v-if="canEdit" label="Edit" icon="fth-edit-2" @click="$emit('edit', module, value)" />
         <ui-dropdown-button v-if="value.isActive" label="Disable" icon="fth-lock" @click="value.isActive = false" />
         <ui-dropdown-button v-else label="Enable" icon="fth-unlock" @click="value.isActive = true" />
         <ui-dropdown-button label="Remove" icon="fth-trash" @click="$emit('remove', module, value)" />
       </ui-dropdown>
-      
     </div>
   </div>
 </template>
@@ -55,6 +59,22 @@
     },
 
 
+    computed: {
+      alias()
+      {
+        return this.value.moduleTypeAlias;
+      },
+      tryRender()
+      {
+        return this.module && this.renderer && this.renderer.preview && this.renderer.preview.template;
+      },
+      canEdit()
+      {
+        return this.module && this.renderer;
+      }
+    },
+
+
     mounted()
     {
       this.render(this.value);
@@ -66,11 +86,9 @@
       render(value)
       {
         this.loading = true;
-
-        this.module = _find(this.types, x => x.alias == this.value.moduleTypeAlias);
-        this.renderer = zero.renderers['module.' + this.value.moduleTypeAlias];
-
-        this.loading = false;
+        this.module = _find(this.types, x => x.alias == this.alias);
+        this.renderer = zero.renderers['module.' + this.alias];
+        this.$nextTick(() => this.loading = false);
       }
     }
   }
@@ -102,6 +120,11 @@
       position: relative;
       top: -1px;
     }
+
+    &.is-error
+    {
+      color: var(--color-accent-error);
+    }
   }
 
   .ui-module-item-disabled
@@ -165,4 +188,12 @@
       margin-left: 10px;
     }
   }
+
+  .ui-module-item-error
+  {
+    margin: 0;
+    grid-column: 1;
+    grid-row: 2;
+    margin-top: 12px;
+  }
 </style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/components/modules/modules-select.vue b/zero.Web.UI/App/components/modules/modules-select.vue
index d20f37e3..56f278cd 100644
--- a/zero.Web.UI/App/components/modules/modules-select.vue
+++ b/zero.Web.UI/App/components/modules/modules-select.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="ui-modules-start">
 
-      <button v-if="!isSelecting" type="button" class="ui-modules-start-button" @click="isSelecting=true">
+      <button v-if="!isSelecting" type="button" class="ui-modules-start-button" @click="startSelection">
         <i class="ui-modules-start-button-icon fth-plus"></i>
         <p class="ui-modules-start-button-text"><strong>Add content</strong> <br>Compose the page by adding modules</p>
       </button>
@@ -33,6 +33,7 @@
 
 <script>
   import { groupBy as _groupBy, keys as _keys, each as _each } from 'underscore';
+  import Notification from 'zero/services/notification';
 
   export default {
     name: 'uiModulesSelect',
@@ -91,6 +92,23 @@
       },
 
 
+      startSelection()
+      {
+        if (this.types.length > 1)
+        {
+          this.isSelecting = true;
+        }
+        else if (this.types.length === 1)
+        {
+          this.$emit('selected', this.types[0], true);
+        }
+        else
+        {
+          Notification.error('No modules allowed', 'There are no modules configured which are allowed for this data type.', { duration: 5000 });
+        }
+      },
+
+
       selectGroup(group)
       {
         this.activeGroup = group;
diff --git a/zero.Web.UI/App/components/modules/modules.vue b/zero.Web.UI/App/components/modules/modules.vue
index dcc03b87..c5d53e3a 100644
--- a/zero.Web.UI/App/components/modules/modules.vue
+++ b/zero.Web.UI/App/components/modules/modules.vue
@@ -26,7 +26,6 @@
 
     data: () => ({
       items: [],
-      canAdd: true,
       moduleTypes: []
     }),
 
@@ -39,6 +38,14 @@
     },
 
 
+    computed: {
+      canAdd()
+      {
+        return true;
+      }
+    },
+
+
     created()
     {
       ModulesApi.getModuleTypes().then(res =>
diff --git a/zero.Web.UI/App/components/notifications/notification-holder.vue b/zero.Web.UI/App/components/notifications/notification-holder.vue
index 6a4e573b..d9dbed09 100644
--- a/zero.Web.UI/App/components/notifications/notification-holder.vue
+++ b/zero.Web.UI/App/components/notifications/notification-holder.vue
@@ -97,6 +97,17 @@
         color: var(--color-primary-fg);
       }
     }
+
+    &[type="error"]
+    {
+      background: var(--color-accent-error);
+      color: white;
+
+      .ui-button-icon
+      {
+        color: white;
+      }
+    }
   }
 
   .app-notification.app-notifications-enter,
diff --git a/zero.Web.UI/App/services/notification.js b/zero.Web.UI/App/services/notification.js
index b274664f..656d6c64 100644
--- a/zero.Web.UI/App/services/notification.js
+++ b/zero.Web.UI/App/services/notification.js
@@ -10,23 +10,23 @@ export default new Vue({
 
   methods: {
 
-    success(label, text)
+    success(label, text, options)
     {
-      this.show({
+      this.show(_extend({
         type: 'success',
         label: label,
         text: text
-      });
+      }, options || {}));
     },
 
 
-    error(label, text)
+    error(label, text, options)
     {
-      this.show({
+      this.show(_extend({
         type: 'error',
         label: label,
         text: text
-      });
+      }, options || {}));
     },
 
 
diff --git a/zero.Web/Controllers/ModulesController.cs b/zero.Web/Controllers/ModulesController.cs
index 0867097c..9ee587d9 100644
--- a/zero.Web/Controllers/ModulesController.cs
+++ b/zero.Web/Controllers/ModulesController.cs
@@ -1,5 +1,6 @@
 using Microsoft.AspNetCore.Mvc;
 using System;
+using System.Linq;
 using zero.Core.Api;
 using zero.Core.Entities;
 using zero.Core.Utils;