feat(ExtensionSelector): switch to dict structure

Author: JulienChampagnol

components/ExtensionSelector.vue

@@ -1,42 +1,44 @@
 <template>
   <FetchingData v-if="loading" />
   <v-row
-    v-for="item in geode_objects_and_output_extensions"
-    :key="item.geode_object"
+    v-for="(
+      output_extensions, geode_object
+    ) in geode_objects_and_output_extensions"
+    :key="geode_object"
     class="justify-left"
   >
     <v-card class="card ma-2 pa-2" width="100%">
-      <v-tooltip :text="`Export as a ${item.geode_object}`" location="bottom">
+      <v-tooltip :text="`Export as a ${geode_object}`" location="bottom">
         <template v-slot:activator="{ props }">
           <v-card-title v-bind="props">
-            {{ item.geode_object }}
+            {{ geode_object }}
           </v-card-title>
         </template>
       </v-tooltip>
       <v-card-text>
         <v-row>
           <v-col
-            v-for="output in item.outputs"
-            :key="output.extension"
+            v-for="(extension, output_extension) in output_extensions"
+            :key="output_extension"
             cols="auto"
             class="pa-0"
           >
             <v-tooltip
-              :disabled="output.is_saveable"
+              :disabled="extension.is_saveable"
               text="Data not saveable with this file extension"
               location="bottom"
             >
               <template v-slot:activator="{ props }">
                 <span v-bind="props">
                   <v-card
                     class="card ma-2"
-                    :color="output.is_saveable ? 'primary' : 'grey'"
+                    :color="extension.is_saveable ? 'primary' : 'grey'"
                     hover
-                    @click="set_variables(item.geode_object, output.extension)"
-                    :disabled="!output.is_saveable"
+                    @click="set_variables(geode_object, output_extension)"
+                    :disabled="!extension.is_saveable"
                   >
                     <v-card-title align="center">
-                      {{ output.extension }}
+                      {{ output_extension }}
                     </v-card-title>
                   </v-card>
                 </span>
@@ -63,8 +65,7 @@
     filenames: { type: Array, required: true },
   })
   const { input_geode_object, filenames } = props
-
-  const geode_objects_and_output_extensions = ref([])
+  const geode_objects_and_output_extensions = ref({})
   const loading = ref(false)
 
   const toggle_loading = useToggle(loading)