feat(ObjectSelector): disable v-card

Author: JulienChampagnol

components/ObjectSelector.vue

@@ -1,17 +1,35 @@
 <template>
   <FetchingData v-if="loading" />
-  <v-row v-else-if="allowed_objects.length" class="justify-left">
-    <v-col v-for="object in allowed_objects" :key="object" cols="2" md="2">
-      <v-card v-ripple class="card ma-2" hover rounded>
-        <v-img
-          :src="geode_objects[object].image"
-          cover
-          @click="set_geode_object(object)"
-        />
-        <v-tooltip activator="parent" location="bottom">
-          {{ geode_objects[object].tooltip }}
-        </v-tooltip>
-      </v-card>
+  <v-row v-else-if="Object.keys(allowed_objects).length" class="justify-left">
+    <v-col v-for="(value, key) in allowed_objects" :key="key" cols="2" md="2">
+      <v-tooltip
+        :disabled="value.is_saveable"
+        text="Data not loadable with this class"
+        location="bottom"
+      >
+        <template v-slot:activator="{ props }">
+          <span v-bind="props">
+            <v-card
+              v-ripple
+              class="card ma-2"
+              hover
+              rounded
+              :disabled="!value['is_saveable']"
+              :elevation="value['is_saveable'] ? 5 : 3"
+            >
+              <v-img
+                :src="geode_objects[key].image"
+                cover
+                @click="set_geode_object(key)"
+                :class="!value['is_saveable'] ? 'disabled' : ''"
+              />
+              <v-tooltip activator="parent" location="bottom">
+                {{ geode_objects[key].tooltip }}
+              </v-tooltip>
+            </v-card>
+          </span>
+        </template>
+      </v-tooltip>
     </v-col>
   </v-row>
   <v-row v-else class="pa-5">
@@ -45,44 +63,49 @@
   const { filenames, key } = props
 
   const loading = ref(false)
-  const allowed_objects = ref([])
+  // const allowed_objects = ref([])
+
+  const allowed_objects = {
+    BRep: { is_saveable: false },
+    StructuralModel: { is_saveable: true },
+  }
 
   const toggle_loading = useToggle(loading)
 
-  async function get_allowed_objects() {
-    toggle_loading()
-    allowed_objects.value = []
-    var promise_array = []
-    for (const filename of filenames) {
-      const params = { filename, key }
-      const promise = new Promise((resolve, reject) => {
-        api_fetch(
-          { schema, params },
-          {
-            request_error_function: () => {
-              reject()
-            },
-            response_function: (response) => {
-              if (allowed_objects.value.length == 0) {
-                allowed_objects.value = response._data.allowed_objects
-              } else {
-                allowed_objects.value = toRaw(allowed_objects.value).filter(
-                  (value) => response._data.allowed_objects.includes(value),
-                )
-              }
-              resolve()
-            },
-            response_error_function: () => {
-              reject()
-            },
-          },
-        )
-      })
-      promise_array.push(promise)
-    }
-    await Promise.all(promise_array)
-    toggle_loading()
-  }
+  // async function get_allowed_objects() {
+  //   toggle_loading()
+  //   allowed_objects.value = []
+  //   var promise_array = []
+  //   for (const filename of filenames) {
+  //     const params = { filename, key }
+  //     const promise = new Promise((resolve, reject) => {
+  //       api_fetch(
+  //         { schema, params },
+  //         {
+  //           request_error_function: () => {
+  //             reject()
+  //           },
+  //           response_function: (response) => {
+  //             if (allowed_objects.value.length == 0) {
+  //               allowed_objects.value = response._data.allowed_objects
+  //             } else {
+  //               allowed_objects.value = toRaw(allowed_objects.value).filter(
+  //                 (value) => response._data.allowed_objects.includes(value),
+  //               )
+  //             }
+  //             resolve()
+  //           },
+  //           response_error_function: () => {
+  //             reject()
+  //           },
+  //         },
+  //       )
+  //     })
+  //     promise_array.push(promise)
+  //   }
+  //   await Promise.all(promise_array)
+  //   toggle_loading()
+  // }
 
   function set_geode_object(input_geode_object) {
     if (input_geode_object != "") {
@@ -91,7 +114,17 @@
     }
   }
 
-  onMounted(() => {
-    get_allowed_objects()
-  })
+  // onMounted(() => {
+  //   get_allowed_objects()
+  // })
 </script>
+
+<style scoped>
+  .disabled {
+    filter: opacity(0.7);
+    cursor: pointer;
+  }
+  .disabled div {
+    cursor: not-allowed;
+  }
+</style>