Skip to content

Commit 1c025b0

Browse files
acoumbacoumb
committed
Inriver integration updates - entity picker & display columns
1 parent 2b530e7 commit 1c025b0

File tree

16 files changed

+233
-107
lines changed

16 files changed

+233
-107
lines changed

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

Lines changed: 90 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,125 @@
1-
function configurationController($scope, umbracoCmsIntegrationsPimInriverResource) {
1+
function configurationController($scope, umbracoCmsIntegrationsPimInriverService, umbracoCmsIntegrationsPimInriverResource) {
22
var vm = this;
33

4+
const selEntityTypes = document.getElementById("selEntityTypes");
5+
46
vm.configuration = {};
57

8+
vm.entityTypes = [];
9+
vm.fieldTypes = [];
10+
11+
vm.selectedEntityType = {};
12+
vm.selectedFieldTypes = [];
13+
14+
console.log($scope.model.value);
15+
616
if ($scope.model.value == null) {
717
$scope.model.value = {
818
entityType: '',
9-
allowChange: false
19+
displayFieldTypeIds: []
1020
};
1121
}
12-
1322
$scope.$on('formSubmitting', function () {
14-
var selEntityTypes = document.getElementById("selEntityTypes");
15-
var chkAllowChange = document.getElementById("chkAllowChange");
16-
17-
$scope.model.value.entityType = selEntityTypes.value;
18-
$scope.model.value.allowChange = chkAllowChange.checked;
23+
$scope.model.value.entityType = vm.selectedEntityType.value;
24+
$scope.model.value.displayFieldTypeIds = vm.selectedFieldTypes;
1925
});
2026

27+
vm.entityTypeChange = function () {
28+
var selectedEntityType = vm.entityTypes.find(obj => obj.value == selEntityTypes.value);
29+
30+
vm.selectedEntityType = selectedEntityType;
31+
vm.fieldTypes = vm.selectedEntityType.fieldTypes;
32+
33+
vm.selectedFieldTypes = [];
34+
}
35+
2136
umbracoCmsIntegrationsPimInriverResource.checkApiAccess().then(function (response) {
2237
vm.configuration.icon = response.success ? 'unlock' : 'lock';
2338
vm.configuration.tag = response.success ? 'positive' : 'danger';
2439
vm.configuration.status = response;
2540

2641
if (response.success) {
2742
umbracoCmsIntegrationsPimInriverResource.getEntityTypes().then(function (entityTypesResponse) {
28-
var entityTypes = entityTypesResponse.data.map(obj => {
43+
vm.entityTypes = entityTypesResponse.data.map(obj => {
2944
var option = {
45+
value: obj.id,
3046
name: obj.name,
31-
value: obj.id
47+
fieldTypes: obj.fieldTypes
3248
};
33-
if ($scope.model.value !== null && $scope.model.value.EntityType == obj.id) {
49+
if ($scope.model.value !== null && $scope.model.value.entityType == obj.id) {
3450
option.selected = true;
51+
52+
vm.selectedEntityType = option;
3553
}
3654
return option;
3755
});
38-
bindValues(entityTypes);
56+
57+
vm.selectedFieldTypes = $scope.model.value.displayFieldTypeIds;
58+
59+
bindValues();
3960
});
4061

4162
}
4263
});
4364

44-
function bindValues(entityTypes) {
45-
var selEntityTypes = document.getElementById("selEntityTypes");
46-
selEntityTypes.options = entityTypes;
65+
// table rows selection
66+
vm.selectFieldType = function (fieldTypeId) {
67+
vm.selectedFieldTypes.push(fieldTypeId);
68+
}
69+
70+
vm.unselectFieldType = function (fieldTypeId) {
71+
vm.selectedFieldTypes = vm.selectedFieldTypes.filter(id => fieldTypeId != id);
72+
}
73+
74+
function bindValues() {
75+
selEntityTypes.options = vm.entityTypes;
76+
vm.fieldTypes = vm.selectedEntityType.fieldTypes;
77+
78+
$scope.model.value.displayFieldTypeIds.forEach(fieldTypeId => {
79+
umbracoCmsIntegrationsPimInriverService.waitForElement("#tr" + fieldTypeId)
80+
.then(element => element.setAttribute("selected", ""));
81+
});
82+
}
83+
84+
/**
85+
* toggle rows selection with uui-checkbox - prototype
86+
* */
87+
vm._selectFieldType = function (fieldTypeId) {
88+
var fieldTypeIndex = vm.selectedFieldTypes.indexOf(fieldTypeId);
89+
if (fieldTypeIndex == -1) {
90+
vm.selectedFieldTypes.push(fieldTypeId);
91+
document.getElementById('chk' + fieldTypeId).setAttribute('checked', '');
92+
}
93+
else {
94+
document.getElementById('chk' + fieldTypeId).removeAttribute('checked');
95+
vm.selectedFieldTypes = vm.selectedFieldTypes.splice(fieldTypeIndex, 1);
96+
}
97+
}
98+
99+
vm._selectFieldTypes = function () {
100+
const selectAll = vm.selectedFieldTypes.length == 0;
101+
102+
vm.selectedFieldTypes = [];
103+
104+
console.log('select all', selectAll);
105+
if (selectAll == true) {
106+
vm.selectedFieldTypes = vm.fieldTypes.map(obj => obj.fieldTypeId);
107+
var elements = document.querySelectorAll("uui-checkbox");
108+
for (var i = 0; i < elements.length; i++) {
109+
elements[i].setAttribute("checked", "");
110+
}
111+
}
112+
else {
113+
var elements = document.querySelectorAll("uui-checkbox");
114+
for (var i = 0; i < elements.length; i++) {
115+
elements[i].removeAttribute("checked");
116+
}
117+
}
47118

48-
var chkAllowChange = document.getElementById("chkAllowChange");
49-
chkAllowChange.checked = $scope.model.value.AllowChange;
119+
vm.fieldTypes = vm.fieldTypes.map(obj => {
120+
obj.selected = selectAll;
121+
return obj;
122+
});
50123
}
51124
}
52125

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

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,6 @@
33
var vm = this;
44
vm.error = '';
55

6-
const dialog = document.getElementById('editorDialog');
7-
dialog.style.display = "block";
8-
9-
// add event listeners
10-
var btnCancel = dialog.querySelector('#btnCancel');
11-
btnCancel.addEventListener('click', closeEditor);
12-
13-
146
umbracoCmsIntegrationsPimInriverResource.checkApiAccess().then(function (response) {
157
if (response.failure)
168
vm.error = response.data;
@@ -21,8 +13,8 @@
2113
title: "Inriver Entities",
2214
subtitle: "Select entity",
2315
configuration: {
24-
entityType: $scope.model.config.configuration.EntityType,
25-
allowChange: $scope.model.config.configuration.AllowChange
16+
entityType: $scope.model.config.configuration.entityType,
17+
displayFieldTypeIds: $scope.model.config.configuration.displayFieldTypeIds
2618
},
2719
view: "/App_Plugins/UmbracoCms.Integrations/PIM/Inriver/views/entitypickereditor.html",
2820
size: "medium",

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

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,26 @@
22

33
var vm = this;
44

5-
umbracoCmsIntegrationsPimInriverResource.getEntityTypes().then(function (entityTypesResponse) {
6-
var entityTypes = entityTypesResponse.data.map(obj => {
7-
var option = {
8-
name: obj.name,
9-
value: obj.id
10-
};
11-
if ($scope.model.configuration.entityType == obj.id) {
12-
option.selected = true;
13-
}
14-
return option;
15-
});
16-
bindValues(entityTypes);
17-
});
5+
vm.entities = [];
186

19-
function bindValues(entityTypes) {
20-
var selEntityTypes = document.getElementById("selEntityTypes");
21-
selEntityTypes.options = entityTypes;
22-
23-
var selectedEntityType = entityTypes.find(obj => obj.selected);
24-
query(selectedEntityType.value);
25-
}
7+
query($scope.model.configuration.entityType);
268

279
function query(entityTypeId) {
2810
umbracoCmsIntegrationsPimInriverResource.query(entityTypeId).then(function (response) {
2911
if (response.success) {
3012
vm.entities = [];
3113
for (var i = 0; i < response.data.entityIds.length; i++) {
3214
umbracoCmsIntegrationsPimInriverResource.getEntitySummary(response.data.entityIds[i]).then(function (summaryResponse) {
33-
vm.entities.push(summaryResponse.data);
15+
var entity = {
16+
id: summaryResponse.data.id,
17+
displayName: summaryResponse.data.displayName,
18+
description: summaryResponse.data.description,
19+
displayFields: summaryResponse.data.fields.filter(obj => {
20+
var index = $scope.model.configuration.displayFieldTypeIds.indexOf(obj.fieldTypeId);
21+
if (index > -1) return obj;
22+
})
23+
};
24+
vm.entities.push(entity);
3425
});
3526
}
3627
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@
1717
return umbRequestHelper.resourcePromise(
1818
$http.get(`${apiEndpoint}/GetEntitySummary?id=${id}`), "Failed to access resource.")
1919
},
20+
getEntityFieldValues: function (id, fieldTypeIds) {
21+
return umbRequestHelper.resourcePromise(
22+
$http.get(`${apiEndpoint}/GetEntitySummary?id=${id}&fieldTypeIds=${fieldTypeIds}`), "Failed to access resource.")
23+
},
2024
query: function (entityTypeId) {
2125
return umbRequestHelper.resourcePromise(
2226
$http.post(`${apiEndpoint}/Query`, {

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
function inriverService() {
2+
return {
3+
waitForElement: function (selector) {
4+
return new Promise(resolve => {
5+
if (document.querySelector(selector)) {
6+
return resolve(document.querySelector(selector));
7+
}
8+
9+
const observer = new MutationObserver(mutations => {
10+
if (document.querySelector(selector)) {
11+
resolve(document.querySelector(selector));
12+
observer.disconnect();
13+
}
14+
});
15+
16+
observer.observe(document.body, {
17+
childList: true,
18+
subtree: true
19+
});
20+
});
21+
}
22+
}
23+
}
24+
25+
angular.module("umbraco.services")
26+
.service("umbracoCmsIntegrationsPimInriverService", inriverService);

‎src/Umbraco.Cms.Integrations.PIM.Inriver/App_Plugins/UmbracoCms.Integrations/PIM/Inriver/package.manifest

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "1.0.0",
44
"allowPackageTelemetry": true,
55
"javascript": [
6+
"~/App_Plugins/UmbracoCms.Integrations/PIM/Inriver/js/inriver.service.js",
67
"~/App_Plugins/UmbracoCms.Integrations/PIM/Inriver/js/configuration.controller.js",
78
"~/App_Plugins/UmbracoCms.Integrations/PIM/Inriver/js/entitypicker.controller.js",
89
"~/App_Plugins/UmbracoCms.Integrations/PIM/Inriver/js/entitypickereditor.controller.js",

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

Lines changed: 42 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,48 @@
22
<uui-icon-registry-essential>
33
<uui-card-content-node name="Inriver API" style="max-width: 800px;">
44
<uui-icon slot="icon" name="{{vm.configuration.icon}}"></uui-icon>
5-
<uui-tag size="s" slot="tag" color="{{vm.configuration.tag}}">
6-
{{vm.configuration.status.success ? vm.configuration.status.data : vm.configuration.status.error}}
7-
</uui-tag>
8-
<div style="width:60%">
9-
<uui-form>
10-
<uui-form-layout-item>
11-
<span style="font-weight:700;font-size:15px;">Entity Type:</span>
12-
<uui-select id="selEntityTypes" label="Entity Types" placeholder="Please select an entity type"></uui-select>
13-
</uui-form-layout-item>
14-
<uui-form-layout-item>
15-
<uui-checkbox id="chkAllowChange" label="Allow editor to change entity type">
16-
<span style="font-weight:700;font-size:15px;">Allow editor to change entity type</span>
17-
</uui-checkbox>
18-
</uui-form-layout-item>
19-
</uui-form>
20-
</div>
5+
<uui-tag size="s" slot="tag" color="{{vm.configuration.tag}}">
6+
{{vm.configuration.status.success ? vm.configuration.status.data : vm.configuration.status.error}}
7+
</uui-tag>
8+
<div style="width:60%">
9+
<uui-form>
10+
<uui-form-layout-item>
11+
<span style="font-weight:700;font-size:15px;">Entity Type:</span>
12+
<div style="margin-bottom: 20px;">Please select the Inriver entity type.</div>
13+
<uui-select id="selEntityTypes" label="Entity Types" placeholder="Please select an entity type"
14+
ng-on-change="vm.entityTypeChange()"></uui-select>
15+
</uui-form-layout-item>
16+
<uui-form-layout-item ng-if="vm.fieldTypes.length > 0">
17+
<span style="font-weight:700;font-size:15px;">Field Types:</span>
18+
<div style="margin-bottom: 20px;">
19+
Please select the field types you want to display for the entity.
20+
</div>
21+
<uui-table class="uui-text">
22+
<uui-table-column style="width: 60px;"></uui-table-column>
23+
<uui-table-head>
24+
<!--<uui-table-head-cell style="--uui-table-cell-padding: 0">
25+
<uui-checkbox style="padding: var(--uui-size-4) var(--uui-size-5);"
26+
ng-click="vm.selectFieldTypes()"></uui-checkbox>
27+
</uui-table-head-cell>-->
28+
<uui-table-head-cell>Id</uui-table-head-cell>
29+
<uui-table-head-cell>Name</uui-table-head-cell>
30+
</uui-table-head>
31+
32+
<uui-table-row id="tr{{fieldType.fieldTypeId}}"
33+
ng-repeat="fieldType in vm.fieldTypes" selectable
34+
ng-on-selected="vm.selectFieldType(fieldType.fieldTypeId)"
35+
ng-on-unselected="vm.unselectFieldType(fieldType.fieldTypeId)">
36+
<!--<uui-table-cell>
37+
<uui-checkbox id="chk{{fieldType.fieldTypeId}}" ng-on-click="vm.selectFieldType(fieldType.fieldTypeId)">
38+
</uui-checkbox>
39+
</uui-table-cell>-->
40+
<uui-table-cell>{{fieldType.fieldTypeId}}</uui-table-cell>
41+
<uui-table-cell>{{fieldType.fieldTypeDisplayName}}</uui-table-cell>
42+
</uui-table-row>
43+
</uui-table>
44+
</uui-form-layout-item>
45+
</uui-form>
46+
</div>
2147
</uui-card-content-node>
2248
</uui-icon-registry-essential>
2349
</div>

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

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,19 @@
22
<uui-box headline="{{model.title}}" class="inriver-container">
33
<div style="width:60%">
44
<uui-form>
5-
<uui-form-layout-item>
6-
<span style="font-weight:700;font-size:15px;">Entity Type:</span>
7-
<uui-select id="selEntityTypes" label="Entity Types" placeholder="Please select an entity type"></uui-select>
8-
</uui-form-layout-item>
9-
<uui-form-layout-item>
10-
<uui-table aria-label="Entities table">
11-
<uui-table-row selectable ng-repeat="item in vm.entities">
12-
<uui-table-cell ng-repeat="(value, key) in item">{{key}}</uui-table-cell>
5+
<uui-form-layout-item ng-if="vm.entities.length > 0">
6+
<uui-table class="uui-text">
7+
<uui-table-column style="width: 60px;"></uui-table-column>
8+
<uui-table-head>
9+
<uui-table-head-cell>Name</uui-table-head-cell>
10+
<uui-table-head-cell>Description</uui-table-head-cell>
11+
<uui-table-head-cell ng-repeat="displayField in vm.entities[0].displayFields">{{displayField.fieldTypeId}}</uui-table-head-cell>
12+
</uui-table-head>
13+
14+
<uui-table-row ng-repeat="entity in vm.entities" selectable>
15+
<uui-table-cell>{{entity.displayName}}</uui-table-cell>
16+
<uui-table-cell>{{entity.description}}</uui-table-cell>
17+
<uui-table-cell ng-repeat="displayField in entity.displayFields">{{displayField.value}}</uui-table-cell>
1318
</uui-table-row>
1419
</uui-table>
1520
</uui-form-layout-item>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
using System.Text.Json.Serialization;
1+
using Newtonsoft.Json;
22

33
namespace Umbraco.Cms.Integrations.PIM.Inriver.Configuration
44
{
55
public class EditorSettings
66
{
7-
[JsonPropertyName("entityType")]
7+
[JsonProperty("entityType")]
88
public string EntityType { get; set; } = string.Empty;
99

10-
[JsonPropertyName("allowChange")]
11-
public bool AllowChange { get; set; }
10+
[JsonProperty("displayFieldTypeIds")]
11+
public string[] DisplayFieldTypeIds { get; set; }
1212
}
1313
}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,14 @@ public async Task<IActionResult> GetEntityTypes()
4141
public async Task<IActionResult> GetEntitySummary(int id)
4242
{
4343
var results = await _inriverService.GetEntitySummary(id);
44+
if(results.Success)
45+
{
46+
var fields = await _inriverService.GetEntityFieldValues(id);
47+
if(fields.Success)
48+
{
49+
results.Data.Fields = fields.Data;
50+
}
51+
}
4452

4553
return new JsonResult(results);
4654
}

0 commit comments

Comments
 (0)