Check added when saving macro. Fixed bug when loading macro.

fe/src/components/macros/MacroOverview.vue

@@ -6,11 +6,11 @@
       <div class="macro-item" v-for="(macro, i) in macros.list" :key="i">
         <ButtonComp
           variant="dark"
-          class="w-full"
+          class="overview__macro-button"
           size="sm"
           @click="macroRecorder.open(macro.macroname, macro.name)"
         >
-          <IconKeyboard /> {{ macro.name }}
+          <IconKeyboard /> <span>{{ macro.name }}</span>
         </ButtonComp>
       </div>
     </div>
@@ -19,7 +19,6 @@
 
 <script setup>
 // TODO
-// - load macro on click
 // - delete macro
 
 import { IconKeyboard } from '@tabler/icons-vue'
@@ -77,8 +76,12 @@ const loadMacroList = async () => {
   .macro-item {
     @apply flex items-center;
 
-    button {
+    button.overview__macro-button {
-      @apply w-full;
+      @apply w-full grid grid-cols-[1rem_1fr] justify-items-start;
+
+      span {
+        @apply truncate w-full text-left;
+      }
     }
   }
 }

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

@@ -14,13 +14,27 @@
         <ValidationErrorDialog />
       </template>
     </DialogComp>
+    <DialogComp ref="overwriteDialog">
+      <template #content>
+        <div class="grid gap-2">
+          <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)"
+              >No</ButtonComp
+            >
+            <ButtonComp variant="primary" @click="saveMacro()">Yes</ButtonComp>
+          </div>
+        </div>
+      </template>
+    </DialogComp>
 
     <ButtonComp
       v-if="macroRecorder.steps.length > 0"
       :disabled="macroRecorder.state.record || macroRecorder.state.edit"
       variant="success"
       size="sm"
-      @click="toggleSave()"
+      @click="startCheck()"
     >
       <IconDeviceFloppy />
       Save
@@ -40,6 +54,7 @@ import { onMounted, ref } from 'vue'
 const macroRecorder = useMacroRecorderStore()
 
 const errorDialog = ref()
+const overwriteDialog = ref()
 
 onMounted(() => {
   macroRecorder.$subscribe((mutation) => {
@@ -49,7 +64,16 @@ onMounted(() => {
   })
 })
 
-const toggleSave = async () => {
+const startCheck = async () => {
+  const checkResp = await macroRecorder.check()
+
+  if (checkResp) overwriteDialog.value.toggleDialog(true)
+  else saveMacro()
+}
+
+const saveMacro = async () => {
+  overwriteDialog.value.toggleDialog(false)
+
   const saveResp = await macroRecorder.save()
 
   if (!saveResp) errorDialog.value.toggleDialog(true)

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

@@ -7,7 +7,7 @@
         id="macro-name"
         type="text"
         @input.prevent="changeName($event.target.value)"
-        v-model="macroName"
+        :value="macroName"
         placeholder="New macro"
       />
       <div :class="`recording__buttons ${!nameSet || macroRecorder.state.edit ? 'disabled' : ''}`">
@@ -63,7 +63,7 @@ import FixedDelayMenu from '../components/FixedDelayMenu.vue'
 
 import { useMacroRecorderStore } from '@/stores/macrorecorder'
 import EditDialogs from './EditDialogs.vue'
-import { computed, ref } from 'vue'
+import { computed, onUpdated, ref } from 'vue'
 
 const macroRecorder = useMacroRecorderStore()
 
@@ -71,7 +71,13 @@ const macroName = computed(() => macroRecorder.macroName)
 
 const nameSet = ref(false)
 
+onUpdated(() => {
+  nameSet.value = macroName.value && macroName.value.length > 0
+})
+
 function changeName(name) {
+  console.log(name)
+
   macroRecorder.changeName(name)
   nameSet.value = name.length > 0
 }

fe/src/stores/macrorecorder.js

@@ -175,6 +175,14 @@ export const useMacroRecorderStore = defineStore('macrorecorder', () => {
     if (state.value.edit) resetEdit()
   }
 
+  const check = async () => {
+    const resp = await axios.post(appUrl() + '/macro/check', {
+      macro: macroName.value,
+    })
+
+    return resp.data
+  }
+
   const save = async () => {
     state.value.validationErrors = invalidMacro(steps.value)
 
@@ -189,8 +197,6 @@ export const useMacroRecorderStore = defineStore('macrorecorder', () => {
   }
 
   const open = async (macroFileName, name) => {
-    console.log(name)
-
     const openResp = await axios.post(appUrl() + '/macro/open', {
       macro: macroFileName,
     })
@@ -219,6 +225,7 @@ export const useMacroRecorderStore = defineStore('macrorecorder', () => {
     toggleEdit,
     resetEdit,
     reset,
+    check,
     save,
     open,
   }