Ajoute une liste de nouvelles non classés à droite qui disparaît lors…

…qu'elle est vide

Co-authored-by: Clément Prod'homme <clement@captive.fr>

src/situations/cafe_de_la_place/styles/puzzle.scss

@@ -1,38 +1,54 @@
 @import 'commun/styles/variables.scss';
 
-.puzzle {
+@mixin puzzle {
   position: absolute;
   top: 32px;
-  left: 32px;
   width: 456px;
   padding: 4.25rem 1.5rem;
+}
 
-  .puzzle-item {
-    display: flex;
-    font-size: .875rem;
-    line-height: 1.125rem;
-    padding: .25rem .625rem;
-    background: $couleur-fond;
-    border: 1px solid $bleu-gris;
-    box-shadow: 0px 0px 8px rgba(30, 65, 106, 0.25);
-    border-radius: .25rem;
-    margin-bottom: 0.5rem;
-    cursor: grab;
+.puzzle-gauche {
+  @include puzzle();
+  left: 32px;
+  height: 100%;
+}
 
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
+.puzzle-droite {
+  @include puzzle();
+  right: 32px;
+  padding: 1.5rem;
+  height: 494px;
+  width: 456px;
+  z-index: 1;
+  background: $couleur-fond;
+  border-radius: 1rem;
+}
+
+.puzzle-item {
+  display: flex;
+  font-size: .875rem;
+  line-height: 1.125rem;
+  padding: .25rem .625rem;
+  background: $couleur-fond;
+  border: 1px solid $bleu-gris;
+  box-shadow: 0px 0px 8px rgba(30, 65, 106, 0.25);
+  border-radius: .25rem;
+  margin-bottom: 0.5rem;
+  cursor: grab;
 
-  .puzzle-item.sortable-chosen {
+  &.sortable-chosen {
     cursor: grabbing;
     background: $bleu-fonce;
     color: $blanc;
   }
 
-  .puzzle-icone {
-    display: flex;
-    align-items: center;
-    margin-right: .625rem;
+  &:last-child {
+    margin-bottom: 0;
   }
 }
+
+.puzzle-icone {
+  display: flex;
+  align-items: center;
+  margin-right: .625rem;
+}

src/situations/cafe_de_la_place/vues/components/puzzle.vue

@@ -1,8 +1,34 @@
 <template>
-  <div class="puzzle">
-    <draggable v-model="nouvellesDuJour" :list="nouvellesDuJour" @end="envoiReponse">
+  <div class="puzzle-container">
+    <draggable class="puzzle-gauche" :list="nouvellesDuJourClassees" group="nouvelles">
       <div
-        v-for="nouvelle in nouvellesDuJour"
+        v-for="nouvelle in nouvellesDuJourClassees"
+        :key="nouvelle.id"
+        class="puzzle-item"
+      >
+        <div class="puzzle-icone">
+          <svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="2" cy="2" r="2" fill="#D6DAEC"/>
+          <circle cx="2" cy="10" r="2" fill="#D6DAEC"/>
+          <circle cx="2" cy="18" r="2" fill="#D6DAEC"/>
+          <circle cx="10" cy="18" r="2" fill="#D6DAEC"/>
+          <circle cx="10" cy="10" r="2" fill="#D6DAEC"/>
+          <circle cx="10" cy="2" r="2" fill="#D6DAEC"/>
+          </svg>
+        </div>
+        <span>{{nouvelle.contenu}}</span>
+      </div>
+    </draggable>
+    <draggable
+      v-if="affichePuzzleDroite"
+      class="puzzle-droite"
+      :list="nouvellesDuJourNonClassees"
+      group="nouvelles"
+      @end="envoiReponse"
+      :sort="false"
+    >
+      <div
+        v-for="nouvelle in nouvellesDuJourNonClassees"
         :key="nouvelle.id"
         class="puzzle-item"
       >
@@ -30,18 +56,24 @@ import draggable from 'vuedraggable';
 export default {
   components: { draggable },
 
+  data() {
+    return {
+      nouvellesDuJourClassees: []
+    };
+  },
+
   computed: {
     ...mapGetters(['nouvellesDuJourNonClassees']),
 
-    nouvellesDuJour() {
-      return this.nouvellesDuJourNonClassees;
+    affichePuzzleDroite () {
+      return this.nouvellesDuJourNonClassees.length !== 0;
     }
   },
 
   methods: {
     envoiReponse() {
-      this.$emit('reponse', this.nouvellesDuJour );
-    },
+      this.$emit('reponse', this.nouvellesDuJourClassees );
+    }
   }
 };
 </script>

tests/situations/cafe_de_la_place/vues/components/puzzle.test.js

@@ -0,0 +1,46 @@
+import puzzle from 'cafe_de_la_place/vues/components/puzzle.vue';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+
+describe('Le composant Puzzle', function () {
+  let wrapper;
+  let localVue;
+  let store;
+
+  function composant() {
+    return shallowMount(puzzle, {
+      localVue,
+      store
+    });
+  }
+
+  function genereVue(nouvelles) {
+    store = new Vuex.Store({ getters: { nouvellesDuJourNonClassees () { return nouvelles; }}});
+    localVue = createLocalVue();
+    wrapper = composant({});
+  }
+
+  describe("quand il n'y a plus de nouvelles à classer", function () {
+    beforeEach(function () {
+      const nouvellesDuJourNonClassees = [];
+      genereVue(nouvellesDuJourNonClassees);
+    });
+
+    it("n'affiche plus le puzzle à droite", function () {
+      expect(wrapper.vm.affichePuzzleDroite).toEqual(false);
+      expect(wrapper.findComponent('.puzzle-droite').exists()).toBe(false);
+    });
+  });
+
+  describe("quand il y a des nouvelles à classer", function () {
+    beforeEach(function () {
+      const nouvellesDuJourNonClassees = [{ id: 'nouvelle_1', contenu: 'Ma super nouvelle !' }];
+      genereVue(nouvellesDuJourNonClassees);
+    });
+
+    it("affiche le puzzle à droite", function () {
+      expect(wrapper.vm.affichePuzzleDroite).toEqual(true);
+      expect(wrapper.findComponent('.puzzle-droite').exists()).toBe(true);
+    });
+  });
+});