#782 Mapping in Family2Family - saving mapping data

pim/src/PcmtRulesBundle/Connector/Job/ConstraintCollectionProvider/FamilyToFamilyConstraintCollectionProvider.php

@@ -49,6 +49,9 @@ class FamilyToFamilyConstraintCollectionProvider implements ConstraintCollection
                     'user_to_notify'    => [
                         new Type('string'),
                     ],
+                    'attributeMapping' => [
+                        new Type('array'),
+                    ],
                 ],
             ]
         );

pim/src/PcmtRulesBundle/Resources/config/form_extensions/job_instance/pcmt_rules_family_to_family_job_edit.yml

@@ -45,6 +45,24 @@ extensions:
       tabTitle: pim_common.properties
       tabCode: pim-job-instance-properties
 
+  pcmt-rules-family-to-family-job-edit-mapping-tab:
+    module: pim/job/common/edit/properties
+    parent: pcmt-rules-family-to-family-job-edit-tabs
+    aclResourceId: pcmt_permission_rules_edit
+    targetZone: container
+    position: 120
+    config:
+      tabTitle: pcmt.rules.family_to_family_job.tab.attribute_mapping
+      tabCode: pcmt-rules-family-to-family-job-edit-mapping
+
+  pcmt-rules-family-to-family-job-edit-mapping:
+    module: pcmt/rules/job/rules/edit/attribute-mapping
+    parent: pcmt-rules-family-to-family-job-edit-mapping-tab
+    targetZone: properties
+    position: 120
+    config:
+      fieldCode: configuration.attributeMapping
+
   pcmt-rules-family-to-family-job-edit-history:
     module: pim/common/tab/history
     parent: pcmt-rules-family-to-family-job-edit-tabs

pim/src/PcmtRulesBundle/Resources/config/requirejs.yml

@@ -10,6 +10,7 @@ config:
     pcmt/rules/job/field/attribute-select: pcmtrules/js/job/field/attribute-select
     pcmt/rules/job/field/key-attribute-select: pcmtrules/js/job/field/key-attribute-select
     pcmt/rules/job/field/destination-attribute-select: pcmtrules/js/job/field/destination-attribute-select
+    pcmt/rules/job/rules/edit/attribute-mapping: pcmtrules/js/job/rules/edit/attribute-mapping
 
     pcmt/rules/job/rules/edit/save: pcmtrules/js/job/rules/edit/save
 
@@ -17,6 +18,8 @@ config:
     pcmt/rules/template/group: pcmtrules/templates/group.html
 
     pcmt/rules/template/job/field/select: pcmtrules/templates/job/field/select.html
+    pcmt/rules/template/job/rules/edit/attribute-mapping: pcmtrules/templates/job/rules/edit/attribute-mapping.html
+    pcmt/rules/template/job/rules/edit/attribute-mapping-row: pcmtrules/templates/job/rules/edit/attribute-mapping-row.html
 
 
   config:

pim/src/PcmtRulesBundle/Resources/public/js/job/rules/edit/attribute-mapping.js

