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$toolbar-height: 46px;
72
73.toolbar-container {
74  width: 100%;
75  position: relative;
76  z-index: 5;
77}
78
79.toolbar-content {
80  height: $toolbar-height;
81  z-index: $zindex-dropdown + 1;
82  background-color: theme-color('primary');
83  color: $white;
84  position: absolute;
85  left: 0;
86  right: 0;
87  top: -$toolbar-height;
88  display: flex;
89  flex-direction: row;
90  justify-content: space-between;
91}
92
93.toolbar-actions {
94  > :last-child {
95    position: relative;
96    &::before {
97      content: '';
98      position: absolute;
99      height: $toolbar-height / 2;
100      border-left: 2px solid $white;
101      left: -2px;
102      top: $toolbar-height / 4;
103    }
104  }
105}
106
107.toolbar-selected {
108  line-height: $toolbar-height;
109  margin: 0;
110  padding: 0 $spacer;
111}
112
113.slide-enter-active {
114  transition: transform $duration--moderate-02 $entrance-easing--productive;
115}
116.slide-leave-active {
117  transition: transform $duration--moderate-02 $exit-easing--productive;
118}
119.slide-enter,
120.slide-leave-to {
121  transform: translateY($toolbar-height);
122}
123</style>
124