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