+/*
+ * Copyright (c) 2021, VillageReach
+ * Licensed under the Non-Profit Open Software License version 3.0.
+ * SPDX-License-Identifier: NPOSL-3.0
+ */
+
+'use strict';
+
+/**
+ *
+ */
+define(
+    [
+        'jquery',
+        'underscore',
+        'pim/job/common/edit/field/field',
+        'pcmt/rules/template/job/rules/edit/attribute-mapping',
+        'pcmt/rules/template/job/rules/edit/attribute-mapping-row'
+    ],
+    function (
+        $,
+        _,
+        BaseForm,
+        template,
+        rowTemplate
+    ) {
+
+        return BaseForm.extend({
+            events: {
+                "click .add-row": "addRow",
+                "click .remove-row": "removeRow",
+                "change input": "updateModelAfterChange",
+            },
+            template: _.template(template),
+            rowTemplate: _.template(rowTemplate),
+            mappingValues: [],
+            initialize: function(config) {
+                BaseForm.prototype.initialize.apply(this, arguments);
+                if (undefined === this.config.fieldCode) {
+                    throw new Error('This view must be configured with a field code.');
+                }
+            },
+            configure: function() {
+                BaseForm.prototype.configure.apply(this, arguments);
+                this.listenTo(this.getRoot(), 'pim_enrich:form:entity:post_fetch', this.postFetch);
+            },
+            postFetch: function(data) {
+                let value = this.getValue();
+                if (_.isArray(value)) {
+                    this.mappingValues = value;
+                }
+                if (_.isEmpty(this.mappingValues)) {
+                    this.addRow();
+                }
+            },
+            addRow: function() {
+                let index = this.getMaxIndex() + 1;
+                this.mappingValues.push({
+                    index: index,
+                    sourceValue: '',
+                    destinationValue: '',
+                });
+                this.updateState();
+                this.render();
+            },
+            removeRow: function(ev) {
+                var chosenIndex = $(ev.currentTarget).data('index');
+                this.mappingValues = _.filter(this.mappingValues, function(element) {
+                    return element.index !== chosenIndex;
+                });
+                this.updateState();
+                this.render();
+            },
+            render: function () {
+                this.$el.html(this.template({
+                    rowCount : this.rowCount,
+                    rowTemplate: this.rowTemplate,
+                    data: this.mappingValues,
+                }));
+                this.delegateEvents();
+                return this;
+            },
+            updateModelAfterChange: function (event) {
+                this.updateModelValue(parseInt(event.target.dataset.index), event.target.name, event.target.value);
+            },
+            updateModelValue: function (index, type, value) {
+                let mappingValue = _.find(this.mappingValues, function(element) {
+                    return element.index === index;
+                });
+                if (!mappingValue) {
+                    return;
+                }
+                mappingValue[type] = value;
+                this.updateState();
+            },
+            getMaxIndex: function() {
+                if (_.isEmpty(this.mappingValues)) {
+                    return 0;
+                }
+                let maxElement = _.max(this.mappingValues, function (element) {
+                    return element.index;
+                });
+                return maxElement.index;
+
+            },
+            getFieldValue: function () {
+                return this.mappingValues;
+            },
+        });
+    }
+);
\ No newline at end of file

pim/src/PcmtRulesBundle/Resources/public/templates/job/rules/edit/attribute-mapping-row.html

+<!--
+  ~ Copyright (c) 2021, VillageReach
+  ~ Licensed under the Non-Profit Open Software License version 3.0.
+  ~ SPDX-License-Identifier: NPOSL-3.0
+  -->
+
+<tr class="AknGrid-bodyRow">
+
+    <td class="AknGrid-bodyCell">
+        <input class="AknTextField" title="Source attribute" value="<%- element.sourceValue %>"
+               type="text" name="sourceValue" data-index="<%- element.index %>">
+    </td>
+
+    <td class="AknGrid-bodyCell">
+        =>
+    </td>
+
+    <td class="AknGrid-bodyCell">
+        <input class="AknTextField" title="Destination attribute" value="<%- element.destinationValue %>"
+           type="text" name="destinationValue" data-index="<%- element.index %>">
+
+    </td>
+
+    <td class="AknGrid-bodyCell AknGrid-bodyCell--actions">
+        <a href="javascript:void(0);" data-index="<%- element.index %>" class="remove-row AknIconButton AknIconButton--small AknIconButton--trash AknButtonList-item" title="Remove row">
+            Remove row
+        </a>
+    </td>
+
+</tr>
+

pim/src/PcmtRulesBundle/Resources/public/templates/job/rules/edit/attribute-mapping.html

+<!--
+  ~ Copyright (c) 2021, VillageReach
+  ~ Licensed under the Non-Profit Open Software License version 3.0.
+  ~ SPDX-License-Identifier: NPOSL-3.0
+  -->
+
+<table class="AknGrid">
+    <tbody class="AknGrid-body">
+
+        <% _.each(data, function(element) { %>
+            <%= rowTemplate({element: element}) %>
+        <% }); %>
+
+    </tbody>
+</table>
+
+
+<button class="add-row AknButton AknButton--apply">Add row</button>
+
+

pim/src/PcmtRulesBundle/Resources/translations/jsmessages.en_US.yml

@@ -76,6 +76,8 @@ pcmt:
                 key_attribute:
                     title: Key Attribute
                     help: Key Attribute
+            tab:
+                attribute_mapping: Attribute mapping
         select_options_job:
             properties:
                 destination_attribute:

pim/src/PcmtRulesBundle/Resources/translations/jsmessages.fr_FR.yml

@@ -76,6 +76,8 @@ pcmt:
                 key_attribute:
                     title: FR Key Attribute
                     help: FR Key Attribute
+            tab:
+                attribute_mapping: FR Attribute mapping
         select_options_job:
             properties:
                 destination_attribute: