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>
26export default {
27  name: 'OverviewCard',
28  props: {
29    data: {
30      type: Array,
31      default: () => [],
32    },
33    disabled: {
34      type: Boolean,
35      default: true,
36    },
37    downloadButton: {
38      type: Boolean,
39      default: false,
40    },
41    exportButton: {
42      type: Boolean,
43      default: false,
44    },
45
46    fileName: {
47      type: String,
48      default: 'data',
49    },
50    title: {
51      type: String,
52      default: '',
53    },
54    to: {
55      type: String,
56      default: '/',
57    },
58  },
59  computed: {
60    dataForExport() {
61      return JSON.stringify(this.data);
62    },
63    download() {
64      return `${this.fileName}.json`;
65    },
66    href() {
67      return `data:text/json;charset=utf-8,${this.dataForExport}`;
68    },
69  },
70};
71</script>
72
73<style lang="scss" scoped>
74a {
75  vertical-align: middle;
76  font-size: 14px;
77}
78.card {
79  min-width: 310px;
80}
81</style>
82