Edit functionality added to frontend.

fe/src/components/base/ButtonComp.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted } from 'vue'
+import { computed } from 'vue'
 
 const props = defineProps({
   href: String,
@@ -83,10 +83,10 @@ button,
   }
 
   &:hover {
-    @apply !text-white;
+    @apply text-white;
 
     svg {
-      @apply !stroke-white;
+      @apply stroke-current;
     }
   }
 

fe/src/components/macros/MacroOverview.vue

@@ -5,28 +5,53 @@
       <LoadComp :loading="macros.loading" text="Loading macros..." />
       <div class="macro-item" v-for="(macro, i) in macros.list" :key="i">
         <ButtonComp
-          variant="dark"
+          :variant="macroRecorder.macroName === macro.name ? 'secondary' : 'dark'"
-          class="overview__macro-button"
+          class="overview__macro-open"
           size="sm"
-          @click="macroRecorder.open(macro.macroname, macro.name)"
+          @click="macroRecorder.openMacro(macro.macroname, macro.name)"
         >
           <IconKeyboard /> <span>{{ macro.name }}</span>
         </ButtonComp>
+        <div class="overview__macro-delete">
+          <ButtonComp
+            class="!text-red-500 hover:!text-red-300"
+            variant="ghost"
+            size="sm"
+            @click="startDelete(macro.name)"
+          >
+            <IconTrash />
+          </ButtonComp>
         </div>
       </div>
     </div>
+    <DialogComp ref="deleteDialog">
+      <template #content>
+        <div class="grid gap-2">
+          <h4 class="pr-4">Are you sure you want to delete:</h4>
+          <h3 class="mb-2 text-center text-sky-500">{{ macroToBeDeleted }}</h3>
+          <div class="flex justify-between">
+            <ButtonComp size="sm" variant="subtle" @click="deleteDialog.toggleDialog(false)">
+              No
+            </ButtonComp>
+            <ButtonComp size="sm" variant="danger" @click="deleteMacro()">Yes</ButtonComp>
+          </div>
+        </div>
+      </template>
+    </DialogComp>
+  </div>
 </template>
 
 <script setup>
 // TODO
 // - delete macro
 
-import { IconKeyboard } from '@tabler/icons-vue'
+import { IconKeyboard, IconTrash } from '@tabler/icons-vue'
 import ButtonComp from '../base/ButtonComp.vue'
-import { onMounted, reactive } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import { GetMacroList } from '@/services/MacroService'
 import LoadComp from '../base/LoadComp.vue'
 import { useMacroRecorderStore } from '@/stores/macrorecorder'
+import DialogComp from '../base/DialogComp.vue'
 
 const macros = reactive({
   loading: true,
@@ -35,6 +60,9 @@ const macros = reactive({
 
 const macroRecorder = useMacroRecorderStore()
 
+const macroToBeDeleted = ref('')
+const deleteDialog = ref()
+
 onMounted(() => {
   loadMacroList()
 })
@@ -44,6 +72,24 @@ const loadMacroList = async () => {
   macros.list = list
   macros.loading = false
 }
+
+const startDelete = (macroFilename) => {
+  macroToBeDeleted.value = macroFilename
+  deleteDialog.value.toggleDialog(true)
+}
+
+const deleteMacro = async () => {
+  const resp = await macroRecorder.deleteMacro(macroToBeDeleted.value)
+
+  if (resp) {
+    deleteDialog.value.toggleDialog(false)
+
+    if (macroToBeDeleted.value === macroRecorder.macroName) macroRecorder.resetMacro()
+
+    macroToBeDeleted.value = ''
+    loadMacroList()
+  }
+}
 </script>
 
 <style scoped>
@@ -68,21 +114,30 @@ const loadMacroList = async () => {
     @apply flex
     flex-col 
     pr-1
+    -mr-1
     gap-1
     h-[calc(100vh-11.7rem)]
     overflow-auto;
   }
 
   .macro-item {
-    @apply flex items-center;
+    @apply grid items-center grid-cols-[1fr_0fr] transition-[grid-template-columns] delay-0 duration-300;
 
-    button.overview__macro-button {
+    &:hover {
+      @apply grid-cols-[1fr_auto] delay-500;
+    }
+
+    button.overview__macro-open {
       @apply w-full grid grid-cols-[1rem_1fr] justify-items-start;
 
       span {
         @apply truncate w-full text-left;
       }
     }
+
+    div.overview__macro-delete {
+      @apply grid overflow-hidden transition;
+    }
   }
 }
 </style>

fe/src/components/macros/parts/RecorderFooter.vue

@@ -3,7 +3,6 @@
     <ButtonComp
       v-if="macroRecorder.steps.length > 0"
       variant="danger"
-      size="sm"
       @click="macroRecorder.reset()"
     >
       <IconRestore /> Reset
@@ -20,10 +19,10 @@
           <h4 class="pr-4">Are you sure you want to overwrite:</h4>
           <h3 class="mb-2 text-center text-sky-500">{{ macroRecorder.macroName }}</h3>
           <div class="flex justify-between">
-            <ButtonComp variant="subtle" @click="overwriteDialog.toggleDialog(false)"
+            <ButtonComp size="sm" variant="subtle" @click="overwriteDialog.toggleDialog(false)"
               >No</ButtonComp
             >
-            <ButtonComp variant="primary" @click="saveMacro()">Yes</ButtonComp>
+            <ButtonComp size="sm" variant="primary" @click="saveMacro()">Yes</ButtonComp>
           </div>
         </div>
       </template>
@@ -33,7 +32,6 @@
       v-if="macroRecorder.steps.length > 0"
       :disabled="macroRecorder.state.record || macroRecorder.state.edit"
       variant="success"
-      size="sm"
       @click="startCheck()"
     >
       <IconDeviceFloppy />
@@ -65,7 +63,7 @@ onMounted(() => {
 })
 
 const startCheck = async () => {
-  const checkResp = await macroRecorder.check()
+  const checkResp = await macroRecorder.checkMacro()
 
   if (checkResp) overwriteDialog.value.toggleDialog(true)
   else saveMacro()
@@ -74,7 +72,7 @@ const startCheck = async () => {
 const saveMacro = async () => {
   overwriteDialog.value.toggleDialog(false)
 
-  const saveResp = await macroRecorder.save()
+  const saveResp = await macroRecorder.saveMacro()
 
   if (!saveResp) errorDialog.value.toggleDialog(true)
   else window.location.reload()

fe/src/components/macros/parts/RecorderHeader.vue

@@ -76,8 +76,6 @@ onUpdated(() => {
 })
 
 function changeName(name) {
-  console.log(name)
-
   macroRecorder.changeName(name)
   nameSet.value = name.length > 0
 }

fe/src/stores/macrorecorder.js

@@ -74,8 +74,6 @@ export const useMacroRecorderStore = defineStore('macrorecorder', () => {
 
     if (key !== false) steps.value[key] = stepVal
     else steps.value.push(stepVal)
-
-    console.log(steps.value)
   }
 
   const recordDelay = () => {
@@ -167,15 +165,16 @@ export const useMacroRecorderStore = defineStore('macrorecorder', () => {
     state.value.editDelay = false
   }
 
-  const reset = () => {
+  const resetMacro = () => {
     state.value.record = false
     delay.value.start = 0
+    macroName.value = ''
     steps.value = []
 
     if (state.value.edit) resetEdit()
   }
 
-  const check = async () => {
+  const checkMacro = async () => {
     const resp = await axios.post(appUrl() + '/macro/check', {
       macro: macroName.value,
     })
@@ -183,7 +182,7 @@ export const useMacroRecorderStore = defineStore('macrorecorder', () => {
     return resp.data
   }
 
-  const save = async () => {
+  const saveMacro = async () => {
     state.value.validationErrors = invalidMacro(steps.value)
 
     if (state.value.validationErrors) return false
@@ -196,15 +195,22 @@ export const useMacroRecorderStore = defineStore('macrorecorder', () => {
     return resp.status == 200
   }
 
-  const open = async (macroFileName, name) => {
+  const deleteMacro = async (macroFilename) => {
+    const resp = await axios.post(appUrl() + '/macro/delete', {
+      macro: macroFilename,
+    })
+
+    if (resp.status == 200) return resp.data
+    else return false
+  }
+
+  const openMacro = async (macroFileName, name) => {
     const openResp = await axios.post(appUrl() + '/macro/open', {
       macro: macroFileName,
     })
 
     if (openResp.data) steps.value = translateJSON(openResp.data)
 
-    // console.log(macroName)
-
     macroName.value = name
   }
 
@@ -224,9 +230,10 @@ export const useMacroRecorderStore = defineStore('macrorecorder', () => {
     changeDelay,
     toggleEdit,
     resetEdit,
-    reset,
+    resetMacro,
-    check,
+    checkMacro,
-    save,
+    saveMacro,
-    open,
+    deleteMacro,
+    openMacro,
   }
 })