Skip to content
Snippets Groups Projects
Commit 8734a438 authored by Remi  PLANEL's avatar Remi PLANEL
Browse files

Fix api change in datatable item slot

parent 282dd2f0
No related branches found
No related tags found
1 merge request!15Resolve "Download button for structure"
......@@ -26,53 +26,42 @@ function constructPfamUrl(pfam: string) {
}
</script>
<template>
<v-card flat class="d-flex justify-start align-center">
<template v-for="(pfam, index) in pfams" :key="pfam">
<v-chip
v-if="index < itemsToDisplay || itemsToDisplay < 0"
:href="constructPfamUrl(pfam)"
target="_blank"
color="info"
class="mr-1"
>
{{ pfam }}
<v-tooltip activator="parent" location="top">{{
pfamStore.get(pfam)?.DE ?? "none"
}}</v-tooltip></v-chip
>
<!-- class="d-inline-flex justify-start align-center" -->
<v-row>
<v-col>
<v-card flat color="transparent" density="compact" rounded="false">
<template v-for="(pfam, index) in pfams" :key="pfam">
<v-chip v-if="index < itemsToDisplay || itemsToDisplay < 0" :href="constructPfamUrl(pfam)" target="_blank"
color="info" class="mr-1 mb-1">
{{ pfam }}
<v-tooltip activator="parent" location="top">{{
pfamStore.get(pfam)?.DE ?? "none"
}}</v-tooltip></v-chip>
<template v-if="index === itemsToDisplay">
<v-chip
v-if="!show"
variant="text"
class="text-grey text-caption align-self-center px-1"
@click="show = !show"
>
(+{{ pfams.length - itemsToDisplay }} others)
</v-chip>
</template>
</template>
<template v-if="pfams.length > itemsToDisplay && show">
<template v-for="(pfam, index) in pfams" :key="pfam">
<v-chip
v-if="index >= itemsToDisplay"
:href="constructPfamUrl(pfam)"
target="_blank"
color="info"
class="mr-1"
>
{{ pfam }}
<v-tooltip activator="parent" location="top">{{
pfamStore.get(pfam)?.DE ?? "none"
}}</v-tooltip></v-chip
>
</template>
</template>
<v-btn
v-if="itemsToDisplay < pfams.length"
variant="text"
:icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'"
@click="show = !show"
></v-btn>
</v-card>
<template v-if="index === itemsToDisplay">
<span>
<v-chip v-if="!show" variant="text" class="text-grey text-caption align-self-center px-1 "
@click="show = !show">
(+{{ pfams.length - itemsToDisplay }} others)
</v-chip>
<v-btn v-if="itemsToDisplay < pfams.length && !show" variant="text" :icon="'mdi-chevron-down'"
@click="show = !show"></v-btn>
</span>
</template>
</template>
<template v-if="pfams.length > itemsToDisplay && show">
<template v-for="(pfam, index) in pfams" :key="pfam">
<v-chip v-if="index >= itemsToDisplay" :href="constructPfamUrl(pfam)" target="_blank" color="info"
class="mr-1 mb-1">
{{ pfam }}
<v-tooltip activator="parent" location="top">{{
pfamStore.get(pfam)?.DE ?? "none"
}}</v-tooltip></v-chip>
</template>
</template>
<v-btn v-if="itemsToDisplay < pfams.length && show" variant="text" :icon="'mdi-chevron-up'"
@click="show = !show"></v-btn>
</v-card>
</v-col>
</v-row>
</template>
\ No newline at end of file
......@@ -37,7 +37,7 @@ const { initPfam } = usePfamStore();
initPfam();
</script>
<template>
<v-card>
<v-card >
<v-toolbar density="compact">
<v-toolbar-title>Defense Systems</v-toolbar-title>
......@@ -58,14 +58,7 @@ initPfam();
</template>
<template #[`item.PFAM`]="{ item }">
<pfam-chips v-if="item.columns?.PFAM" :pfam-string="item.columns.PFAM"></pfam-chips>
</template>
<template #expanded-row="{ columns, item }">
<tr>
<td :colspan="columns.length" class="v-data-table__td v-data-table-column--align-start">
<pfam-chips :pfam-string="item.columns.PFAM" :items-to-display="-1"></pfam-chips>
</td>
</tr>
<pfam-chips v-if="item?.PFAM" :pfam-string="item.PFAM"></pfam-chips>
</template>
</v-data-table-virtual>
</v-card>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment