remove stepper tree in components

Author: JulienChampagnol

components/CrsSelector.vue

@@ -24,14 +24,19 @@
 </template>
 
 <script setup>
-  const stepper_tree = inject("stepper_tree")
+  const emit = defineEmits([
+    "update_values",
+    "increment_current_step",
+    "decrement_current_step",
+  ])
+
   const props = defineProps({
     input_geode_object: { type: String, required: true },
-    variable_to_update: { type: String, required: true },
+    key_to_update: { type: String, required: true },
     schema: { type: Object, required: true },
   })
 
-  const { input_geode_object, variable_to_update, schema } = props
+  const { input_geode_object, key_to_update, schema } = props
 
   const search = ref("")
   const data_table_loading = ref(false)
@@ -41,14 +46,13 @@
 
   watch(selected_crs, (new_value) => {
     const crs = get_selected_crs(new_value[0])
-    set_crs(crs)
+    const keys_values_object = {
+      [key_to_update]: crs,
+    }
+    emit("update_values", keys_values_object)
+    emit("increment_current_step")
   })
 
-  function set_crs(crs_value) {
-    stepper_tree[variable_to_update] = crs_value
-    stepper_tree["current_step_index"]++
-  }
-
   function get_selected_crs(crs_code) {
     for (let i = 0; i <= crs_list.value.length; i++) {
       if (crs_list.value[i]["code"] == crs_code) {

components/ExtensionSelector.vue

@@ -39,7 +39,11 @@
 </template>
 
 <script setup>
-  const stepper_tree = inject("stepper_tree")
+  const emit = defineEmits([
+    "update_values",
+    "increment_current_step",
+    "decrement_current_step",
+  ])
 
   const props = defineProps({
     input_geode_object: { type: String, required: true },
@@ -68,9 +72,14 @@
   }
 
   function set_variables(geode_object, output_extension) {
-    stepper_tree["output_geode_object"] = geode_object
-    stepper_tree["output_extension"] = output_extension
-    stepper_tree["current_step_index"]++
+    if (geode_object != "" && output_extension != "") {
+      const keys_values_object = {
+        output_geode_object: geode_object,
+        output_extension,
+      }
+      emit("update_values", keys_values_object)
+      emit("increment_current_step")
+    }
   }
 
   onMounted(() => {

components/FileSelector.vue

@@ -8,7 +8,11 @@
 </template>
 
 <script setup>
-  const stepper_tree = inject("stepper_tree")
+  const emit = defineEmits([
+    "update_values",
+    "increment_current_step",
+    "decrement_current_step",
+  ])
 
   const props = defineProps({
     multiple: { type: Boolean, required: true },
@@ -24,9 +28,9 @@
   const toggle_loading = useToggle(loading)
 
   function files_uploaded_event(value) {
-    stepper_tree["files"] = value
     if (value.length) {
-      stepper_tree["current_step_index"]++
+      emit("update_values", { files: value })
+      emit("increment_current_step")
     }
   }
 

components/FileUploader.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script setup>
-  const emit = defineEmits(["files_uploaded"])
+  const emit = defineEmits(["files_uploaded", "decrement_current_step"])
 
   const props = defineProps({
     multiple: { type: Boolean, required: true },

components/MissingFilesSelector.vue

@@ -6,7 +6,7 @@
         <v-icon color="warning" icon="mdi-file-document-alert-outline" />
       </v-col>
       <p class="pa-1">Mandatory files:</p>
-      <v-col v-for="mandatory_file in mandatory_files" class="pa-0">
+      <v-col v-for="mandatory_file in mandatory_files" cols="auto" class="pa-0">
         <v-chip>{{ mandatory_file }}</v-chip>
       </v-col>
     </v-row>
@@ -43,7 +43,11 @@
 </template>
 
 <script setup>
-  const stepper_tree = inject("stepper_tree")
+  const emit = defineEmits([
+    "update_values",
+    "increment_current_step",
+    "decrement_current_step",
+  ])
 
   const props = defineProps({
     multiple: { type: Boolean, required: true },
@@ -62,7 +66,7 @@
   const toggle_loading = useToggle(loading)
 
   function files_uploaded(value) {
-    stepper_tree["additional_files"] = value
+    emit("update_values", { additional_files: value })
     missing_files()
   }
 
@@ -94,7 +98,7 @@
               .map((filename) => "." + filename.split(".").pop())
               .join(",")
             if (!has_missing_files.value) {
-              stepper_tree["current_step_index"]++
+              emit("increment_current_step")
             }
           },
         },

components/ObjectSelector.vue

@@ -33,7 +33,7 @@
 <script setup>
   import geode_objects from "@/assets/geode_objects"
 
-  const stepper_tree = inject("stepper_tree")
+  const emit = defineEmits(["update_values", "increment_current_step"])
 
   const props = defineProps({
     files: { type: Array, required: true },
@@ -63,8 +63,10 @@
   }
 
   function set_geode_object(geode_object) {
-    stepper_tree["input_geode_object"] = geode_object
-    stepper_tree["current_step_index"]++
+    if (geode_object != "") {
+      emit("update_values", { input_geode_object: geode_object })
+      emit("increment_current_step")
+    }
   }
 
   onMounted(() => {

components/Step.vue

@@ -41,6 +41,9 @@
         <component
           :is="steps[step_index].component.component_name"
           v-bind="steps[step_index].component.component_options"
+          @update_values="update_values_event"
+          @increment_current_step="increment_current_step()"
+          @decrement_current_step="decrement_current_step()"
         />
       </v-col>
     </Transition>
@@ -58,6 +61,22 @@
   function set_current_step(step_index) {
     stepper_tree.current_step_index = step_index
   }
+
+  function update_values_event(keys_values_object) {
+    console.log("update_values_event", keys_values_object)
+    for (const [key, value] of Object.entries(keys_values_object)) {
+      console.log(key, value)
+      stepper_tree[key] = value
+    }
+  }
+
+  function increment_current_step() {
+    stepper_tree.current_step_index++
+  }
+
+  function decrement_current_step() {
+    stepper_tree.current_step_index--
+  }
 </script>
 
 <style scoped>