moveToInbox action + actions array in bulkActions component

src/components/BulkActionBar.vue

@@ -3,15 +3,26 @@
     <span v-if="!allAreSelected && numberSelected > 0">-</span> <!-- later on this minus sign will be in the checkbox, as it is in gmail -->
     <input type="checkbox" :checked="allAreSelected" @click="bulkSelect">
     
-    <button @click="emailSelection.markRead()" :disabled="Array.from(emailSelection.emails).every(e => e.read)">
+    <button @click="emailSelection.markRead()"
+            :disabled="Array.from(emailSelection.emails).every(e => e.read)"
+            v-if="actions.includes('markRead')">
       Mark Read
     </button>
-    <button @click="emailSelection.markUnread()" :disabled="Array.from(emailSelection.emails).every(e => !e.read)">
+    <button @click="emailSelection.markUnread()" 
+            :disabled="Array.from(emailSelection.emails).every(e => !e.read)"
+            v-if="actions.includes('markUnread')">
       Mark Unread
     </button>
-    <button @click="emailSelection.archive()" :disabled="numberSelected == 0">
+    <button @click="emailSelection.archive()" 
+            :disabled="numberSelected == 0"
+            v-if="actions.includes('archive')">
       Archive
     </button>
+    <button @click="emailSelection.moveToInbox()"
+            :disabled="numberSelected == 0"
+            v-if="actions.includes('moveToInbox')">
+      Move to Inbox
+    </button>
   </div>
 </template>
 
@@ -42,6 +53,10 @@
       emails: {
         type: Array,
         default: []
+      },
+      actions: {
+        type: Array,
+        default: ['markRead', 'markUnread']
       }
     }
   }

src/components/MailScreenArchived.vue

@@ -1,7 +1,7 @@
 <template>
   <h1>VMail Archives</h1>
   
-  <BulkActionBar :emails="archivedEmails" />
+  <BulkActionBar :emails="archivedEmails" :actions="['markRead', 'markUnread', 'moveToInbox']" />
 
   <MailTable :emails="archivedEmails" />
 </template>

src/components/MailScreenInbox.vue

@@ -1,7 +1,7 @@
 <template>
   <h1>VMail Inbox</h1>
   
-  <BulkActionBar :emails="inboxEmails" />
+  <BulkActionBar :emails="inboxEmails" :actions="['markRead', 'markUnread', 'archive']" />
 
   <MailTable :emails="inboxEmails" />
 </template>

src/composition/useEmailSelection.js

@@ -28,6 +28,7 @@ export const useEmailSelection = function(){
     markRead(){ this.forSelected(e => e.read = true )},
     markUnread(){ this.forSelected(e => e.read = false )},
     archive(){ this.forSelected(e => e.archived = true); this.clear();},
+    moveToInbox(){ this.forSelected(e => e.archived = false); this.clear();}
   })
 
   return {