Skip to content
Snippets Groups Projects
Select Git revision
  • 31ba72e3eb03f96b31c9e00073c6250aea713e6b
  • main default protected
  • dev protected
  • tclabby-main-patch-92350
  • tclabby-main-patch-26246
  • operon-struct-type
  • operon-struct-type-article
  • remove-duplicate-structure-Lamassu-Fam_PDDEXK
  • operon-struct-type-article-update
  • system-distribution-plot
  • update-article-auto-sections
  • genome-context-system
  • select-columns
  • mao
  • ftesson_abip2
  • ftesson_abia
  • ftesson_abij
  • ftesson_abiz
  • ftesson_abie
  • ftesson_abir
  • ftesson_abii
21 results

ArticleReference.vue

Blame
  • ArticleReference.vue 2.24 KiB
    <script setup lang="ts">
    import { useDisplay } from "vuetify";
    
    export interface Props {
        index?: number;
        doi: string;
        divider?: boolean;
        enumerate?: boolean;
        title?: string;
        abstract?: string;
    }
    
    const props = withDefaults(defineProps<Props>(), {
        enumerate: true,
        divider: false,
    });
    const { article } = useFetchArticle(props.doi);
    const { mobile } = useDisplay();
    
    const articleTitle = computed(() => {
        return props?.title ?? article?.value?.title ?? props.doi;
    });
    
    const articleAuthorsString = computed(() => {
        // console.log(article.value)
        // console.log(props.doi)
        return article.value?.author?.length > 0 ? `${article.value.author[0].family} ${article.value.author[0].given} & al` : null
    })
    
    </script>
    <template>
        <v-list-item v-if="article" :href="article?.href" :id="`ref-${props.doi}`" :target="article?.target" density="compact" class="px-1">
            <template #prepend v-if="!mobile && enumerate">
                <v-avatar color="primary" size="small" density="compact" variant="tonal">
                    {{ props?.index ?? "#" }}
                </v-avatar>
            </template>
    
            <template #title>
                <span class="text-subtitle-1 font-weight-bold">{{
                    articleTitle
                }}</span> <span class="text-caption">{{ articleAuthorsString }}</span>
    
            </template>
            <template #append v-if="!mobile">
                <span> {{ article?.containerTitle ?? "no containerTitle" }} ({{
                    article?.year
                }})</span>
            </template>
            <!-- <v-card flat color="transparent" density="compact" class="my-0">
                <v-card-item density="compact" :class="mobile ? 'px-0' : null">
                    <v-card-title><span class="text-subtitle-1 font-weight-bold">{{
                        articleTitle
                    }}</span></v-card-title>
                    <v-card-subtitle>
                        {{ article?.subtitle ?? "no authors" }}</v-card-subtitle>
                    <v-card-subtitle>
                        {{ article?.containerTitle ?? "no containerTitle" }} ({{
                            article?.year
                        }})</v-card-subtitle>
                </v-card-item>
            </v-card> -->
        </v-list-item>
        <v-divider v-if="props.divider" inset></v-divider>
    </template>