Skip to content

Commit 0fd1d3e

Browse files
author
Warren Buckley
committed
Refactor to a component as advised by Niels in order to use require to try & get API key data
1 parent c7bbd8c commit 0fd1d3e

File tree

5 files changed

+138
-119
lines changed

5 files changed

+138
-119
lines changed

‎src/Umbraco.Forms.Extensions.Crm.Hubspot/App_Plugins/UmbracoFormsExtensions/Hubspot/hubspot-field-mapper-template.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<div>
2+
<pre>{{ vm.setting | json }}</pre>
3+
<pre>{{ vm.mappings | json }}</pre>
4+
5+
<div class="umb-forms-mappings" ng-if="vm.mappings.length > 0 && vm.hubspotFields.length > 0">
6+
7+
<div class="umb-forms-mapping-header">
8+
<div class="umb-forms-mapping-field -no-margin-left">Form Field</div>
9+
<div class="umb-forms-mapping-field">Hubspot Field</div>
10+
<div class="umb-forms-mapping-remove -no-margin-right"></div>
11+
</div>
12+
13+
<div ng-repeat="mapping in vm.mappings">
14+
15+
<div class="umb-forms-mapping">
16+
<div class="umb-forms-mapping-field">
17+
<select class="-full-width"
18+
ng-options="field.id as field.value for field in vm.fields"
19+
ng-model="mapping.formField"
20+
ng-change="vm.stringifyValue()">
21+
<option value="">Map form field</option>
22+
</select>
23+
</div>
24+
25+
<div class="umb-forms-mapping-field">
26+
<select class="-full-width"
27+
ng-options="field.value as field.name for field in vm.hubspotFields track by field.value"
28+
ng-model="mapping.hubspotField"
29+
ng-change="vm.stringifyValue()">
30+
<option value="">Map hubspot field</option>
31+
</select>
32+
</div>
33+
34+
<div class="umb-forms-mapping-remove -no-margin-right">
35+
<a href="" ng-click="vm.deleteMapping($index)"><i class="icon-trash"></i></a>
36+
</div>
37+
</div>
38+
39+
<div ng-if="mapping.hubspotField" style="margin-bottom:15px;">
40+
<strong>Description:</strong><br/>
41+
{{ vm.getHubspotFieldDescription(mapping.hubspotField) }}
42+
</div>
43+
</div>
44+
</div>
45+
46+
<umb-button type="button" action="vm.addMapping()" label="Add mapping"></umb-button>
47+
48+
</div>

‎src/Umbraco.Forms.Extensions.Crm.Hubspot/App_Plugins/UmbracoFormsExtensions/Hubspot/hubspotfields.component.js

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
angular
2+
.module("umbraco")
3+
.component("umbFormsHubspotFields", {
4+
controller: HubSpotFieldsController,
5+
controllerAs: "vm",
6+
templateUrl: "/App_Plugins/UmbracoFormsExtensions/hubspot/hubspot-field-mapper-template.html",
7+
bindings: {
8+
setting: "<"
9+
},
10+
11+
}
12+
);
13+
14+
function HubSpotFieldsController($scope, $compile, $element, $routeParams, hubspotResource, pickerResource) {
15+
var vm = this;
16+
17+
// its repating with umb-control-group for each workflow setting
18+
// parent view/controller that has the model.workflow.settings...
19+
// umbracoForms.Overlays.WorkflowSettingsOverlayController as vm
20+
21+
vm.$onInit = function() {
22+
console.log('$scope', $scope);
23+
console.log('vm', vm);
24+
25+
//console.log('vm.parentDirective', vm.parentDirective);
26+
27+
if (!vm.setting.value) {
28+
vm.mappings = [];
29+
} else {
30+
vm.mappings = JSON.parse(vm.setting.value);
31+
}
32+
33+
var formId = $routeParams.id;
34+
if (formId !== -1){
35+
36+
// Available Form Fields
37+
pickerResource.getAllFields(formId).then(function (response) {
38+
vm.fields = response.data;
39+
});
40+
41+
// TODO: Remove hard coded API key & remember to revoke it later on
42+
// Need to get API key from other field
43+
// May need to do parent.parent scope traversal - YUK :S
44+
45+
// Niels recommendation that this is a component & be able to get the data from a parent item
46+
// Using require (but finding which one it is I have no idea)
47+
48+
hubspotResource.getAllProperties('6a488b25-b7e7-489d-ad45-2da52a878ff9').then(function (response) {
49+
vm.hubspotFields = response.map(x =>{
50+
return {
51+
value: x.name,
52+
name: x.label,
53+
description: x.description
54+
}
55+
});
56+
});
57+
}
58+
}
59+
60+
vm.getHubspotFieldDescription = function(value) {
61+
var item = vm.hubspotFields.find(x => {
62+
return x.value === value;
63+
});
64+
65+
if(item){
66+
return item.description;
67+
}
68+
69+
return '';
70+
}
71+
72+
vm.addMapping = function () {
73+
// Add new empty object into array
74+
vm.mappings.push({
75+
formField: "",
76+
hubspotField: ""
77+
});
78+
};
79+
80+
vm.deleteMapping = function (index) {
81+
vm.mappings.splice(index, 1);
82+
vm.setting.value = JSON.stringify(vm.mappings);
83+
};
84+
85+
vm.stringifyValue = function () {
86+
vm.setting.value = JSON.stringify(vm.mappings);
87+
};
88+
}

