Move custom fields to separate components (#489)

* Move add-edit custom fields to own component

* Fix linting

* Fix change handling if cipherType changes

* Removed linked fields work

* Move view custom fields to own component

* Remove unnecessary imports

* Remove old logic from component

angular/src/components/add-edit-custom-fields.component.ts

@@ -0,0 +1,78 @@
+import {
+    Directive,
+    Input,
+} from '@angular/core';
+
+import {
+    CdkDragDrop,
+    moveItemInArray,
+} from '@angular/cdk/drag-drop';
+
+import { EventService } from 'jslib-common/abstractions/event.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+
+import {
+    CipherView,
+    FieldView,
+} from 'jslib-common/models/view';
+
+import { CipherType } from 'jslib-common/enums/cipherType';
+import { EventType } from 'jslib-common/enums/eventType';
+import { FieldType } from 'jslib-common/enums/fieldType';
+
+@Directive()
+export class AddEditCustomFieldsComponent {
+    @Input() cipher: CipherView;
+    @Input() editMode: boolean;
+
+    addFieldType: FieldType = FieldType.Text;
+    addFieldTypeOptions: any[];
+    linkedFieldOptions: any[] = [];
+
+    cipherType = CipherType;
+    fieldType = FieldType;
+    eventType = EventType;
+
+    constructor(private i18nService: I18nService, private eventService: EventService) {
+        this.addFieldTypeOptions = [
+            { name: i18nService.t('cfTypeText'), value: FieldType.Text },
+            { name: i18nService.t('cfTypeHidden'), value: FieldType.Hidden },
+            { name: i18nService.t('cfTypeBoolean'), value: FieldType.Boolean },
+        ];
+    }
+
+    addField() {
+        if (this.cipher.fields == null) {
+            this.cipher.fields = [];
+        }
+
+        const f = new FieldView();
+        f.type = this.addFieldType;
+        f.newField = true;
+
+        this.cipher.fields.push(f);
+    }
+
+    removeField(field: FieldView) {
+        const i = this.cipher.fields.indexOf(field);
+        if (i > -1) {
+            this.cipher.fields.splice(i, 1);
+        }
+    }
+
+    toggleFieldValue(field: FieldView) {
+        const f = (field as any);
+        f.showValue = !f.showValue;
+        if (this.editMode && f.showValue) {
+            this.eventService.collect(EventType.Cipher_ClientToggledHiddenFieldVisible, this.cipher.id);
+        }
+    }
+
+    trackByFunction(index: number, item: any) {
+        return index;
+    }
+
+    drop(event: CdkDragDrop<string[]>) {
+        moveItemInArray(this.cipher.fields, event.previousIndex, event.currentIndex);
+    }
+}

angular/src/components/add-edit.component.ts

@@ -1,7 +1,3 @@
-import {
-    CdkDragDrop,
-    moveItemInArray,
-} from '@angular/cdk/drag-drop';
 import {
     Directive,
     EventEmitter,
@@ -13,7 +9,6 @@ import {
 import { CipherRepromptType } from 'jslib-common/enums/cipherRepromptType';
 import { CipherType } from 'jslib-common/enums/cipherType';
 import { EventType } from 'jslib-common/enums/eventType';
-import { FieldType } from 'jslib-common/enums/fieldType';
 import { OrganizationUserStatusType } from 'jslib-common/enums/organizationUserStatusType';
 import { PolicyType } from 'jslib-common/enums/policyType';
 import { SecureNoteType } from 'jslib-common/enums/secureNoteType';
@@ -36,7 +31,6 @@ import { Cipher } from 'jslib-common/models/domain/cipher';
 import { CardView } from 'jslib-common/models/view/cardView';
 import { CipherView } from 'jslib-common/models/view/cipherView';
 import { CollectionView } from 'jslib-common/models/view/collectionView';
-import { FieldView } from 'jslib-common/models/view/fieldView';
 import { FolderView } from 'jslib-common/models/view/folderView';
 import { IdentityView } from 'jslib-common/models/view/identityView';
 import { LoginUriView } from 'jslib-common/models/view/loginUriView';
@@ -75,13 +69,10 @@ export class AddEditComponent implements OnInit {
     showCardNumber: boolean = false;
     showCardCode: boolean = false;
     cipherType = CipherType;
-    fieldType = FieldType;
-    addFieldType: FieldType = FieldType.Text;
     typeOptions: any[];
     cardBrandOptions: any[];
     cardExpMonthOptions: any[];
     identityTitleOptions: any[];
-    addFieldTypeOptions: any[];
     uriMatchOptions: any[];
     ownershipOptions: any[] = [];
     autofillOnPageLoadOptions: any[];
@@ -138,11 +129,6 @@ export class AddEditComponent implements OnInit {
             { name: i18nService.t('ms'), value: i18nService.t('ms') },
             { name: i18nService.t('dr'), value: i18nService.t('dr') },
         ];
-        this.addFieldTypeOptions = [
-            { name: i18nService.t('cfTypeText'), value: FieldType.Text },
-            { name: i18nService.t('cfTypeHidden'), value: FieldType.Hidden },
-            { name: i18nService.t('cfTypeBoolean'), value: FieldType.Boolean },
-        ];
         this.uriMatchOptions = [
             { name: i18nService.t('defaultMatchDetection'), value: null },
             { name: i18nService.t('baseDomain'), value: UriMatchType.Domain },
@@ -322,24 +308,6 @@ export class AddEditComponent implements OnInit {
         }
     }
 
-    addField() {
-        if (this.cipher.fields == null) {
-            this.cipher.fields = [];
-        }
-
-        const f = new FieldView();
-        f.type = this.addFieldType;
-        f.newField = true;
-        this.cipher.fields.push(f);
-    }
-
-    removeField(field: FieldView) {
-        const i = this.cipher.fields.indexOf(field);
-        if (i > -1) {
-            this.cipher.fields.splice(i, 1);
-        }
-    }
-
     trackByFunction(index: number, item: any) {
         return index;
     }
@@ -440,14 +408,6 @@ export class AddEditComponent implements OnInit {
         }
     }
 
-    toggleFieldValue(field: FieldView) {
-        const f = (field as any);
-        f.showValue = !f.showValue;
-        if (this.editMode && f.showValue) {
-            this.eventService.collect(EventType.Cipher_ClientToggledHiddenFieldVisible, this.cipherId);
-        }
-    }
-
     toggleUriOptions(uri: LoginUriView) {
         const u = (uri as any);
         u.showOptions = u.showOptions == null && uri.match != null ? false : !u.showOptions;
@@ -458,10 +418,6 @@ export class AddEditComponent implements OnInit {
         u.showOptions = u.showOptions == null ? true : u.showOptions;
     }
 
-    drop(event: CdkDragDrop<string[]>) {
-        moveItemInArray(this.cipher.fields, event.previousIndex, event.currentIndex);
-    }
-
     async organizationChanged() {
         if (this.writeableCollections != null) {
             this.writeableCollections.forEach(c => (c as any).checked = false);

angular/src/components/view-custom-fields.component.ts

@@ -0,0 +1,35 @@
+import {
+    Directive,
+    Input,
+} from '@angular/core';
+
+import { EventType } from 'jslib-common/enums/eventType';
+import { FieldType } from 'jslib-common/enums/fieldType';
+
+import { EventService } from 'jslib-common/abstractions/event.service';
+
+import { CipherView } from 'jslib-common/models/view/cipherView';
+import { FieldView } from 'jslib-common/models/view/fieldView';
+
+@Directive()
+export class ViewCustomFieldsComponent {
+    @Input() cipher: CipherView;
+    @Input() promptPassword: () => Promise<boolean>;
+    @Input() copy: (value: string, typeI18nKey: string, aType: string) => void;
+
+    fieldType = FieldType;
+
+    constructor(private eventService: EventService) { }
+
+    async toggleFieldValue(field: FieldView) {
+        if (!await this.promptPassword()) {
+            return;
+        }
+
+        const f = (field as any);
+        f.showValue = !f.showValue;
+        if (f.showValue) {
+            this.eventService.collect(EventType.Cipher_ClientToggledHiddenFieldVisible, this.cipher.id);
+        }
+    }
+}

angular/src/components/view.component.ts

@@ -234,18 +234,6 @@ export class ViewComponent implements OnDestroy, OnInit {
         }
     }
 
-    async toggleFieldValue(field: FieldView) {
-        if (!await this.promptPassword()) {
-            return;
-        }
-
-        const f = (field as any);
-        f.showValue = !f.showValue;
-        if (f.showValue) {
-            this.eventService.collect(EventType.Cipher_ClientToggledHiddenFieldVisible, this.cipherId);
-        }
-    }
-
     launch(uri: LoginUriView, cipherId?: string) {
         if (!uri.canLaunch) {
             return;