Skip to content

Commit

Permalink
Closes #397 - Add Integer Edit-mode Component
Browse files Browse the repository at this point in the history
  • Loading branch information
mpuyosa91 committed Dec 7, 2023
1 parent 117dd81 commit f6235ad
Show file tree
Hide file tree
Showing 6 changed files with 298 additions and 4 deletions.
2 changes: 2 additions & 0 deletions core/app/core/src/lib/core.ts
Original file line number Diff line number Diff line change
Expand Up @@ -381,6 +381,8 @@ export * from './fields/icon/templates/detail/icon.component';
export * from './fields/icon/templates/detail/icon.module';
export * from './fields/int/templates/detail/int.component';
export * from './fields/int/templates/detail/int.module';
export * from './fields/int/templates/edit/int.component';
export * from './fields/int/templates/edit/int.module';
export * from './fields/line-items/line-items.component';
export * from './fields/line-items/line-items.module';
export * from './fields/multienum/templates/detail/multienum.component';
Expand Down
13 changes: 9 additions & 4 deletions core/app/core/src/lib/fields/base-fields.manifest.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ import {DateTimeEditFieldModule} from './datetime/templates/edit/datetime.module
import {DateFilterFieldComponent} from './date/templates/filter/date.component';
import {DateTimeDetailFieldComponent} from './datetime/templates/detail/datetime.component';
import {DateTimeDetailFieldModule} from './datetime/templates/detail/datetime.module';
import {DateTimeFilterFieldComponent} from "./datetime/templates/filter/datetime.component";
import {DateTimeFilterFieldModule} from "./datetime/templates/filter/datetime.module";
import {DateTimeFilterFieldComponent} from './datetime/templates/filter/datetime.component';
import {DateTimeFilterFieldModule} from './datetime/templates/filter/datetime.module';
import {MultiEnumDetailFieldComponent} from './multienum/templates/detail/multienum.component';
import {EnumEditFieldComponent} from './enum/templates/edit/enum.component';
import {BooleanDetailFieldComponent} from './boolean/templates/detail/boolean.component';
Expand Down Expand Up @@ -103,10 +103,12 @@ import {TinymceDetailFieldModule} from './tinymce/templates/detail/tinymce.modul
import {TinymceEditFieldModule} from './tinymce/templates/edit/tinymce.module';
import {TinymceDetailFieldComponent} from './tinymce/templates/detail/tinymce.component';
import {TinymceEditFieldComponent} from './tinymce/templates/edit/tinymce.component';
import {IconListFieldModule} from "./icon/templates/detail/icon.module";
import {IconDetailFieldComponent} from "./icon/templates/detail/icon.component";
import {IconListFieldModule} from './icon/templates/detail/icon.module';
import {IconDetailFieldComponent} from './icon/templates/detail/icon.component';
import {TextListFieldModule} from './text/templates/list/text.module';
import {TextListFieldComponent} from './text/templates/list/text.component';
import {IntEditFieldModule} from './int/templates/edit/int.module';
import {IntEditFieldComponent} from './int/templates/edit/int.component';

