show users as suggestions, not in constrained list

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

@@ -170,11 +170,8 @@ const postSocialIssue = (id, body, method) => {
 
 const getUsers = () => {
    const url = `/api/1.0/main/user.json`;
-   return fetch(url)
-      .then(response => {
-         if (response.ok) { return response.json(); }
-         throw { msg: 'Error while retriving users.', sta: response.status, txt: response.statusText, err: new Error(), body: response.body };
-      });
+
+   return fetchResults(url);
 };
 
 const whoami = () => {
@@ -235,8 +232,8 @@ const removeScope = (id, scope) => {
     });
 };
 
-const getAvailableReferrals = (course) => {
-  const url = `/api/1.0/person/accompanying-course/${course.id}/referral-availables.json`;
+const getReferrersSuggested = (course) => {
+  const url = `/api/1.0/person/accompanying-course/${course.id}/referrers-suggested.json`;
 
   return fetchResults(url);
 }
@@ -255,5 +252,5 @@ export {
    postSocialIssue,
    addScope,
    removeScope,
-   getAvailableReferrals
+   getReferrersSuggested,
 };

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

@@ -15,9 +15,20 @@
          v-bind:searchable="true"
          v-bind:placeholder="$t('referrer.placeholder')"
          v-model="value"
-         v-bind:options="referrersAvailable"
+         v-bind:options="users"
          @select="updateReferrer">
       </VueMultiselect>
+
+
+      <template v-if="referrersSuggested.length > 0">
+        <ul>
+          <li v-for="u in referrersSuggested" @click="updateReferrer(u)">
+            <user-render-box-badge :user="u"></user-render-box-badge>
+          </li>
+        </ul>
+      </template>
+
+
    </div>
 
    <div>
@@ -41,14 +52,26 @@
 import VueMultiselect from 'vue-multiselect';
 import { getUsers, whoami } from '../api';
 import { mapState } from 'vuex';
+import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge";
 
 export default {
    name: "Referrer",
-   components: { VueMultiselect },
+   components: {
+     UserRenderBoxBadge,
+     VueMultiselect,
+   },
    computed: {
       ...mapState({
          value: state => state.accompanyingCourse.user,
-         referrersAvailable: state => state.referrersAvailable,
+         users: state => state.users,
+         referrersSuggested: state => {
+           return state.referrersSuggested.filter(u => {
+             if (null === state.accompanyingCourse.user) {
+               return true;
+             }
+             return state.accompanyingCourse.user.id !== u.id;
+           })
+         },
       }),
    },
    methods: {

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

@@ -10,7 +10,8 @@ import { getAccompanyingCourse,
    postSocialIssue,
    addScope,
    removeScope,
-   getAvailableReferrals,
+   getReferrersSuggested,
+   getUsers,
 } from '../api';
 import { patchPerson } from "ChillPersonAssets/vuejs/_api/OnTheFly";
 import { patchThirdparty } from "ChillThirdPartyAssets/vuejs/_api/OnTheFly";
@@ -40,7 +41,9 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
             // the scope states at server side
             scopesAtBackend: accompanyingCourse.scopes.map(scope => scope),
             // the users which are available for referrer
-            referrersAvailable: [],
+            referrersSuggested: [],
+            // all the users available
+            users: [],
          },
          getters: {
             isParticipationValid(state) {
@@ -173,8 +176,15 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                //console.log('value', value);
                state.accompanyingCourse.user = value;
             },
-            setReferrersAvailables(state, users) {
-               state.referrersAvailable = users;
+            setReferrersSuggested(state, users) {
+               state.referrersSuggested = users.map(u => {
+                  if (state.accompanyingCourse.user !== null) {
+                     if (state.accompanyingCourse.user.id === u.id) {
+                        return state.accompanyingCourse.user;
+                     }
+                  }
+                  return u;
+               });
             },
             confirmAccompanyingCourse(state, response) {
                //console.log('### mutation: confirmAccompanyingCourse: response', response);
@@ -184,6 +194,16 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                //console.log('define location context');
                state.addressContext = context;
             },
+            setUsers(state, users) {
+               state.users = users.map(u => {
+                  if (state.accompanyingCourse.user !== null) {
+                     if (state.accompanyingCourse.user.id === u.id) {
+                        return state.accompanyingCourse.user;
+                     }
+                  }
+                  return u;
+               });
+            },
             updateLocation(state, r) {
                //console.log('### mutation: set location attributes', r);
                state.accompanyingCourse.locationStatus = r.locationStatus;
@@ -397,14 +417,14 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                      commit('setScopes', scopes);
                      return Promise.resolve();
                   }).then(() => {
-                     return dispatch('fetchReferrersAvailable');
+                     return dispatch('fetchReferrersSuggested');
                   });
                } else {
                   return dispatch('setScopes', state.scopesAtStart).then(() => {
                      commit('setScopes', scopes);
                      return Promise.resolve();
                   }).then(() => {
-                     return dispatch('fetchReferrersAvailable');
+                     return dispatch('fetchReferrersSuggested');
                   });
                }
             },
@@ -458,7 +478,7 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                   return getAccompanyingCourse(state.accompanyingCourse.id);
                }).then(accompanying_course => {
                   commit('refreshSocialIssues', accompanying_course.socialIssues);
-                  dispatch('fetchReferrersAvailable');
+                  dispatch('fetchReferrersSuggested');
                })
                    .catch((error) => { commit('catchError', error) });
             },
@@ -476,20 +496,23 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                   resolve();
                })).catch((error) => { commit('catchError', error) });
             },
-            async fetchReferrersAvailable({ state, commit}) {
-               let users = await getAvailableReferrals(state.accompanyingCourse);
-               commit('setReferrersAvailables', users);
-               let userIds = users.map(u => u.id);
+            async fetchReferrersSuggested({ state, commit}) {
+               let users = await getReferrersSuggested(state.accompanyingCourse);
+               commit('setReferrersSuggested', users);
                if (
-                 null !== state.accompanyingCourse.user
+                 null === state.accompanyingCourse.user
                  && !state.accompanyingCourse.confidential
                  && !state.accompanyingCourse.step === 'DRAFT'
+                 && users.length === 1
                ) {
-                  if (!userIds.include(state.accompanyingCourse.user.id)) {
-                     commit('updateReferrer', null);
-                  }
+                  // set the user if unique
+                  commit('updateReferrer', users[0]);
                }
             },
+            async fetchUsers({commit}) {
+               let users = await getUsers();
+               commit('setUsers', users);
+            },
             updateLocation({ commit, dispatch }, payload) {
                //console.log('## action: updateLocation', payload.locationStatusTo);
                let body = { 'type': payload.target, 'id': payload.targetId };
@@ -512,7 +535,7 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                         personLocation: accompanyingCourse.personLocation
                      });
                      resolve();
-                     dispatch('fetchReferrersAvailable');
+                     dispatch('fetchReferrersSuggested');
                   })).catch((error) => { commit('catchError', error) });
             },
             confirmAccompanyingCourse({ commit }) {
@@ -528,7 +551,8 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
          }
       });
 
-      store.dispatch('fetchReferrersAvailable');
+      store.dispatch('fetchReferrersSuggested');
+      store.dispatch('fetchUsers');
       resolve(store);
    }));