Skip to content

Commit

Permalink
#23252 working on categories feedbacks and write test cases
Browse files Browse the repository at this point in the history
  • Loading branch information
@zulqarnainvd
zulqarnainvd committed Nov 4, 2022
1 parent 26baa5c commit 7b045c5
Show file tree
Hide file tree
Showing 7 changed files with 111 additions and 49 deletions.
56 changes: 45 additions & 11 deletions ...ui/src/app/portlets/dot-categories/dot-categories-list/dot-categories-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@
(onRowSelect)="handleRowCheck($event)"
(onRowUnselect)="handleRowCheck($event)"
(onHeaderCheckboxToggle)="handleRowCheck($event)"
(onFilter)="handleFilter()"
selectionMode="checkbox"
loadingIcon="fa fa-circle-o-notch fa-spin"
dataKey="categoryId"
responsiveLayout="scroll"
>
<ng-template pTemplate="caption">
<div class="flex justify-content-between p-3">
Expand All @@ -38,7 +38,7 @@
type="button"
pButton
icon="pi pi-ellipsis-v"
attr.data-testid="actions"
attr.data-testId="actions"
></button>
<p-menu
#actionsMenu
Expand All @@ -48,9 +48,13 @@
></p-menu>
</div>
<div class="w-2">
<div class="p-inputgroup searchBox">
<span class="p-inputgroup-addon"><i class="pi pi-search"></i></span>
<div class="p-inputgroup">
<span class="border-right-none p-inputgroup-addon"
><i class="pi pi-search"></i
></span>
<input
class="border-left-none"
#gf
[placeholder]="'message.category.search' | dm"
(input)="dataTable.filterGlobal($event.target.value, 'contains')"
type="text"
Expand All @@ -61,15 +65,15 @@
<div>
<button
class="p-button-outlined"
[label]="'message.category.import' || dm"
[label]="'message.category.import' | dm"
pButton
pRipple
type="button"
icon="pi pi-upload"
></button>
<button
class="p-button-outlined mx-4"
[label]="'message.category.export' || dm"
[label]="'message.category.export' | dm"
pButton
pRipple
type="button"
Expand All @@ -86,14 +90,15 @@
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr data-testid="testHeadTableRow">
<tr data-testId="testHeadTableRow">
<th class="tableHeader" style="width: 3rem"></th>
<th class="tableHeader" style="width: 3rem">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th
class="tableHeader"
*ngFor="let col of columns"
[ngStyle]="{ width: col.width }"
[pSortableColumn]="col.fieldName"
>
{{ col.header }}
Expand All @@ -106,22 +111,27 @@
[pReorderableRow]="index"
[pSelectableRow]="category"
(click)="addBreadCrumb(category)"
data-testid="testTableRow"
data-testId="testTableRow"
>
<td>
<span class="pi pi-bars" pReorderableRowHandle></span>
</td>
<td (click)="$event.stopPropagation()" style="width: 3rem">
<p-tableCheckbox [value]="category"></p-tableCheckbox>
</td>
<td *ngFor="let col of columns">
<td *ngFor="let col of columns" [ngStyle]="{ width: col.width }">
<ng-container *ngIf="col.fieldName === 'sortOrder'; else Actions">
<p-inplace #editText styleClass="listing__categories__sortOrder">
<p-inplace
#editText
(click)="$event.stopPropagation()"
styleClass="category_listing__sortOrder"
>
<ng-template pTemplate="content">
<span class="p-input-icon-right">
<i class="pi pi-times" (click)="editText.deactivate()"></i>
<p-inputNumber
[ngModel]="category.sortOrder"
inputStyleClass="category_listing__sortOrder__field"
></p-inputNumber>
</span>
</ng-template>
Expand All @@ -135,7 +145,7 @@
<ng-container *ngIf="col.fieldName === 'Actions'; else last">
<dot-action-menu-button
class="listing-categories__action-button"
[attr.data-testid]="category.categoryId"
[attr.data-testId]="category.categoryId"
[actions]="vm.categoriesActions"
[item]="category"
>
Expand All @@ -148,6 +158,30 @@
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage" let-columns>
<tr>
<td class="p-0" [attr.colspan]="columns.length + 3">
<div
class="category_listing-datatable__empty"
*ngIf="isContentFiltered; else emptyState"
data-testId="category_listing-datatable__empty"
>
{{ 'No-Results-Found' | dm }}
</div>
<ng-template #emptyState>
<dot-empty-state
[rows]="10"
[colsTextWidth]="[60, 50, 60, 80]"
[title]="'message.category.empty.title' | dm"
[content]="'message.category.empty.content' | dm"
[buttonLabel]="'message.category.empty.button.label' | dm"
icon="web"
>
</dot-empty-state>
</ng-template>
</td>
</tr>
</ng-template>
</p-table>
</div>
</dot-portlet-base>
25 changes: 8 additions & 17 deletions ...ui/src/app/portlets/dot-categories/dot-categories-list/dot-categories-list.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,15 @@ dot-portlet-base {
padding-bottom: $spacing-4;
}

