FIX [review] implement changes based on review

src/Bundle/ChillMainBundle/Form/Type/PickUserDynamicType.php

@@ -19,6 +19,7 @@ use Symfony\Component\Form\FormInterface;
 use Symfony\Component\Form\FormView;
 use Symfony\Component\OptionsResolver\OptionsResolver;
 use Symfony\Component\Serializer\Normalizer\DenormalizerInterface;
+use Symfony\Component\Serializer\Normalizer\NormalizerInterface;
 use Symfony\Component\Serializer\SerializerInterface;
 
 /**
@@ -28,12 +29,15 @@ class PickUserDynamicType extends AbstractType
 {
     private DenormalizerInterface $denormalizer;
 
+    private NormalizerInterface $normalizer;
+
     private SerializerInterface $serializer;
 
-    public function __construct(DenormalizerInterface $denormalizer, SerializerInterface $serializer)
+    public function __construct(DenormalizerInterface $denormalizer, SerializerInterface $serializer, NormalizerInterface $normalizer)
     {
         $this->denormalizer = $denormalizer;
         $this->serializer = $serializer;
+        $this->normalizer = $normalizer;
     }
 
     public function buildForm(FormBuilderInterface $builder, array $options)
@@ -46,7 +50,10 @@ class PickUserDynamicType extends AbstractType
         $view->vars['multiple'] = $options['multiple'];
         $view->vars['types'] = ['user'];
         $view->vars['uniqid'] = uniqid('pick_user_dyn');
-        $view->vars['suggested'] = $this->serializer->serialize($options['suggested'], 'json', ['groups' => 'read']);
+
+        foreach ($options['suggested'] as $user) {
+            $view->vars['suggested'][spl_object_hash($user)] = $this->normalizer->normalize($user, 'json', ['groups' => 'read']);
+        }
     }
 
     public function configureOptions(OptionsResolver $resolver)

src/Bundle/ChillMainBundle/Resources/public/module/pick-entity/index.js

@@ -23,12 +23,7 @@ function loadDynamicPicker(element) {
                     (input.value === '[]' || input.value === '') ?
                         null : [ JSON.parse(input.value) ]
                 )
-            suggested = JSON.parse('[' + el.dataset.suggested + ']');
+            suggested = JSON.parse(el.dataset.suggested);
-            // suggested = suggested[0];
-
-        console.log(typeof suggested)
-        // console.log(el.dataset.suggested)
-        console.log('suggested', typeof suggested[0])
 
         if (!isMultiple) {
             if (input.value === '[]'){
@@ -58,13 +53,18 @@ function loadDynamicPicker(element) {
                 }
             },
             methods: {
-                addNewEntity(entity) {
+                addNewEntity({entity, isSuggested = false}) {
                     if (this.multiple) {
                         if (!this.picked.some(el => {
                             return el.type === entity.type && el.id === entity.id;
                         })) {
                             this.picked.push(entity);
                             input.value = JSON.stringify(this.picked);
+                            console.log(entity)
+                            if (isSuggested) {
+                              const indexToRemove = this.suggested.findIndex(e => e.id === entity.id)
+                              this.suggested.splice(indexToRemove, 1);
+                            }
                         }
                     } else {
                         if (!this.picked.some(el => {
@@ -76,9 +76,12 @@ function loadDynamicPicker(element) {
                         }
                     }
                 },
-                removeEntity(entity) {
+                removeEntity({entity, isSuggested = false}) {
                     this.picked = this.picked.filter(e => !(e.type === entity.type && e.id === entity.id));
                     input.value = JSON.stringify(this.picked);
+                    if (isSuggested) {
+                      this.suggested.push(entity);
+                    }
                 },
             }
         })

src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue

@@ -17,8 +17,7 @@
             </add-persons>
         </li>
     </ul>
-    <ul v-if="Object.keys(suggested).length > 0" class="list-suggest add-items inline">
+    <ul class="list-suggest add-items inline">
-      <p>hello {{ Object.keys(suggested) }}</p>
       <li v-for="s in suggested" :key="s.id" @click="addNewSuggested(s)"><span>{{ s.text }}</span></li>
     </ul>
 </template>
@@ -105,13 +104,11 @@ export default {
     },
     methods: {
       addNewSuggested(entity) {
-        this.$emit('addNewEntity', entity);
+        this.$emit('addNewEntity', {entity: entity, isSuggested: true});
-        const indexToRemove = this.suggested.findIndex(e => e.id === entity.id)
-        this.suggested.splice(indexToRemove, 1);
       },
       addNewEntity({ selected, modal }) {
           selected.forEach((item) => {
-                  this.$emit('addNewEntity', item.result);
+              this.$emit('addNewEntity', { entity: item.result });
             }, this
           );
           this.$refs.addPersons.resetSearch(); // to cast child method
@@ -121,8 +118,7 @@ export default {
           if (!this.$props.removableIfSet) {
               return;
           }
-          this.$emit('removeEntity', entity);
+          this.$emit('removeEntity',{ entity: entity, isSuggested: true });
-          this.suggested.push(entity);
       }
     },
 }

src/Bundle/ChillMainBundle/Resources/views/Form/fields.html.twig

@@ -249,7 +249,11 @@
 
 {% block pick_entity_dynamic_widget %}
     <input type="hidden" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value|escape('html_attr') }}" {% endif %} data-input-uniqid="{{ form.vars['uniqid'] }}"/>
-    <div data-module="pick-dynamic" data-types="{{ form.vars['types']|json_encode }}" data-multiple="{{ form.vars['multiple'] }}" data-uniqid="{{ form.vars['uniqid'] }}" data-suggested="{{ form.vars['suggested'] }}"></div>
+    <div data-module="pick-dynamic"
+         data-types="{{ form.vars['types']|json_encode }}"
+         data-multiple="{{ form.vars['multiple'] }}"
+         data-uniqid="{{ form.vars['uniqid'] }}"
+         data-suggested="{{ form.vars['suggested']|json_encode|escape('html_attr') }}"></div>
 {% endblock %}
 
 {% block pick_postal_code_widget %}

src/Bundle/ChillPersonBundle/Form/Type/PickPersonDynamicType.php

@@ -18,21 +18,25 @@ use Symfony\Component\Form\FormInterface;
 use Symfony\Component\Form\FormView;
 use Symfony\Component\OptionsResolver\OptionsResolver;
 use Symfony\Component\Serializer\Normalizer\DenormalizerInterface;
+use Symfony\Component\Serializer\Normalizer\NormalizerInterface;
 use Symfony\Component\Serializer\SerializerInterface;
 
 /**
- * Pick user dymically, using vuejs module "AddPerson".
+ * m* Pick user dymically, using vuejs module "AddPerson".
  */
 class PickPersonDynamicType extends AbstractType
 {
     private DenormalizerInterface $denormalizer;
 
+    private DenormalizerInterface $normalizer;
+
     private SerializerInterface $serializer;
 
-    public function __construct(DenormalizerInterface $denormalizer, SerializerInterface $serializer)
+    public function __construct(DenormalizerInterface $denormalizer, SerializerInterface $serializer, NormalizerInterface $normalizer)
     {
         $this->denormalizer = $denormalizer;
         $this->serializer = $serializer;
+        $this->normalizer = $normalizer;
     }
 
     public function buildForm(FormBuilderInterface $builder, array $options)
@@ -45,7 +49,10 @@ class PickPersonDynamicType extends AbstractType
         $view->vars['multiple'] = $options['multiple'];
         $view->vars['types'] = ['person'];
         $view->vars['uniqid'] = uniqid('pick_user_dyn');
-        $view->vars['suggested'] = $this->serializer->serialize($options['suggested'], 'json', ['groups' => 'read']);
+
+        foreach ($options['suggested'] as $person) {
+            $view->vars['suggested'][spl_object_hash($person)] = $this->normalizer->normalize($person, 'json', ['groups' => 'read']);
+        }
     }
 
     public function configureOptions(OptionsResolver $resolver)

