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          <b-button
10            v-for="(action, index) in actions"
11            :key="index"
12            :data-test-id="`table-button-${action.value}Selected`"
13            variant="primary"
14            class="d-block"
15            @click="$emit('batchAction', action.value)"
16          >
17            {{ action.label }}
18          </b-button>
19          <slot name="export"></slot>
20          <b-button
21            variant="primary"
22            class="d-block"
23            @click="$emit('clearSelected')"
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            action.hasOwnProperty('value') && action.hasOwnProperty('label')
48          );
49        });
50      }
51    }
52  },
53  data() {
54    return {
55      isToolbarActive: false
56    };
57  },
58  watch: {
59    selectedItemsCount: function(selectedItemsCount) {
60      if (selectedItemsCount > 0) {
61        this.isToolbarActive = true;
62      } else {
63        this.isToolbarActive = false;
64      }
65    }
66  }
67};
68</script>
69
70<style lang="scss" scoped>
71@import 'src/assets/styles/helpers';
72
73$toolbar-height: 46px;
74
75.toolbar-container {
76  width: 100%;
77  position: relative;
78}
79
80.toolbar-content {
81  height: $toolbar-height;
82  z-index: $zindex-dropdown + 1;
83  background-color: theme-color('primary');
84  color: $white;
85  position: absolute;
86  left: 0;
87  right: 0;
88  top: -$toolbar-height;
89  display: flex;
90  flex-direction: row;
91  justify-content: space-between;
92}
93
94.toolbar-actions {
95  > :last-child {
96    position: relative;
97    &::before {
98      content: '';
99      position: absolute;
100      height: $toolbar-height / 2;
101      border-left: 2px solid $white;
102      left: -2px;
103      top: $toolbar-height / 4;
104    }
105  }
106}
107
108.toolbar-selected {
109  line-height: $toolbar-height;
110  margin: 0;
111  padding: 0 $spacer;
112}
113
114.slide-enter-active {
115  transition: transform $duration--moderate-02 $entrance-easing--productive;
116}
117.slide-leave-active {
118  transition: transform $duration--moderate-02 $exit-easing--productive;
119}
120.slide-enter,
121.slide-leave-to {
122  transform: translateY($toolbar-height);
123}
124</style>
125