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
This commit is contained in:
Thomas Rittson 2021-09-20 10:36:40 +10:00 committed by GitHub
parent 16e998e664
commit 0f984efd61
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 113 additions and 56 deletions

View File

@ -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);
}
}

View File

@ -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);

View File

@ -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);
}
}
}

View File

@ -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;