Skip to content

Commit

Permalink
feat(edit-content) fix failing tests #28879
Browse files Browse the repository at this point in the history
  • Loading branch information
@oidacra
oidacra committed Jul 12, 2024
1 parent ac1f3df commit 56e90a2
Show file tree
Hide file tree
Showing 6 changed files with 101 additions and 102 deletions.
56 changes: 28 additions & 28 deletions ...mponents/dot-category-field-category-list/dot-category-field-category-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,41 +3,41 @@
[ngClass]="{ 'no-overflow-x-yet': emptyColumns().length }"
class="flex-1 category-list__category-list">
@for (column of categories(); let index = $index; track index) {
<!--dynamic columns-->
<div #categoryColumn class="category-list__category-column" data-testId="category-column">
@for (item of column; track item.key) {
<div
data-testId="category-item"
class="flex align-content-center align-items-center category-list__item"
[ngClass]="{ 'category-list__item--selected': item.clicked }"
(click)="rowClicked.emit({ index, item })">
<p-checkbox
[(ngModel)]="itemsSelected"
[value]="item.key"
(onChange)="itemChecked.emit({ selected: $event.checked, item })" />
<!--dynamic columns-->
<div #categoryColumn class="category-list__category-column" data-testId="category-column">
@for (item of column; track item.key) {
<div
data-testId="category-item"
class="flex align-content-center align-items-center category-list__item"
[ngClass]="{ 'category-list__item--selected': item.clicked }"
(click)="rowClicked.emit({ index, item })">
<p-checkbox
[(ngModel)]="itemsSelected"
[value]="item.key"
(onChange)="itemChecked.emit({ selected: $event.checked, item })" />

<label
data-testId="category-item-label"
class="flex flex-grow-1 category-list__item-label"
[class.cursor-pointer]="item.hasChildren"
[for]="item.key">
{{ item.value }}
</label>
<label
data-testId="category-item-label"
class="flex flex-grow-1 category-list__item-label"
[class.cursor-pointer]="item.hasChildren"
[for]="item.key">
{{ item.value }}
</label>

@if (item.hasChildren) {
<i
data-testId="category-item-with-child"
class="pi pi-chevron-right category-list__item-icon"></i>
}
</div>
@if (item.hasChildren) {
<i
data-testId="category-item-with-child"
class="pi pi-chevron-right category-list__item-icon"></i>
}
</div>
}
</div>
}

<!--Fake empty columns-->
@for (_ of emptyColumns(); track _) {
<div
class="flex-grow-1 category-list__category-column"
data-testId="category-column-empty"></div>
<div
class="flex-grow-1 category-list__category-column"
data-testId="category-column-empty"></div>
}
</div>
72 changes: 36 additions & 36 deletions ...d/components/dot-category-field-search-list/dot-category-field-search-list.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,42 @@
<div #tableContainer class="category-field__search-list">
@if (!isLoading()) {
<p-table
[scrollHeight]="$scrollHeight()"
[scrollable]="true"
[value]="$searchResults()"
dataKey="key"
selectionMode="multiple"
[(selection)]="itemsSelected"
(onHeaderCheckboxToggle)="onHeaderCheckboxToggle($event)"
(onRowSelect)="onSelectItem($event)"
(onRowUnselect)="onRemoveItem($event)"
styleClass="dotTable ">
<ng-template pTemplate="header">
<tr>
<th>
<p-tableHeaderCheckbox style="width: 4rem"></p-tableHeaderCheckbox>
</th>
<th>{{ 'edit.content.category-field.search.name' | dm }}</th>
<th>{{ 'edit.content.category-field.search.assignee' | dm }}</th>
</tr>
</ng-template>
<p-table
[scrollHeight]="$scrollHeight()"
[scrollable]="true"
[value]="$searchResults()"
dataKey="key"
selectionMode="multiple"
[(selection)]="itemsSelected"
(onHeaderCheckboxToggle)="onHeaderCheckboxToggle($event)"
(onRowSelect)="onSelectItem($event)"
(onRowUnselect)="onRemoveItem($event)"
styleClass="dotTable ">
<ng-template pTemplate="header">
<tr>
<th>
<p-tableHeaderCheckbox style="width: 4rem"></p-tableHeaderCheckbox>
</th>
<th>{{ 'edit.content.category-field.search.name' | dm }}</th>
<th>{{ 'edit.content.category-field.search.assignee' | dm }}</th>
</tr>
</ng-template>

<ng-template let-category pTemplate="body">
<tr>
<td>
<p-tableCheckbox [value]="category"></p-tableCheckbox>
</td>
<td>{{ category.value }}</td>
<td>{{ category.path }}</td>
</tr>
</ng-template>
</p-table>
<ng-template let-category pTemplate="body">
<tr>
<td>
<p-tableCheckbox [value]="category"></p-tableCheckbox>
</td>
<td>{{ category.value }}</td>
<td>{{ category.path }}</td>
</tr>
</ng-template>
</p-table>
} @else {
<dot-table-skeleton
[columns]="[
'',
'edit.content.category-field.search.name' | dm,
'edit.content.category-field.search.assignee' | dm
]" />
<dot-table-skeleton
[columns]="[
'',
'edit.content.category-field.search.name' | dm,
'edit.content.category-field.search.assignee' | dm
]" />
}
</div>
15 changes: 7 additions & 8 deletions ...egory-field/components/dot-category-field-search/dot-category-field-search.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,13 @@
pInputText
type="text" />
@if (searchControl.value && !isLoading()) {
<span (click)="clearInput()" class="p-inputgroup-addon category-field__search-icon-clear">
<i class="pi pi-times cursor-pointer"></i>
</span>
}
@if (isLoading()) {
<span class="p-inputgroup-addon category-field__search-icon-loading">
<i class="pi pi-spin pi-spinner"></i>
</span>
<span (click)="clearInput()" class="p-inputgroup-addon category-field__search-icon-clear">
<i class="pi pi-times cursor-pointer"></i>
</span>
} @if (isLoading()) {
<span class="p-inputgroup-addon category-field__search-icon-loading">
<i class="pi pi-spin pi-spinner"></i>
</span>
}

