Create component to list properties and values for and item

components/report_cards/chemical_probe/CalculatedProperties.vue

 <template>
   <v-card>
     <v-card-text>
-      <v-skeleton-loader v-if="!dataLoaded" type="text@6"></v-skeleton-loader>
-      <v-row v-else dense no-gutters>
-        <v-col
-          v-for="item in calculatedProperties"
-          :key="item.propLabel"
-          cols="12"
-          sm="6"
-          lg="4"
-          xl="3"
-        >
-          <v-list dense>
-            <v-list-item :key="item.propLabel">
-              <v-list-item-content>
-                <v-list-item-title>
-                  <div class="d-flex justify-space-between">
-                    <div>
-                      <b>{{ item.label }}:</b>
-                    </div>
-                    <div>
-                      {{ item.value }}
-                    </div>
-                  </div>
-                </v-list-item-title>
-              </v-list-item-content>
-            </v-list-item>
-            <v-divider :key="`${item.propLabel}-divider`" />
-          </v-list>
-        </v-col>
-      </v-row>
+      <PropertiesValuesInColumns
+        :entity-i-d="entityID"
+        :item-i-d="itemID"
+        properties-group="calculated_properties"
+      />
     </v-card-text>
   </v-card>
 </template>
 
 <script>
-import RequestNotifications from '@/web-components-submodule/utils/RequestNotifications.js'
-import ItemPropertiesLoader from '~/web-components-submodule/utils/ItemPropertiesLoader.js'
+import PropertiesValuesInColumns from '~/components/report_cards/shared/SingleItemProperties/PropertiesValuesInColumns.vue'
 
 export default {
+  components: {
+    PropertiesValuesInColumns,
+  },
   props: {
     itemID: {
       type: String,
@@ -49,35 +27,6 @@ export default {
       default: () => undefined,
     },
   },
-  data() {
-    return {
-      dataLoaded: false,
-      calculatedProperties: [],
-    }
-  },
-  mounted() {
-    this.loadData()
-  },
-  methods: {
-    loadData() {
-      ItemPropertiesLoader.getItemProperties(
-        this.entityID,
-        this.itemID,
-        'calculated_properties'
-      )
-        .then((response) => {
-          this.calculatedProperties = response
-          this.dataLoaded = true
-        })
-        .catch((error) => {
-          RequestNotifications.dispatchRequestErrorNotification(
-            error,
-            this.$store.dispatch,
-            `There was an error while fetching the list of properties for the calculated properties!`
-          )
-        })
-    },
-  },
 }
 </script>
 

components/report_cards/shared/SingleItemProperties/PropertiesValuesInColumns.vue

+<template>
+  <div>
+    <v-skeleton-loader v-if="!dataLoaded" type="text@6"></v-skeleton-loader>
+    <v-row v-else dense no-gutters>
+      <v-col
+        v-for="item in shownProperties"
+        :key="item.propLabel"
+        cols="12"
+        sm="6"
+        lg="4"
+        xl="3"
+      >
+        <v-list dense>
+          <v-list-item :key="item.propLabel">
+            <v-list-item-content>
+              <v-list-item-title>
+                <div class="d-flex justify-space-between">
+                  <div>
+                    <b>{{ item.label }}:</b>
+                  </div>
+                  <div>
+                    {{ item.value }}
+                  </div>
+                </div>
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+          <v-divider :key="`${item.propLabel}-divider`" />
+        </v-list>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import RequestNotifications from '@/web-components-submodule/utils/RequestNotifications.js'
+import ItemPropertiesLoader from '~/web-components-submodule/utils/ItemPropertiesLoader.js'
+
+export default {
+  props: {
+    itemID: {
+      type: String,
+      default: () => undefined,
+    },
+    entityID: {
+      type: String,
+      default: () => undefined,
+    },
+    propertiesGroup: {
+      type: String,
+      default: () => undefined,
+    },
+    useDefaultPropertySlot: {
+      type: Boolean,
+      default: () => true,
+    },
+  },
+  data() {
+    return {
+      dataLoaded: false,
+      loadedProperties: [],
+    }
+  },
+  computed: {
+    shownProperties() {
+      return this.loadedProperties.filter((item) => item.show)
+    },
+    item() {
+      const item = {
+        id: this.itemID,
+        data: {},
+        highlight: {},
+      }
+      for (const loadedProperty of this.loadedProperties) {
+        item.data[loadedProperty.propID] = loadedProperty.value
+      }
+      return item
+    },
+  },
+  mounted() {
+    this.loadData()
+  },
+  methods: {
+    loadData() {
+      ItemPropertiesLoader.getItemProperties(
+        this.entityID,
+        this.itemID,
+        this.propertiesGroup
+      )
+        .then((response) => {
+          this.loadedProperties = response
+          this.dataLoaded = true
+        })
+        .catch((error) => {
+          RequestNotifications.dispatchRequestErrorNotification(
+            error,
+            this.$store.dispatch,
+            `There was an error while fetching the list of properties for the calculated properties!`
+          )
+        })
+    },
+  },
+}
+</script>
+
+<style></style>

web-components-submodule @ e2ad6bcd

-Subproject commit a370e2950fc7e0531a23b06f70ecbef7b9664821
+Subproject commit e2ad6bcd5e141d1d893f188a12ab0a31cd52b084