From 8fa639f252b20ddb550fe0cf71ba7ea2dfe47168 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 13:30:34 -0400
Subject: [PATCH] add bulk action buttons

---
 src/components/user_settings/user_settings.js |  4 ++-
 .../user_settings/user_settings.vue           | 26 +++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index f8742cd4..022c847b 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -10,6 +10,7 @@ import fileSizeFormatService from '../../services/file_size_format/file_size_for
 import BlockCard from '../block_card/block_card.vue'
 import MuteCard from '../mute_card/mute_card.vue'
 import SelectableList from '../selectable_list/selectable_list.vue'
+import ProgressButton from '../progress_button/progress_button.vue'
 import EmojiInput from '../emoji-input/emoji-input.vue'
 import Autosuggest from '../autosuggest/autosuggest.vue'
 import withSubscription from '../../hocs/with_subscription/with_subscription'
@@ -73,7 +74,8 @@ const UserSettings = {
     EmojiInput,
     Autosuggest,
     BlockCard,
-    MuteCard
+    MuteCard,
+    ProgressButton
   },
   computed: {
     user () {
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index e6100ced..8bce431a 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -201,6 +201,22 @@
             </Autosuggest>
           </div>
           <BlockList :refresh="true" :getKey="item => item">
+            <template slot="header" slot-scope="p">
+              <div class="bulk-actions-wrapper">
+                <ProgressButton class="btn btn-default" v-if="p.selected.length > 0">
+                  {{ $t('user_card.block') }}
+                  <template slot="progress">
+                    {{ $t('user_card.block_progress') }}
+                  </template>
+                </ProgressButton>
+                <ProgressButton class="btn btn-default" v-if="p.selected.length > 0">
+                  {{ $t('user_card.unblock') }}
+                  <template slot="progress">
+                    {{ $t('user_card.unblock_progress') }}
+                  </template>
+                </ProgressButton>
+              </div>
+            </template>
             <template slot="item" slot-scope="p">
               <BlockCard :userId="p.item" />
             </template>
@@ -282,5 +298,15 @@
   &-usersearch-wrapper {
     padding: 1em;
   }
+
+  .bulk-actions-wrapper {
+    text-align: right;
+    padding: 0 1em;
+    min-height: 28px;
+
+    button {
+      width: 10em;
+    }
+  }
 }
 </style>