corner/src/components/ZoteroPublication.vue

<template>
    <div class="publication">
        <div class="header fbox-h">
            <i class="icon fas fa-caret-right"></i>
            <div class="fbox-v">
                <div id="title">{{d.title}}</div>
                <div id="subtitle">By {{authors}}{{date.year() ? ', ' + date.year() : ''}}</div>
            </div>
        </div>
        <div id="details">
            <MetaTable id="table" :table="tableData"/>
            <div id="abstract" v-if="d.abstractNote">
                <div class="label">Abstract</div>
                <div class="content">{{d.abstractNote}}</div>
            </div>
            <div id="attachments" v-if="item.attachments.length !== 0">
                <div class="label">Attachments</div>
                <div class="content" v-for="a of item.attachments" :key="a.data.key">
                    <a :href="a.links['enclosure'].href">{{a.data.title}}</a>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {Options, Vue} from 'vue-class-component';
import {Prop} from "vue-property-decorator";
import moment from "moment";
import MetaTable from "@/components/MetaTable.vue";
import {capitalize} from "@/scripts/utils";
import linkifyUrls from "linkify-urls";

export interface ZoteroLink
{
    href: string // 'https://...'
    type: string // 'text/html'
    attachmentType?: string // 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
    attachmentSize?: number // bytes?
    title?: string
    length?: string
}

export type ZoteroLinks = {[id: string]: ZoteroLink}

export interface ZoteroCreator
{
    creatorType: string // 'author'
    firstName: string
    lastName: string
}

export interface ZoteroData
{
    key: string
    version: number
    itemType: string // 'document'
    title: string
    creators: ZoteroCreator[]
    abstractNote?: string
    publisher?: string
    date?: string // 'Dec 9 2021'
    language?: string // 'en'
    shortTitle?: string
    url?: string
    accessDate?: string
    archive?: string
    archiveLocation?: string
    libraryCatalog?: string
    rights?: string
    extra?: string
}

export interface ZoteroLibrary
{
    type: string // 'user'
    id: number
    name: string
    links: ZoteroLinks
}

export interface ZoteroMeta
{
    creatorSummary: string // Gui and Burton
    parsedDate: string // 2021-12-09
    numChildren: number
}

export interface ZoteroItem
{
    key: string
    version: number
    library: ZoteroLibrary
    meta: ZoteroMeta
    data: ZoteroData

    attachments: ZoteroAttachment[]
}

export interface ZoteroAttachment
{
    links: ZoteroLinks
    data: {
        key: string
        parentItem: string
        itemType: string // == 'attachment'
        title: string
        contentType: string
        fileName: string
        md5: string
        mtime: number
    }
}

@Options({components: {MetaTable}})
export default class ZoteroPublicationView extends Vue
{
    @Prop({required: true}) item!: ZoteroItem

    get d(): ZoteroData { return this.item.data }
    get date(): moment.Moment { return moment(this.item.meta.parsedDate) }
    get authors(): string { return this.d.creators.map(it => it.firstName + ' ' + it.lastName).join(' & ') }

    get tableData(): {[id: string]: unknown}
    {
        const t: {[id: string]: unknown} = {...this.d}
        t.creators = this.authors
        delete t.key
        delete t.version
        delete t.title
        delete t.abstractNote
        if (t.itemType) t.itemType = capitalize(t.itemType as string)
        if (t.url) t.url = linkifyUrls(t.url as string)
        return t
    }

    mounted(): void
    {
        $('.publication').accordion({collapsible: true, header: 'div.header', active: false,
            heightStyle: "content"})
    }
}
</script>

<style lang="sass" scoped>

.publication
    padding-top: 0.5em
    padding-bottom: 0.5em

    #title
        font-weight: bold

    #subtitle
        font-size: 0.9em

    #details
        padding-left: calc(1.6em + 6px)

        > div
            margin-bottom: 1em

        #table
            margin: 1em 0

        .label
            font-weight: bold

        font-size: 0.8em

.header
    align-items: center

    .icon
        transition: all 0.25s ease
        padding: 0 0.8em

.header.ui-accordion-header-active
    .icon
        transform: rotate(90deg)
</style>