add and remove requestor functions

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js

@@ -28,7 +28,36 @@ const postParticipation = (id, person_id, method) => {
          headers: {
            'Content-Type': 'application/json;charset=utf-8'
          },
-         body: JSON.stringify({id: person_id})
+         body: JSON.stringify({person_id: person_id})
+      })
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response'); 
+      });
+};
+
+/*
+* Endpoint v.2 chill_api_single_accompanying_course_requestor, 
+* method POST/DELETE, add/close a requestor to the accompanyingCourse
+*
+*  @id               integer - id of accompanyingCourse
+*  @payload          object of type person|thirdparty
+*  @method           string - POST or DELETE
+*/
+const postRequestor = (id, payload, method) => {
+   const body = {};
+   if (payload !== null) {
+      const typeId = `${payload.result.type}_id`;
+      body[typeId] = payload.result[typeId];
+   };
+   console.log(body);
+   const url = `/api/1.0/person/accompanying-course/${id}/requestor.json`;
+   return fetch(url, {
+         method: method,
+         headers: {
+           'Content-Type': 'application/json;charset=utf-8'
+         },
+         body: JSON.stringify(body)
       })
       .then(response => {
          if (response.ok) { return response.json(); }
@@ -38,5 +67,6 @@ const postParticipation = (id, person_id, method) => {
 
 export { 
    getAccompanyingCourse, 
-   postParticipation 
+   postParticipation,
+   postRequestor 
 };

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue

@@ -4,33 +4,36 @@
    <h3>{{ $t('requestor.title') }}</h3>
    
    <div v-if="accompanyingCourse.requestor">
-      <dt>{{ $t('requestor.person_id') }}</dt>   
-         <dd>{{ accompanyingCourse.requestor.person_id }}</dd>
+      
       <dt>{{ $t('requestor.type') }}</dt>   
          <dd>{{ accompanyingCourse.requestor.type }}</dd>
       <dt>{{ $t('requestor.text') }}</dt>   
          <dd>{{ accompanyingCourse.requestor.text }}</dd>
-      <dt>{{ $t('requestor.firstName') }}</dt>   
-         <dd>{{ accompanyingCourse.requestor.firstName }}</dd>
-      <dt>{{ $t('requestor.lastName') }}</dt>   
-         <dd>{{ accompanyingCourse.requestor.lastName }}</dd>
-      <dt>{{ $t('requestor.phonenumber') }}</dt>   
-         <dd>{{ accompanyingCourse.requestor.phonenumber }}</dd>
-      <dt>{{ $t('requestor.mobilenumber') }}</dt>   
-         <dd>{{ accompanyingCourse.requestor.mobilenumber }}</dd>
-      <dt>{{ $t('requestor.altNames') }}</dt>   
-         <dd>{{ accompanyingCourse.requestor.altNames }}</dd>
       <dt>{{ $t('requestor.anonymous') }}</dt>
          <dd>{{ accompanyingCourse.requestorAnonymous }}</dd>
          
       <div v-if="accompanyingCourse.requestor.type === 'person'">
+         <dt>{{ $t('requestor.person_id') }}</dt>   
+            <dd>{{ accompanyingCourse.requestor.person_id }}</dd>
          <dt>{{ $t('requestor.birthdate') }}</dt>   
             <dd>{{ $d(accompanyingCourse.requestor.birthdate.datetime, 'short') }}</dd>
          <dt>{{ $t('requestor.center') }}</dt>   
             <dd>{{ accompanyingCourse.requestor.center.name }}</dd>
+         <dt>{{ $t('requestor.firstName') }}</dt>   
+            <dd>{{ accompanyingCourse.requestor.firstName }}</dd>
+         <dt>{{ $t('requestor.lastName') }}</dt>   
+            <dd>{{ accompanyingCourse.requestor.lastName }}</dd>
+         <dt>{{ $t('requestor.phonenumber') }}</dt>   
+            <dd>{{ accompanyingCourse.requestor.phonenumber }}</dd>
+         <dt>{{ $t('requestor.mobilenumber') }}</dt>   
+            <dd>{{ accompanyingCourse.requestor.mobilenumber }}</dd>
+         <dt>{{ $t('requestor.altNames') }}</dt>   
+            <dd>{{ accompanyingCourse.requestor.altNames }}</dd>
       </div>
       
       <div v-if="accompanyingCourse.requestor.type === 'thirdparty'">
+         <dt>{{ $t('requestor.person_id') }}</dt>   
+            <dd>{{ accompanyingCourse.requestor.thirdparty_id }}</dd>
          <dt>{{ $t('requestor.address') }}</dt>
             <dd>{{ accompanyingCourse.requestor.address.text }}</dd>
          <dt>{{ $t('requestor.location') }}</dt>
@@ -38,7 +41,14 @@
       </div>
    </div>
    
-   <add-persons 
+   <button class="sc-button bt-delete"
+      v-if="accompanyingCourse.requestor !== null"
+      :title="$t('action.remove')" 
+      @click="removeRequestor">
+   </button>
+   
+   <add-persons
+      v-if="accompanyingCourse.requestor === null"
       buttonTitle="requestor.add_requestor"
       v-bind:key="addPersons.key"
       v-bind:options="addPersons.options"
@@ -75,6 +85,10 @@ export default {
       }
    },
    methods: {
+      removeRequestor() {
+         console.log('@@ CLICK remove requestor: item');
+         this.$store.dispatch('removeRequestor');
+      },
       addNewPersons({ selected, modal }) {
          console.log('@@@ CLICK button addNewPersons', selected);
          selected.forEach(function(item) {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js

@@ -1,6 +1,6 @@
 import 'es6-promise/auto';
 import { createStore } from 'vuex';
-import { getAccompanyingCourse, postParticipation } from '../api';
+import { getAccompanyingCourse, postParticipation, postRequestor } from '../api';
 
 const debug = process.env.NODE_ENV !== 'production';
 const id = window.accompanyingCourseId;
@@ -34,9 +34,13 @@ let initPromise = getAccompanyingCourse(id)
                //console.log('### mutation: add participation', participation);
                state.accompanyingCourse.participations.push(participation);
             },
+            removeRequestor(state) {
+               state.accompanyingCourse.requestor = null;
+            },
             addRequestor(state, requestor) {
                console.log(requestor);
-            },
+               state.accompanyingCourse.requestor = requestor;
+            }
          },
          actions: {
             removeParticipation({ commit }, payload) {
@@ -58,7 +62,16 @@ let initPromise = getAccompanyingCourse(id)
                postParticipation(id, payload.result.person_id, 'POST')
                   .then(participation => new Promise((resolve, reject) => {
                      commit('addParticipation', participation);
-                     //addPersons.commit('resetState', payload);
+                     resolve();
+                  }))
+                  .catch((error) => { 
+                     state.errorMsg.push(error.message); 
+                  }); 
+            },
+            removeRequestor({ commit }) {
+               postRequestor(id, null, 'DELETE')
+                  .then(requestor => new Promise((resolve, reject) => {
+                     commit('removeRequestor');
                      resolve();
                   }))
                   .catch((error) => { 
@@ -67,7 +80,14 @@ let initPromise = getAccompanyingCourse(id)
             },
             addRequestor({ commit }, payload) {
                console.log(payload);
-               commit('addRequestor', payload);
+               postRequestor(id, payload, 'POST')
+                  .then(requestor => new Promise((resolve, reject) => {
+                     commit('addRequestor', requestor);
+                     resolve();
+                  }))
+                  .catch((error) => { 
+                     state.errorMsg.push(error.message); 
+                  }); 
             }
          }
       });