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