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