xref: /openbmc/webui-vue/src/components/Global/TableToolbar.vue (revision 7d6b44cb263da09e575c7cb28cab88c1eb339c7b) 
1<template>
2  <transition name="slide">
3    <div v-if="isToolbarActive" class="toolbar-container">
4      <div class="toolbar-content">
5        <p class="toolbar-selected">
6          {{ selectedItemsCount }} {{ $t('global.action.selected') }}
7        </p>
8        <div class="toolbar-actions d-flex">
9          <slot name="toolbar-buttons"></slot>
10          <b-button
11            v-for="(action, index) in actions"
12            :key="index"
13            :data-test-id="`table-button-${action.value}Selected`"
14            variant="primary"
15            class="d-block"
16            @click="$emit('batch-action', action.value)"
17          >
18            {{ action.label }}
19          </b-button>
20          <b-button
21            variant="secondary"
22            class="d-block"
23            @click="$emit('clear-selected')"
24          >
25            {{ $t('global.action.cancel') }}
26          </b-button>
27        </div>
28      </div>
29    </div>
30  </transition>
31</template>
32
33<script>
34export default {
35  name: 'TableToolbar',
36  props: {
37    selectedItemsCount: {
38      type: Number,
39      required: true,
40    },
41    actions: {
42      type: Array,
43      default: () => [],
44      validator: (prop) => {
45        return prop.every((action) => {
46          return (
47            Object.prototype.hasOwnProperty.call(action, 'value') &&
48            Object.prototype.hasOwnProperty.call(action, 'label')
49          );
50        });
51      },
52    },
53  },
54  data() {
55    return {
56      isToolbarActive: false,
57    };
58  },
59  watch: {
60    selectedItemsCount: function (selectedItemsCount) {
61      if (selectedItemsCount > 0) {
62        this.isToolbarActive = true;
63      } else {
64        this.isToolbarActive = false;
65      }
66    },
67  },
68};
69</script>
70
71<style lang="scss" scoped>
72@import '@/assets/styles/bmc/helpers/_index.scss';
73@import '@/assets/styles/bootstrap/_helpers.scss';
74
75@import 'bootstrap/dist/css/bootstrap.css';
76
77$toolbar-height: 46px;
78
79.toolbar-container {
80  width: 100%;
81  position: relative;
82  //z-index: $zindex-dropdown + 1;
83}
84
85.toolbar-content {
86  height: $toolbar-height;
87  background-color: theme-color('primary');
88  color: $white;
89  position: absolute;
90  left: 0;
91  right: 0;
92  top: -$toolbar-height;
93  display: flex;
94  flex-direction: row;
95  justify-content: space-between;
96}
97
98.toolbar-selected {
99  line-height: $toolbar-height;
100  margin: 0;
101  padding: 0 $spacer;
102}
103
104// Using v-deep to style export slot child-element
105// depricated and vue-js 3
106.toolbar-actions ::v-deep .btn {
107  position: relative;
108  &:after {
109    content: '';
110    position: absolute;
111    left: 0;
112    height: 1.5rem;
113    width: 1px;
114    background: rgba($white, 0.6);
115  }
116  &:last-child,
117  &:first-child {
118    &:after {
119      width: 0;
120    }
121  }
122}
123
124.slide-enter-active {
125  transition: transform $duration--moderate-02 $entrance-easing--productive;
126}
127.slide-leave-active {
128  transition: transform $duration--moderate-02 $exit-easing--productive;
129}
130.slide-enter, // Remove this vue2 based only class when switching to vue3
131.slide-enter-from, // This is vue3 based only class modified from 'slide-enter'
132.slide-leave-to {
133  transform: translateY($toolbar-height);
134}
135</style>
136