collection management

jslib

@@ -1 +1 @@
-Subproject commit 89c23522d5697c722dcbe7d074cd12ebb6dc8783
+Subproject commit 8e377050e9bfddae46fa0a167771b670593eca16

src/popup/app-routing.animations.ts

@@ -123,8 +123,8 @@ export const routerTransition = trigger('routerTransition', [
     transition('edit-cipher => share-cipher', inSlideUp),
     transition('share-cipher => edit-cipher', outSlideDown),
 
-    transition('edit-cipher => attachments', inSlideLeft),
+    transition('edit-cipher => attachments, edit-cipher => collections', inSlideLeft),
-    transition('attachments => edit-cipher', outSlideRight),
+    transition('attachments => edit-cipher, collections => edit-cipher', outSlideRight),
 
     transition('tabs => export', inSlideLeft),
     transition('export => tabs', outSlideRight),

src/popup/app-routing.module.ts

@@ -30,6 +30,7 @@ import { TabsComponent } from './tabs.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 { CurrentTabComponent } from './vault/current-tab.component';
 import { GroupingsComponent } from './vault/groupings.component';
 import { PasswordHistoryComponent } from './vault/password-history.component';
@@ -130,6 +131,12 @@ const routes: Routes = [
         canActivate: [AuthGuardService],
         data: { state: 'share-cipher' },
     },
+    {
+        path: 'collections',
+        component: CollectionsComponent,
+        canActivate: [AuthGuardService],
+        data: { state: 'collections' },
+    },
     {
         path: 'attachments',
         component: AttachmentsComponent,

src/popup/app.module.ts

@@ -37,6 +37,7 @@ import { TabsComponent } from './tabs.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 { CurrentTabComponent } from './vault/current-tab.component';
 import { GroupingsComponent } from './vault/groupings.component';
 import { PasswordHistoryComponent } from './vault/password-history.component';
@@ -154,6 +155,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         BoxRowDirective,
         CiphersComponent,
         CiphersListComponent,
+        CollectionsComponent,
         CurrentTabComponent,
         EnvironmentComponent,
         ExportComponent,

src/popup/vault/add-edit.component.html

@@ -258,6 +258,11 @@
                     <div class="row-main">{{'attachments' | i18n}}</div>
                     <i class="fa fa-chevron-right row-sub-icon"></i>
                 </a>
+                <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
+                   (click)="editCollections()" *ngIf="editMode && cipher.organizationId">
+                    <div class="row-main">{{'collections' | i18n}}</div>
+                    <i class="fa fa-chevron-right row-sub-icon"></i>
+                </a>
             </div>
         </div>
         <div class="box">

src/popup/vault/add-edit.component.ts

@@ -91,6 +91,12 @@ export class AddEditComponent extends BaseAddEditComponent {
         }
     }
 
+    editCollections() {
+        if (this.cipher.organizationId != null) {
+            this.router.navigate(['/collections'], { queryParams: { cipherId: this.cipher.id } });
+        }
+    }
+
     cancel() {
         super.cancel();
         this.location.back();

src/popup/vault/collections.component.html

@@ -0,0 +1,34 @@
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
+    <header>
+        <div class="left">
+            <button type="button" appBlurClick (click)="back()">
+                <span class="header-icon"><i class="fa fa-chevron-left"></i></span>
+                <span>{{'back' | i18n}}</span>
+            </button>
+        </div>
+        <div class="center">
+            <span class="title">{{'collections' | i18n}}</span>
+        </div>
+        <div class="right">
+            <button type="submit" appBlurClick [disabled]="form.loading">
+                <span [hidden]="form.loading">{{'save' | i18n}}</span>
+                <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading"></i>
+            </button>
+        </div>
+    </header>
+    <content>
+        <div class="box">
+            <div class="box-content" *ngIf="!collections || !collections.length">
+                {{'noCollectionsInList' | i18n}}
+            </div>
+            <div class="box-content" *ngIf="collections && collections.length">
+                <div class="box-content-row box-content-row-checkbox" *ngFor="let c of collections; let i = index"
+                    appBoxRow>
+                    <label for="collection_{{i}}">{{c.name}}</label>
+                    <input id="collection_{{i}}" type="checkbox" [(ngModel)]="c.checked"
+                        name="Collection[{{i}}].Checked">
+                </div>
+            </div>
+        </div>
+    </content>
+</form>

src/popup/vault/collections.component.ts

@@ -0,0 +1,33 @@
+import { Location } from '@angular/common';
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { CipherService } from 'jslib/abstractions/cipher.service';
+import { CollectionService } from 'jslib/abstractions/collection.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+import { CollectionsComponent as BaseCollectionsComponent } from 'jslib/angular/components/collections.component';
+
+@Component({
+    selector: 'app-vault-collections',
+    templateUrl: 'collections.component.html',
+})
+export class CollectionsComponent extends BaseCollectionsComponent {
+    constructor(collectionService: CollectionService, platformUtilsService: PlatformUtilsService,
+        i18nService: I18nService, cipherService: CipherService,
+        private route: ActivatedRoute, private location: Location) {
+        super(collectionService, platformUtilsService, i18nService, cipherService);
+    }
+
+    async ngOnInit() {
+        this.route.queryParams.subscribe(async (params) => {
+            this.cipherId = params.cipherId;
+            await super.ngOnInit();
+        });
+    }
+
+    back() {
+        this.location.back();
+    }
+}