Bug fixing + save configuration with fields display name

Author: acoumb

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

@@ -11,24 +11,22 @@
     vm.selectedEntityType = {};
     vm.selectedFieldTypes = [];
 
-    vm.showToast = showToast;
-
     if ($scope.model.value == null) {
         $scope.model.value = {
             entityType: '',
-            displayFieldTypeIds: []
+            fieldTypes: []
         };
     }
     $scope.$on('formSubmitting', function (ev) {
         if (vm.selectedEntityType == undefined
-            || vm.selectedEntityType.value.length == 0
+            || vm.selectedEntityType.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;
+            $scope.model.value.fieldTypes = vm.selectedFieldTypes;
         }
     });
 
@@ -62,8 +60,8 @@
                     return option;
                 });
 
-                if ($scope.model.value.displayFieldTypeIds != null)
-                    vm.selectedFieldTypes = $scope.model.value.displayFieldTypeIds;
+                if ($scope.model.value.fieldTypes != null)
+                    vm.selectedFieldTypes = $scope.model.value.fieldTypes;
 
                 bindValues();
             });
@@ -72,21 +70,21 @@
     });
 
     // table rows selection
-    vm.selectFieldType = function (fieldTypeId) {
-        vm.selectedFieldTypes.push(fieldTypeId);
+    vm.selectFieldType = function (fieldType) {
+        vm.selectedFieldTypes.push(fieldType);
     }
 
     vm.unselectFieldType = function (fieldTypeId) {
-        vm.selectedFieldTypes = vm.selectedFieldTypes.filter(id => fieldTypeId != id);
+        vm.selectedFieldTypes = vm.selectedFieldTypes.filter(obj => obj.fieldTypeId != fieldTypeId);
     }
 
     function bindValues() {
         selEntityTypes.options = vm.entityTypes;
         vm.fieldTypes = vm.selectedEntityType.fieldTypes;
 
-        if ($scope.model.value.displayFieldTypeIds != null) {
-            $scope.model.value.displayFieldTypeIds.forEach(fieldTypeId => {
-                umbracoCmsIntegrationsPimInriverService.waitForElement("#tr" + fieldTypeId)
+        if ($scope.model.value.fieldTypes != null) {
+            $scope.model.value.fieldTypes.forEach(obj => {
+                umbracoCmsIntegrationsPimInriverService.waitForElement("#tr" + obj.fieldTypeId)
                     .then(element => element.setAttribute("selected", ""));
             });
         }

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

@@ -13,8 +13,8 @@
 
     if (vm.configuration.entityType == undefined
         || vm.configuration.entityType.length == 0
-        || vm.configuration.displayFieldTypeIds == null
-        || vm.configuration.displayFieldTypeIds.length == 0) {
+        || vm.configuration.fieldTypes == null
+        || vm.configuration.fieldTypes.length == 0) {
         vm.error = "Invalid Inriver configuration";
         return;
     }
@@ -25,11 +25,11 @@
 
     vm.openInriverEntityPickerOverlay = function () {
         var options = {
-            title: "Inriver Entities",
-            subtitle: "Select entity",
+            title: "Inriver " + $scope.model.config.configuration.entityType,
+            subtitle: "Select a " + $scope.model.config.configuration.entityType,
             configuration: {
                 entityType: $scope.model.config.configuration.entityType,
-                displayFieldTypeIds: $scope.model.config.configuration.displayFieldTypeIds
+                fieldTypes: $scope.model.config.configuration.fieldTypes
             },
             view: "/App_Plugins/UmbracoCms.Integrations/PIM/Inriver/views/entitypickereditor.html",
             size: "medium",
@@ -48,7 +48,7 @@
     vm.saveEntity = function (entityId) {
         $scope.model.value = JSON.stringify({
             entityId: entityId,
-            displayFields: $scope.model.config.configuration.displayFieldTypeIds
+            displayFields: $scope.model.config.configuration.fieldTypes
         });
 
         getEntityData(entityId);
@@ -63,7 +63,8 @@
         umbracoCmsIntegrationsPimInriverResource.fetchEntityData(entityId).then(function (response) {
             if (response.success) {
                 vm.selectedEntity = response.data[0];
-                vm.selectedEntity.detail = $scope.model.config.configuration.displayFieldTypeIds.join(",");
+                vm.selectedEntity.detail = $scope.model.config.configuration.fieldTypes
+                    .map(obj => obj.fieldTypeDisplayName).join(",");
             } else
                 vm.error = response.error;
         });

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

@@ -12,16 +12,16 @@
 
     vm.pagination = {
         pageNumber: 1,
-        itemsPerPage: 3,
+        itemsPerPage: 5,
         totalPages: 1
     };
 
     query();
 
-    vm.search = () => {        
+    vm.search = () => {
         if (inSearch.length == 0) return false;
 
-        let filteredArr = vm.entities.filter(obj => obj.displayName.includes(inSearch.value));
+        let filteredArr = vm.entities.filter(obj => obj.summary.displayName.includes(inSearch.value));
         vm.filteredEntities = filteredArr
             .slice((paginationCtrl.current - 1) * vm.pagination.itemsPerPage, paginationCtrl.current * vm.pagination.itemsPerPage);
 
@@ -47,26 +47,30 @@
     function query() {
 
         var entityTypeId = $scope.model.configuration.entityType;
-        var fieldTypeIds = $scope.model.configuration.displayFieldTypeIds.join(',');
+        var fieldTypes = $scope.model.configuration.fieldTypes;
 
         vm.loading = true;
-        umbracoCmsIntegrationsPimInriverResource.query(entityTypeId, fieldTypeIds).then(function (response) {
-
+        umbracoCmsIntegrationsPimInriverResource.query(entityTypeId, fieldTypes).then(function (response) {
             if (response.success) {
                 vm.entities = response.data.map(obj => {
                     return {
                         id: obj.entityId,
-                        displayName: obj.summary.displayName,
-                        description: obj.summary.description,
-                        displayFields: obj.fieldValues
-                    };
+                        summary: obj.summary,
+                        fields: obj.fieldValues.map(fieldObj => {
+                            return {
+                                fieldType: fieldTypes.find(fieldTypeObj => fieldTypeObj.fieldTypeId === fieldObj.fieldTypeId).fieldTypeDisplayName,
+                                value: fieldObj.value
+                            }
+                        })
+                    }
                 });
 
                 vm.pagination.totalPages = Math.ceil(vm.entities.length / vm.pagination.itemsPerPage);
 
                 vm.filteredEntities = vm.entities.slice(0, vm.pagination.itemsPerPage);
 
                 registerListeners();
+
             } else
                 notificationsService.error("Inriver", response.error);
 

src/Umbraco.Cms.Integrations.PIM.Inriver/App_Plugins/UmbracoCms.Integrations/PIM/Inriver/js/inriver.resource.js

@@ -13,11 +13,11 @@
                     return umbRequestHelper.resourcePromise(
                         $http.get(`${apiEndpoint}/GetEntityTypes`), "Failed to access resource.")
                 },
-                query: function (entityTypeId, fieldTypeIds) {
+                query: function (entityTypeId, fieldTypes) {
                     return umbRequestHelper.resourcePromise(
                         $http.post(`${apiEndpoint}/Query`, {
                             entityTypeId: entityTypeId,
-                            fieldTypeIds: fieldTypeIds
+                            fieldTypes: fieldTypes
                         }), "Failed to access resource.")
                 },
                 fetchData: function (request) {

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

@@ -27,7 +27,7 @@
 
                             <uui-table-row id="tr{{fieldType.fieldTypeId}}"
                                            ng-repeat="fieldType in vm.fieldTypes" selectable
-                                           ng-on-selected="vm.selectFieldType(fieldType.fieldTypeId)"
+                                           ng-on-selected="vm.selectFieldType(fieldType)"
                                            ng-on-unselected="vm.unselectFieldType(fieldType.fieldTypeId)">
                                 <uui-table-cell>{{fieldType.fieldTypeId}}</uui-table-cell>
                                 <uui-table-cell>{{fieldType.fieldTypeDisplayName}}</uui-table-cell>
@@ -38,9 +38,4 @@
             </div>
         </uui-card-content-node>
     </uui-icon-registry-essential>
-</div>
-
-
-<!-- Notifications -->
-<uui-toast-notification-container bottom-up="">
-</uui-toast-notification-container>
+</div>

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

@@ -19,15 +19,17 @@
                         <uui-table-head>
                             <uui-table-head-cell>Name</uui-table-head-cell>
                             <uui-table-head-cell>Description</uui-table-head-cell>
-                            <uui-table-head-cell ng-repeat="displayField in vm.filteredEntities[0].displayFields">{{displayField.fieldTypeId}}</uui-table-head-cell>
+                            <uui-table-head-cell ng-repeat="field in vm.filteredEntities[0].fields">
+                                {{field.fieldType}}
+                            </uui-table-head-cell>
                         </uui-table-head>
 
                         <uui-table-row ng-repeat="entity in vm.filteredEntities" selectable
                                        ng-on-selected="vm.save(entity.id)">
-                            <uui-table-cell>{{entity.displayName}}</uui-table-cell>
-                            <uui-table-cell>{{entity.description}}</uui-table-cell>
-                            <uui-table-cell ng-repeat="displayField in entity.displayFields">
-                                {{displayField.value | date : "dd.MM.y HH:mm"}}
+                            <uui-table-cell>{{entity.summary.displayName}}</uui-table-cell>
+                            <uui-table-cell>{{entity.summary.displayDescription}}</uui-table-cell>
+                            <uui-table-cell ng-repeat="field in entity.fields">
+                                {{field.value | date : "dd.MM.y HH:mm"}}
                             </uui-table-cell>
                         </uui-table-row>
                     </uui-table>

src/Umbraco.Cms.Integrations.PIM.Inriver/Configuration/EditorSettings.cs

@@ -1,13 +1,15 @@
 using Newtonsoft.Json;
 
+using Umbraco.Cms.Integrations.PIM.Inriver.Models;
+
 namespace Umbraco.Cms.Integrations.PIM.Inriver.Configuration
 {
     public class EditorSettings
     {
         [JsonProperty("entityType")]
         public string EntityType { get; set; } = string.Empty;
 
-        [JsonProperty("displayFieldTypeIds")]
-        public string[] DisplayFieldTypeIds { get; set; }
+        [JsonProperty("fieldTypes")]
+        public FieldType[] FieldTypes { get; set; }
     }
 }

src/Umbraco.Cms.Integrations.PIM.Inriver/Controllers/EntityController.cs

@@ -53,7 +53,7 @@ public async Task<IActionResult> Query([FromBody] QueryRequest request)
             var dataResult = await _inriverService.FetchData(new FetchDataRequest
             {
                 EntityIds = result.Data.EntityIds,
-                FieldTypeIds = request.FieldTypeIds
+                FieldTypeIds = string.Join(",", request.FieldTypes.Select(p => p.Id))
             });
 
             return new JsonResult(dataResult);

src/Umbraco.Cms.Integrations.PIM.Inriver/Editors/EntityPickerValueConverter.cs

@@ -40,7 +40,7 @@ public override object ConvertSourceToIntermediate(IPublishedElement owner, IPub
             var fetchDataResponse = _inriverService.FetchData(new FetchDataRequest
             {
                 EntityIds = new[] { entityId },
-                FieldTypeIds = string.Join(",", displayFields.Select(p => p.GetValue<string>()))
+                FieldTypeIds = string.Join(",", displayFields.Select(p => p["fieldTypeId"].GetValue<string>()))
             }).ConfigureAwait(false).GetAwaiter().GetResult();
 
             if (fetchDataResponse.Failure) return null;
@@ -52,7 +52,9 @@ public override object ConvertSourceToIntermediate(IPublishedElement owner, IPub
             {
                 DisplayName = entityData.Summary.DisplayName,
                 DisplayDescription = entityData.Summary.Description,
-                Fields = entityData.Fields.ToDictionary(x => x.FieldTypeId, x => x.Value)                
+                Fields = entityData.Fields.ToDictionary(
+                    x => displayFields.First(p => p["fieldTypeId"].GetValue<string>() == x.FieldTypeId)["fieldTypeDisplayName"].GetValue<string>(), 
+                    x => x.Value)                
             };
 
             return vm;

src/Umbraco.Cms.Integrations.PIM.Inriver/Models/EntityType.cs

@@ -1,5 +1,4 @@
-
-using System.Text.Json.Serialization;
+using System.Text.Json.Serialization;
 
 namespace Umbraco.Cms.Integrations.PIM.Inriver.Models
 {