Don't add new indicators through PlotIndicator

src/components/charts/PlotConfigurator.vue

@@ -57,12 +57,18 @@
       </b-button>
     </div>
 
+    <PlotIndicatorSelect
+      v-if="addNewIndicator"
+      :columns="columns"
+      class="mt-1"
+      @indicator-selected="addNewIndicatorSelected"
+    />
+
     <plot-indicator
-      v-if="selIndicatorName || addNewIndicator"
+      v-if="selIndicatorName"
       v-model="selIndicator"
       class="mt-1"
       :columns="columns"
-      :add-new="addNewIndicator"
     />
     <hr />
 
@@ -141,16 +147,17 @@
 </template>
 
 <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';
+import { EMPTY_PLOTCONFIG, IndicatorConfig, PlotConfig } from '@/types';
 import AddIcon from 'vue-material-design-icons/PlusBoxOutline.vue';
+import PlotIndicatorSelect from './PlotIndicatorSelect.vue';
 
-import { computed, ref, onMounted, onUnmounted, watch } from 'vue';
+import { deepClone } from '@/shared/deepClone';
 import { useBotStore } from '@/stores/ftbotwrapper';
 import { usePlotConfigStore } from '@/stores/plotConfig';
-import { deepClone } from '@/shared/deepClone';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
 defineProps({
   columns: { required: true, type: Array as () => string[] },
@@ -311,6 +318,15 @@ function savePlotConfig() {
   plotStore.saveCustomPlotConfig(plotConfigNameLoc.value, plotStore.editablePlotConfig);
 }
 
+function addNewIndicatorSelected(indicator?: string) {
+  addNewIndicator.value = false;
+
+  if (indicator) {
+    addIndicator({ [indicator]: {} });
+    selIndicatorName.value = indicator;
+  }
+}
+
 watch(selSubPlot, () => {
   // Deselect Indicator when switching selected plot
   selIndicatorName.value = '';

src/components/charts/PlotIndicator.vue

@@ -1,12 +1,5 @@
 <template>
   <div>
-    <div v-if="addNew">
-      <PlotIndicatorSelect
-        v-model="selAvailableIndicator"
-        :columns="columns"
-        @indicator-selected="selAvailableIndicator = $event"
-      />
-    </div>
     <div class="d-flex flex-col flex-xl-row justify-content-between mt-1">
       <b-form-group class="col flex-grow-1" label="Type" label-for="plotTypeSelector">
         <b-form-select
@@ -29,42 +22,18 @@
         </b-input-group>
       </b-form-group>
     </div>
-    <div class="d-flex flex-row mt-2">
-      <b-button
-        v-if="addNew"
-        class="col"
-        variant="secondary"
-        title="Add "
-        size="sm"
-        @click="clickCancel"
-      >
-        Cancel
-      </b-button>
-      <b-button
-        v-if="addNew"
-        class="ms-1 col"
-        variant="primary"
-        title="Add "
-        size="sm"
-        @click="emitIndicator"
-      >
-        Save indicator
-      </b-button>
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ChartType, IndicatorConfig } from '@/types';
 import randomColor from '@/shared/randomColor';
-import PlotIndicatorSelect from './PlotIndicatorSelect.vue';
 
 import { computed, ref, watch } from 'vue';
 
 const props = defineProps({
   modelValue: { required: true, type: Object as () => Record<string, IndicatorConfig> },
   columns: { required: true, type: Array as () => string[] },
-  addNew: { required: true, type: Boolean },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -93,19 +62,15 @@ function emitIndicator() {
   emit('update:modelValue', combinedIndicator.value);
 }
 
-function clickCancel() {
-  cancelled.value = true;
-  emitIndicator();
-}
-
 watch(
   () => props.modelValue,
   () => {
     [selAvailableIndicator.value] = Object.keys(props.modelValue);
     cancelled.value = false;
     if (selAvailableIndicator.value && props.modelValue) {
-      selColor.value = props.modelValue[selAvailableIndicator.value].color || randomColor();
-      graphType.value = props.modelValue[selAvailableIndicator.value].type || ChartType.line;
+      const xx = props.modelValue[selAvailableIndicator.value];
+      selColor.value = xx.color || randomColor();
+      graphType.value = xx.type || ChartType.line;
     }
   },
   {
@@ -114,9 +79,7 @@ watch(
 );
 
 watch([selColor, graphType], () => {
-  if (!props.addNew) {
-    emitIndicator();
-  }
+  emitIndicator();
 });
 </script>
 

src/components/charts/PlotIndicatorSelect.vue

@@ -1,6 +1,7 @@
 <template>
-  <b-form-group label="Add indicator" label-for="indicatorSelector">
-    <b-input-group size="sm">
+  <div class="d-flex flex-row">
+    <b-form-group class="flex-grow-1" label="Select indicator to add" label-for="indicatorSelector">
+      <!--<b-input-group size="sm">
       <b-form-input v-model="indicatorFilter" placeholder="Filter indicators"></b-form-input>
       <b-input-group-append>
         <Reset
@@ -10,33 +11,61 @@
         ></Reset>
       </b-input-group-append>
     </b-input-group>
-    <b-form-select
+     <b-form-select
       id="indicatorSelector"
       v-model="selAvailableIndicator"
       :options="filteredIndicators"
       :select-size="4"
       @change="$emit('indicatorSelected', $event)"
     >
-    </b-form-select>
-  </b-form-group>
+    </b-form-select> -->
+
+      <v-select
+        v-model="selAvailableIndicator"
+        :options="columns"
+        size="sm"
+        :clearable="false"
+        @option:selected="emitIndicator"
+      >
+      </v-select>
+    </b-form-group>
+    <b-button
+      size="sm"
+      title="Abort"
+      class="ms-1"
+      variant="secondary"
+      @click="$emit('indicatorSelected', null)"
+    >
+      <CloseIcon :size="16" />
+    </b-button>
+  </div>
 </template>
 
 <script setup lang="ts">
-import Reset from 'vue-material-design-icons/CloseCircleOutline.vue';
-import { computed, ref } from 'vue';
+// import Reset from 'vue-material-design-icons/CloseCircleOutline.vue';
+import { ref } from 'vue';
+import vSelect from 'vue-select';
+import CloseIcon from 'vue-material-design-icons/Close.vue';
 
-const props = defineProps({
+defineProps({
   columns: { required: true, type: Array as () => string[] },
 });
-defineEmits(['indicatorSelected']);
+const emit = defineEmits(['indicatorSelected']);
 
 const selAvailableIndicator = ref('');
-const indicatorFilter = ref('');
-const filteredIndicators = computed(() => {
-  return props.columns.filter((col) =>
-    col.toLowerCase().includes(indicatorFilter.value.toLowerCase()),
-  );
-});
+// const indicatorFilter = ref('');
+// const filteredIndicators = computed(() => {
+//   return props.columns.filter((col) =>
+//     col.toLowerCase().includes(indicatorFilter.value.toLowerCase()),
+//   );
+// });
+
+function emitIndicator() {
+  console.log('Emit', selAvailableIndicator.value);
+  if (selAvailableIndicator.value) {
+    emit('indicatorSelected', selAvailableIndicator.value);
+  }
+}
 </script>
 
 <style scoped></style>