xref: /openbmc/webui-vue/src/components/Global/TableRowAction.vue (revision de23ea23d88451a2fa2774ec72053772603c23ae) 
1<template>
2  <span>
3    <b-link
4      v-if="value === 'export'"
5      class="align-bottom btn-icon-only py-0 btn-link"
6      :download="download"
7      :href="href"
8      :title="title"
9    >
10      <slot name="icon">
11        {{ $t('global.action.export') }}
12      </slot>
13      <span v-if="btnIconOnly" class="sr-only">{{ title }}</span>
14    </b-link>
15    <b-link
16      v-else-if="
17        value === 'download' && downloadInNewTab && downloadLocation !== ''
18      "
19      class="align-bottom btn-icon-only py-0 btn-link"
20      target="_blank"
21      :href="downloadLocation"
22      :title="title"
23    >
24      <slot name="icon" />
25      <span class="sr-only">
26        {{ $t('global.action.download') }}
27      </span>
28    </b-link>
29    <b-link
30      v-else-if="value === 'download' && downloadLocation !== ''"
31      class="align-bottom btn-icon-only py-0 btn-link"
32      :download="exportName"
33      :href="downloadLocation"
34      :title="title"
35    >
36      <slot name="icon" />
37      <span class="sr-only">
38        {{ $t('global.action.download') }}
39      </span>
40    </b-link>
41    <b-button
42      v-else-if="showButton"
43      variant="link"
44      :class="{ 'btn-icon-only': btnIconOnly }"
45      :disabled="!enabled"
46      :title="btnIconOnly ? title : !title"
47      @click="$emit('click-table-action', value)"
48    >
49      <slot name="icon">
50        {{ title }}
51      </slot>
52      <span v-if="btnIconOnly" class="sr-only">{{ title }}</span>
53    </b-button>
54  </span>
55</template>
56
57<script>
58import { omit } from 'lodash';
59import { useI18n } from 'vue-i18n';
60
61export default {
62  name: 'TableRowAction',
63  props: {
64    value: {
65      type: String,
66      required: true,
67    },
68    enabled: {
69      type: Boolean,
70      default: true,
71    },
72    title: {
73      type: String,
74      default: null,
75    },
76    rowData: {
77      type: Object,
78      default: () => {},
79    },
80    exportName: {
81      type: String,
82      default: 'export',
83    },
84    downloadLocation: {
85      type: String,
86      default: '',
87    },
88    btnIconOnly: {
89      type: Boolean,
90      default: true,
91    },
92    downloadInNewTab: {
93      type: Boolean,
94      default: false,
95    },
96    showButton: {
97      type: Boolean,
98      default: true,
99    },
100  },
101  data() {
102    return {
103      $t: useI18n().t,
104    };
105  },
106  computed: {
107    dataForExport() {
108      return JSON.stringify(omit(this.rowData, 'actions'));
109    },
110    download() {
111      return `${this.exportName}.json`;
112    },
113    href() {
114      return `data:text/json;charset=utf-8,${this.dataForExport}`;
115    },
116  },
117};
118</script>
119