From b8c19711691670499850762d92af451143e7de2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Thu, 16 Feb 2023 14:06:19 +0300 Subject: [PATCH 01/19] create form input wrapper component --- .../form-input/form-input.component.html | 13 +++++++ .../form-input/form-input.component.scss | 0 .../form-input/form-input.component.spec.ts | 22 +++++++++++ .../form-input/form-input.component.ts | 39 +++++++++++++++++++ .../theme-shared/src/lib/enums/form.ts | 3 ++ 5 files changed, 77 insertions(+) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.html create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.scss create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.spec.ts create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/enums/form.ts diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.html new file mode 100644 index 0000000000..70e0b383cb --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.html @@ -0,0 +1,13 @@ +
+ + +
+ \ No newline at end of file diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.spec.ts new file mode 100644 index 0000000000..ed506e891b --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FormInputComponent } from './form-input.component'; + +describe('FormInputComponent', () => { + let component: FormInputComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [FormInputComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(FormInputComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts new file mode 100644 index 0000000000..00166ae9f6 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts @@ -0,0 +1,39 @@ +import { AbstractNgModelComponent } from '@abp/ng.core'; +import { Component, EventEmitter, forwardRef, Injector, Input, Output } from '@angular/core'; +import { NG_VALUE_ACCESSOR } from '@angular/forms'; + +@Component({ + selector: 'abp-form-input', + templateUrl: './form-input.component.html', + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => FormInputComponent), + multi: true, + }, + ], +}) +export class FormInputComponent extends AbstractNgModelComponent { + @Input() inputId!: string; + + @Input() inputReadonly: boolean = false; + + @Input() label: string = ''; + @Input() labelClass: string = ''; + + @Input() inputPlaceholder: string = ''; + + @Input() inputType: string = 'text'; + + @Input() inputStyle: string = ''; + + @Input() inputClass: string = 'text'; + + @Output() onBlur = new EventEmitter(); + + @Output() onFocus = new EventEmitter(); + + constructor(injector: Injector) { + super(injector); + } +} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/enums/form.ts b/npm/ng-packs/packages/theme-shared/src/lib/enums/form.ts new file mode 100644 index 0000000000..4d7616d914 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/enums/form.ts @@ -0,0 +1,3 @@ +export enum eFormComponets { + FormInputComponent = 'FormInputComponent', +} From bc6e78301491fee8c9562de8c93668728fa0074a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Thu, 16 Feb 2023 14:21:56 +0300 Subject: [PATCH 02/19] add form input enum for replaceable component key --- npm/ng-packs/packages/theme-shared/src/lib/enums/index.ts | 1 + .../packages/theme-shared/src/lib/theme-shared.module.ts | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/enums/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/enums/index.ts index 3bda94b078..9e781067f7 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/enums/index.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/enums/index.ts @@ -1 +1,2 @@ +export * from './form'; export * from './route-names'; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts index 20c7de13d4..765403f2bd 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts @@ -37,6 +37,7 @@ import { DateParserFormatter } from './utils/date-parser-formatter'; import { CONFIRMATION_ICONS, DEFAULT_CONFIRMATION_ICONS } from './tokens/confirmation-icons.token'; import { PasswordComponent } from './components/password/password.component'; import { AbpVisibleDirective } from './directives'; +import { FormInputComponent } from './components/form-input/form-input.component'; const declarationsWithExports = [ BreadcrumbComponent, @@ -64,7 +65,7 @@ const declarationsWithExports = [ NgbPaginationModule, EllipsisModule, ], - declarations: [...declarationsWithExports, HttpErrorWrapperComponent], + declarations: [...declarationsWithExports, HttpErrorWrapperComponent, FormInputComponent], exports: [NgxDatatableModule, EllipsisModule, NgxValidateCoreModule, ...declarationsWithExports], providers: [DatePipe], }) From 823848466937330ce3cba08a24a5d923a92be5a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Fri, 17 Feb 2023 15:24:11 +0300 Subject: [PATCH 03/19] make input text type --- .../src/lib/components/form-input/form-input.component.html | 6 ++++-- .../src/lib/components/form-input/form-input.component.ts | 6 +++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.html index 70e0b383cb..5b3617bb63 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.html +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.html @@ -1,7 +1,9 @@
- FormInputComponent), multi: true, }, - ], + ] }) export class FormInputComponent extends AbstractNgModelComponent { @Input() inputId!: string; - @Input() inputReadonly: boolean = false; @Input() label: string = ''; @@ -27,7 +26,7 @@ export class FormInputComponent extends AbstractNgModelComponent { @Input() inputStyle: string = ''; - @Input() inputClass: string = 'text'; + @Input() inputClass: string = ''; @Output() onBlur = new EventEmitter(); @@ -36,4 +35,5 @@ export class FormInputComponent extends AbstractNgModelComponent { constructor(injector: Injector) { super(injector); } + } From 22ee8c8d84ce84753710a75e3e3e7a5636f3cde4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Fri, 17 Feb 2023 15:24:50 +0300 Subject: [PATCH 04/19] make checkbox custom wrapper --- .../checkbox/checkbox.component.html | 15 +++++++++ .../checkbox/checkbox.component.scss | 0 .../checkbox/checkbox.component.spec.ts | 22 +++++++++++++ .../components/checkbox/checkbox.component.ts | 32 +++++++++++++++++++ 4 files changed, 69 insertions(+) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.html create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.scss create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.spec.ts create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.html new file mode 100644 index 0000000000..fa5ea40c91 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.html @@ -0,0 +1,15 @@ +
+ + +
\ No newline at end of file diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.spec.ts new file mode 100644 index 0000000000..8abc252968 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CheckboxComponent } from './checkbox.component'; + +describe('CheckboxComponent', () => { + let component: CheckboxComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [CheckboxComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(CheckboxComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts new file mode 100644 index 0000000000..1d7435a8a2 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts @@ -0,0 +1,32 @@ +import { AbstractNgModelComponent } from '@abp/ng.core'; +import { Component, EventEmitter, forwardRef, Injector, Input, Output } from '@angular/core'; +import { CheckboxControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; + +@Component({ + selector: 'abp-checkbox', + templateUrl: './checkbox.component.html', + styleUrls: ['./checkbox.component.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => CheckboxComponent), + multi: true, + }, + ] +}) +export class CheckboxComponent extends AbstractNgModelComponent { + + @Input() label: string; + @Input() checkboxId!: string; + @Input() formControl!: string; + @Input() checkboxStyle: string = ''; + @Input() checkboxClass: string = ''; + @Input() checkboxReadonly: boolean = false; + @Output() onBlur = new EventEmitter(); + @Output() onFocus = new EventEmitter(); + + constructor(injector: Injector) { + super(injector); + } + +} From 49453c592cfad841ff4cbac337ee7b675e823ef3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Fri, 17 Feb 2023 15:25:40 +0300 Subject: [PATCH 05/19] define checkbox replaceable --- npm/ng-packs/packages/theme-shared/src/lib/enums/form.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/enums/form.ts b/npm/ng-packs/packages/theme-shared/src/lib/enums/form.ts index 4d7616d914..17218e0a50 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/enums/form.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/enums/form.ts @@ -1,3 +1,4 @@ export enum eFormComponets { FormInputComponent = 'FormInputComponent', + FormCheckboxComponent = 'CheckboxComponent', } From c77752f97ba11c53c540e24965e52b667283c5da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Fri, 17 Feb 2023 15:26:09 +0300 Subject: [PATCH 06/19] export form-input and checkbox components --- .../packages/theme-shared/src/lib/theme-shared.module.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts index 8a7cf9f851..f7dfecbed2 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts @@ -38,6 +38,8 @@ import { CONFIRMATION_ICONS, DEFAULT_CONFIRMATION_ICONS } from './tokens/confirm import { PasswordComponent } from './components/password/password.component'; import { CardModule } from './components/card/card.module'; import { AbpVisibleDirective } from './directives'; +import { FormInputComponent } from './components/form-input/form-input.component'; +import {CheckboxComponent} from './components/checkbox/checkbox.component'; const declarationsWithExports = [ BreadcrumbComponent, @@ -55,6 +57,8 @@ const declarationsWithExports = [ LoadingDirective, ModalCloseDirective, AbpVisibleDirective, + FormInputComponent, + CheckboxComponent ]; @NgModule({ @@ -65,6 +69,7 @@ const declarationsWithExports = [ NgbPaginationModule, EllipsisModule, CardModule, + ], declarations: [...declarationsWithExports, HttpErrorWrapperComponent], exports: [ @@ -76,7 +81,7 @@ const declarationsWithExports = [ ], providers: [DatePipe], }) -export class BaseThemeSharedModule {} +export class BaseThemeSharedModule { } @NgModule({ imports: [BaseThemeSharedModule], From bcd723f4f8aa04d3f2d0078134f41fce05e7bd25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Fri, 17 Feb 2023 15:27:26 +0300 Subject: [PATCH 07/19] use checkbox wrapper in users component --- npm/ng-packs/angular.json | 58 +++++++++---------- .../lib/components/users/users.component.html | 16 +++-- .../lib/components/users/users.component.ts | 4 +- npm/ng-packs/tsconfig.base.json | 4 +- 4 files changed, 44 insertions(+), 38 deletions(-) diff --git a/npm/ng-packs/angular.json b/npm/ng-packs/angular.json index 7138cb5a38..14416d1d3a 100644 --- a/npm/ng-packs/angular.json +++ b/npm/ng-packs/angular.json @@ -200,50 +200,50 @@ "bundleName": "bootstrap-dim" }, { - "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/ng-bundle.css", - "inject": false, - "bundleName": "ng-bundle" + "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/ng-bundle.css", + "inject": false, + "bundleName": "ng-bundle" }, { - "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/side-menu/layout-bundle.css", - "inject": false, - "bundleName": "layout-bundle" + "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/side-menu/layout-bundle.css", + "inject": false, + "bundleName": "layout-bundle" }, { - "input": "node_modules/@abp/ng.theme.lepton-x/assets/css/abp-bundle.css", - "inject": false, - "bundleName": "abp-bundle" + "input": "node_modules/@abp/ng.theme.lepton-x/assets/css/abp-bundle.css", + "inject": false, + "bundleName": "abp-bundle" }, { - "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/bootstrap-dim.rtl.css", - "inject": false, - "bundleName": "bootstrap-dim.rtl" + "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/bootstrap-dim.rtl.css", + "inject": false, + "bundleName": "bootstrap-dim.rtl" }, { - "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/ng-bundle.rtl.css", - "inject": false, - "bundleName": "ng-bundle.rtl" + "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/ng-bundle.rtl.css", + "inject": false, + "bundleName": "ng-bundle.rtl" }, { - "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/side-menu/layout-bundle.rtl.css", - "inject": false, - "bundleName": "layout-bundle.rtl" + "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/side-menu/layout-bundle.rtl.css", + "inject": false, + "bundleName": "layout-bundle.rtl" }, { - "input": "node_modules/@abp/ng.theme.lepton-x/assets/css/abp-bundle.rtl.css", - "inject": false, - "bundleName": "abp-bundle.rtl" + "input": "node_modules/@abp/ng.theme.lepton-x/assets/css/abp-bundle.rtl.css", + "inject": false, + "bundleName": "abp-bundle.rtl" }, { - "input":"node_modules/@volo/ngx-lepton-x.lite/assets/css/font-bundle.rtl.css", - "inject":false, - "bundleName":"font-bundle.rtl" + "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/font-bundle.rtl.css", + "inject": false, + "bundleName": "font-bundle.rtl" }, { - "input":"node_modules/@volo/ngx-lepton-x.lite/assets/css/font-bundle.css", - "inject":false, - "bundleName":"font-bundle" - }, + "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/font-bundle.css", + "inject": false, + "bundleName": "font-bundle" + }, { "input": "node_modules/@fortawesome/fontawesome-free/css/all.min.css", "inject": true, @@ -756,7 +756,7 @@ } }, "tags": [], - "implicitDependencies": ["core","oauth"] + "implicitDependencies": ["core", "oauth"] } } } diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html index 7873adf6ea..bcc6a378a2 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html +++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html @@ -55,12 +55,18 @@ *ngFor="let roleGroup of roleGroups; let i = index; trackBy: trackByFn" class="form-check mb-2" > - + [checkboxId]="'roles-' + i" + > +
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts index 0734f04d1f..460e637958 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts +++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts @@ -6,7 +6,7 @@ import { IdentityUserService, } from '@abp/ng.identity/proxy'; import { ePermissionManagementComponents } from '@abp/ng.permission-management'; -import {Confirmation, ConfirmationService, ToasterService} from '@abp/ng.theme.shared'; +import {Confirmation, ConfirmationService, eFormComponets, ToasterService} from '@abp/ng.theme.shared'; import { EXTENSIONS_IDENTIFIER, FormPropData, @@ -60,7 +60,7 @@ export class UsersComponent implements OnInit { permissionManagementKey = ePermissionManagementComponents.PermissionManagement; entityDisplayName: string; - + inputKey=eFormComponets.FormCheckboxComponent trackByFn: TrackByFunction = (index, item) => Object.keys(item)[0] || index; onVisiblePermissionChange = event => { diff --git a/npm/ng-packs/tsconfig.base.json b/npm/ng-packs/tsconfig.base.json index ac29fd53ad..71e32f80ed 100644 --- a/npm/ng-packs/tsconfig.base.json +++ b/npm/ng-packs/tsconfig.base.json @@ -30,6 +30,7 @@ "@abp/ng.identity": ["packages/identity/src/public-api.ts"], "@abp/ng.identity/config": ["packages/identity/config/src/public-api.ts"], "@abp/ng.identity/proxy": ["packages/identity/proxy/src/public-api.ts"], + "@abp/ng.oauth": ["packages/oauth/src/public-api.ts"], "@abp/ng.permission-management": ["packages/permission-management/src/public-api.ts"], "@abp/ng.permission-management/proxy": [ "packages/permission-management/proxy/src/public-api.ts" @@ -43,8 +44,7 @@ "@abp/ng.theme.basic/testing": ["packages/theme-basic/testing/src/public-api.ts"], "@abp/ng.theme.shared": ["packages/theme-shared/src/public-api.ts"], "@abp/ng.theme.shared/extensions": ["packages/theme-shared/extensions/src/public-api.ts"], - "@abp/ng.theme.shared/testing": ["packages/theme-shared/testing/src/public-api.ts"], - "@abp/ng.oauth": ["packages/oauth/src/public-api.ts"] + "@abp/ng.theme.shared/testing": ["packages/theme-shared/testing/src/public-api.ts"] } }, "exclude": ["node_modules", "tmp"] From 1d71d9bdef385a0069c418fe5a7caf2a350dffbf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Fri, 17 Feb 2023 18:21:59 +0300 Subject: [PATCH 08/19] reformat imports --- .../packages/theme-shared/src/lib/theme-shared.module.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts index f7dfecbed2..c7dad57f77 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts @@ -39,7 +39,7 @@ import { PasswordComponent } from './components/password/password.component'; import { CardModule } from './components/card/card.module'; import { AbpVisibleDirective } from './directives'; import { FormInputComponent } from './components/form-input/form-input.component'; -import {CheckboxComponent} from './components/checkbox/checkbox.component'; +import { FormCheckboxComponent } from './components/checkbox/checkbox.component'; const declarationsWithExports = [ BreadcrumbComponent, @@ -58,7 +58,7 @@ const declarationsWithExports = [ ModalCloseDirective, AbpVisibleDirective, FormInputComponent, - CheckboxComponent + FormCheckboxComponent ]; @NgModule({ From 2f896e1fbd63f1f1888be18f70452f8a66b691d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Fri, 17 Feb 2023 18:24:11 +0300 Subject: [PATCH 09/19] rename checkbox component for naming convention --- .../lib/components/checkbox/checkbox.component.ts | 15 +++++++-------- .../packages/theme-shared/src/lib/enums/form.ts | 2 +- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts index 1d7435a8a2..e298dc7443 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts @@ -1,6 +1,6 @@ import { AbstractNgModelComponent } from '@abp/ng.core'; import { Component, EventEmitter, forwardRef, Injector, Input, Output } from '@angular/core'; -import { CheckboxControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { NG_VALUE_ACCESSOR } from '@angular/forms'; @Component({ selector: 'abp-checkbox', @@ -9,19 +9,18 @@ import { CheckboxControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' providers: [ { provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => CheckboxComponent), + useExisting: forwardRef(() => FormCheckboxComponent), multi: true, }, ] }) -export class CheckboxComponent extends AbstractNgModelComponent { +export class FormCheckboxComponent extends AbstractNgModelComponent { - @Input() label: string; + @Input() label?: string; @Input() checkboxId!: string; - @Input() formControl!: string; - @Input() checkboxStyle: string = ''; - @Input() checkboxClass: string = ''; - @Input() checkboxReadonly: boolean = false; + @Input() checkboxStyle = ''; + @Input() checkboxClass = ''; + @Input() checkboxReadonly = false; @Output() onBlur = new EventEmitter(); @Output() onFocus = new EventEmitter(); diff --git a/npm/ng-packs/packages/theme-shared/src/lib/enums/form.ts b/npm/ng-packs/packages/theme-shared/src/lib/enums/form.ts index 17218e0a50..9ccbb93655 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/enums/form.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/enums/form.ts @@ -1,4 +1,4 @@ export enum eFormComponets { FormInputComponent = 'FormInputComponent', - FormCheckboxComponent = 'CheckboxComponent', + FormCheckboxComponent = 'FormCheckboxComponent', } From 40c0908154140f9eb35735f972671015a70caf05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Fri, 17 Feb 2023 18:25:07 +0300 Subject: [PATCH 10/19] move checkbox label to bottom --- .../src/lib/components/checkbox/checkbox.component.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.html index fa5ea40c91..e98c2b1935 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.html +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.html @@ -1,5 +1,4 @@
- + > + +
\ No newline at end of file From ca8c67f9250e6f766245d61cb50056ad32c09a06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Fri, 17 Feb 2023 18:38:55 +0300 Subject: [PATCH 11/19] pass args as replaceable data --- .../src/lib/components/users/users.component.html | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html index bcc6a378a2..58efe4e195 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html +++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html @@ -56,15 +56,13 @@ class="form-check mb-2" > From c69b86cd36244f2c8956994f2d9ae2389d5e8b44 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Fri, 17 Feb 2023 21:17:11 +0300 Subject: [PATCH 12/19] use inline template and inline style --- .../checkbox/checkbox.component.html | 15 ------------ .../checkbox/checkbox.component.scss | 0 .../checkbox/checkbox.component.spec.ts | 22 ----------------- .../components/checkbox/checkbox.component.ts | 18 ++++++++++++-- .../form-input/form-input.component.html | 15 ------------ .../form-input/form-input.component.scss | 0 .../form-input/form-input.component.spec.ts | 22 ----------------- .../form-input/form-input.component.ts | 24 ++++++++++++------- 8 files changed, 32 insertions(+), 84 deletions(-) delete mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.html delete mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.scss delete mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.spec.ts delete mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.html delete mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.scss delete mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.spec.ts diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.html deleted file mode 100644 index e98c2b1935..0000000000 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.html +++ /dev/null @@ -1,15 +0,0 @@ -
- - - -
\ No newline at end of file diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.spec.ts deleted file mode 100644 index 8abc252968..0000000000 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.spec.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { CheckboxComponent } from './checkbox.component'; - -describe('CheckboxComponent', () => { - let component: CheckboxComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [CheckboxComponent], - }).compileComponents(); - - fixture = TestBed.createComponent(CheckboxComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts index e298dc7443..26d73f16b6 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts @@ -4,8 +4,22 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms'; @Component({ selector: 'abp-checkbox', - templateUrl: './checkbox.component.html', - styleUrls: ['./checkbox.component.scss'], + template: ` +
+ + +
+ `, providers: [ { provide: NG_VALUE_ACCESSOR, diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.html deleted file mode 100644 index 5b3617bb63..0000000000 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.html +++ /dev/null @@ -1,15 +0,0 @@ -
- - -
- \ No newline at end of file diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.spec.ts deleted file mode 100644 index ed506e891b..0000000000 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.spec.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { FormInputComponent } from './form-input.component'; - -describe('FormInputComponent', () => { - let component: FormInputComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [FormInputComponent], - }).compileComponents(); - - fixture = TestBed.createComponent(FormInputComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts index bdf60ace58..fc306288e2 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts @@ -4,7 +4,22 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms'; @Component({ selector: 'abp-form-input', - templateUrl: './form-input.component.html', + template: ` +
+ + +
+ `, providers: [ { provide: NG_VALUE_ACCESSOR, @@ -16,20 +31,13 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms'; export class FormInputComponent extends AbstractNgModelComponent { @Input() inputId!: string; @Input() inputReadonly: boolean = false; - @Input() label: string = ''; @Input() labelClass: string = ''; - @Input() inputPlaceholder: string = ''; - @Input() inputType: string = 'text'; - @Input() inputStyle: string = ''; - @Input() inputClass: string = ''; - @Output() onBlur = new EventEmitter(); - @Output() onFocus = new EventEmitter(); constructor(injector: Injector) { From e60b6007325f54c3f7663aba427a33f44ea46de3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Fri, 17 Feb 2023 21:17:33 +0300 Subject: [PATCH 13/19] move test files under test folder --- .../src/lib/tests/checkbox.component.spec.ts | 44 ++++++++++++++++++ .../lib/tests/form-input.component.spec.ts | 46 +++++++++++++++++++ 2 files changed, 90 insertions(+) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/tests/checkbox.component.spec.ts create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/tests/form-input.component.spec.ts diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/checkbox.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/checkbox.component.spec.ts new file mode 100644 index 0000000000..e2fba6d0da --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/checkbox.component.spec.ts @@ -0,0 +1,44 @@ +import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest'; +import { FormCheckboxComponent } from '../components/checkbox/checkbox.component'; + +describe('FormCheckboxComponent', () => { + let spectator: SpectatorHost; + + const createHost = createHostFactory(FormCheckboxComponent); + + beforeEach( + () => + (spectator = createHost( + '', + { + hostProps: { attributes: { autofocus: '', name: 'abp-checkbox' } }, + }, + )), + ); + + it('should display the input', () => { + expect(spectator.query('input')).toBeTruthy(); + }); + + it('should equal the default classes to form-check-input', () => { + expect(spectator.query('input')).toHaveClass('form-check-input'); + }); + + it('should equal the default type to checkbox', () => { + expect(spectator.query('input')).toHaveAttribute('type', 'checkbox'); + }); + + it('should be readonly when checkboxReadonly is true', () => { + spectator.component.checkboxReadonly = true; + spectator.detectComponentChanges(); + expect(spectator.query('[readonly]')).toBeTruthy(); + }); + + it('should not contain readonly when checboxReadonly is false', () => { + spectator.component.checkboxReadonly = false; + spectator.detectComponentChanges(); + expect(spectator.query('[disabled]')).toBeFalsy(); + }); + +}); + diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/form-input.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/form-input.component.spec.ts new file mode 100644 index 0000000000..660cb72165 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/form-input.component.spec.ts @@ -0,0 +1,46 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest'; +import { FormInputComponent } from '../components/form-input/form-input.component'; + + +describe('FormInputComponent', () => { + let spectator: SpectatorHost; + + const createHost = createHostFactory(FormInputComponent); + + beforeEach( + () => + (spectator = createHost( + '', + { + hostProps: { attributes: { autofocus: '', name: 'abp-form-input' } }, + }, + )), + ); + + it('should display the input', () => { + expect(spectator.query('input')).toBeTruthy(); + }); + + it('should equal the default classes to form-control', () => { + expect(spectator.query('input')).toHaveClass('form-control'); + }); + + it('should equal the default type to text', () => { + expect(spectator.query('input')).toHaveAttribute('type', 'text'); + }); + + it('should be readonly when inputReadonly is true', () => { + spectator.component.inputReadonly = true; + spectator.detectComponentChanges(); + expect(spectator.query('[readonly]')).toBeTruthy(); + }); + + it('should not contain readonly when inputReadonly is false', () => { + spectator.component.inputReadonly = false; + spectator.detectComponentChanges(); + expect(spectator.query('[disabled]')).toBeFalsy(); + }); + +}); + From 4dffbe46258a6a8146bcb0bd721a5442e438b24a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Mon, 20 Feb 2023 13:14:23 +0300 Subject: [PATCH 14/19] pass replaceable checkbox inputs --- .../src/lib/components/users/users.component.html | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html index 58efe4e195..bb5d56cc70 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html +++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html @@ -57,9 +57,11 @@ > Date: Mon, 20 Feb 2023 13:19:40 +0300 Subject: [PATCH 15/19] pass label to checkbox --- .../identity/src/lib/components/users/users.component.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html index bb5d56cc70..aba658f0dc 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html +++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html @@ -59,15 +59,16 @@ *abpReplaceableTemplate="{ inputs:{ checkboxId:'roles-' + i, + label:roles[i].name, formControl:roleGroup.controls[roles[i].name] }, componentKey: inputKey }" [checkboxId]="'roles-' + i" [formControl]="roleGroup.controls[roles[i].name]" + [label]="roles[i].name" > - From d8ec85868c5852633d64ba7b6a2e90ec6317e627 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Mon, 20 Feb 2023 13:21:43 +0300 Subject: [PATCH 16/19] give checkbox default class --- .../src/lib/components/checkbox/checkbox.component.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts index 26d73f16b6..1e7e1ab972 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts @@ -7,7 +7,6 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms'; template: `
(); @Output() onFocus = new EventEmitter(); From 0f91fb664acb756beb7688b81c1bb7ae6ace4678 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Mon, 20 Feb 2023 13:24:08 +0300 Subject: [PATCH 17/19] add checkbox labelClass input --- .../src/lib/components/checkbox/checkbox.component.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts index 1e7e1ab972..3ead2f929d 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts @@ -16,7 +16,7 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms'; (blur)="onBlur.next()" (focus)="onFocus.next()" > - +
`, providers: [ @@ -30,13 +30,14 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms'; export class FormCheckboxComponent extends AbstractNgModelComponent { @Input() label?: string; + @Input() labelClass = 'form-check-label'; @Input() checkboxId!: string; @Input() checkboxStyle = ''; @Input() checkboxClass = 'form-check-input'; @Input() checkboxReadonly = false; @Output() onBlur = new EventEmitter(); @Output() onFocus = new EventEmitter(); - + constructor(injector: Injector) { super(injector); } From 4cede4eb5cddbc2447e9a35833a5bdebb58c90e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Mon, 20 Feb 2023 13:26:59 +0300 Subject: [PATCH 18/19] add default form-control class --- .../src/lib/components/form-input/form-input.component.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts index fc306288e2..01ce27dec5 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts @@ -6,9 +6,8 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms'; selector: 'abp-form-input', template: `
- + (); @Output() onFocus = new EventEmitter(); From 0b38c50fd6ed289f9342b6fc883187f0d91a0a8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Mon, 20 Feb 2023 13:27:36 +0300 Subject: [PATCH 19/19] add default form-label class --- .../src/lib/components/form-input/form-input.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts index 01ce27dec5..d7f1f48c9d 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts @@ -31,7 +31,7 @@ export class FormInputComponent extends AbstractNgModelComponent { @Input() inputId!: string; @Input() inputReadonly: boolean = false; @Input() label: string = ''; - @Input() labelClass: string = ''; + @Input() labelClass = 'form-label'; @Input() inputPlaceholder: string = ''; @Input() inputType: string = 'text'; @Input() inputStyle: string = '';