use edit-value for config actions

src/components/ftbot/PairlistConfigActions.vue

@@ -1,51 +1,33 @@
 <template>
-  <div class="d-flex flex-row mb-2 gap-2">
-    <b-button
-      title="Delete config"
-      :disabled="!pairlistStore.isSavedConfig"
-      variant="dark"
-      @click="pairlistStore.deleteConfig()"
-      ><i-mdi-delete width="24" height="24"
-    /></b-button>
-
-    <b-form-input v-model="configName" placeholder="Configuration name..." />
-
-    <b-button-group>
-      <b-dropdown variant="dark" title="Saved configs">
-        <b-dropdown-item-button
-          v-for="config in pairlistStore.savedConfigs"
-          :key="config.name"
-          @click="pairlistStore.selectConfig(config)"
-          >{{ config.name }}</b-dropdown-item-button
-        >
-      </b-dropdown>
-      <b-button
-        title="Save config"
-        variant="dark"
-        :disabled="!configName || pairlistStore.config.pairlists.length == 0"
-        @click="pairlistStore.saveConfig(configName)"
-        ><i-mdi-content-save width="24" height="24"
-      /></b-button>
-    </b-button-group>
-    <b-button
-      title="Clone config"
-      variant="dark"
-      :disabled="!pairlistStore.config.name || !pairlistStore.isSavedConfig"
-      @click="pairlistStore.cloneConfig()"
-      ><i-mdi-content-copy width="24" height="24"
-    /></b-button>
-    <b-button
-      title="New config"
-      variant="dark"
-      :disabled="pairlistStore.config.pairlists.length == 0"
-      @click="pairlistStore.newConfig()"
-      ><i-mdi-plus width="24" height="24"
-    /></b-button>
+  <div class="d-flex mb-2 gap-2">
+    <edit-value
+      v-model="pairlistStore.config.name"
+      editable-name="config"
+      :allow-add="true"
+      :allow-duplicate="true"
+      :allow-edit="true"
+      class="d-flex flex-grow-1"
+      @delete="pairlistStore.deleteConfig"
+      @duplicate="(oldName:string,newName:string) => pairlistStore.duplicateConfig(oldName, newName)"
+      @new="(name:string) => pairlistStore.newConfig(name)"
+      @rename="(oldName: string, newName:string) => pairlistStore.renameOrSaveConfig(oldName,newName)"
+    >
+      <b-form-select
+        v-model="pairlistStore.config"
+        size="sm"
+        :options="
+          pairlistStore.savedConfigs.map((c) => {
+            return { text: c.name, value: c };
+          })
+        "
+      />
+    </edit-value>
     <b-button
       title="Evaluate pairlist"
       :disabled="pairlistStore.evaluating || !pairlistStore.pairlistValid"
       variant="primary"
       class="col-lg-2"
+      size="sm"
       @click="pairlistStore.startPairlistEvaluation()"
     >
       <b-spinner v-if="pairlistStore.evaluating" small></b-spinner>
@@ -55,15 +37,6 @@
 </template>
 <script setup lang="ts">
 import { usePairlistConfigStore } from '@/stores/pairlistConfig';
-import { ref, watch } from 'vue';
+import EditValue from '../general/EditValue.vue';
 const pairlistStore = usePairlistConfigStore();
-
-const configName = ref(pairlistStore.config.name);
-
-watch(
-  () => pairlistStore.config.name,
-  () => {
-    configName.value = pairlistStore.config.name;
-  },
-);
 </script>

src/stores/pairlistConfig.ts

@@ -73,9 +73,9 @@ export const usePairlistConfigStore = defineStore(
       config.value.pairlists.splice(index, 1);
     }
 
-    function saveConfig(name: string) {
+    function renameOrSaveConfig(oldName: string, newName: string) {
       const i = savedConfigs.value.findIndex((c) => c.name === config.value.name);
-      config.value.name = name;
+      config.value.name = newName;
 
       if (i > -1) {
         savedConfigs.value[i] = config.value;
@@ -84,11 +84,19 @@ export const usePairlistConfigStore = defineStore(
       }
     }
 
-    function cloneConfig() {
-      config.value = {
-        name: '',
+    function newConfig(name: string) {
+      const c = { name: name, pairlists: [] };
+      savedConfigs.value.push(c);
+      config.value = c;
+    }
+
+    function duplicateConfig(oldName: string, newName: string) {
+      const c = {
+        name: newName,
         pairlists: structuredClone(toRaw(config.value.pairlists)),
       };
+      savedConfigs.value.push(c);
+      config.value = c;
     }
 
     function deleteConfig() {
@@ -99,14 +107,6 @@ export const usePairlistConfigStore = defineStore(
       }
     }
 
-    function newConfig() {
-      config.value = { name: '', pairlists: [] };
-    }
-
-    function selectConfig(selected: PairlistConfig) {
-      config.value = structuredClone(toRaw(selected));
-    }
-
     function addToBlacklist() {
       blacklist.value.push('');
     }
@@ -198,10 +198,9 @@ export const usePairlistConfigStore = defineStore(
       startPairlistEvaluation,
       addToConfig,
       removeFromConfig,
-      saveConfig,
-      cloneConfig,
+      renameOrSaveConfig,
+      duplicateConfig,
       deleteConfig,
-      selectConfig,
       newConfig,
       addToBlacklist,
       removeFromBlacklist,