dropdown application

src/components/LayoutPanelComp.vue

@@ -59,9 +59,9 @@
       <!--Side compounds-->
 
       <div class="my-3">
-        <ParamDropDown  v-model="parameters.dropdown1" name="test" :items="itemStepSideCompounds"/>
+        <ParamDropDown  v-model="parameters.dropdown1" name="Treatment of side compounds" :items="itemStepSideCompounds"/>
         <HelpText :show-help="showHelp">
-          ...
+          ...TO DO
         </HelpText>
       </div>
 
@@ -76,6 +76,13 @@
 
       <!--MainChain-->
 
+      <div class="my-3">
+        <ParamDropDown  v-model="parameters.dropdown2" name="Clusters" :items="itemMainChain"/>
+        <HelpText :show-help="showHelp">
+          ...TO DO
+        </HelpText>
+      </div>
+
       <hr class="light-hr"><!--------------------------------------------->
 
       <!--Cycles-->
@@ -136,6 +143,7 @@ import { typeChoiceSelect, typeChoiceSlider } from '@/types/ChoiceTypes';
 
 // Helpers
 import {putAsDraggable} from '@/helpers/Draggable';
+import { SideCompoundSteps } from '@/types/ParamTypes';
 
 /////////////////////////////////////////////////////////////////////////////////
 //---------------------------- Component communication -------------------------
@@ -171,7 +179,7 @@ onMounted(() => {
 ///////////////////////////////////////////////////////////////////
 //---------------------------- Parameters -------------------------
 
-const defaultParameters = {number2:0, number1:1, boolean1:true,boolean2:true, dropdown1:0};
+const defaultParameters = {number2:0, number1:1, boolean1:true,boolean2:true, dropdown1:"No specific treatment", dropdown2:"No cluster"};
 
 const parameters=ref({...defaultParameters});
 
@@ -187,15 +195,44 @@ const choicesEdgesSideCompounds:typeChoiceSlider={
     2:"long"
 };
 
-const itemStepSideCompounds:typeChoiceSelect=[
-    "No specific treatment",
-    "Duplication",
-    "Removal",
-    "Application of a specific layout"
-];
+const stepSideCompounds:{[key:string]:number}={
+  "No specific treatment" :0,
+  "Duplication" :1,
+  "Removal" : 2,
+  "Application of a specific layout":3
+};
+
+const itemStepSideCompounds= Object.keys(stepSideCompounds);
+
+const mainChain:{[key:string]:number}={
+  "No cluster" :0,
+  "Smaller cluster" :1,
+  "Default cluster" : 2,
+  "Larger cluster":3
+};
+
+const itemMainChain= Object.keys(mainChain);
+
+// ---------- Translate  'real' parameter to user string parameter, or vice-versa
+
+function sideCompoundStepToParam(step:string) {
+  const stepNumber:number=stepSideCompounds[step];
+  switch(stepNumber){
+    case 1:
+      break;
+    case 2:
+      break;
+    case 3:
+      break;
+    default:
+      break
+  }
+}
+
+// for main chain steps....
 
 ///////////////////////////////////////////////////////////////////
-//---------------------------- Functions -------------------------
+//---------------------- Functionnalities -------------------------
 
 
 //------------ Show help
@@ -222,7 +259,6 @@ const layout = function():void{
 }
 
 
-
 </script>
 
 

src/components/ParamComp/ParamDropDownComp.vue

@@ -2,7 +2,7 @@
 
     <NameParamText>{{ name }}</NameParamText>
     
-    <div  class="d-flex justify-center mx-auto w-80">
+    <div  class="d-flex justify-center mx-auto w-80 mt-2">
         <v-select
         v-model="value"
         :items="items"