Implement duplication of plot configs

src/components/charts/PlotConfigSelect.vue

@@ -3,10 +3,12 @@
     v-model="plotStore.plotConfigName"
     :allow-edit="allowEdit"
     :allow-add="allowEdit"
+    :allow-duplicate="allowEdit"
     editable-name="plot configuration"
     @rename="plotStore.renamePlotConfig"
     @delete="plotStore.deletePlotConfig"
     @new="plotStore.newPlotConfig"
+    @duplicate="plotStore.duplicatePlotConfig"
   >
     <b-form-select
       v-model="plotStore.plotConfigName"

src/components/general/EditValue.vue

@@ -1,22 +1,31 @@
 <template>
   <div class="d-flex flex-row">
     <div class="flex-grow-1">
-      <slot v-if="!editing"> </slot>
+      <slot v-if="mode === EditState.None"> </slot>
       <b-form-input v-else v-model="localName" size="sm"> </b-form-input>
     </div>
     <div
       class="flex-grow-2 mt-auto d-flex gap-1 ms-1"
       :class="alignVertical ? 'flex-column' : 'flex-row'"
     >
-      <template v-if="allowEdit && !(addNew || editing)">
+      <template v-if="allowEdit && mode === EditState.None">
         <b-button
           size="sm"
           variant="secondary"
           :title="`Edit this ${editableName}.`"
-          @click="editing = true"
+          @click="mode = EditState.Editing"
         >
           <i-mdi-pencil />
         </b-button>
+        <b-button
+          v-if="allowDuplicate"
+          size="sm"
+          variant="secondary"
+          :title="`Duplicate ${editableName}.`"
+          @click="duplicate"
+        >
+          <i-mdi-content-copy />
+        </b-button>
         <b-button
           size="sm"
           variant="secondary"
@@ -27,14 +36,14 @@
         </b-button>
       </template>
       <b-button
-        v-if="allowAdd && !(addNew || editing)"
+        v-if="allowAdd && mode === EditState.None"
         size="sm"
         :title="`Add new ${editableName}.`"
         variant="primary"
         @click="addNewClick"
         ><i-mdi-plus-box-outline />
       </b-button>
-      <template v-if="addNew || editing">
+      <template v-if="mode !== EditState.None">
         <b-button
           size="sm"
           :title="`Add new '${editableName}`"
@@ -67,6 +76,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  allowDuplicate: {
+    type: Boolean,
+    default: false,
+  },
   editableName: {
     type: String,
     required: true,
@@ -78,26 +91,37 @@ const props = defineProps({
 });
 
 const emit = defineEmits<{
-  (e: 'delete', value: string): void;
-  (e: 'new', value: string): void;
-  (e: 'rename', oldName: string, newName: string): void;
+  delete: [value: string];
+  new: [value: string];
+  duplicate: [oldName: string, newName: string];
+  rename: [oldName: string, newName: string];
 }>();
 
-const addNew = ref(false);
+enum EditState {
+  None,
+  Editing,
+  Adding,
+  Duplicating,
+}
+
 const localName = ref<string>(props.modelValue);
-const editing = ref<boolean>(false);
+const mode = ref<EditState>(EditState.None);
 
 function abort() {
-  editing.value = false;
-  addNew.value = false;
+  mode.value = EditState.None;
   localName.value = props.modelValue;
 }
 
+function duplicate() {
+  localName.value = localName.value + ' (copy)';
+  mode.value = EditState.Duplicating;
+}
+
 function addNewClick() {
   localName.value = '';
-  addNew.value = true;
-  editing.value = true;
+  mode.value = EditState.Adding;
 }
+
 watch(
   () => props.modelValue,
   () => {
@@ -106,13 +130,14 @@ watch(
 );
 
 function saveNewName() {
-  editing.value = false;
-  if (addNew.value) {
-    addNew.value = false;
+  if (mode.value === EditState.Adding) {
     emit('new', localName.value);
+  } else if (mode.value === EditState.Duplicating) {
+    emit('duplicate', props.modelValue, localName.value);
   } else {
     // Editing
     emit('rename', props.modelValue, localName.value);
   }
+  mode.value = EditState.None;
 }
 </script>

src/stores/plotConfig.ts

@@ -72,6 +72,11 @@ export const usePlotConfigStore = defineStore('plotConfig', {
         this.editablePlotConfig = deepClone(this.customPlotConfigs[this.plotConfigName]);
       }
     },
+    duplicatePlotConfig(oldName: string, newName: string) {
+      console.log(oldName, newName);
+      this.customPlotConfigs[newName] = deepClone(this.customPlotConfigs[oldName]);
+      this.plotConfigChanged(newName);
+    },
   },
   persist: {
     key: FT_PLOT_CONFIG_KEY,