export const baseFieldModules = [
VarcharDetailFieldModule,
Expand All @@ -115,6 +117,7 @@ export const baseFieldModules = [
PasswordDetailFieldModule,
PasswordEditFieldModule,
IntDetailFieldModule,
IntEditFieldModule,
IconListFieldModule,
FileDetailFieldModule,
FloatDetailFieldModule,
Expand Down Expand Up @@ -158,6 +161,7 @@ export const baseFieldComponents = [
PasswordDetailFieldComponent,
PasswordEditFieldComponent,
IntDetailFieldComponent,
IntEditFieldComponent,
FileDetailFieldComponent,
FloatDetailFieldComponent,
PhoneDetailFieldComponent,
Expand Down Expand Up @@ -207,6 +211,7 @@ export const baseViewFieldsMap: FieldComponentMap = {
'char.detail': VarcharDetailFieldComponent,
'int.list': IntDetailFieldComponent,
'int.detail': IntDetailFieldComponent,
'int.edit': IntEditFieldComponent,
'file.detail': FileDetailFieldComponent,
'float.list': FloatDetailFieldComponent,
'float.detail': FloatDetailFieldComponent,
Expand Down
37 changes: 37 additions & 0 deletions core/app/core/src/lib/fields/int/templates/edit/int.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<! --
/**
* SuiteCRM is a customer relationship management program developed by SalesAgility Ltd.
* Copyright (C) 2023 SalesAgility Ltd.
*
* This program is free software; you can redistribute it and/or modify it under
* the terms of the GNU Affero General Public License version 3 as published by the
* Free Software Foundation with the addition of the following permission added
* to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
* IN WHICH THE COPYRIGHT IS OWNED BY SALESAGILITY, SALESAGILITY DISCLAIMS THE
* WARRANTY OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
* details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see http://www.gnu.org/licenses.
*
* In accordance with Section 7(b) of the GNU Affero General Public License
* version 3, these Appropriate Legal Notices must retain the display of the
* "Supercharged by SuiteCRM" logo. If the display of the logos is not reasonably
* feasible for technical reasons, the Appropriate Legal Notices must display
* the words "Supercharged by SuiteCRM".
*/
-->

<input [class.is-invalid]="intValueFormControl.invalid && intValueFormControl.touched"
[formControl]="intValueFormControl"
[value]="intValue"
[ngClass]="klass"
type="number"
[min]="field?.definition?.metadata?.min"
[max]="field?.definition?.metadata?.max"
[step]="field?.definition?.metadata?.step ?? 1"
>
116 changes: 116 additions & 0 deletions core/app/core/src/lib/fields/int/templates/edit/int.component.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
/**
* SuiteCRM is a customer relationship management program developed by SalesAgility Ltd.
* Copyright (C) 2023 SalesAgility Ltd.
*
* This program is free software; you can redistribute it and/or modify it under
* the terms of the GNU Affero General Public License version 3 as published by the
* Free Software Foundation with the addition of the following permission added
* to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
* IN WHICH THE COPYRIGHT IS OWNED BY SALESAGILITY, SALESAGILITY DISCLAIMS THE
* WARRANTY OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
* details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
* In accordance with Section 7(b) of the GNU Affero General Public License
* version 3, these Appropriate Legal Notices must retain the display of the
* "Supercharged by SuiteCRM" logo. If the display of the logos is not reasonably
* feasible for technical reasons, the Appropriate Legal Notices must display
* the words "Supercharged by SuiteCRM".
*/

import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
import {IntEditFieldComponent} from './int.component';
import {Component} from '@angular/core';
import {BehaviorSubject, of} from 'rxjs';
import {Field} from 'common';
import {UserPreferenceMockStore} from '../../../../store/user-preference/user-preference.store.spec.mock';
import {SystemConfigStore} from '../../../../store/system-config/system-config.store';
import {UserPreferenceStore} from '../../../../store/user-preference/user-preference.store';
import {CurrencyFormatter} from '../../../../services/formatters/currency/currency-formatter.service';
import {FormControlUtils} from '../../../../services/record/field/form-control.utils';
import {FormatNumberPipe} from '../../../../pipes/format-number/format-number.pipe';
import {NumberFormatter} from '../../../../services/formatters/number/number-formatter.service';

@Component({
selector: 'int-edit-field-test-host-component',
template: '<scrm-int-edit [field]="field"></scrm-int-edit>'
})
class IntEditFieldTestHostComponent {
field: Field = {
type: 'int',
value: '10'
};
}

describe('IntEditFieldComponent', () => {
let testHostComponent: IntEditFieldTestHostComponent;
let testHostFixture: ComponentFixture<IntEditFieldTestHostComponent>;

/* eslint-disable camelcase,@typescript-eslint/camelcase */
const preferences = new BehaviorSubject({
num_grp_sep: ',',
dec_sep: '.',
});
const mockStore = new UserPreferenceMockStore(preferences);
const mockNumberFormatter = new NumberFormatter(mockStore, new FormControlUtils(), 'en-US');
/* eslint-enable camelcase,@typescript-eslint/camelcase */

beforeEach(waitForAsync(() => {
/* eslint-disable camelcase,@typescript-eslint/camelcase */
TestBed.configureTestingModule({
declarations: [
IntEditFieldTestHostComponent,
IntEditFieldComponent,
FormatNumberPipe
],
imports: [],
providers: [
{provide: UserPreferenceStore, useValue: mockStore},
{
provide: CurrencyFormatter,
useValue: new CurrencyFormatter(mockStore, mockNumberFormatter, 'en_us')
},
{
provide: SystemConfigStore, useValue: {
configs$: of({
default_number_grouping_seperator: {
id: '/docroot/api/system-configs/default_number_grouping_seperator',
_id: 'default_number_grouping_seperator',
value: ';',
items: []
},
default_decimal_seperator: {
id: '/docroot/api/system-configs/default_decimal_seperator',
_id: 'default_decimal_seperator',
value: ',',
items: []
}
})
}
},
{provide: NumberFormatter, useValue: mockNumberFormatter}
],
}).compileComponents();
/* eslint-enable camelcase,@typescript-eslint/camelcase */

testHostFixture = TestBed.createComponent(IntEditFieldTestHostComponent);
testHostComponent = testHostFixture.componentInstance;
testHostFixture.detectChanges();
}));

it('should create', () => {
expect(testHostComponent).toBeTruthy();
});

it('should have value', () => {

expect(testHostComponent).toBeTruthy();
expect(testHostFixture.nativeElement.textContent).toContain(10);
});
});
87 changes: 87 additions & 0 deletions core/app/core/src/lib/fields/int/templates/edit/int.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
/**
* SuiteCRM is a customer relationship management program developed by SalesAgility Ltd.
* Copyright (C) 2023 SalesAgility Ltd.
*
* This program is free software; you can redistribute it and/or modify it under
* the terms of the GNU Affero General Public License version 3 as published by the
* Free Software Foundation with the addition of the following permission added
* to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
* IN WHICH THE COPYRIGHT IS OWNED BY SALESAGILITY, SALESAGILITY DISCLAIMS THE
* WARRANTY OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
* details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
* In accordance with Section 7(b) of the GNU Affero General Public License
* version 3, these Appropriate Legal Notices must retain the display of the
* "Supercharged by SuiteCRM" logo. If the display of the logos is not reasonably
* feasible for technical reasons, the Appropriate Legal Notices must display
* the words "Supercharged by SuiteCRM".
*/

import { isEqual } from 'lodash-es';
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {BaseNumberComponent} from '../../../base/base-number.component';
import {SystemConfigStore} from '../../../../store/system-config/system-config.store';
import {DataTypeFormatter} from '../../../../services/formatters/data-type.formatter.service';
import {UserPreferenceStore} from '../../../../store/user-preference/user-preference.store';
import {FieldLogicManager} from '../../../field-logic/field-logic.manager';
import {FieldLogicDisplayManager} from '../../../field-logic-display/field-logic-display.manager';

@Component({
selector: 'scrm-int-edit',
templateUrl: './int.component.html',
styleUrls: []
})
export class IntEditFieldComponent extends BaseNumberComponent {
public intValue = 0;
public intValueFormControl: FormControl = new FormControl(this.intValue);

constructor(
protected userPreferences: UserPreferenceStore,
protected systemConfig: SystemConfigStore,
protected typeFormatter: DataTypeFormatter,
protected logic: FieldLogicManager,
protected logicDisplay: FieldLogicDisplayManager,
) {
super(userPreferences, systemConfig, typeFormatter, logic, logicDisplay);
}

ngOnInit(): void {
this.subscribeIntValueChanges();

super.ngOnInit();
this.subscribeValueChanges();
}

ngOnDestroy(): void {
this.unsubscribeAll();
}

private subscribeIntValueChanges(): void {
this.subs.push(
this.intValueFormControl.valueChanges.subscribe(valueChanges => {
this.intValue = valueChanges;
if (!this.field.formControl || isEqual(this.field.formControl.value, valueChanges)) {
return;
}
this.field.formControl.setValue(valueChanges.toString());
})
);
this.subs.push(
this.field.valueChanges$.subscribe((fieldValue) => {
const intValue = parseInt(fieldValue.value,10) || 0;
if (isEqual(this.intValueFormControl.value, intValue)) {
return;
}
this.intValueFormControl.setValue(intValue);
})
);
}
}
47 changes: 47 additions & 0 deletions core/app/core/src/lib/fields/int/templates/edit/int.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
/**
* SuiteCRM is a customer relationship management program developed by SalesAgility Ltd.
* Copyright (C) 2023 SalesAgility Ltd.
*
* This program is free software; you can redistribute it and/or modify it under
* the terms of the GNU Affero General Public License version 3 as published by the
* Free Software Foundation with the addition of the following permission added
* to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
* IN WHICH THE COPYRIGHT IS OWNED BY SALESAGILITY, SALESAGILITY DISCLAIMS THE
* WARRANTY OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
* details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
* In accordance with Section 7(b) of the GNU Affero General Public License
* version 3, these Appropriate Legal Notices must retain the display of the
* "Supercharged by SuiteCRM" logo. If the display of the logos is not reasonably
* feasible for technical reasons, the Appropriate Legal Notices must display
* the words "Supercharged by SuiteCRM".
*/

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';

import {IntEditFieldComponent} from './int.component';
import {FormatNumberModule} from '../../../../pipes/format-number/format-number.module';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {LabelModule} from '../../../../components/label/label.module';

@NgModule({
declarations: [IntEditFieldComponent],
exports: [IntEditFieldComponent],
imports: [
CommonModule,
FormatNumberModule,
FormsModule,
ReactiveFormsModule,
LabelModule
]
})
export class IntEditFieldModule {
}

0 comments on commit f6235ad

Please sign in to comment.