WIP 2

src/renderer/src/App.vue

@@ -5,6 +5,7 @@ import { onMounted } from 'vue'
 import { ref } from 'vue'
 import * as logTimestamp from 'log-timestamp'
 import draggable from 'vuedraggable'
+import ProgramGroup from './components/ProgramGroup.vue'
 // import MovieCard from './components/MovieCard.vue'
 
 // const movies = ref([])
@@ -89,7 +90,7 @@ onMounted(() => {
   </div> -->
   <draggable v-model="programCounter">
     <template #item="{ element, index }">
-      <div>
+      <div v-if=" typeof element === 'string'">
         <ProgramSelector
           :installed-apps="installedApps"
           :selected-app="element"
@@ -97,6 +98,9 @@ onMounted(() => {
           @delete-row="deleteProgramRow(index)"
         />
       </div>
+      <div v-else>
+        <ProgramGroup :installedApps="installedApps" />
+      </div>
     </template>
   </draggable>
 
@@ -111,6 +115,8 @@ onMounted(() => {
   </div>
   <div>{{ programCounter }}</div>
 
+  <ProgramGroup :installedApps="installedApps" />
+
   <!--   
   <div class="container">
     <div class="text-center">

src/renderer/src/components/ProgramGroup.vue

@@ -0,0 +1,49 @@
+<script setup>
+import ProgramSelector from './ProgramSelector.vue'
+import draggable from 'vuedraggable'
+import { ref } from 'vue'
+
+const props = defineProps({
+  installedApps: {
+    type: Array,
+    required: true
+  },
+  selectedApp: {
+    type: String,
+    required: false
+  }
+})
+
+const programCounter = ref([''])
+
+const emit = defineEmits(['update-app', 'delete-row'])
+
+function deleteProgramRow(index) {
+  programCounter.value.splice(index, 1)
+  // Vue.delete(programCounter.value, index)
+  console.log(`Got event to delete row for index : ${index}`)
+}
+
+function addProgramRow() {
+  programCounter.value.push('')
+}
+</script>
+<template>
+  <div>{{ programCounter }}</div>
+  <div class="row">
+    <div class="col-auto">Select programs</div>
+    <div><i class="fas fa-plus col-auto" @click="addProgramRow"></i></div>
+  </div>
+  <draggable v-model="programCounter">
+    <template #item="{ element, index }">
+      <div>
+        <ProgramSelector
+          :installed-apps="installedApps"
+          :selected-app="element"
+          @update-app="programCounter[index] = $event"
+          @delete-row="deleteProgramRow(index)"
+        />
+      </div>
+    </template>
+  </draggable>
+</template>

src/renderer/src/components/ProgramSelector.vue

@@ -1,6 +1,4 @@
 <script setup>
-import { onUnmounted, ref } from 'vue'
-
 defineEmits(['delete-row', 'update-app'])
 
 const props = defineProps({ installedApps: Object, selectedApp: String })
@@ -11,6 +9,7 @@ console.log(props.installedApps)
 
 <template>
   <div class="row mt-2 d-flex align-items-center">
+    <div class="col-auto"><i class="fas fa-bars"></i></div>
     <div class="col-auto">Program</div>
     <div class="col-auto">
       <select class="form-select" @change="$emit('update-app', $event.target.value)">