Adding question tab on sideBar

src/features/ePocFlow/ePocFlow.vue

@@ -37,13 +37,15 @@ const onDrop = (event) => {
 
     const data = event.dataTransfer.getData('sideAction');
 
+    console.log(data);
+
     const actions = JSON.parse(data);
 
     if(actions.length > 1) {
         addNode(position, actions);
     } else {
         if(!addToExistingScreen(actions)) {
-            addNode(position, actions);
+            addNode(position, [actions]);
         }
     }
 
@@ -99,7 +101,12 @@ function addNode(position, actions: SideAction[]) {
 function addToExistingScreen(action : SideAction):boolean {
     for(let node of nodes.value) {
         if(node.data.readyToDrop) {
-            node.data.icons.push(action.icon);
+            node.data.elements.push({
+                id: editorStore.generateId(),
+                action: action,
+                form: editorStore.getForm(action.type),
+                parentId: node.id
+            });
             node.data.readyToDrop = false;
             document.querySelector('#node'+node.id).classList.remove('node-animate');
             return true;

src/features/sideBar/components/ModelMenuV0.vue

@@ -2,12 +2,14 @@
 import ScreenNode from './ScreenNode.vue';
 import { useEditorStore } from '../../../shared/stores';
 import { Ref, ref } from 'vue';
-import { Screen } from '../../../shared/interfaces';
+import { Screen, SideAction } from '../../../shared/interfaces';
+import SideActionButtonV0 from './SideActionButtonV0.vue';
 
 const editorStore = useEditorStore();
 
 const emit = defineEmits<{
     (e: 'dragStart', { event , sideAction }): void;
+    (e: 'dragStartQuestion', { event, sideAction }): void;
 }>();
 
 const rightCol: Ref<Screen[]> = ref([]);
@@ -17,10 +19,19 @@ editorStore.getSelectedScreens.forEach((screen: Screen, index) => {
     index % 2 === 0 ? leftCol.value.push(screen) : rightCol.value.push(screen); 
 });
 
+const questionsRight: Ref<SideAction[]> = ref([]);
+const questionsLeft: Ref<SideAction[]> = ref([]);
+
+editorStore.questions.forEach((sideAction: SideAction, index) => {
+    index % 2 === 0 ? questionsLeft.value.push(sideAction) : questionsRight.value.push(sideAction); 
+});
+
 function dragStart(event, screen) {
     emit('dragStart',{ event: event, sideAction: screen.actions});
 }
 
+const displayScreen = ref(false);
+
 </script>
 
 <template>
@@ -28,7 +39,11 @@ function dragStart(event, screen) {
         <div class="top">
             <h3>Modèles d'écrans</h3>
         </div>
-        <div class="screens">
+        <div class="tab">
+            <button :class="{'tab-button-active': displayScreen }" class="tab-button tab-button-left" @click="displayScreen = true">Contenu</button>
+            <button :class="{'tab-button-active': !displayScreen }" class="tab-button tab-button-right" @click="displayScreen = false">Questions</button>
+        </div>
+        <div v-if="displayScreen" class="screens">
             <div class="col-left">
                 <ScreenNode 
                     v-for="(screen, index) of leftCol"
@@ -48,6 +63,22 @@ function dragStart(event, screen) {
                 />
             </div>
         </div>
+        <div v-else class="questions">
+            <div class="col-left">
+                <SideActionButtonV0
+                    v-for="question in questionsLeft"
+                    :key="question.type"
+                    :side-action="question"
+                />
+            </div>
+            <div class="col-right">
+                <SideActionButtonV0
+                    v-for="question in questionsRight"
+                    :key="question.type"
+                    :side-action="question"
+                />
+            </div>
+        </div>
     </div>
 </template>
 
@@ -78,8 +109,48 @@ function dragStart(event, screen) {
         }
     }
 
+    .questions {
+        margin: 1.5rem 2.61rem;
+        display: flex;
+        flex-direction: row;
+        .col {
+            flex-direction: column;
+            &-left {
+                margin-right: 3.5rem;
+            }
+        }
+    }
+
     .top {
         margin: 1.5rem;
     }
+
+    .tab {
+        background-color: var(--item-background);
+        padding: 1rem 1.6rem;
+        border-top: 1px solid var(--border);
+        border-bottom: 1px solid var(--border);
+
+        &-button {
+            background-color: var(--background);
+            border: none;
+            color: var(--text);
+            padding: .5rem 1.5rem;
+            cursor: pointer;
+            
+            &-left {
+                border-radius: 8px 0 0 8px;
+            }
+
+            &-right {
+                border-radius: 0 8px 8px 0;
+            }
+
+            &-active {
+                background-color: var(--editor-grayblue);
+                color: white;
+            }
+        }
+    }
 }
 </style>
\ No newline at end of file

src/features/sideBar/components/ScreenNode.vue

 <script setup lang="ts">
 import { SideAction } from '../../../shared/interfaces';
 import ContentButton from '../../../components/ContentButton.vue';
+import { ref } from 'vue';
 
 defineProps<{
     title: string;
     sideActions: SideAction[];
 }>();
 
+const dragging = ref(false);
+
 const emit = defineEmits<{
     (e: 'dragStart', event): void;
 }>();
 
 function dragStart(event) {
     emit('dragStart', event);
+    dragging.value = true;
 }
 
 </script>
 
 <template>
-    <div class="screen">
-        <small editable="true">{{ title }}</small>
-        <div class="node screen-node" draggable="true" @dragstart="dragStart($event)">
+    <div class="screen" :class="{ 'dragging': dragging }">
+        <small>{{ title }}</small>
+        <div
+            class="node screen-node"
+            draggable="true"
+            @dragstart="dragStart($event)"
+            @dragend="dragging = false"
+        >
             <ContentButton
                 v-for="action of sideActions"
                 :key="action.type"
@@ -40,5 +49,9 @@ function dragStart(event) {
     margin-bottom: 1.5rem;
     transform: translate(0, 0);
     cursor: grab !important;
+    transition: opacity .1s ease-in-out;
+    &.dragging {
+        opacity: .5;
+    }
 }
 </style>
\ No newline at end of file

src/features/sideBar/components/SideActionButtonV0.vue

+<script setup lang="ts">
+import { SideAction } from '../../../shared/interfaces';
+import { useEditorStore } from '../../../shared/stores';
+import { ref } from 'vue';
+import ContentButton from '../../../components/ContentButton.vue';
+
+defineProps<{
+    sideAction:SideAction;
+}>();
+
+const classList = { 'btn-content-blue': true };
+
+const dragging = ref(false);
+
+function dragStart(event, sideAction) {
+    event.dataTransfer.dropEffect= 'move';
+    event.dataTransfer.effectAllowed= 'move';
+    event.dataTransfer.setData('sideAction', JSON.stringify(sideAction));
+}
+
+</script>
+
+<template>
+    <ContentButton
+        class="question"
+        :class="{ 'dragging' : dragging }"
+        :icon="sideAction.icon"
+        :class-list="classList"
+        :is-active="false"
+        :is-draggable="true"
+        @dragstart="dragStart($event, sideAction)"
+        @dragend="dragging = false"
+    />
+</template>
+
+<style scoped lang="scss">
+
+.dragging {
+    transition: opacity .1s ease-in-out;
+    opacity: .5;
+}
+
+.question {
+    margin-bottom: 1.5rem;
+}
+
+</style>
\ No newline at end of file

src/shared/stores/editorStore.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import { fetchRecentProjects } from '../services';
 import { SideAction, Screen, ePocProject, NodeElement, Form } from '../interfaces';
 import { toRaw } from 'vue';
-import { GraphNode, NodeChange, applyNodeChanges, useVueFlow } from '@vue-flow/core';
+import { NodeChange, applyNodeChanges, useVueFlow } from '@vue-flow/core';
 
 interface EditorState {
     recentProjects: ePocProject[];
@@ -15,7 +15,7 @@ interface EditorState {
         openedScreen: Screen;
     };
     sideActions: SideAction[];
-    subSideActions: SideAction[];
+    questions: SideAction[];
     standardScreens: Screen[];
     forms: Form[];
 }
@@ -32,7 +32,7 @@ export const useEditorStore = defineStore('editor', {
             openedScreen: null
         },
         sideActions: actionItems,
-        subSideActions: subActions,
+        questions: questions,
         standardScreens: standardScreen,
         forms: forms,
     }),
@@ -152,7 +152,7 @@ const actionItems: SideAction[] = [
     }
 ];
 
-const subActions: SideAction[] = [
+const questions: SideAction[] = [
     {
         icon: 'icon-qcm',
         type: 'qcm'