Add batch actions to local user table
- Create TableToolbar component for table batch actions
- Added Toast warning type and toast title message translations
- Update vue-i18n package to latest v8.15.3 to use improved
pluarlization features
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I455beba4f56b8209b1201bbc5ff3f616e960d189
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
new file mode 100644
index 0000000..fc3736d
--- /dev/null
+++ b/src/components/Global/TableToolbar.vue
@@ -0,0 +1,119 @@
+<template>
+ <transition name="slide">
+ <div v-if="isToolbarActive" class="toolbar-container">
+ <div class="toolbar-content">
+ <p class="toolbar-selected">
+ {{ selectedItemsCount }} {{ $t('global.actions.selected') }}
+ </p>
+ <div class="toolbar-actions d-flex">
+ <b-button
+ v-for="(action, index) in actions"
+ :key="index"
+ variant="primary"
+ class="d-block"
+ @click="$emit('batchAction', action.value)"
+ >
+ {{ $t(action.labelKey) }}
+ </b-button>
+ <b-button
+ variant="primary"
+ class="d-block"
+ @click="$emit('clearSelected')"
+ >
+ {{ $t('global.actions.cancel') }}
+ </b-button>
+ </div>
+ </div>
+ </div>
+ </transition>
+</template>
+
+<script>
+export default {
+ name: 'TableToolbar',
+ props: {
+ selectedItemsCount: {
+ type: Number,
+ required: true
+ },
+ actions: {
+ type: Array,
+ required: true,
+ validator: prop => {
+ return prop.every(action => {
+ return (
+ action.hasOwnProperty('value') && action.hasOwnProperty('labelKey')
+ );
+ });
+ }
+ }
+ },
+ data() {
+ return {
+ isToolbarActive: false
+ };
+ },
+ watch: {
+ selectedItemsCount: function(selectedItemsCount) {
+ if (selectedItemsCount > 0) {
+ this.isToolbarActive = true;
+ } else {
+ this.isToolbarActive = false;
+ }
+ }
+ }
+};
+</script>
+
+<style lang="scss" scoped>
+$toolbar-height: 46px;
+
+.toolbar-container {
+ width: 100%;
+ position: relative;
+}
+
+.toolbar-content {
+ height: $toolbar-height;
+ background-color: $primary;
+ color: $white;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: -$toolbar-height;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.toolbar-actions {
+ > :last-child {
+ position: relative;
+ &::before {
+ content: '';
+ position: absolute;
+ height: $toolbar-height / 2;
+ border-left: 2px solid $white;
+ left: -2px;
+ top: $toolbar-height / 4;
+ }
+ }
+}
+
+.toolbar-selected {
+ line-height: $toolbar-height;
+ margin: 0;
+ padding: 0 $spacer;
+}
+
+.slide-enter-active {
+ transition: transform $duration--moderate-02 $entrance-easing--productive;
+}
+.slide-leave-active {
+ transition: transform $duration--moderate-02 $exit-easing--productive;
+}
+.slide-enter,
+.slide-leave-to {
+ transform: translateY($toolbar-height);
+}
+</style>