1*6a192d52SDixsie Wolmers<template> 2*6a192d52SDixsie Wolmers <b-card bg-variant="light" border-variant="light" class="mb-4"> 3*6a192d52SDixsie Wolmers <div class="justify-content-between align-items-center d-flex flex-wrap"> 4*6a192d52SDixsie Wolmers <h3 class="h5 mb-0">{{ title }}</h3> 5*6a192d52SDixsie Wolmers <div class="card-buttons"> 6*6a192d52SDixsie Wolmers <b-button 7*6a192d52SDixsie Wolmers v-if="exportButton || downloadButton" 8*6a192d52SDixsie Wolmers :disabled="disabled" 9*6a192d52SDixsie Wolmers :download="download" 10*6a192d52SDixsie Wolmers :href="href" 11*6a192d52SDixsie Wolmers class="p-0" 12*6a192d52SDixsie Wolmers variant="link" 13*6a192d52SDixsie Wolmers > 14*6a192d52SDixsie Wolmers <span v-if="downloadButton">{{ $t('global.action.download') }}</span> 15*6a192d52SDixsie Wolmers <span v-if="exportButton">{{ $t('global.action.exportAll') }}</span> 16*6a192d52SDixsie Wolmers </b-button> 17*6a192d52SDixsie Wolmers <span v-if="exportButton || downloadButton" class="pl-2 pr-2">|</span> 18*6a192d52SDixsie Wolmers <b-link :to="to">{{ $t('pageOverview.viewMore') }}</b-link> 19*6a192d52SDixsie Wolmers </div> 20*6a192d52SDixsie Wolmers </div> 21*6a192d52SDixsie Wolmers <slot></slot> 22*6a192d52SDixsie Wolmers </b-card> 23*6a192d52SDixsie Wolmers</template> 24*6a192d52SDixsie Wolmers 25*6a192d52SDixsie Wolmers<script> 26*6a192d52SDixsie Wolmersexport default { 27*6a192d52SDixsie Wolmers name: 'OverviewCard', 28*6a192d52SDixsie Wolmers props: { 29*6a192d52SDixsie Wolmers data: { 30*6a192d52SDixsie Wolmers type: Array, 31*6a192d52SDixsie Wolmers default: () => [], 32*6a192d52SDixsie Wolmers }, 33*6a192d52SDixsie Wolmers disabled: { 34*6a192d52SDixsie Wolmers type: Boolean, 35*6a192d52SDixsie Wolmers default: true, 36*6a192d52SDixsie Wolmers }, 37*6a192d52SDixsie Wolmers downloadButton: { 38*6a192d52SDixsie Wolmers type: Boolean, 39*6a192d52SDixsie Wolmers default: false, 40*6a192d52SDixsie Wolmers }, 41*6a192d52SDixsie Wolmers exportButton: { 42*6a192d52SDixsie Wolmers type: Boolean, 43*6a192d52SDixsie Wolmers default: false, 44*6a192d52SDixsie Wolmers }, 45*6a192d52SDixsie Wolmers 46*6a192d52SDixsie Wolmers fileName: { 47*6a192d52SDixsie Wolmers type: String, 48*6a192d52SDixsie Wolmers default: 'data', 49*6a192d52SDixsie Wolmers }, 50*6a192d52SDixsie Wolmers title: { 51*6a192d52SDixsie Wolmers type: String, 52*6a192d52SDixsie Wolmers default: '', 53*6a192d52SDixsie Wolmers }, 54*6a192d52SDixsie Wolmers to: { 55*6a192d52SDixsie Wolmers type: String, 56*6a192d52SDixsie Wolmers default: '/', 57*6a192d52SDixsie Wolmers }, 58*6a192d52SDixsie Wolmers }, 59*6a192d52SDixsie Wolmers computed: { 60*6a192d52SDixsie Wolmers dataForExport() { 61*6a192d52SDixsie Wolmers return JSON.stringify(this.data); 62*6a192d52SDixsie Wolmers }, 63*6a192d52SDixsie Wolmers download() { 64*6a192d52SDixsie Wolmers return `${this.fileName}.json`; 65*6a192d52SDixsie Wolmers }, 66*6a192d52SDixsie Wolmers href() { 67*6a192d52SDixsie Wolmers return `data:text/json;charset=utf-8,${this.dataForExport}`; 68*6a192d52SDixsie Wolmers }, 69*6a192d52SDixsie Wolmers }, 70*6a192d52SDixsie Wolmers}; 71*6a192d52SDixsie Wolmers</script> 72*6a192d52SDixsie Wolmers 73*6a192d52SDixsie Wolmers<style lang="scss" scoped> 74*6a192d52SDixsie Wolmersa { 75*6a192d52SDixsie Wolmers vertical-align: middle; 76*6a192d52SDixsie Wolmers font-size: 14px; 77*6a192d52SDixsie Wolmers} 78*6a192d52SDixsie Wolmers.card { 79*6a192d52SDixsie Wolmers min-width: 310px; 80*6a192d52SDixsie Wolmers} 81*6a192d52SDixsie Wolmers</style> 82