rename vue subfolder _components in components

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddResult.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="addResult" v-if="hasResult">
+    <p class="chill-no-data-statement" v-if="pickedResults.length ===0">
+      Aucun résultat associé
+    </p>
+    <ul class="list-results">
+      <li v-for="r in pickedResults" @click="removeResult(r)" class="badge bg-primary">
+        <i class="fa fa-times"></i>
+        {{ r.title.fr }}
+      </li>
+      <template v-if="isExpanded">
+        <li v-for="r in availableForCheckResults" @click="addResult(r)" class="badge bg-primary">
+          <i class="fa fa-plus"></i>
+          {{ r.title.fr }}
+        </li>
+      </template>
+    </ul>
+    <ul class="record_actions">
+      <li v-if="isExpanded">
+        <button @click="toggleSelect" class="btn btn-hide" >
+          <i class="fa fa-eye-slash"></i>
+          Masquer résultats et orientations disponibles
+        </button>
+      </li>
+      <li v-else>
+        <button @click="toggleSelect" class="btn btn-show">
+          Afficher résultats et orientations disponibles
+        </button>
+      </li>
+    </ul>
+  </div>
+  <div class="noResult" v-if="!hasResult">
+    <div class="chill-no-data-statement">
+      {{ $t('goal_has_no_result') }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+
+button.hide {
+  background-color: rgb(51, 77, 92);
+}
+
+ul.list-results {
+  list-style-type: none;
+  padding: 0;
+
+  li {
+    margin: 0.5rem;
+  }
+
+  li.badge {
+    padding-bottom: 0;
+    padding-top: 0;
+    padding-left: 0;
+
+    i.fa {
+      /*border-radius: 0.25rem; */
+      padding: 0.25rem;
+    }
+
+    i.fa-plus {
+      background-color: green;
+    }
+
+    i.fa-times {
+      background-color: red;
+      color: white;
+    }
+  }
+}
+
+</style>
+
+<script>
+
+const i18n = {
+  messages: {
+    fr: {
+      add_a_result: "Résultat - orientation disponibles",
+      goal_has_no_result: "Aucun résultat - orientation disponible",
+    }
+  }
+};
+
+export default {
+  name: "AddResult",
+  props: [ 'destination', 'goal' ],
+  i18n,
+  data() {
+    return {
+      isExpanded: false,
+    };
+  },
+  computed: {
+    hasResult() {
+      if (this.destination === 'action') {
+        return this.$store.state.resultsForAction.length > 0;
+      } else if (this.destination === 'goal') {
+        return this.$store.getters.resultsForGoal(this.goal).length > 0;
+      }
+
+      throw Error(`this.destination is not implemented: ${this.destination}`);
+    },
+    pickedResults() {
+      console.log('get checked');
+      console.log('this.destination', this.destination);
+      console.log('this.goal', this.goal);
+      if (this.destination === 'action') {
+        return this.$store.state.resultsPicked;
+      } else if (this.destination === 'goal') {
+        return this.$store.getters.resultsPickedForGoal(this.goal);
+      }
+
+      throw Error(`this.destination is not implemented: ${this.destination}`);
+    },
+    availableForCheckResults() {
+      console.log('availableForCheckResults');
+      console.log('this.destination', this.destination);
+      console.log('this.goal', this.goal);
+      if (this.destination === 'action') {
+        let pickedIds = this.$store.state.resultsPicked.map(r => r.id);
+        console.log('picked ids', pickedIds);
+
+        return this.$store.state.resultsForAction.filter(r => !pickedIds.includes(r.id));
+      } else if (this.destination === 'goal') {
+        console.log('results picked for goal', this.$store.getters.resultsPickedForGoal(this.goal));
+        let pickedIds = this.$store.getters.resultsPickedForGoal(this.goal).map(r => r.id);
+
+        return this.$store.getters.resultsForGoal(this.goal).filter(r => !pickedIds.includes(r.id));
+      }
+
+      throw Error(`this.destination is not implemented: ${this.destination}`);
+    }
+  },
+  methods: {
+    toggleSelect() {
+      this.isExpanded = !this.isExpanded; 
+    },
+    addResult(r) {
+      console.log('addResult', r);
+      if (this.destination === 'action') {
+        this.$store.commit('addResultPicked', r);
+        return;
+      } else if (this.destination === 'goal') {
+        this.$store.commit('addResultForGoalPicked', { goal: this.goal, result: r });
+        return;
+      }
+      throw Error(`this.destination is not implemented: ${this.destination}`);
+    },
+    removeResult(r) {
+      console.log('removeresult', r);
+      if (this.destination === 'action') {
+        this.$store.commit('removeResultPicked', r);
+        return;
+      } else if (this.destination === 'goal') {
+        this.$store.commit('removeResultForGoalPicked', { goal: this.goal, result: r });
+        return;
+      }
+      throw Error(`this.destination is not implemented: ${this.destination}`);
+    }
+  }
+}
+
+</script>