From ba8fcb38b1ee6d68e11839d55983fc183232b699 Mon Sep 17 00:00:00 2001
From: nabeel <nabeel.paracha@e.email>
Date: Tue, 4 Jun 2024 18:53:23 +1000
Subject: [PATCH] WIP 2

---
 src/renderer/src/App.vue                      | 12 +++--
 src/renderer/src/components/ProgramGroup.vue  | 49 +++++++++++++++++++
 .../src/components/ProgramSelector.vue        |  3 +-
 3 files changed, 59 insertions(+), 5 deletions(-)
 create mode 100644 src/renderer/src/components/ProgramGroup.vue

diff --git a/src/renderer/src/App.vue b/src/renderer/src/App.vue
index cdb5dfe..58d98a6 100644
--- a/src/renderer/src/App.vue
+++ b/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([])
@@ -87,9 +88,9 @@ onMounted(() => {
       />
     </div>
   </div> -->
-  <draggable v-model="programCounter" >
+  <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,7 +115,9 @@ onMounted(() => {
   </div>
   <div>{{ programCounter }}</div>
 
-<!--   
+  <ProgramGroup :installedApps="installedApps" />
+
+  <!--   
   <div class="container">
     <div class="text-center">
       <h2 class="text-center mt-5">Trending Movies 🍿</h2>
diff --git a/src/renderer/src/components/ProgramGroup.vue b/src/renderer/src/components/ProgramGroup.vue
new file mode 100644
index 0000000..f9bd56b
--- /dev/null
+++ b/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>
diff --git a/src/renderer/src/components/ProgramSelector.vue b/src/renderer/src/components/ProgramSelector.vue
index dcd799d..c59fabc 100644
--- a/src/renderer/src/components/ProgramSelector.vue
+++ b/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)">