Configuration validations

Author: acoumb

src/Umbraco.Cms.Integrations.PIM.Inriver/App_Plugins/UmbracoCms.Integrations/PIM/Inriver/css/inriver.css

@@ -1,9 +1,13 @@
 .inriver-container {
     margin: 20px;
-    /*position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);*/
+}
+
+.inriver-toast {
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100vh;
+    padding: var(--uui-size-layout-4);
 }
 
 #editorDialog {

src/Umbraco.Cms.Integrations.PIM.Inriver/App_Plugins/UmbracoCms.Integrations/PIM/Inriver/js/configuration.controller.js

@@ -1,4 +1,4 @@
-function configurationController($scope, umbracoCmsIntegrationsPimInriverService, umbracoCmsIntegrationsPimInriverResource) {
+function configurationController($scope, notificationsService, umbracoCmsIntegrationsPimInriverService, umbracoCmsIntegrationsPimInriverResource) {
     var vm = this;
 
     const selEntityTypes = document.getElementById("selEntityTypes");
@@ -11,17 +11,31 @@
     vm.selectedEntityType = {};
     vm.selectedFieldTypes = [];
 
-    console.log($scope.model.value);
+    vm.showToast = showToast;
+
+    //vm.showToast({
+    //    color: 'danger',
+    //    headline: 'Algolia',
+    //    message: 'Index name and content schema are required.'
+    //});
 
     if ($scope.model.value == null) {
         $scope.model.value = {
             entityType: '',
             displayFieldTypeIds: []
         };
     }
-    $scope.$on('formSubmitting', function () {
-        $scope.model.value.entityType = vm.selectedEntityType.value;
-        $scope.model.value.displayFieldTypeIds = vm.selectedFieldTypes;
+    $scope.$on('formSubmitting', function (ev) {
+        if (vm.selectedEntityType != undefined
+            || vm.selectedEntityType.value.length == 0
+            || vm.selectedFieldTypes.length == 0) {
+            notificationsService.error("Inriver", "Entity type and display fields are required. Configuration was not saved.");
+            ev.preventDefault();
+            return;
+        } else {
+            $scope.model.value.entityType = vm.selectedEntityType.value;
+            $scope.model.value.displayFieldTypeIds = vm.selectedFieldTypes;
+        }
     });
 
     vm.entityTypeChange = function () {
@@ -54,7 +68,8 @@
                     return option;
                 });
 
-                vm.selectedFieldTypes = $scope.model.value.displayFieldTypeIds;
+                if ($scope.model.value.displayFieldTypeIds != null)
+                    vm.selectedFieldTypes = $scope.model.value.displayFieldTypeIds;
 
                 bindValues();
             });
@@ -75,10 +90,36 @@
         selEntityTypes.options = vm.entityTypes;
         vm.fieldTypes = vm.selectedEntityType.fieldTypes;
 
-        $scope.model.value.displayFieldTypeIds.forEach(fieldTypeId => {
-            umbracoCmsIntegrationsPimInriverService.waitForElement("#tr" + fieldTypeId)
-                .then(element => element.setAttribute("selected", ""));
-        });
+        if ($scope.model.value.displayFieldTypeIds != null) {
+            $scope.model.value.displayFieldTypeIds.forEach(fieldTypeId => {
+                umbracoCmsIntegrationsPimInriverService.waitForElement("#tr" + fieldTypeId)
+                    .then(element => element.setAttribute("selected", ""));
+            });
+        }
+    }
+
+    /* Toast Config properties:
+     *  color
+     *  headline
+     *  message
+     */
+    function showToast(config) {
+        const con = document.querySelector('uui-toast-notification-container');
+
+        const toast = document.createElement('uui-toast-notification');
+        toast.color = config.color;
+
+        const toastLayout = document.createElement('uui-toast-notification-layout');
+        toastLayout.headline = config.headline;
+        toast.appendChild(toastLayout);
+
+        const messageEl = document.createElement('span');
+        messageEl.innerHTML = config.message;
+        toastLayout.appendChild(messageEl);
+
+        if (con) {
+            con.appendChild(toast);
+        }
     }
 
     /**

src/Umbraco.Cms.Integrations.PIM.Inriver/App_Plugins/UmbracoCms.Integrations/PIM/Inriver/js/entitypicker.controller.js

@@ -4,11 +4,20 @@
 
     vm.selectedEntity = null;
     vm.error = "";
+    vm.configuration = $scope.model.config.configuration;
 
     umbracoCmsIntegrationsPimInriverResource.checkApiAccess().then(function (response) {
         if (response.failure) 
             vm.error = response.data;
     });
+    
+    if (vm.configuration.entityType == undefined
+        || vm.configuration.entityType.length == 0
+        || vm.configuration.displayFieldTypeIds == null
+        || vm.configuration.displayFieldTypeIds.length == 0) {
+        vm.error = "Invalid Inriver configuration";
+        return;
+    }
 
     if ($scope.model.value) {
         getEntitySummary($scope.model.value.entityId);

src/Umbraco.Cms.Integrations.PIM.Inriver/App_Plugins/UmbracoCms.Integrations/PIM/Inriver/views/configuration.html

@@ -16,7 +16,7 @@
                     <uui-form-layout-item ng-if="vm.fieldTypes.length > 0">
                         <span style="font-weight:700;font-size:15px;">Field Types:</span>
                         <div style="margin-bottom: 20px;">
-                           Please select the field types you want to display for the entity.
+                            Please select the field types you want to display for the entity.
                         </div>
                         <uui-table class="uui-text">
                             <uui-table-column style="width: 60px;"></uui-table-column>
@@ -46,4 +46,9 @@
             </div>
         </uui-card-content-node>
     </uui-icon-registry-essential>
-</div>
+</div>
+
+
+<!-- Notifications -->
+<uui-toast-notification-container bottom-up="">
+</uui-toast-notification-container>