diff --git a/components/mockups/OneSet.vue b/components/mockups/OneSet.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ab3bdc4b39aed3be29811d5bc9440ec1b11c939a
--- /dev/null
+++ b/components/mockups/OneSet.vue
@@ -0,0 +1,95 @@
+<template>
+ <div>
+ <v-skeleton-loader v-if="loading" type="table" />
+ <v-card-text v-else-if="showError">
+ <div class="text-caption error--text">Error: {{ errorMsg }}.</div>
+ </v-card-text>
+ <template v-else>
+ <v-text-field
+ v-model="search"
+ append-icon="mdi-magnify"
+ label="Search"
+ single-line
+ hide-details
+ ></v-text-field>
+ <br />
+ <v-data-table
+ :headers="headers"
+ :items="setItems"
+ :items-per-page="10"
+ :search="search"
+ ></v-data-table>
+ </template>
+ </div>
+</template>
+
+<script>
+import ESProxyService from '~/web-components-submodule/services/ESProxyService.js'
+
+export default {
+ props: {
+ setID: {
+ type: String,
+ default: () => undefined,
+ },
+ },
+ data() {
+ return {
+ loading: true,
+ showError: false,
+ errorMsg: undefined,
+ setItems: [],
+ search: '',
+ headers: [
+ {
+ text: 'Compound CHEMBL ID',
+ value: 'Molecule ChEMBL ID',
+ },
+ {
+ text: 'Compound Name',
+ value: 'COMPOUND_NAME',
+ },
+ {
+ text: 'Protein Family',
+ value: 'Protein Family',
+ },
+ {
+ text: 'Target ChEMBL ID',
+ value: 'target_id',
+ },
+ {
+ text: 'Target Name',
+ value: 'target_pref_name',
+ },
+ {
+ text: 'Affinity Biochemical (nM)',
+ value: 'Affinity biochemical',
+ },
+ {
+ text: 'Affinity On-target Cellular (nM)',
+ value: 'Affinity on-target cellular',
+ },
+ {
+ text: 'Recommended Concentration',
+ value: 'Recommended Concentration',
+ },
+ ],
+ }
+ },
+ async mounted() {
+ try {
+ const setItemsResponse = await ESProxyService.getGenericData(
+ `eubopen/miscellaneous/dataset/${this.setID}`
+ )
+ this.setItems = setItemsResponse.data.setItems
+ } catch (e) {
+ this.showError = true
+ this.errorMsg = e.message
+ } finally {
+ this.loading = false
+ }
+ },
+}
+</script>
+
+<style></style>
diff --git a/components/mockups/Sets.vue b/components/mockups/Sets.vue
index 5f24a56452b27867e6f72876220691e727275261..62e0371faa61855af05420a3c251c472015dd560 100644
--- a/components/mockups/Sets.vue
+++ b/components/mockups/Sets.vue
@@ -5,8 +5,6 @@
<div class="text-caption error--text">Error: {{ errorMsg }}.</div>
</v-card-text>
<template v-else>
- {{ datasets }}
-
<v-tabs show-arrows>
<v-tab v-for="dataset in datasets" :key="dataset.id">
{{ dataset.name }}
@@ -18,70 +16,21 @@
<p>
{{ dataset.description }}
</p>
+ <OneSet :set-i-d="dataset.id" />
</v-card-text>
</v-card>
</v-tab-item>
</v-tabs>
</template>
-
- <v-tabs>
- <v-tab> Set 1 </v-tab>
- <v-tab> Set 2 </v-tab>
- <v-tab-item>
- <v-card flat>
- <v-card-subtitle><b>Description:</b></v-card-subtitle>
- <v-card-text>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
- vitae egestas erat. Nulla vitae erat malesuada, lobortis turpis
- eget, varius lacus. Aenean aliquet nec augue non egestas.
- Pellentesque id leo sit amet nisl condimentum dapibus. Vestibulum
- orci mauris, pellentesque sit amet enim in, vehicula tempus leo.
- Cras in lorem id risus tempus maximus laoreet quis metus. Maecenas
- aliquam varius lobortis.
- </p>
- </v-card-text>
-
- <!-- <v-card-title>
- Set 1
- <v-spacer></v-spacer>
- <v-text-field
- v-model="search"
- append-icon="mdi-magnify"
- label="Search"
- single-line
- hide-details
- ></v-text-field>
- </v-card-title>
-
- <v-card-text>
- <v-data-table
- :headers="headers"
- :items="setItems"
- :items-per-page="10"
- :search="search"
- ></v-data-table>
- </v-card-text> -->
- </v-card>
- </v-tab-item>
-
- <v-tab-item>
- <v-card flat>
- <v-card-text>
- <MockupText />
- </v-card-text>
- </v-card>
- </v-tab-item>
- </v-tabs>
</v-container>
</template>
<script>
-import MockupText from '~/components/mockups/MockupText.vue'
import ESProxyService from '~/web-components-submodule/services/ESProxyService.js'
+import OneSet from '~/components/mockups/OneSet.vue'
export default {
components: {
- MockupText,
+ OneSet,
},
data() {
return {
@@ -89,38 +38,6 @@ export default {
showError: false,
errorMsg: undefined,
datasets: [],
- // search: '',
- // headers: [
- // {
- // text: 'Compound Name',
- // value: 'Compound name',
- // },
- // {
- // text: 'Protein Family',
- // value: 'Protein Family',
- // },
- // {
- // text: 'Target Name',
- // value: 'Target name',
- // },
- // {
- // text: 'Affinity Biochemical (nM)',
- // value: 'Affinity Biochemical (nM)',
- // },
- // {
- // text: 'Affinity On-target Cellular (nM)',
- // value: 'Affinity On-target Cellular (nM)',
- // },
- // {
- // text: 'Chemogenomic Set',
- // value: 'Chemogenomic Set',
- // },
- // {
- // text: 'Recommended Concentration',
- // value: 'Recommended concentration',
- // },
- // ],
- // setItems: [],
}
},
async mounted() {
@@ -128,7 +45,6 @@ export default {
const availableDatasetsResponse = await ESProxyService.getGenericData(
'eubopen/miscellaneous/datasets_mockup'
)
- console.log('availableDatasetsResponse: ', availableDatasetsResponse)
this.datasets = availableDatasetsResponse.data.datasets
} catch (e) {
this.showError = true