diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.html index 8c7b06b27dc1..97b884e365de 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.html +++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.html @@ -51,9 +51,9 @@ - + diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.scss index 63cbab4ae2f9..190b6c5cef98 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.scss +++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.scss @@ -18,6 +18,6 @@ height: 100%; } -dot-base-type-selector { +dot-content-type-selector { margin-right: $spacing-3; } diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.spec.ts index 681f18a419b6..d9ef52876150 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.spec.ts +++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.spec.ts @@ -193,10 +193,10 @@ class ActivatedRouteMock { } @Component({ - selector: 'dot-base-type-selector', + selector: 'dot-content-type-selector', template: '' }) -class MockDotBaseTypeSelectorComponent { +class MockDotContentTypeSelectorComponent { @Input() value: SelectItem; @Output() selected = new EventEmitter(); } @@ -212,14 +212,14 @@ describe('ContainerListComponent', () => { let unPublishContainer: DotActionMenuButtonComponent; let publishContainer: DotActionMenuButtonComponent; let archivedContainer: DotActionMenuButtonComponent; - let baseTypesSelector: MockDotBaseTypeSelectorComponent; + let contentTypesSelector: MockDotContentTypeSelectorComponent; let dotContainersService: DotContainersService; const messageServiceMock = new MockDotMessageService(messages); beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ContainerListComponent, MockDotBaseTypeSelectorComponent], + declarations: [ContainerListComponent, MockDotContentTypeSelectorComponent], providers: [ { provide: DotMessageService, useValue: messageServiceMock }, { @@ -357,16 +357,19 @@ describe('ContainerListComponent', () => { }); }); - it('should emit changes in base types selector', () => { + it('should emit changes in content types selector', () => { fixture.detectChanges(); - baseTypesSelector = fixture.debugElement.query( - By.css('dot-base-type-selector') + contentTypesSelector = fixture.debugElement.query( + By.css('dot-content-type-selector') ).componentInstance; spyOn(comp.listing.paginatorService, 'setExtraParams'); spyOn(comp.listing, 'loadFirstPage'); - baseTypesSelector.selected.emit('test'); + contentTypesSelector.selected.emit('test'); - expect(comp.listing.paginatorService.setExtraParams).toHaveBeenCalledWith('type', 'test'); + expect(comp.listing.paginatorService.setExtraParams).toHaveBeenCalledWith( + 'content_type', + 'test' + ); expect(comp.listing.loadFirstPage).toHaveBeenCalledWith(); }); diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.ts index 67dd34a28276..463de0f89c87 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.ts +++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.ts @@ -54,14 +54,14 @@ export class ContainerListComponent implements OnDestroy { } /** - * Change base type to the selected one + * Change content type to the selected one * @param {string} value * @memberof ContainerListComponent */ - changeBaseTypeSelector(value: string) { - value !== '' - ? this.listing.paginatorService.setExtraParams('type', value) - : this.listing.paginatorService.deleteExtraParams('type'); + changeContentTypeSelector(value: string) { + value + ? this.listing.paginatorService.setExtraParams('content_type', value) + : this.listing.paginatorService.deleteExtraParams('content_type'); this.listing.loadFirstPage(); } diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.module.ts index b2989ad8d066..6228b6901d1b 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.module.ts +++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.module.ts @@ -9,7 +9,7 @@ import { MenuModule } from 'primeng/menu'; import { DotActionMenuButtonModule } from '@components/_common/dot-action-menu-button/dot-action-menu-button.module'; import { DotAddToBundleModule } from '@components/_common/dot-add-to-bundle'; import { DotEmptyStateModule } from '@components/_common/dot-empty-state/dot-empty-state.module'; -import { DotBaseTypeSelectorModule } from '@components/dot-base-type-selector'; +import { DotContentTypeSelectorModule } from '@components/dot-content-type-selector'; import { DotListingDataTableModule } from '@components/dot-listing-data-table'; import { DotPortletBaseModule } from '@components/dot-portlet-base/dot-portlet-base.module'; import { DotSiteBrowserService } from '@dotcms/data-access'; @@ -27,7 +27,7 @@ import { ContainerListComponent } from './container-list.component'; ContainerListRoutingModule, DotPortletBaseModule, DotListingDataTableModule, - DotBaseTypeSelectorModule, + DotContentTypeSelectorModule, DotMessagePipeModule, ButtonModule, CheckboxModule, diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-content-type-selector/dot-content-type-selector.component.html b/core-web/apps/dotcms-ui/src/app/view/components/dot-content-type-selector/dot-content-type-selector.component.html new file mode 100644 index 000000000000..fd74eec60508 --- /dev/null +++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-content-type-selector/dot-content-type-selector.component.html @@ -0,0 +1,9 @@ + + diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-content-type-selector/dot-content-type-selector.component.scss b/core-web/apps/dotcms-ui/src/app/view/components/dot-content-type-selector/dot-content-type-selector.component.scss new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-content-type-selector/dot-content-type-selector.component.spec.ts b/core-web/apps/dotcms-ui/src/app/view/components/dot-content-type-selector/dot-content-type-selector.component.spec.ts new file mode 100644 index 000000000000..cd88d6a4c2dc --- /dev/null +++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-content-type-selector/dot-content-type-selector.component.spec.ts @@ -0,0 +1,82 @@ +import { of as observableOf } from 'rxjs'; + +import { DebugElement, Injectable } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +import { SelectItem } from 'primeng/api'; +import { Dropdown, DropdownModule } from 'primeng/dropdown'; + +import { DotContentTypeService, DotMessageService } from '@dotcms/data-access'; +import { MockDotMessageService } from '@dotcms/utils-testing'; + +import { DotContentTypeSelectorComponent } from './dot-content-type-selector.component'; + +@Injectable() +class MockDotContentTypeService { + getContentTypes = jasmine.createSpy('getContentTypes').and.returnValue( + observableOf([ + { name: 'FORM', variable: 'Form' }, + { name: 'WIDGET', variable: 'Widget' } + ]) + ); +} + +describe('DotContentTypeSelectorComponent', () => { + let component: DotContentTypeSelectorComponent; + let fixture: ComponentFixture; + let de: DebugElement; + const allContentTypesItem: SelectItem = { label: 'Any Content Type', value: '' }; + const messageServiceMock = new MockDotMessageService({ + 'contenttypes.selector.any.content.type': 'Any Content Type' + }); + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [DotContentTypeSelectorComponent], + imports: [BrowserAnimationsModule, DropdownModule], + providers: [ + { + provide: DotMessageService, + useValue: messageServiceMock + }, + { + provide: DotContentTypeService, + useClass: MockDotContentTypeService + } + ] + }); + + fixture = TestBed.createComponent(DotContentTypeSelectorComponent); + component = fixture.componentInstance; + de = fixture.debugElement; + }); + + it('should emit the selected content type', () => { + const pDropDown: DebugElement = de.query(By.css('p-dropdown')); + spyOn(component.selected, 'emit'); + spyOn(component, 'change').and.callThrough(); + pDropDown.triggerEventHandler('onChange', allContentTypesItem); + + expect(component.change).toHaveBeenCalledWith(allContentTypesItem); + expect(component.selected.emit).toHaveBeenCalledWith(allContentTypesItem.value); + }); + + it('should add All Content Types option as first position', () => { + fixture.detectChanges(); + + component.options$.subscribe((options) => { + expect(options[0]).toEqual(allContentTypesItem); + }); + }); + + it('should set attributes to dropdown', () => { + fixture.detectChanges(); + const pDropDown: Dropdown = de.query(By.css('p-dropdown')).componentInstance; + expect(pDropDown.filter).toBeDefined(); + expect(pDropDown.filterBy).toBeDefined(); + expect(pDropDown.showClear).toBeDefined(); + expect(pDropDown.style).toEqual({ width: '155px' }); + }); +}); diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-content-type-selector/dot-content-type-selector.component.ts b/core-web/apps/dotcms-ui/src/app/view/components/dot-content-type-selector/dot-content-type-selector.component.ts new file mode 100644 index 000000000000..6772a8360920 --- /dev/null +++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-content-type-selector/dot-content-type-selector.component.ts @@ -0,0 +1,51 @@ +import { Observable } from 'rxjs'; + +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; + +import { SelectItem } from 'primeng/api'; + +import { map, take } from 'rxjs/operators'; + +import { DotContentTypeService, DotMessageService } from '@dotcms/data-access'; +import { DotCMSContentType } from '@dotcms/dotcms-models'; + +@Component({ + selector: 'dot-content-type-selector', + templateUrl: './dot-content-type-selector.component.html', + styleUrls: ['./dot-content-type-selector.component.scss'] +}) +export class DotContentTypeSelectorComponent implements OnInit { + @Input() value: SelectItem; + @Output() selected = new EventEmitter(); + + options$: Observable; + + constructor( + private dotContentTypeService: DotContentTypeService, + private dotMessageService: DotMessageService + ) {} + + ngOnInit() { + this.options$ = this.dotContentTypeService.getContentTypes({ page: 999 }).pipe( + take(1), + map((contentTypes: DotCMSContentType[]) => this.setOptions(contentTypes)) + ); + } + + change(item: SelectItem) { + this.selected.emit(item.value); + } + + setOptions(contentTypes: DotCMSContentType[]): SelectItem[] { + return [ + { + label: this.dotMessageService.get('contenttypes.selector.any.content.type'), + value: '' + }, + ...contentTypes.map((contentType: DotCMSContentType) => ({ + label: contentType.name, + value: contentType.variable + })) + ]; + } +} diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-content-type-selector/dot-content-type-selector.module.ts b/core-web/apps/dotcms-ui/src/app/view/components/dot-content-type-selector/dot-content-type-selector.module.ts new file mode 100644 index 000000000000..6e8991170604 --- /dev/null +++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-content-type-selector/dot-content-type-selector.module.ts @@ -0,0 +1,14 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; + +import { DropdownModule } from 'primeng/dropdown'; + +import { DotContentTypeSelectorComponent } from './dot-content-type-selector.component'; + +@NgModule({ + imports: [CommonModule, DropdownModule, FormsModule], + declarations: [DotContentTypeSelectorComponent], + exports: [DotContentTypeSelectorComponent] +}) +export class DotContentTypeSelectorModule {} diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-content-type-selector/index.ts b/core-web/apps/dotcms-ui/src/app/view/components/dot-content-type-selector/index.ts new file mode 100644 index 000000000000..c18f0e7f4c4f --- /dev/null +++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-content-type-selector/index.ts @@ -0,0 +1 @@ +export * from './dot-content-type-selector.module';