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