<span class="p-inputgroup-addon category-field__search--icon-search">
Expand Down
24 changes: 12 additions & 12 deletions ...ory-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,19 +31,19 @@
</div>
<div class="flex-grow-1 category-field__categories">
@if (store.mode() === 'list') {
<dot-category-field-category-list
(itemChecked)="store.updateSelected($event.selected, $event.item)"
(rowClicked)="store.getCategories($event)"
[categories]="store.categoryList()"
[selected]="store.selectedCategoriesValues()" />
<dot-category-field-category-list
(itemChecked)="store.updateSelected($event.selected, $event.item)"
(rowClicked)="store.getCategories($event)"
[categories]="store.categoryList()"
[selected]="store.selectedCategoriesValues()" />
} @else {
<dot-category-field-search-list
@fadeAnimation
(itemChecked)="store.addSelected($event)"
(removeItem)="store.removeSelected($event)"
[isLoading]="store.isSearchLoading()"
[categories]="store.searchCategories()"
[selected]="store.selected()" />
<dot-category-field-search-list
@fadeAnimation
(itemChecked)="store.addSelected($event)"
(removeItem)="store.removeSelected($event)"
[isLoading]="store.isSearchLoading()"
[categories]="store.searchCategories()"
[selected]="store.selected()" />
}
</div>
</div>
Expand Down
16 changes: 8 additions & 8 deletions ...it-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,21 @@
<ng-template let-columns pTemplate="header">
<tr>
@for (col of columns; track $index) {
<th [style.width.px]="$index === 0 ? 40 : null">{{ col }}</th>
<th [style.width.px]="$index === 0 ? 40 : null">{{ col }}</th>
}
</tr>
</ng-template>

<ng-template let-columns="columns" pTemplate="body">
<tr>
@for (col of columns; track $index) {
<td>
@if (col === '') {
<p-skeleton size="1rem" styleClass="mr-1"></p-skeleton>
} @else {
<p-skeleton></p-skeleton>
}
</td>
<td>
@if (col === '') {
<p-skeleton size="1rem" styleClass="mr-1"></p-skeleton>
} @else {
<p-skeleton></p-skeleton>
}
</td>
}
</tr>
</ng-template>
Expand Down
20 changes: 10 additions & 10 deletions ...lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
@if (store.selected().length) {
<div class="dot-category-field__categories" data-testId="category-chip-list">
@for (category of store.selected(); track category.key) {
<p-chip
[pTooltip]="category.path ? category.path : category.value"
[removable]="true"
[label]="category.value"
tooltipPosition="top"
styleClass="p-chip-sm" />
}
</div>
<div class="dot-category-field__categories" data-testId="category-chip-list">
@for (category of store.selected(); track category.key) {
<p-chip
[pTooltip]="category.path ? category.path : category.value"
[removable]="true"
[label]="category.value"
tooltipPosition="top"
styleClass="p-chip-sm" />
}
</div>
}

<div class="dot-category-field__select">
Expand Down

0 comments on commit 56e90a2

Please sign in to comment.