Add enhanced plotconfig management

src/components/charts/PlotConfigSelect.vue

@@ -1,17 +1,87 @@
 <template>
-  <b-form-select
+  <div class="d-flex flex-row">
-    v-model="plotStore.plotConfigName"
+    <b-form-select
-    :options="plotStore.availablePlotConfigNames"
+      v-if="!editing"
-    size="sm"
+      v-model="plotStore.plotConfigName"
-    @change="plotStore.plotConfigChanged"
+      :options="plotStore.availablePlotConfigNames"
-  >
+      size="sm"
-  </b-form-select>
+      @change="plotStore.plotConfigChanged"
+    >
+    </b-form-select>
+    <b-form-input v-else id="idPlotConfigName" v-model="plotName" size="sm"> </b-form-input>
+
+    <template v-if="allowEdit && !(addNew || editing)">
+      <b-button
+        size="sm"
+        class="ms-1"
+        variant="secondary"
+        title="Edit this plot configuration"
+        @click="editing = true"
+      >
+        <EditIcon :size="16" />
+      </b-button>
+      <b-button
+        size="sm"
+        class="ms-1"
+        variant="secondary"
+        title="Delete this plot configuration"
+        @click="plotStore.deletePlotConfig(plotStore.plotConfigName)"
+      >
+        <DeleteIcon :size="16" />
+      </b-button>
+      <b-button size="sm" title="Add new config" class="ms-1" variant="primary" @click="addNewClick"
+        ><AddIcon :size="16" />
+      </b-button>
+    </template>
+    <template v-if="allowEdit && (addNew || editing)">
+      <b-button
+        size="sm"
+        title="Add new config"
+        class="ms-1"
+        variant="primary"
+        @click="saveNewName"
+      >
+        <CheckIcon :size="16" />
+      </b-button>
+    </template>
+  </div>
 </template>
 
 <script setup lang="ts">
+import CheckIcon from 'vue-material-design-icons/Check.vue';
 import { usePlotConfigStore } from '@/stores/plotConfig';
+import EditIcon from 'vue-material-design-icons/Pencil.vue';
+import DeleteIcon from 'vue-material-design-icons/Delete.vue';
+import AddIcon from 'vue-material-design-icons/PlusBoxOutline.vue';
+import { ref } from 'vue';
 
+defineProps({
+  allowEdit: {
+    type: Boolean,
+    default: false,
+  },
+});
 const plotStore = usePlotConfigStore();
+const addNew = ref(false);
+const plotName = ref<string>(plotStore.plotConfigName);
+const editing = ref<boolean>(false);
+
+function addNewClick() {
+  plotName.value = '';
+  addNew.value = true;
+  editing.value = true;
+}
+
+function saveNewName() {
+  editing.value = false;
+  if (addNew.value) {
+    addNew.value = false;
+    plotStore.newPlotConfig(plotName.value);
+  } else {
+    // Editing
+    plotStore.renamePlotConfig(plotStore.plotConfigName, plotName.value);
+  }
+}
 </script>
 
 <style scoped></style>

src/components/charts/PlotConfigurator.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="columns">
     <b-form-group label="Plot config name" label-for="idPlotConfigName">
-      <b-form-input id="idPlotConfigName" v-model="plotConfigNameLoc" size="sm"> </b-form-input>
+      <plot-config-select allow-edit></plot-config-select>
     </b-form-group>
     <div class="col-mb-3">
       <hr />
@@ -15,7 +15,7 @@
       <b-input-group size="sm">
         <b-form-input id="newSubPlot" v-model="newSubplotName" class="addPlot"></b-form-input>
         <b-input-group-append>
-          <b-button :disabled="!newSubplotName" @click="addSubplot">+</b-button>
+          <b-button variant="primary" :disabled="!newSubplotName" @click="addSubplot">+</b-button>
           <b-button v-if="selSubPlot && selSubPlot != 'main_plot'" @click="delSubplot">-</b-button>
         </b-input-group-append>
       </b-input-group>
@@ -130,6 +130,7 @@
 
 <script setup lang="ts">
 import { PlotConfig, EMPTY_PLOTCONFIG, IndicatorConfig } from '@/types';
+import PlotConfigSelect from '@/components/charts/PlotConfigSelect.vue';
 import PlotIndicator from '@/components/charts/PlotIndicator.vue';
 import { showAlert } from '@/stores/alerts';
 
@@ -262,6 +263,7 @@ function delSubplot() {
   plotStore.editablePlotConfig.subplots = { ...plotStore.editablePlotConfig.subplots };
   selSubPlot.value = '';
 }
+
 function loadPlotConfig() {
   // Reset from store
   plotStore.editablePlotConfig = deepClone(plotStore.customPlotConfigs[plotStore.plotConfigName]);

src/stores/plotConfig.ts

@@ -1,3 +1,4 @@
+import { deepClone } from '@/shared/deepClone';
 import { EMPTY_PLOTCONFIG, PlotConfig, PlotConfigStorage } from '@/types';
 import { defineStore } from 'pinia';
 
@@ -37,7 +38,7 @@ export const usePlotConfigStore = defineStore('plotConfig', {
     plotConfig: (state) =>
       (state.isEditing
         ? state.editablePlotConfig
-        : state.customPlotConfigs[state.plotConfigName]) || { ...EMPTY_PLOTCONFIG },
+        : state.customPlotConfigs[state.plotConfigName]) || deepClone(EMPTY_PLOTCONFIG),
     // plotConfig: (state) => state.customPlotConfig[state.plotConfigName] || { ...EMPTY_PLOTCONFIG },
   },
   actions: {
@@ -45,10 +46,27 @@ export const usePlotConfigStore = defineStore('plotConfig', {
       // This will autosave to storage due to pinia-persist
       this.customPlotConfigs[name] = plotConfig;
     },
+    deletePlotConfig(plotConfigName: string) {
+      delete this.customPlotConfigs[plotConfigName];
+    },
+    renamePlotConfig(oldName: string, newName: string) {
+      this.customPlotConfigs[newName] = this.customPlotConfigs[oldName];
+      delete this.customPlotConfigs[oldName];
+      this.plotConfigName = newName;
+    },
+    newPlotConfig(plotConfigName: string) {
+      this.editablePlotConfig = deepClone(EMPTY_PLOTCONFIG);
+      this.plotConfigName = plotConfigName;
+    },
+
     plotConfigChanged(plotConfigName = '') {
       if (plotConfigName) {
         this.plotConfigName = plotConfigName;
       }
+      console.log('plotConfigChanged', this.plotConfigName);
+      if (this.isEditing) {
+        this.editablePlotConfig = deepClone(this.customPlotConfigs[this.plotConfigName]);
+      }
     },
   },
   persist: {