element-edit: ability to add /remove custom field

assets/admin.pack.js

@@ -5,3 +5,4 @@ import './scss/admin.scss'
 import './js/admin/configuration'
 import './js/admin/element-import/element-import'
 import './js/admin/osm-tags'
+import './js/admin/element-edit'

assets/js/admin/configuration.js

 // CONFIGURATION ADMIN, disable the whole feature box according to checkbox "feature active"
-$(document).ready(function() {
+document.addEventListener('DOMContentLoaded', function() {
     checkCollaborativeVoteActivated();
     $('.collaborative-feature .sonata-ba-field.sonata-ba-field-inline-natural > .form-group:first-child .icheckbox_square-blue .iCheck-helper').click(checkCollaborativeVoteActivated);
 

assets/js/admin/element-edit.js

+import Vue from 'vue/dist/vue.esm'
+
+document.addEventListener('DOMContentLoaded', function() {
+    if ($('.element-data-fields').length > 0) {
+        new Vue({
+            el: ".element-data-fields",
+            data: {
+                newFields: [],
+                existingProps: existingProps.map( prop => { return {id: prop, text: prop} })
+            },
+            methods: {
+                addField() {
+                    this.newFields.push('')               
+                }
+            },
+        })
+    }
+})
\ No newline at end of file

assets/js/admin/element-import/element-import.js

 import OsmQueryBuilder from './OsmQueryBuilder.vue'
 import Vue from 'vue/dist/vue.esm'
 
-$(document).on('ready', function() {
+document.addEventListener('DOMContentLoaded', function() {
     if ($('#element-import').length > 0) {
         new Vue({
             el: "#element-import",

assets/js/admin/osm-tags.js

 import Vue from 'vue/dist/vue.esm'
 import OsmCondition from './element-import/OsmQueryBuilderCondition.vue'
 
-$(document).on('ready', function() {
+document.addEventListener('DOMContentLoaded', function() {
     if ($('.osm-tags-field').length > 0) {
         new Vue({
             el: ".osm-tags-field",

src/Admin/Element/ElementAdminShowEdit.php

@@ -28,6 +28,8 @@ class ElementAdminShowEdit extends ElementAdminList
         $this->config = $dm->get('Configuration')->findConfiguration();  
         $categories = $dm->query('Option')->select('name')->getArray();
         $categoriesChoices = array_flip($categories);
+        $elementProperties = $dm->get('Element')->findDataCustomProperties();
+        $elementProperties = array_values(array_diff($elementProperties, array_keys($this->getSubject()->getData())));
         
         $formMapper
           ->with('Informations générales', ['class' => 'col-md-6'])
@@ -37,7 +39,12 @@ class ElementAdminShowEdit extends ElementAdminList
               'multiple' => true,
               'choices' => $categoriesChoices,
               'label' => 'Catégories'], ['admin_code' => 'admin.option_hidden'])
-            ->add('data', null, ['label_attr' => ['style' => 'display:none;'], 'attr' => ['class' => 'gogo-element-data']])
+            ->add('data', null, [
+              'label_attr' => ['style' => 'display:none;'], 
+              'attr' => [
+                'class' => 'gogo-element-data',
+                'data-props' => json_encode($elementProperties)
+              ]])
             ->add('userOwnerEmail', EmailType::class, ['required' => false, 'label' => "Email de l'utilisateur propriétaire de cette fiche"])
             ->add('email', EmailType::class, ['required' => false, 'label' => "Email de l'élément"])
             ->add('images', CollectionType::class, [

templates/admin/core_custom/custom-fields/element-data.html.twig

 {% set element = form.vars.sonata_admin.admin.subject %}
 
 <h4 style="margin-top: 25px;">Champs Personnalisés</h4>
-<div class="table-responsive no-padding">
+<div class="table-responsive no-padding element-data-fields">
   <table class="table">
   <tbody>
     {% for key, value in element.data %}
@@ -20,9 +20,44 @@
           <input type="{{ type }}" class="form-control" {{ readonly ? 'readonly="readonly"' : '' }}
                     name="{{ 'data[' ~ key ~ ']'}}" value="{{ value }}" />
         </td>
+        <td><i class="btn-remove-field fa fa-times" onclick="$(this).closest('tr').remove()"></i></td>
       </tr>
     {% endfor %}
+    <tr class="sonata-ba-view-container" v-for="(field, key) in newFields" :key="key">
+      <th>
+        <input type="text" class="select-field-key" v-model="newFields[key]"/>
+      </th>
+      <td>
+        <input type="text" class="form-control" :name="`data[${field}]`"/>
+      </td>
+      <td><i class="btn-remove-field fa fa-times" onclick="$(this).closest('tr').remove()"></i></td>
+    </tr>
   </tbody>
   </table>
+  <button type="button" class="btn btn-add-field btn-default btn-sm" @click="addField()">
+    Ajouter un Champ Personnalisé
+  </button>
 </div>
 <h4>Champs Spéciaux</h4>
+
+<style>
+  .element-data-fields th {
+      text-transform: none !important;
+  }
+  .select-field-key {
+      width: 100%;
+  }
+  .btn-add-field {
+    margin: -15px 0 15px 0;
+  }
+  .btn-remove-field {
+    padding-top: 8px;
+    cursor: pointer;
+  }
+</style>
+
+<script>
+  var existingProps = {{ form.vars.attr["data-props"]|raw }};
+</script>
+
+