Functionality to Remove Test Cases, Inputs, and Outputs in Test Bench Panel

src/components/Panels/TestBenchPanel/TestBenchCreator.vue

@@ -28,10 +28,10 @@
 
                     </div>
                     <div class="testRow fullTestRow space">
-                        <span>Inputs</span> <span @mousedown="increInputs" class="plusBtn">+</span>
+                        <span>Inputs</span> <span @mousedown="increInputs" class="plusMinusBtn">+</span>
                     </div>
                     <div class="testRow fullTestRow space">
-                        <span>Outputs</span> <span @mousedown="increOutputs" class="plusBtn">+</span>
+                        <span>Outputs</span> <span @mousedown="increOutputs" class="plusMinusBtn">+</span>
                     </div>
                 </div>
                 <div class="testCol">
@@ -42,18 +42,20 @@
                         <div v-for="(_, i) in inputsName" class="testRow"
                             :style="{ width: 100 / inputsBandWidth.length + '%' }">
                             <input class="inputField dataGroupTitle smInputName" type="text" v-model="inputsName[i]" />
+                            <span @mousedown="deleteInput(i)" class="plusMinusBtn">-</span>
                         </div>
                     </div>
                     <div class="testContainer">
                         <div v-for="(_, i) in outputsName" class="testRow"
                             :style="{ width: 100 / outputsBandWidth.length + '%' }">
                             <input class="inputField dataGroupTitle smInputName" type="text" v-model="outputsName[i]" />
+                            <span @mousedown="deleteOutput(i)" class="plusMinusBtn">-</span>
                         </div>
                     </div>
                 </div>
                 <div class="testCol">
                     <div class="testRow firstCol">
-                        Bandwidth
+                        Bitwidth
                     </div>
                     <div class="testContainer">
                         <div v-for="(_, i) in inputsBandWidth" class="testRow"
@@ -77,6 +79,7 @@
 
                     <div v-for="(_, index) in group.inputs[0]" class="groupRow" :key="index">
                         <div class="testRow firstCol spaceArea"></div>
+                        <span @mousedown="deleteTestFromGroup(groupIndex, index)" class="plusMinusBtn">-</span>
                         <div class="testContainer">
                             <div v-for="(_, i) in group.inputs" class="testRow colWise"
                                 :style="{ width: 100 / inputsBandWidth.length + '%' }">
@@ -273,6 +276,16 @@ const addTestToGroup = (index: number) => {
     }
 };
 
+const deleteTestFromGroup = (groupIndex: number, testIndex: number) => {
+    groups[groupIndex].inputs.forEach(input => {
+        input.splice(testIndex, 1);
+    });
+
+    groups[groupIndex].outputs.forEach(output => {
+        output.splice(testIndex, 1);
+    });
+};
+
 const addNewGroup = () => {
     groups.push({
         title: `Group ${groups.length + 1}`,
@@ -296,6 +309,18 @@ const increInputs = () => {
     inputsName.value.push(`inp${inputsName.value.length + 1}`);
 };
 
+const deleteInput = (index:number) => {
+    if(inputsName.value.length === 1) return;
+    groups.forEach((group) => {
+        if (group.inputs.length === 0) return;
+
+        group.inputs.splice(index, 1);
+    });
+
+    inputsBandWidth.value.splice(index, 1);
+    inputsName.value.splice(index, 1);
+};
+
 const increOutputs = () => {
     groups.forEach((group) => {
         if (group.outputs.length === 0) return;
@@ -311,6 +336,18 @@ const increOutputs = () => {
     outputsName.value.push(`out${outputsName.value.length + 1}`);
 };
 
+const deleteOutput = (index:number) => {
+    if(outputsName.value.length === 1) return;
+    groups.forEach((group) => {
+        if (group.outputs.length === 0) return;
+
+        group.outputs.splice(index, 1);
+    });
+
+    outputsBandWidth.value.splice(index, 1);
+    outputsName.value.splice(index, 1);
+};
+
 const exportAsCSV = () => {
     let csv = `${testType.value},${testTitle.value}\n`;
 
@@ -503,7 +540,10 @@ const importFromCSV = () => {
     justify-content: center;
 }
 
-.plusBtn {
+.plusMinusBtn {
+    align-self: center;
+    text-align: center;
+    width: 16px;
     cursor: pointer;
     padding: 2px;
     padding-top: 0.5px;