get categories childrens and add breadcrumb #23260

zulqarnainvd · 2022-10-28T14:04:19Z

Proposed Changes

Add Children's Categories
Add BreadCrumb

Checklist

Tests
Translations
Security Implications Contemplated (add notes if applicable)

Additional Info

** any additional useful context or info **

Screenshots

Original	Updated
original screenshot	updated screenshot

fmontes · 2022-10-28T19:16:45Z

core-web/apps/dotcms-ui/src/app/api/services/dot-categories/dot-categories.service.ts

@@ -19,6 +19,25 @@ export class DotCategoriesService extends PaginatorService {
     * @memberof DotCategoriesService
     */
    getCategories(filters?: LazyLoadEvent): Observable<DotCategory[]> {
+        this.url = 'v1/categories';
+        const { sortField, sortOrder } = filters;
+        const page = parseInt(String(filters.first / this.paginationPerPage), 10) + 1;


There are some duplicated code here that maybe could be functions to reuse in both methods?

fmontes · 2022-10-28T19:17:10Z

core-web/apps/dotcms-ui/src/app/api/services/dot-categories/dot-categories.service.ts

+     * @return {*}  {Observable<DotCategory[]>}
+     * @memberof DotCategoriesService
+     */
+    getChildrenCategories(filters?: LazyLoadEvent): Observable<DotCategory[]> {


Testing on this new method?

fmontes · 2022-10-28T19:17:31Z

...ms-ui/src/app/portlets/dot-categories/dot-categories-list/dot-categories-list.component.html

@@ -1,4 +1,12 @@
 <dot-portlet-base *ngIf="vm$ | async as vm">


We need to update the testing on this.

fmontes · 2022-10-28T19:18:49Z

...ms-ui/src/app/portlets/dot-categories/dot-categories-list/dot-categories-list.component.html

@@ -103,7 +111,7 @@
                    </td>
                    <td *ngFor="let col of columns">
                        <ng-container *ngIf="col.fieldName === 'sortOrder'; else Actions">
-                            <p-inplace #editText styleClass="listing__categories__sortOrder">
+                            <p-inplace #editText styleClass="sortOrder">


Why rename the class out of BEM naming convention?

fmontes · 2022-10-28T20:38:05Z

...ms-ui/src/app/portlets/dot-categories/dot-categories-list/store/dot-categories-list-store.ts

@@ -36,6 +38,8 @@ export class DotCategoriesListStore extends ComponentStore<DotCategoriesListStat
            tableColumns: this.getCategoriesColumns(),
            selectedCategories: [],
            categories: [],
+            categoryBreadCrumbs: [],
+            breadCrumbHome: { icon: 'pi pi-home' },


Do we need this in the state? since it doesn't change never.

fmontes · 2022-10-28T20:48:56Z

core-web/apps/dotcms-ui/src/app/api/services/dot-categories/dot-categories.service.ts

+     */
+    getChildrenCategories(filters?: LazyLoadEvent): Observable<DotCategory[]> {
+        this.url = 'v1/categories/children';
+        this.setExtraParams('inode', filters.filters.inode?.value);


Can you rename this so it doesn't read filters.filters maybe event.filters

fmontes · 2022-10-28T20:51:20Z

...tcms-ui/src/app/portlets/dot-categories/dot-categories-list/dot-categories-list.component.ts

+     * @param {*} event
+     * @memberof DotCategoriesListComponent
+     */
+    async updateBreadCrumb(event) {


fmontes · 2022-10-28T21:26:12Z

...ms-ui/src/app/portlets/dot-categories/dot-categories-list/dot-categories-list.component.html

+                        <ng-template #CategoryName>
+                            <ng-container *ngIf="col.fieldName === 'categoryName'; else last">
+                                <button
+                                    class="link-button p-button-link"
+                                    [label]="category.categoryName"
+                                    (click)="addBreadCrumb(category)"
+                                    pButton
+                                    type="button"
+                                ></button>
+                            </ng-container>
+                        </ng-template>
+                        <ng-template #last>


As per the requirement in the issue I sent you is the whole row that needs to be clicked, the primeng component allows you to do that:

When the user clicks in a category row, if have children is should goes into the listing of the children.

fmontes · 2022-10-28T21:32:07Z

...tcms-ui/src/app/portlets/dot-categories/dot-categories-list/dot-categories-list.component.ts

+        this.dataTable.filter(category.inode, 'inode', null);
+        this.dataTable.filter(null, 'global', null);
+        this.store.addCategoriesBreadCrumb({ label: category.categoryName, id: category.inode });


This is not a good approach, you are faking it trigger a navigation inside the table, but you have the state in the store and you can modify that.

Also, you are updating the state more than one time unnecessarily.

Please be careful with triggering extra re-renderings when you can do the whole thing in one operation.

fmontes · 2022-10-28T21:36:10Z

Kapture.2022-10-28.at.15.35.29.mp4

github-actions · 2022-11-03T15:16:03Z

Unit Tests Report

1 343 tests 1 333 ✔️ 3m 2s ⏱️
  132 suites     10 💤
  132 files       0 ❌

Results for commit 7b045c5.

♻️ This comment has been updated with latest results.

github-actions · 2022-11-03T16:20:09Z

Integration Tests [postgres] Report

  398 files   398 suites 1h 0m 19s ⏱️
3 817 tests 3 793 ✔️ 23 💤 1 ❌
3 836 runs 3 812 ✔️ 23 💤 1 ❌

For more details on these failures, see this check.

Results for commit 7b045c5.

♻️ This comment has been updated with latest results.

github-actions · 2022-11-03T16:52:59Z

Integration Tests [mssql] Report

  397 files   397 suites 1h 6m 14s ⏱️
3 812 tests 3 783 ✔️ 23 💤 6 ❌
3 831 runs 3 802 ✔️ 23 💤 6 ❌

For more details on these failures, see this check.

Results for commit 7b045c5.

♻️ This comment has been updated with latest results.

zulqarnainvd · 2022-11-04T13:57:57Z

Kapture.2022-10-28.at.15.35.29.mp4

Updated

hmoreras · 2022-11-04T14:56:44Z

core-web/apps/dotcms-ui/src/app/api/services/dot-categories/dot-categories.service.ts

+    getCategories(event?: LazyLoadEvent): Observable<DotCategory[]> {
+        this.url = CATEGORY_API_URL;
+        this.updatePaginationService(event);
+        const page = parseInt(String(event.first / this.paginationPerPage), 10) + 1;


the page do not come in the event to avoid this calculation ?

fmontes · 2022-11-04T14:52:49Z

core-web/apps/dotcms-ui/src/app/api/services/dot-categories/dot-categories.service.ts

+        this.url = CATEGORY_API_URL;
+    }
+
+    updatePaginationService(event?: LazyLoadEvent) {


Why event here is optional?

github-actions · 2022-11-04T15:50:34Z

Postman Tests Report

    62 files 1 253 suites 2h 57m 14s ⏱️
  552 tests   539 ✔️ 0 💤 13 ❌
2 100 runs 2 058 ✔️ 0 💤 42 ❌

For more details on these failures, see this check.

Results for commit 7b045c5.

* Create empty container portlet (#22783) * copy container rest endpoint added with curl tests (#22944) * copy container rest endpoint added with curl tests * Addressed MR comments * Addressed MR commentsby removing uuid validation as it is not needed * fixed by importing required code * Addressed PR comments by removing UUIDUtil import * Added Tabs to Container Create Page and updated language strings (#22932) * Added Tabs to Container Create Page and updated translation strings * Removed unused comment * Bulk delete container (#22973) * bulk delete rest endpoint * curl tests for bulk delete * more ids added for bulk delete operation * updated authorization user's password * Container bulk operations (#23012) * Container bulk publish/unpublish rest endpoints * Container bulk archive/unarchive rest endpoints * curl/postman tests for container bulk publish * curl/postman tests for all bulk operations * fixed failed test * Container permission and history iframes (#23025) * Added Container listing table and Filters (#22920) * [WIP] Added Container listing and filters to Container list page * [WIP] Refactor Container list to use already provided Container Interface * [WIP] Container status is now displayed correctly * [WIP] Updated unit tests and minor refactor * Fixed unit test and listing data table * Added template outlet before listing table search, Container list style and ui refactor * Added strings to Language file and updated string keys in Container List component * Added Component Store to Container Component * Modified container list component to better use selectors * moved activeRoue logic to store * Refactored ContainerList functionality to ContainerListStore * Method name refactor and State update minimisation * Fixed state initialization * Categories permissions iframe added (#23032) * code adjustments as per error handling standard (#23031) * Feature/container lisiting complete actions (#23030) * [WIP] Added Container listing and filters to Container list page * [WIP] Refactor Container list to use already provided Container Interface * [WIP] Container status is now displayed correctly * [WIP] Updated unit tests and minor refactor * Fixed unit test and listing data table * Added template outlet before listing table search, Container list style and ui refactor * Added strings to Language file and updated string keys in Container List component * [WIP] Added actions and Container service to handle actions * Updated unit tests * Added Component Store to Container Component * Modified container list component to better use selectors * moved activeRoue logic to store * Refactored ContainerList functionality to ContainerListStore * Method name refactor and State update minimisation * Fixed state initialization * [WIP] Added context menu actions and updated tests * Fixed Unit tests * Fixed Unit tests * Update core-web/apps/dotcms-ui/src/app/api/services/dot-router/dot-router.service.ts Co-authored-by: Rafael Velazco <rjvelazco21@gmail.com> * Update core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.ts Co-authored-by: Rafael Velazco <rjvelazco21@gmail.com> * Context menu actions hooked up to container service, Updated unit tests * Fixed store logic and fixed typos * Refactored container list component methods to container list store, Fixed typos, Updated container routes Co-authored-by: Rafael Velazco <rjvelazco21@gmail.com> * Category rest endpoints for Add category, Update category and get children categories (#23029) * Add category rest endpoint * curl test fix * rest endpoint added to get children categories by parent inode * curl/postman tests * addressed PR comments and also renamed API from children to _children * reverted API name from _children to children * Updated API documentation * Code changes as per suggestions from code reviewing team * removed unnecessary imports * Update category rest endpoint added * little changes * fix for the curl test * Delete category rest endpoint (#23080) * Delete category rest endpoint * addressed feedback from BE team * Feature/container properties form (#23020) * Added Tabs to Container Create Page and updated translation strings * Added container properties component and added Inplace editor to it * Removed unused comment * [WIP] Properties form UI updated * Added Monaco Editor to Properties Form * add history and permission iframe * refactoring * create edit route for container and resolver * Added controls to container form * change component and folders name * Added method docs, Added translations, Minor fixes * Added missing translations * Added MonacoEditor type model for reusability * CSS refactor * CSS refactor * Renamed container create component as DotContainerCreateComponent * Component and SCSS refactor * Refactored Loop editor to new component * Update core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.ts Co-authored-by: Rafael Velazco <rjvelazco21@gmail.com> * Update core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.ts Co-authored-by: Rafael Velazco <rjvelazco21@gmail.com> * Refactored Content Editor to new component * Fixed Permissions and History componanets * change css style and remove unnecessary ng deep * change css style and remove unnecessary ng deep * Update core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.scss Co-authored-by: Freddy Montes <freddymontes@gmail.com> * Update core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/store/dot-content-editor.store.ts Co-authored-by: Freddy Montes <freddymontes@gmail.com> * Removed unnecessary monaco editor initializations * fixed box height issue Co-authored-by: Zulqarnain Huda <zulqarnain.huda@venturedive.com> Co-authored-by: zulqarnainvd <113915849+zulqarnainvd@users.noreply.github.com> Co-authored-by: Rafael Velazco <rjvelazco21@gmail.com> Co-authored-by: Freddy Montes <freddymontes@gmail.com> * Rest endpoint to update categories for sortOrder (#23091) * Rest endpoint to update categories for sortOrder * updated credentials * Addressed PR feedback * add permissions and history tab and load Iframe in Tabs (#23092) * add permissions and history tab and load Iframe in Tabs * write test cases using host component method and use variable in scss * Export categories rest endpoint (#23108) * Export categories rest endpoint * addressed PR feedback * Add/Get container details (#23126) * improvements in old code * add container rest endpoint added * Container details endpoint added to fetch container + structures info combinely * curl test + improvements * addressed PR feedback for _add rest endpoint * removed details endpoint and added support in the live and working endpoint to fetch contentTypes * code cleanup * Import categories rest endpoint (#23125) * Import categories rest endpoint * addressed PR feedback on categories import * addressed further feedback on categories import * Addressed PR feedback * converted categoryDTO to immutable * container rest endpoint modified to accept container code changes (#23157) * container rest endpoint modified to accept container code changes * curl/postman test added * Curl test fix (#23161) * changed admin user's password * fixed curl test * updated tests assertions * removed obsolete code/classes for categories (#23168) * removed obsolete code/classes for categories * Removed useless entries * removed servlet-mapping from web.xml * Feature/categories permissions (#23047) * categories initialization * fix unit test of category component * add Category Table and actions * add sub category beadcrumb and update sub category in table * modify subCategoryUrl and fix typo in table * add permission component and create a store * change folder name and css class convention * add docs and refactor the code * add doc * disable home button * changing code according to suggestions and write unit test of categorly listing component * add action header and Table UI of categories * add pagination and search filter * feat: working on categories * feat: working on categories * add pagination and search filter * refactoring and change doc * otCMS/core#23253 Categories: Fix the sort order in the endpoint * Revert "removed obsolete code/classes for categories (#23168)" (#23288) This reverts commit 2762511. * Container Form (#23110) * Added Simple form to container properties * add confirmation dialog on clear * Container can now be added using the simple form * fix create container route issue and get data in container properties * Added inplace data variable and fixed inplace CSS * Form is now editable * add Variable popup model * Added form validation and disabled button on zero max contentlets * Load content type from different source * add content type to menu state * get contentStructure value from child component to parent * Variable modal now works * Fixes to container add code * Addressed Feedback * Addressed Feedback * set variable in editor * Added update logic, Fixed failing unit tests * Fixed faorm initilisation issue * Addressed Feedback * changes according to PR * Fixed notification issue in container list * Fixed container list empty messages and linked butoon to create container * changes according to new API and requested PR changes * changes according to PR and working fedback UI 3 issues * Container Add form CSS Fixes * Added label and CSS fixes * Fixed clear button * Title field now enabled on container Add form * disable save button when required fields is empty or on edit value is not changed * #23144 Added API Link Component, Fixed button text * fix UI issues * fix UI issues and test cases * refactor code * Fixed CSS, Updated url to load system containers * Disabled interaction in container list for System Container * Updated tests * fix contentType Variable issue and container listing scroll issue * Removed optional identifier from container Request * fix reported issues * Removed from container properties template * refactoring and change name of resolver * PR requested changes * remove validation of description field * Conatiner Properties Form UI Fixes * Implemented Control Value Accessor for DotLoopEditor Component * Code impovements and fixes * #23146 Refactored Content Editor component into a angular form control * #23146 [WIP] Adding data to form control * Rename code component Co-authored-by: Zulqarnain Huda <zulqarnain.huda@venturedive.com> Co-authored-by: Freddy Montes <751424+fmontes@users.noreply.github.com> * get categories childrens and add breadcrumb (#23260) * get categories childrens and add breadcrumb * refactor: changes according to PR * refactor: add unit test case of category listing component * #23252 working on categories feedbacks and write test cases * #23252 working on categories feedbacks and write test cases * Fix tests build for containers * Clean up model * Clean up renamed container * #23252 fix category filter issue (#23308) * Added children count in the top level categories list (#23263) * Added children count in the top level categories list * added categories paginator for additional information * Addressed PR feedback * added line space at line number 94 * added java doc on the CategoryResource API + added postman tests * Fix import Co-authored-by: Daniel Silva <daniel.silva@dotcms.com> Co-authored-by: hassan-mustafa-baig <111717530+hassan-mustafa-baig@users.noreply.github.com> Co-authored-by: motasimvd <62100713+motasimvd@users.noreply.github.com> Co-authored-by: Rafael Velazco <rjvelazco21@gmail.com> Co-authored-by: Zulqarnain Huda <zulqarnain.huda@venturedive.com> Co-authored-by: zulqarnainvd <113915849+zulqarnainvd@users.noreply.github.com>

get categories childrens and add breadcrumb

f9d8be5

zulqarnainvd mentioned this pull request Oct 28, 2022

Categories: Add child categories #23252

Closed

fmontes requested changes Oct 28, 2022

View reviewed changes

zulqarnainvd added 3 commits November 2, 2022 22:51

refactor: changes according to PR

013e3a5

refactor: add unit test case of category listing component

ff9fcbe

#23252 working on categories feedbacks and write test cases

26baa5c

zulqarnainvd linked an issue Nov 3, 2022 that may be closed by this pull request

Categories: Add child categories #23252

Closed

zulqarnainvd marked this pull request as draft November 4, 2022 06:29

#23252 working on categories feedbacks and write test cases

7b045c5

zulqarnainvd marked this pull request as ready for review November 4, 2022 13:58

hmoreras reviewed Nov 4, 2022

View reviewed changes

fmontes approved these changes Nov 4, 2022

View reviewed changes

fmontes merged commit f434605 into canary Nov 4, 2022

fmontes deleted the categories-childrens branch November 4, 2022 18:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

get categories childrens and add breadcrumb #23260

get categories childrens and add breadcrumb #23260

zulqarnainvd commented Oct 28, 2022

fmontes Oct 28, 2022

zulqarnainvd Nov 3, 2022

fmontes Oct 28, 2022

zulqarnainvd Nov 3, 2022

fmontes Oct 28, 2022

fmontes Oct 28, 2022

fmontes Oct 28, 2022

zulqarnainvd Nov 3, 2022

fmontes Oct 28, 2022

zulqarnainvd Nov 3, 2022

fmontes Oct 28, 2022

zulqarnainvd Nov 3, 2022

fmontes Oct 28, 2022

zulqarnainvd Nov 3, 2022

fmontes Oct 28, 2022

fmontes commented Oct 28, 2022

github-actions bot commented Nov 3, 2022 •

edited

github-actions bot commented Nov 3, 2022 •

edited

github-actions bot commented Nov 3, 2022 •

edited

zulqarnainvd commented Nov 4, 2022

hmoreras Nov 4, 2022

fmontes Nov 4, 2022

github-actions bot commented Nov 4, 2022

		@@ -1,4 +1,12 @@
		<dot-portlet-base *ngIf="vm$ \| async as vm">

get categories childrens and add breadcrumb #23260

get categories childrens and add breadcrumb #23260

Conversation

zulqarnainvd commented Oct 28, 2022

Proposed Changes

Checklist

Additional Info

Screenshots

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fmontes commented Oct 28, 2022

github-actions bot commented Nov 3, 2022 • edited

Unit Tests Report

github-actions bot commented Nov 3, 2022 • edited

Integration Tests [postgres] Report

github-actions bot commented Nov 3, 2022 • edited

Integration Tests [mssql] Report

zulqarnainvd commented Nov 4, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Nov 4, 2022

Postman Tests Report

github-actions bot commented Nov 3, 2022 •

edited

github-actions bot commented Nov 3, 2022 •

edited

github-actions bot commented Nov 3, 2022 •

edited