1 files changed, 81 insertions, 0 deletions
diff --git a/src/views/_sila/Overview/OverviewCard.vue b/src/views/_sila/Overview/OverviewCard.vue
new file mode 100644
index 00000000..4fc0a031
--- /dev/null
+++ b/src/views/_sila/Overview/OverviewCard.vue
@@ -0,0 +1,81 @@
+<template>
+  <b-card bg-variant="light" border-variant="light" class="mb-4">
+    <div class="justify-content-between align-items-center d-flex flex-wrap">
+      <h3 class="h5 mb-0">{{ title }}</h3>
+      <div class="card-buttons">
+        <b-button
+          v-if="exportButton || downloadButton"
+          :disabled="disabled"
+          :download="download"
+          :href="href"
+          class="p-0"
+          variant="link"
+        >
+          <span v-if="downloadButton">{{ $t('global.action.download') }}</span>
+          <span v-if="exportButton">{{ $t('global.action.exportAll') }}</span>
+        </b-button>
+        <span v-if="exportButton || downloadButton" class="pl-2 pr-2">|</span>
+        <b-link :to="to">{{ $t('pageOverview.viewMore') }}</b-link>
+      </div>
+    </div>
+    <slot></slot>
+  </b-card>
+</template>
+
+<script>
+export default {
+  name: 'OverviewCard',
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    disabled: {
+      type: Boolean,
+      default: true,
+    },
+    downloadButton: {
+      type: Boolean,
+      default: false,
+    },
+    exportButton: {
+      type: Boolean,
+      default: false,
+    },
+
+    fileName: {
+      type: String,
+      default: 'data',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    to: {
+      type: String,
+      default: '/',
+    },
+  },
+  computed: {
+    dataForExport() {
+      return JSON.stringify(this.data);
+    },
+    download() {
+      return `${this.fileName}.json`;
+    },
+    href() {
+      return `data:text/json;charset=utf-8,${this.dataForExport}`;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+a {
+  vertical-align: middle;
+  font-size: 14px;
+}
+.card {
+  min-width: 310px;
+}
+</style>