Skip to content
Snippets Groups Projects
Commit 330cd0e2 authored by Kenzo-Hugo Hillion's avatar Kenzo-Hugo Hillion :recycle:
Browse files

refacto keggcard in component

parent 71f3b758
No related branches found
No related tags found
2 merge requests!59Prod,!17Add gene detail page on frontend
Hide whitespace changes
Inline Side-by-side
frontend/src/components/KeggCard.vue 0 → 100644
+ 111
− 0
View file @ 330cd0e2
<template>
<v-flex xs12 md6 lg4>
<v-card>
<v-toolbar-title class="function white--text">KEGG Function</v-toolbar-title>
<div class="text-xs-center" v-if="kegg_detail.length == 0">
<v-progress-circular
indeterminate
color="function"
></v-progress-circular>
</div>
<v-list v-else>
<template v-for="(item, index) in kegg_detail">
<v-divider
v-if="index > 0"
:key="index"
></v-divider>
<v-expansion-panel v-if="item.expand" :key="item.title">
<v-expansion-panel-content>
<template v-slot:header>
<div>{{item.title}}</div>
</template>
<v-card>
<v-list>
<template v-for="(element, elindex) in item.content">
<v-divider
v-if="elindex > 0"
:key="elindex"
></v-divider>
<v-list-tile :key="element.title">
<v-list-tile-content :key="element.content">
<v-list-tile-title v-if="element.title" v-html="element.title"></v-list-tile-title>
<v-list-tile-title v-else v-html="elindex"></v-list-tile-title>
<v-list-tile-sub-title v-if="element.authors" v-html="element.authors"></v-list-tile-sub-title>
<v-list-tile-sub-title v-else v-html="element"></v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</template>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-list-tile v-else :key="item.title">
<v-list-tile-content :key="item.title">
<v-list-tile-title v-html="item.title"></v-list-tile-title>
<v-list-tile-sub-title v-html="item.content"></v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</template>
</v-list>
</v-card>
</v-flex>
</template>
<script>
import axios from 'axios';
export default {
name: 'KeggCard',
props: {
kegg_id: String,
},
watch: {
kegg_id: function (val, oldVal) {
this.getKeggDetail();
}
},
data() {
return {
kegg_detail: [],
};
},
methods: {
getKeggDetail() {
axios.get('http://togows.org/entry/kegg-orthology/' + this.kegg_id + '.json', {
headers: {
Accept: 'application/json',
},
})
.then((response) => {
this.kegg_detail = [
{
title: 'ID',
content: response.data[0].entry_id,
},
{
title: 'Name',
content: response.data[0].name,
},
{
title: 'Definition',
content: response.data[0].definition,
},
{
title: 'Pathways',
content: response.data[0].pathways,
expand: true,
},
{
title: 'References',
content: response.data[0].references,
expand: true,
},
];
})
.catch((error) => {
console.log(error);
});
}
}
}
</script>
frontend/src/main.js
+ 3
− 0
View file @ 330cd0e2
...@@ -12,6 +12,9 @@ Vue.use(Vuetify, { ...@@ -12,6 +12,9 @@ Vue.use(Vuetify, {
theme: { theme: {
primary: '#263238', primary: '#263238',
secondary: '#508991', secondary: '#508991',
tertiary: '#f5edf0',
function: '#65b891',
taxonomy: '#886f68',
}, },
}); });
......
frontend/src/views/GeneDetail.vue
+ 7
− 78
View file @ 330cd0e2
...@@ -15,9 +15,10 @@ ...@@ -15,9 +15,10 @@
grid-list-md grid-list-md
> >
<v-layout row wrap> <v-layout row wrap>
<!-- General information -->
<v-flex xs12 md6 lg4> <v-flex xs12 md6 lg4>
<v-card> <v-card>
<v-toolbar-title class="secondary white--text">Gene information</v-toolbar-title> <v-toolbar-title class="primary white--text">Gene information</v-toolbar-title>
<v-list> <v-list>
<template v-for="(item, index) in gene_detail"> <template v-for="(item, index) in gene_detail">
<v-divider <v-divider
...@@ -34,50 +35,8 @@ ...@@ -34,50 +35,8 @@
</v-list> </v-list>
</v-card> </v-card>
</v-flex> </v-flex>
<v-flex xs12 md6 lg4> <!-- KEGG Function -->
<v-card> <KeggCard :kegg_id='kegg_id'></KeggCard>
<v-toolbar-title class="secondary white--text">KEGG Function</v-toolbar-title>
<v-list>
<template v-for="(item, index) in kegg_detail">
<v-divider
v-if="index > 0"
:key="index"
></v-divider>
<v-expansion-panel v-if="item.expand" :key="item.title">
<v-expansion-panel-content>
<template v-slot:header>
<div>{{item.title}}</div>
</template>
<v-card>
<v-list>
<template v-for="(element, elindex) in item.content">
<v-divider
v-if="elindex > 0"
:key="elindex"
></v-divider>
<v-list-tile :key="element.title">
<v-list-tile-content :key="element.content">
<v-list-tile-title v-if="element.title" v-html="element.title"></v-list-tile-title>
<v-list-tile-title v-else v-html="elindex"></v-list-tile-title>
<v-list-tile-sub-title v-if="element.authors" v-html="element.authors"></v-list-tile-sub-title>
<v-list-tile-sub-title v-else v-html="element"></v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</template>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-list-tile v-else :key="item.title">
<v-list-tile-content :key="item.title">
<v-list-tile-title v-html="item.title"></v-list-tile-title>
<v-list-tile-sub-title v-html="item.content"></v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</template>
</v-list>
</v-card>
</v-flex>
</v-layout> </v-layout>
</v-container> </v-container>
</v-card> </v-card>
...@@ -87,15 +46,16 @@ ...@@ -87,15 +46,16 @@
<script> <script>
import axios from 'axios'; import axios from 'axios';
import KeggCard from '@/components/KeggCard.vue';
export default { export default {
components: { KeggCard },
name: 'genes', name: 'genes',
data() { data() {
return { return {
gene_id: "", gene_id: "",
gene_detail: [], gene_detail: [],
kegg_id: "", kegg_id: "",
kegg_detail: [],
}; };
}, },
mounted() { mounted() {
...@@ -124,38 +84,7 @@ export default { ...@@ -124,38 +84,7 @@ export default {
content: response.data.length, content: response.data.length,
}, },
]; ];
var kegg_id = response.data.functions[0]; this.kegg_id = response.data.functions[0];
return axios.get('http://togows.org/entry/kegg-orthology/' + kegg_id + '.json', {
headers: {
Accept: 'application/json',
},
})
})
.then((response) => {
this.kegg_detail = [
{
title: 'ID',
content: response.data[0].entry_id,
},
{
title: 'Name',
content: response.data[0].name,
},
{
title: 'Definition',
content: response.data[0].definition,
},
{
title: 'Pathways',
content: response.data[0].pathways,
expand: true,
},
{
title: 'References',
content: response.data[0].references,
expand: true,
},
];
}) })
.catch((error) => { .catch((error) => {
console.log(error); console.log(error);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment