bulk move

src/app/app.module.ts

@@ -36,6 +36,7 @@ import { ToolsComponent } from './tools/tools.component';
 import { AddEditComponent } from './vault/add-edit.component';
 import { AttachmentsComponent } from './vault/attachments.component';
 import { BulkDeleteComponent } from './vault/bulk-delete.component';
+import { BulkMoveComponent } from './vault/bulk-move.component';
 import { CiphersComponent } from './vault/ciphers.component';
 import { CollectionsComponent } from './vault/collections.component';
 import { FolderAddEditComponent } from './vault/folder-add-edit.component';
@@ -83,6 +84,7 @@ import { Folder } from 'jslib/models/domain';
         BlurClickDirective,
         BoxRowDirective,
         BulkDeleteComponent,
+        BulkMoveComponent,
         CiphersComponent,
         CollectionsComponent,
         ExportComponent,
@@ -118,6 +120,7 @@ import { Folder } from 'jslib/models/domain';
         AddEditComponent,
         AttachmentsComponent,
         BulkDeleteComponent,
+        BulkMoveComponent,
         CollectionsComponent,
         FolderAddEditComponent,
         ModalComponent,

src/app/vault/bulk-delete.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade">
-    <div class="modal-dialog">
+    <div class="modal-dialog modal-sm">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
                 <h2 class="modal-title">

src/app/vault/bulk-move.component.html

@@ -0,0 +1,30 @@
+<div class="modal fade">
+    <div class="modal-dialog modal-sm">
+        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
+            <div class="modal-header">
+                <h2 class="modal-title">
+                    {{'moveSelected' | i18n}}
+                </h2>
+                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>{{'moveSelectedItemsDesc' | i18n: cipherIds.length}}</p>
+                <div class="form-group">
+                    <label for="folder">{{'folder' | i18n}}</label>
+                    <select id="folder" name="FolderId" [(ngModel)]="folderId" class="form-control">
+                        <option *ngFor="let f of folders" [ngValue]="f.id">{{f.name}}</option>
+                    </select>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button appBlurClick type="submit" class="btn btn-primary" title="{{'save' | i18n}}" [disabled]="form.loading">
+                    <i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
+                    <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
+                </button>
+                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal" title="{{'cancel' | i18n}}">{{'cancel' | i18n}}</button>
+            </div>
+        </form>
+    </div>
+</div>

src/app/vault/bulk-move.component.ts

@@ -0,0 +1,46 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { CipherService } from 'jslib/abstractions/cipher.service';
+import { FolderService } from 'jslib/abstractions/folder.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+import { FolderView } from 'jslib/models/view/folderView';
+
+@Component({
+    selector: 'app-vault-bulk-move',
+    templateUrl: 'bulk-move.component.html',
+})
+export class BulkMoveComponent implements OnInit {
+    @Input() cipherIds: string[] = [];
+    @Output() onMoved = new EventEmitter();
+
+    folderId: string = null;
+    folders: FolderView[] = [];
+    formPromise: Promise<any>;
+
+    constructor(private analytics: Angulartics2, private cipherService: CipherService,
+        private toasterService: ToasterService, private i18nService: I18nService,
+        private folderService: FolderService) { }
+
+    async ngOnInit() {
+        this.folders = await this.folderService.getAllDecrypted();
+        this.folderId = this.folders[0].id;
+    }
+
+    async submit() {
+        this.formPromise = this.cipherService.moveManyWithServer(this.cipherIds, this.folderId);
+        await this.formPromise;
+        this.onMoved.emit();
+        this.analytics.eventTrack.next({ action: 'Bulk Moved Items' });
+        this.toasterService.popAsync('success', null, this.i18nService.t('movedItems'));
+    }
+}

src/app/vault/vault.component.ts

@@ -30,6 +30,7 @@ import { ShareComponent } from './share.component';
 
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { SyncService } from 'jslib/abstractions/sync.service';
+import { BulkMoveComponent } from './bulk-move.component';
 
 @Component({
     selector: 'app-vault',
@@ -45,6 +46,7 @@ export class VaultComponent implements OnInit {
     @ViewChild('share', { read: ViewContainerRef }) shareModalRef: ViewContainerRef;
     @ViewChild('collections', { read: ViewContainerRef }) collectionsModalRef: ViewContainerRef;
     @ViewChild('bulkDeleteTemplate', { read: ViewContainerRef }) bulkDeleteModalRef: ViewContainerRef;
+    @ViewChild('bulkMoveTemplate', { read: ViewContainerRef }) bulkMoveModalRef: ViewContainerRef;
 
     cipherId: string = null;
     favorites: boolean = false;
@@ -286,8 +288,7 @@ export class VaultComponent implements OnInit {
 
         const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
         this.modal = this.bulkDeleteModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<BulkDeleteComponent>(
-            BulkDeleteComponent, this.bulkDeleteModalRef);
+        const childComponent = this.modal.show<BulkDeleteComponent>(BulkDeleteComponent, this.bulkDeleteModalRef);
 
         childComponent.cipherIds = this.ciphersComponent.getSelected();
         childComponent.onDeleted.subscribe(async () => {
@@ -305,7 +306,23 @@ export class VaultComponent implements OnInit {
     }
 
     bulkMove() {
-        //
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.bulkMoveModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<BulkMoveComponent>(BulkMoveComponent, this.bulkMoveModalRef);
+
+        childComponent.cipherIds = this.ciphersComponent.getSelected();
+        childComponent.onMoved.subscribe(async () => {
+            this.modal.close();
+            await this.ciphersComponent.refresh();
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
     }
 
     selectAll(select: boolean) {

src/locales/en/messages.json

@@ -682,5 +682,14 @@
         "example": "150"
       }
     }
+  },
+  "moveSelectedItemsDesc": {
+    "message": "Choose a folder that you would like to move the $COUNT$ selected item(s) to.",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "150"
+      }
+    }
   }
 }