‎src/Umbraco.Forms.Extensions.Crm.Hubspot/App_Plugins/UmbracoFormsExtensions/Hubspot/hubspotfields.html

Lines changed: 1 addition & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1 @@
1-
<div ng-controller="UmbracoFormsExtensions.Hubspot.Fields">
2-
3-
<pre>{{ setting | json }}</pre>
4-
<pre>{{ mappings | json }}</pre>
5-
<!--<pre>{{ fields | json }}</pre>-->
6-
<!--<pre>{{ hubspotFields | json }}</pre>-->
7-
8-
<div class="umb-forms-mappings" ng-if="mappings.length > 0">
9-
10-
<div class="umb-forms-mapping-header">
11-
<div class="umb-forms-mapping-field -no-margin-left">Form Field</div>
12-
<div class="umb-forms-mapping-field">Hubspot Field</div>
13-
<div class="umb-forms-mapping-remove -no-margin-right"></div>
14-
</div>
15-
16-
<div ng-repeat="mapping in mappings">
17-
18-
<div class="umb-forms-mapping">
19-
<div class="umb-forms-mapping-field">
20-
<select class="-full-width"
21-
ng-options="field.id as field.value for field in fields"
22-
ng-model="mapping.formField"
23-
ng-change="stringifyValue()">
24-
<option value="">Map form field</option>
25-
</select>
26-
</div>
27-
28-
<div class="umb-forms-mapping-field">
29-
<select class="-full-width"
30-
ng-options="field.value as field.name for field in hubspotFields track by field.value"
31-
ng-model="mapping.hubspotField"
32-
ng-change="stringifyValue()">
33-
<option value="">Map hubspot field</option>
34-
</select>
35-
</div>
36-
37-
<div class="umb-forms-mapping-remove -no-margin-right">
38-
<a href="" ng-click="deleteMapping($index)"><i class="icon-trash"></i></a>
39-
</div>
40-
</div>
41-
42-
<div ng-if="mapping.hubspotField" style="margin-bottom:15px;">
43-
<strong>Description:</strong><br/>
44-
{{ getHubspotFieldDescription(mapping.hubspotField) }}
45-
</div>
46-
</div>
47-
</div>
48-
49-
<umb-button type="button" action="addMapping()" label="Add mapping"></umb-button>
50-
51-
</div>
1+
<umb-forms-hubspot-fields setting="setting"></umb-forms-hubspot-fields>

‎src/Umbraco.Forms.Extensions.Crm.Hubspot/App_Plugins/UmbracoFormsExtensions/Hubspot/hubspotfields.js

Lines changed: 0 additions & 67 deletions
This file was deleted.

‎src/Umbraco.Forms.Extensions.Crm.Hubspot/App_Plugins/UmbracoFormsExtensions/Hubspot/package.manifest

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"css": [ "" ],
33
"javascript": [
4-
"~/App_Plugins/UmbracoFormsExtensions/Hubspot/hubspotfields.js",
4+
"~/App_Plugins/UmbracoFormsExtensions/Hubspot/hubspotfields.component.js",
55
"~/App_Plugins/UmbracoFormsExtensions/Hubspot/hubspot.resource.js"
66
]
77
}

0 commit comments

Comments
 (0)