Create 3rd paerty contact: close modal after creation and check for errors

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue

@@ -58,6 +58,7 @@
                   v-bind:search="search"
                   v-bind:type="checkUniq"
                   @saveFormOnTheFly="saveFormOnTheFly"
+                  @newPriorSuggestion="newPriorSuggestion"
                   @updateSelected="updateSelected">
                </person-suggestion>
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue

@@ -18,7 +18,7 @@
 
          <suggestion-third-party
             v-if="item.result.type === 'thirdparty'"
-            @saveFormOnTheFly="emitEvent"
+            @newPriorSuggestion="newPriorSuggestion"
             v-bind:item="item">
          </suggestion-third-party>
 
@@ -55,7 +55,7 @@ export default {
       'search',
       'type'
    ],
-   emits: ['updateSelected', 'saveFormOnTheFly'],
+   emits: ['updateSelected', 'newPriorSuggestion'],
    computed: {
       selected: {
          set(value) {
@@ -74,8 +74,8 @@ export default {
       setValueByType(value, type) {
          return (type === 'radio')? [value] : value;
       },
-      emitEvent({data, type}) {
-         this.$emit('saveFormOnTheFly', {type: type, data: data})
+      newPriorSuggestion(response) {
+         this.$emit('newPriorSuggestion', response)
       }
    }
 };

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="container tpartycontainer">
+      <div class="tparty-identification">
+        <span class="name">
+          {{ item.result.text }}&nbsp;
+        </span>
+        <span class="location">
+          <template v-if="hasAddress">
+            {{ getAddress.text }} -
+            {{ getAddress.postcode.name }}
+          </template>
+        </span>
+      </div>
+      <div class="tpartyparent" v-if="hasParent">
+        <span class="name">
+          > {{ item.result.parent.text }}
+        </span>
+      </div>
+    </div>
+
+    <div class="right_actions">
+      <badge-entity
+        :entity="item.result"
+        :options="{ displayLong: true }">
+      </badge-entity>
+      <on-the-fly v-if="item.result.kind === 'company'"
+          v-bind:parent="item.result"
+          @saveFormOnTheFly="saveFormOnTheFly"
+          action="addContact"
+          ref="onTheFly"
+      ></on-the-fly>
+      <on-the-fly
+          type="thirdparty"
+          v-bind:id="item.result.id"
+          action="show">
+      </on-the-fly>
+    </div>
+</template>
+
+<script>
+import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
+import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
+import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
+
+const i18n = {
+  messages: {
+    fr: {
+      thirdparty: {
+        contact: "Personne physique",
+        company: "Personne morale",
+        child: "Personne de contact"
+      }
+    }
+  }
+};
+
+export default {
+  name: 'SuggestionThirdParty',
+  components: {
+    OnTheFly,
+    BadgeEntity
+  },
+  props: ['item'],
+  emits: ['newPriorSuggestion'],
+  i18n,
+  computed: {
+    hasAddress() {
+      if (this.$props.item.result.address !== null) {
+        return true;
+      }
+      if (this.$props.item.result.parent !== null) {
+        this.$props.item.result.parent.address !== null;
+      }
+    },
+    hasParent() {
+      return this.$props.item.result.parent !== null;
+    },
+    getAddress() {
+      if (this.$props.item.result.address !== null) {
+        return this.$props.item.result.address;
+      }
+      if (this.$props.item.result.parent.address !== null) {
+        return this.$props.item.result.parent.address;
+      }
+
+      return null;
+    }
+  },
+  methods: {
+    saveFormOnTheFly({data, type}) {
+      makeFetch('POST', '/api/1.0/thirdparty/thirdparty.json', data)
+        .then(response => {
+            this.$emit('newPriorSuggestion', response);
+            this.$refs.onTheFly.closeModal();
+        })
+        .catch((error) => {
+            if (error.name === 'ValidationException') {
+              for (let v of error.violations) {
+                  this.$toast.open({message: v });
+              }
+            } else {
+              this.$toast.open({message: 'An error occurred'});
+            }
+        })
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tpartycontainer {
+ .tpartyparent {
+    .name {
+      font-weight: bold;
+      font-variant: all-small-caps;
+    }
+ }
+ .tparty-identification {
+   span:not(.name) {
+     margin-left: 0.5em;
+     opacity: 0.5;
+     font-size: 90%;
+     font-style: italic;
+   }
+ }
+}
+</style>