Skip to content
Snippets Groups Projects

Resolve "Add PFAM"

Merged Remi PLANEL requested to merge pfam into dev
Files
2
<script setup lang="ts">
<script setup lang="ts">
const props = defineProps<{
const props = defineProps<{
headers: Array<Object>
headers: Array<Object>;
systems: Array<Object>
systems: Array<Object>;
}>();
}>();
const itemsPerParge = ref(25)
const itemsPerParge = ref(25);
const search = ref('')
const search = ref("");
const sortBy = ref([{ key: 'system', order: 'asc' }])
const sortBy = ref([{ key: "system", order: "asc" }]);
 
const expanded = ref([]);
function filterOnlyCapsText(value, query, item) {
function filterOnlyCapsText(value, query, item) {
if (value != null && query != null) {
if (value != null && query != null) {
if (typeof value === 'string') {
if (typeof value === "string") {
return value.toString().toLowerCase().indexOf(query.toLowerCase()) !== -1
return value.toString().toLowerCase().indexOf(query.toLowerCase()) !== -1;
}
}
if (typeof value == 'object') {
if (typeof value == "object") {
if (value?.name) {
if (value?.name) {
return value.name.toString().toLowerCase().indexOf(query.toLowerCase()) !== -1
return (
}
value.name.toString().toLowerCase().indexOf(query.toLowerCase()) !==
}
-1
 
);
 
}
}
}
return false
}
 
return false;
}
}
</script>
</script>
<template>
<template>
<v-card flat color="transparent" class="my-5">
<v-card flat color="transparent" class="my-5">
<v-toolbar>
<v-toolbar>
<v-toolbar-title>Defense Systems</v-toolbar-title>
<v-toolbar-title>Defense Systems</v-toolbar-title>
<v-text-field v-model="search" density="compact" variant="underlined" prepend-inner-icon="mdi-magnify"
<v-text-field
label="Search for defense systems" single-line hide-details class="mx-2" clearable></v-text-field>
v-model="search"
</v-toolbar>
density="compact"
<v-data-table :items-per-page="itemsPerParge" v-model:sort-by="sortBy" :headers="props.headers" density="compact"
variant="underlined"
:custom-filter="filterOnlyCapsText" :items="props.systems" :search="search">
prepend-inner-icon="mdi-magnify"
<template #[`item.system`]="{ item }">
label="Search for defense systems"
<v-chip variant="text" link :to="`${item.columns.system.path}`">{{
single-line
item.columns.system.name }}</v-chip>
hide-details
</template>
class="mx-2"
<template #[`item.article`]="{ item }">
clearable
<ArticleDoi v-if="item.columns?.article" :doi="item.columns.article.doi"
></v-text-field>
:title="item.columns.article?.title" :abstract="item.columns.article?.abstract" :divider="false"
</v-toolbar>
:enumerate="false" />
<v-data-table
</template>
:items-per-page="itemsPerParge"
</v-data-table>
v-model:sort-by="sortBy"
</v-card>
:headers="props.headers"
 
v-model:expanded="expanded"
 
density="compact"
 
:custom-filter="filterOnlyCapsText"
 
:items="props.systems"
 
:search="search"
 
item-value="system"
 
show-expand
 
>
 
<template #[`item.system`]="{ item }">
 
<v-chip variant="text" link :to="`${item.columns.system.path}`">{{
 
item.columns.system.name
 
}}</v-chip>
 
</template>
 
<template #[`item.article`]="{ item }">
 
<ArticleDoi
 
v-if="item.columns?.article"
 
:doi="item.columns.article.doi"
 
:title="item.columns.article?.title"
 
:abstract="item.columns.article?.abstract"
 
:divider="false"
 
:enumerate="false"
 
/>
 
</template>
 
<template #[`item.PFAM`]="{ item }">
 
<pfam-chips :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>
 
</template>
 
</v-data-table>
 
</v-card>
</template>
</template>
 
\ No newline at end of file
Loading