Adding an unrelated to issue to an accompanyingCourseWork

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue

@@ -5,24 +5,47 @@
 
   <div id="awc_create_form">
 
-    <div id="picking">
-      <p>{{ $t('pick_social_issue_linked_with_action') }}</p>
-
-      <div v-for="si in socialIssues">
-        <input type="radio" v-bind:value="si.id" name="socialIssue" v-model="socialIssuePicked"><span class="badge bg-chill-l-gray text-dark">{{ si.text }}</span>
+      <div id="picking">
+          <p>{{ $t('pick_social_issue_linked_with_action') }}</p>
+          <div v-for="si in socialIssues">
+            <input type="radio" checked v-bind:value="si.id" name="socialIssue" v-model="socialIssuePicked"><span class="badge bg-chill-l-gray text-dark">{{ si.text }}</span>
+          </div>
+      <div class="my-3">
+        <div class="col-8">
+          <vue-multiselect
+              name="otherIssues"
+              label="text"
+              track-by="id"
+              open-direction="bottom"
+              :close-on-select="true"
+              :preserve-search="false"
+              :reset-after="true"
+              :hide-selected="true"
+              :taggable="false"
+              :multiple="false"
+              :searchable="true"
+              :allow-empty="true"
+              :show-labels="false"
+              :loading="issueIsLoading"
+              :placeholder="$t('action.choose_other_social_issue')"
+              :options="socialIssuesOther"
+              @select="addIssueInList">
+          </vue-multiselect>
+        </div>
       </div>
-
       <div v-if="hasSocialIssuePicked">
         <h2>{{ $t('pick_an_action') }}</h2>
-        <vue-multiselect
-          v-model="socialActionPicked"
-          label="text"
-          :options="socialActionsReachables"
-          :searchable="true"
-          :close-on-select="true"
-          :show-labels="true"
-          track-by="id"
-        ></vue-multiselect>
+        <div class="col-8">
+          <vue-multiselect
+            v-model="socialActionPicked"
+            label="text"
+            :options="socialActionsReachables"
+            :searchable="true"
+            :close-on-select="true"
+            :show-labels="true"
+            track-by="id"
+          ></vue-multiselect>
+        </div>
       </div>
 
       <div v-if="isLoadingSocialActions">
@@ -63,9 +86,9 @@
       <div>
         <ul class="record_actions">
           <li class="cancel">
-            <a href="#" class="btn btn-cancel">
+            <button class="btn btn-cancel" @click="goToPrevious">
               {{ $t('action.cancel') }}
-            </a>
+            </button>
           </li>
           <li v-if="hasSocialActionPicked">
             <button class="btn btn-save" v-show="!isPostingWork" @click="submit">
@@ -82,43 +105,7 @@
 
 </template>
 
-<style lang="scss">
 
-#awc_create_form {
-  display: grid;
-  grid-template-areas:
-    "picking picking"
-    "start_date end_date"
-    "confirm confirm"
-    ;
-  grid-template-columns: 50% 50%;
-  column-gap: 1.5rem;
-
-  #picking {
-    grid-area: picking;
-
-    #persons {
-      ul {
-        padding: 0;
-
-        list-style-type: none;
-      }
-    }
-  }
-
-  #start_date {
-    grid-area: start_date;
-  }
-
-  #end_date {
-    grid-area: end_date;
-  }
-
-  #confirm {
-    grid-area: confirm;
-  }
-}
-</style>
 
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
@@ -145,17 +132,38 @@ export default {
   name: 'App',
   components: {
     VueMultiselect,
-     PersonRenderBox,
+    PersonRenderBox,
   },
   methods: {
     submit() {
-      this.$store.dispatch('submit');
-    }
+      this.$store.dispatch('submit')
+          .catch(({name, violations}) => {
+          if (name === 'ValidationException' || name === 'AccessException') {
+            violations.forEach((violation) => this.$toast.open({message: violation}));
+          } else {
+            this.$toast.open({message: 'An error occurred'})
+          }
+      });
+    },
+    addIssueInList(value) {
+      this.$store.commit('addIssueInList', value);
+      this.$store.commit('removeIssueInOther', value);
+      this.$store.dispatch('pickSocialIssue', value.id);
+    },
+    goToPrevious() {
+      let params = new URLSearchParams(window.location.search);
+      if (params.has('returnPath')) {
+        window.location.replace(params.get('returnPath'));
+      } else {
+        return;
+      }
+    },
   },
   i18n,
   computed: {
     ...mapState([
       'socialIssues',
+      'socialIssuesOther',
       'socialActionsReachables',
       'errors',
       'personsReachables',
@@ -170,12 +178,12 @@ export default {
     personsPicked: {
       get() {
         let s = this.$store.state.personsPicked.map(p => p.id);
-        console.log('persons picked', s);
+        // console.log('persons picked', s);
 
         return s;
       },
       set(v) {
-        console.log('persons picked', v);
+        // console.log('persons picked', v);
         this.$store.commit('setPersonsPickedIds', v);
       }
     },
@@ -228,10 +236,48 @@ export default {
 @import 'ChillPersonAssets/chill/scss/mixins';
 @import 'ChillMainAssets/chill/scss/chill_variables';
 span.badge {
-   @include badge_social($social-issue-color);
-   font-size: 95%;
-   margin-bottom: 5px;
-   margin-right: 1em;
-   margin-left: 1em;
+  @include badge_social($social-issue-color);
+  font-size: 95%;
+  margin-bottom: 5px;
+  margin-right: 1em;
+  margin-left: 1em;
+}
+</style>
+
+<style lang="scss">
+
+#awc_create_form {
+  display: grid;
+  grid-template-areas:
+    "picking picking"
+    "start_date end_date"
+    "confirm confirm"
+    ;
+  grid-template-columns: 50% 50%;
+  column-gap: 1.5rem;
+
+  #picking {
+    grid-area: picking;
+
+    #persons {
+      ul {
+        padding: 0;
+
+        list-style-type: none;
+      }
+    }
+  }
+
+  #start_date {
+    grid-area: start_date;
+  }
+
+  #end_date {
+    grid-area: end_date;
+  }
+
+  #confirm {
+    grid-area: confirm;
+  }
 }
 </style>