.p-inputgroup-addon {
border-right: none;
.category_listing__sortOrder__field {
width: 60px;
border: none;
}

.p-inputtext {
border-left: none;
}

.link-button {
color: var(--color-sec);
:hover {
color: var(--color-sec);
}
:enabled {
color: var(--color-sec);
}
}
.link-button:enabled:hover {
color: var(--color-sec);
.category_listing-datatable__empty {
display: flex;
justify-content: center;
font-size: $spacing-9;
font-size: $font-size-xx-large;
}
}
32 changes: 27 additions & 5 deletions ...src/app/portlets/dot-categories/dot-categories-list/dot-categories-list.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,17 @@ import { InputTextModule } from 'primeng/inputtext';
import { InputNumberModule } from 'primeng/inputnumber';
import { of } from 'rxjs';
import { DotCategory } from '@dotcms/app/shared/models/dot-categories/dot-categories.model';
import { MockDotMessageService } from '@dotcms/app/test/dot-message-service.mock';
import { DotMessageService } from '@dotcms/app/api/services/dot-message/dot-messages.service';
import { DotEmptyStateModule } from '@components/_common/dot-empty-state/dot-empty-state.module';

@Component({
selector: 'dot-test-host-component',
template: `<dot-categories-list></dot-categories-list>`
})
class TestHostComponent {}

fdescribe('DotCategoriesListingTableComponent', () => {
describe('DotCategoriesListingTableComponent', () => {
let hostFixture: ComponentFixture<TestHostComponent>;
let de: DebugElement;
let el: HTMLElement;
Expand Down Expand Up @@ -69,6 +72,14 @@ fdescribe('DotCategoriesListingTableComponent', () => {
}
];
beforeEach(() => {
const messageServiceMock = new MockDotMessageService({
'message.category.search': 'Type to Filter',
'No-Results-Found': 'No Results Found',
'message.category.empty.title': 'Your category list is empty',
'message.category.empty.content':
'You have not added anything yet, start by clicking the button below',
'message.category.empty.button.label': 'Add New Category'
});
TestBed.configureTestingModule({
declarations: [DotCategoriesListComponent, TestHostComponent],
imports: [
Expand All @@ -87,10 +98,12 @@ fdescribe('DotCategoriesListingTableComponent', () => {
InputNumberModule,
DotActionMenuButtonModule,
DotMessagePipeModule,
CheckboxModule
CheckboxModule,
DotEmptyStateModule
],
providers: [
{ provide: CoreWebService, useClass: CoreWebServiceMock },
{ provide: DotMessageService, useValue: messageServiceMock },
DotCategoriesService
]
});
Expand All @@ -104,7 +117,6 @@ fdescribe('DotCategoriesListingTableComponent', () => {
tick();
hostFixture.detectChanges();
de = hostFixture.debugElement.query(By.css('p-table'));
expect(de.componentInstance.responsiveLayout).toBe('scroll');
expect(de.componentInstance.lazy).toBe(true);
expect(de.componentInstance.paginator).toBe(true);
expect(de.componentInstance.reorderableColumns).toBe(true);
Expand All @@ -119,10 +131,10 @@ fdescribe('DotCategoriesListingTableComponent', () => {
hostFixture.detectChanges();
de = hostFixture.debugElement.query(By.css('p-table'));
el = de.nativeElement;
const rows = el.querySelectorAll('[data-testid="testTableRow"]');
const rows = el.querySelectorAll('[data-testId="testTableRow"]');
expect(items.length).toEqual(rows.length);

const headRow = el.querySelector('[data-testid="testHeadTableRow"]');
const headRow = el.querySelector('[data-testId="testHeadTableRow"]');
const headers = headRow.querySelectorAll('th');
expect(8).toEqual(headers.length);

Expand All @@ -134,6 +146,16 @@ fdescribe('DotCategoriesListingTableComponent', () => {
});
}));

it('should renders the dot empty state component if items array is empty', fakeAsync(() => {
setRequestSpy([]);
hostFixture.detectChanges();
tick();
hostFixture.detectChanges();
de = hostFixture.debugElement.query(By.css('p-table'));
const emptyState = de.query(By.css('[data-testid="title"]'));
expect(emptyState.nativeElement.innerText).toBe('Your category list is empty');
}));

function setRequestSpy(response: any): void {
spyOn<any>(coreWebService, 'requestView').and.returnValue(
of({
Expand Down
21 changes: 17 additions & 4 deletions ...s-ui/src/app/portlets/dot-categories/dot-categories-list/dot-categories-list.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, ViewChild } from '@angular/core';
import { Component, ElementRef, ViewChild } from '@angular/core';
import { DotCategory } from '@dotcms/app/shared/models/dot-categories/dot-categories.model';
import { LazyLoadEvent } from 'primeng/api';
import { Table } from 'primeng/table';
Expand All @@ -15,9 +15,11 @@ export class DotCategoriesListComponent {
vm$: Observable<DotCategoriesListState> = this.store.vm$;
selectedCategories: DotCategory[] = [];
breadCrumbHome = { icon: 'pi pi-home' };
isContentFiltered = false;
@ViewChild('dataTable')
dataTable: Table;

@ViewChild('gf')
globalSearch: ElementRef;
constructor(private store: DotCategoriesListStore) {}

/**
Expand All @@ -39,6 +41,7 @@ export class DotCategoriesListComponent {
updateBreadCrumb(event) {
const { item } = event;
this.store.updateCategoriesBreadCrumb(item);
// for getting child categories need to pass category ID
this.dataTable.filter(item.id || null, 'inode', null);
this.dataTable.filter(null, 'global', null);
}
Expand All @@ -51,14 +54,24 @@ export class DotCategoriesListComponent {
this.store.updateSelectedCategories(this.selectedCategories);
}

/**
* Check if display results are filtered.
* @memberof DotCategoriesListComponent
*/
handleFilter(): void {
this.isContentFiltered = Object.prototype.hasOwnProperty.call(
this.dataTable.filters,
'global'
);
}

/**
* get records according to pagination
* @param {LazyLoadEvent} event
* @memberof DotCategoriesListComponent
*/
loadCategories(event: LazyLoadEvent) {
const lazyLoadEvent = this.dataTable?.createLazyLoadMetadata();
if (lazyLoadEvent?.filters?.inode) {
if (event?.filters?.inode) {
this.store.getChildrenCategories(event);
} else {
this.store.getCategories(event);
Expand Down
4 changes: 3 additions & 1 deletion ...tcms-ui/src/app/portlets/dot-categories/dot-categories-list/dot-categories-list.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { InputNumberModule } from 'primeng/inputnumber';
import { BreadcrumbModule } from 'primeng/breadcrumb';
import { CheckboxModule } from 'primeng/checkbox';
import { DotCategoriesService } from '@dotcms/app/api/services/dot-categories/dot-categories.service';
import { DotEmptyStateModule } from '@components/_common/dot-empty-state/dot-empty-state.module';

@NgModule({
declarations: [DotCategoriesListComponent],
Expand All @@ -32,7 +33,8 @@ import { DotCategoriesService } from '@dotcms/app/api/services/dot-categories/do
DotActionMenuButtonModule,
DotMessagePipeModule,
CheckboxModule,
BreadcrumbModule
BreadcrumbModule,
DotEmptyStateModule
],
providers: [DotCategoriesService]
})
Expand Down
14 changes: 6 additions & 8 deletions ...ui/src/app/portlets/dot-categories/dot-categories-list/store/dot-categories-list-store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export interface DotCategoriesListState {
export class DotCategoriesListStore extends ComponentStore<DotCategoriesListState> {
constructor(
private dotMessageService: DotMessageService,
public categoryService: DotCategoriesService
private categoryService: DotCategoriesService
) {
super();
this.setState({
Expand Down Expand Up @@ -220,7 +220,7 @@ export class DotCategoriesListStore extends ComponentStore<DotCategoriesListStat
{
fieldName: 'categoryName',
header: this.dotMessageService.get('message.category.fieldName.Name'),
width: '50%',
width: '30%',
sortable: true
},
{
Expand All @@ -231,22 +231,20 @@ export class DotCategoriesListStore extends ComponentStore<DotCategoriesListStat
},
{
fieldName: 'categoryVelocityVarName',
header: this.dotMessageService.get(
'message.category.fieldName.CategoryVelocityVarName'
),
header: this.dotMessageService.get('message.category.fieldName.Variable'),
width: '20%',
sortable: true
},
{
fieldName: 'childrens',
header: this.dotMessageService.get('message.category.fieldName.Childrens'),
width: '20%',
width: '15%',
sortable: true
},
{
fieldName: 'sortOrder',
width: '5%',
header: this.dotMessageService.get('message.category.fieldName.SortOrder'),
width: '10%',
header: this.dotMessageService.get('message.category.fieldName.Order'),
sortable: true
},
{
Expand Down
Loading

0 comments on commit 7b045c5

Please sign in to comment.