src/Bundle/ChillThirdPartyBundle/Form/Type/PickThirdpartyDynamicType.php

@@ -18,6 +18,7 @@ use Symfony\Component\Form\FormInterface;
 use Symfony\Component\Form\FormView;
 use Symfony\Component\OptionsResolver\OptionsResolver;
 use Symfony\Component\Serializer\Normalizer\DenormalizerInterface;
+use Symfony\Component\Serializer\Normalizer\NormalizerInterface;
 use Symfony\Component\Serializer\SerializerInterface;
 
 /**
@@ -27,12 +28,15 @@ class PickThirdpartyDynamicType extends AbstractType
 {
     private DenormalizerInterface $denormalizer;
 
+    private NormalizerInterface $normalizer;
+
     private SerializerInterface $serializer;
 
-    public function __construct(DenormalizerInterface $denormalizer, SerializerInterface $serializer)
+    public function __construct(DenormalizerInterface $denormalizer, SerializerInterface $serializer, NormalizerInterface $normalizer)
     {
         $this->denormalizer = $denormalizer;
         $this->serializer = $serializer;
+        $this->normalizer = $normalizer;
     }
 
     public function buildForm(FormBuilderInterface $builder, array $options)
@@ -45,7 +49,10 @@ class PickThirdpartyDynamicType extends AbstractType
         $view->vars['multiple'] = $options['multiple'];
         $view->vars['types'] = ['thirdparty'];
         $view->vars['uniqid'] = uniqid('pick_user_dyn');
-        $view->vars['suggested'] = $this->serializer->serialize($options['suggested'], 'json', ['groups' => 'read']);
+
+        foreach ($options['suggested'] as $tp) {
+            $view->vars['suggested'][spl_object_hash($tp)] = $this->normalizer->normalize($tp, 'json', ['groups' => 'read']);
+        }
     }
 
     public function configureOptions(OptionsResolver $resolver)