From d6bcb5a589f66288e7acf91ca4154e8d5a559f12 Mon Sep 17 00:00:00 2001
From: David Mendez <dmendez@ebi.ac.uk>
Date: Fri, 8 Oct 2021 10:55:56 +0100
Subject: [PATCH] Create component to list properties and values for and item
---
.../chemical_probe/CalculatedProperties.vue | 69 ++----------
.../PropertiesValuesInColumns.vue | 106 ++++++++++++++++++
web-components-submodule | 2 +-
3 files changed, 116 insertions(+), 61 deletions(-)
create mode 100644 components/report_cards/shared/SingleItemProperties/PropertiesValuesInColumns.vue
diff --git a/components/report_cards/chemical_probe/CalculatedProperties.vue b/components/report_cards/chemical_probe/CalculatedProperties.vue
index 405e6e2..7858ac0 100644
--- a/components/report_cards/chemical_probe/CalculatedProperties.vue
+++ b/components/report_cards/chemical_probe/CalculatedProperties.vue
@@ -1,44 +1,22 @@
<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>
diff --git a/components/report_cards/shared/SingleItemProperties/PropertiesValuesInColumns.vue b/components/report_cards/shared/SingleItemProperties/PropertiesValuesInColumns.vue
new file mode 100644
index 0000000..6135266
--- /dev/null
+++ b/components/report_cards/shared/SingleItemProperties/PropertiesValuesInColumns.vue
@@ -0,0 +1,106 @@
+<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>
diff --git a/web-components-submodule b/web-components-submodule
index a370e29..e2ad6bc 160000
--- a/web-components-submodule
+++ b/web-components-submodule
@@ -1 +1 @@
-Subproject commit a370e2950fc7e0531a23b06f70ecbef7b9664821
+Subproject commit e2ad6bcd5e141d1d893f188a12ab0a31cd52b084
--
GitLab