manage item collections

jslib

@@ -1 +1 @@
-Subproject commit b3f71ed8e406008987c29b29b0366a7c0f246765
+Subproject commit 1021f23277db5a47ae9b7be8e8021ad5005a8c10

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 { CiphersComponent } from './vault/ciphers.component';
+import { CollectionsComponent } from './vault/collections.component';
 import { FolderAddEditComponent } from './vault/folder-add-edit.component';
 import { GroupingsComponent } from './vault/groupings.component';
 import { OrganizationsComponent } from './vault/organizations.component';
@@ -81,6 +82,7 @@ import { Folder } from 'jslib/models/domain';
         BlurClickDirective,
         BoxRowDirective,
         CiphersComponent,
+        CollectionsComponent,
         ExportComponent,
         FallbackSrcDirective,
         FolderAddEditComponent,
@@ -113,6 +115,7 @@ import { Folder } from 'jslib/models/domain';
     entryComponents: [
         AddEditComponent,
         AttachmentsComponent,
+        CollectionsComponent,
         FolderAddEditComponent,
         ModalComponent,
         ShareComponent,

src/app/vault/collections.component.html

@@ -0,0 +1,48 @@
+<div class="modal fade">
+    <div class="modal-dialog">
+        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
+            <div class="modal-header">
+                <h2 class="modal-title">
+                    {{'collections' | i18n}}
+                    <small *ngIf="cipher">{{cipher.name}}</small>
+                </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>{{'collectionsDesc' | i18n}}</p>
+                <div class="d-flex">
+                    <h3>{{'collections' | i18n}}</h3>
+                    <small class="ml-auto d-flex">
+                        <button type="button" appBlurClick (click)="selectAll()" class="btn btn-link btn-sm py-0">
+                            {{'selectAll' | i18n}}
+                        </button>
+                        <button type="button" appBlurClick (click)="unselectAll()" class="btn btn-link btn-sm py-0">
+                            {{'unselectAll' | i18n}}
+                        </button>
+                    </small>
+                </div>
+                <table class="table table-hover table-list mb-0" *ngIf="collections">
+                    <tbody>
+                        <tr *ngFor="let c of collections; let i = index" (click)="check(c)">
+                            <td class="table-list-checkbox">
+                                <input type="checkbox" [(ngModel)]="c.checked" name="Collection[{{i}}].Checked">
+                            </td>
+                            <td>
+                                <span appStopProp>{{c.name}}</span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </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/collections.component.ts

@@ -0,0 +1,85 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnDestroy,
+    OnInit,
+    Output,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { CipherService } from 'jslib/abstractions/cipher.service';
+import { CollectionService } from 'jslib/abstractions/collection.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+import { CipherView } from 'jslib/models/view/cipherView';
+import { CollectionView } from 'jslib/models/view/collectionView';
+
+import { Cipher } from 'jslib/models/domain/cipher';
+
+@Component({
+    selector: 'app-vault-collections',
+    templateUrl: 'collections.component.html',
+})
+export class CollectionsComponent implements OnInit, OnDestroy {
+    @Input() cipherId: string;
+    @Output() onSavedCollections = new EventEmitter();
+
+    formPromise: Promise<any>;
+    cipher: CipherView;
+    collections: CollectionView[] = [];
+
+    private cipherDomain: Cipher;
+
+    constructor(private collectionService: CollectionService, private analytics: Angulartics2,
+        private toasterService: ToasterService, private i18nService: I18nService,
+        private cipherService: CipherService) { }
+
+    async ngOnInit() {
+        this.cipherDomain = await this.cipherService.get(this.cipherId);
+        this.cipher = await this.cipherDomain.decrypt();
+        const allCollections = await this.collectionService.getAllDecrypted();
+        this.collections = allCollections.filter((c) =>
+            !c.readOnly && c.organizationId === this.cipher.organizationId);
+
+        this.unselectAll();
+        if (this.cipherDomain.collectionIds != null) {
+            for (const collection of this.collections) {
+                (collection as any).checked = this.cipherDomain.collectionIds.indexOf(collection.id) > -1;
+            }
+        }
+    }
+
+    ngOnDestroy() {
+        this.unselectAll();
+    }
+
+    async submit() {
+        this.cipherDomain.collectionIds = this.collections
+            .filter((c) => !!(c as any).checked)
+            .map((c) => c.id);
+        this.formPromise = this.cipherService.saveCollectionsWithServer(this.cipherDomain);
+        await this.formPromise;
+        this.onSavedCollections.emit();
+        this.analytics.eventTrack.next({ action: 'Edited Cipher Collections' });
+        this.toasterService.popAsync('success', null, this.i18nService.t('editedItem'));
+    }
+
+    check(c: CollectionView) {
+        (c as any).checked = !(c as any).checked;
+    }
+
+    selectAll() {
+        for (const c of this.collections) {
+            (c as any).checked = true;
+        }
+    }
+
+    unselectAll() {
+        for (const c of this.collections) {
+            (c as any).checked = false;
+        }
+    }
+}

src/app/vault/vault.component.html

@@ -45,7 +45,7 @@
                 </div>
             </div>
             <app-vault-ciphers (onCipherClicked)="editCipher($event)" (onAttachmentsClicked)="editCipherAttachments($event)" (onAddCipher)="addCipher()"
-                (onShareClicked)="shareCipher($event)">
+                (onShareClicked)="shareCipher($event)" (onCollectionsClicked)="editCipherCollections($event)">
             </app-vault-ciphers>
         </div>
         <div class="col-3">

src/app/vault/vault.component.ts

@@ -21,13 +21,14 @@ import { ModalComponent } from '../modal.component';
 import { AddEditComponent } from './add-edit.component';
 import { AttachmentsComponent } from './attachments.component';
 import { CiphersComponent } from './ciphers.component';
+import { CollectionsComponent } from './collections.component';
 import { FolderAddEditComponent } from './folder-add-edit.component';
 import { GroupingsComponent } from './groupings.component';
 import { OrganizationsComponent } from './organizations.component';
+import { ShareComponent } from './share.component';
 
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { SyncService } from 'jslib/abstractions/sync.service';
-import { ShareComponent } from './share.component';
 
 @Component({
     selector: 'app-vault',
@@ -177,6 +178,26 @@ export class VaultComponent implements OnInit {
         });
     }
 
+    editCipherCollections(cipher: CipherView) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.shareModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<CollectionsComponent>(CollectionsComponent, this.collectionsModalRef);
+
+        childComponent.cipherId = cipher.id;
+        childComponent.onSavedCollections.subscribe(async () => {
+            this.modal.close();
+            await this.ciphersComponent.refresh();
+        });
+
+        this.modal.onClosed.subscribe(async () => {
+            this.modal = null;
+        });
+    }
+
     async addFolder() {
         if (this.modal != null) {
             this.modal.close();

src/locales/en/messages.json

@@ -660,6 +660,9 @@
     "message": "Organizations"
   },
   "shareDesc": {
-    "message": "Choose an organization that you wish to share this item with. Sharing an item transfers ownership of that item to the organization. You will no longer be the direct owner of this item once it has been shared."
+    "message": "Choose an organization that you wish to share this item with. Sharing transfers ownership of the item to the organization. You will no longer be the direct owner of this item once it has been shared."
+  },
+  "collectionsDesc": {
+    "message": "Edit the collections that this item is being shared with. Only organization users with access to these collections will be able to see this item."
   }
 }