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