Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Relationship Field: Listing Content with Dynamic Columns #30923

Closed
Tracked by #30495
nicobytes opened this issue Dec 11, 2024 · 3 comments · Fixed by #30941
Closed
Tracked by #30495

Relationship Field: Listing Content with Dynamic Columns #30923

nicobytes opened this issue Dec 11, 2024 · 3 comments · Fixed by #30941
Assignees
@oidacra
Labels
dotCMS : Content Management OKR : User Experience Owned by Jason QA : Passed Internal Release : 24.12.20 Team : Falcon Type : Enhancement

Comments

@nicobytes
Copy link
Contributor

nicobytes commented Dec 11, 2024 •
edited
Loading

Parent Issue:

#30495

User Story:

As a user, I want to view related content in a dialog when browsing through items, so that I can explore additional resources without leaving my current page.

Screenshot 2024-12-11 at 3 39 33 PM

Acceptance Criteria

1. Dynamic Columns

  • The mandatory columns are: Type, Title, Step, and Language.
  • The columns displayed in the dialog should be fetched dynamically based on the content type.
  • Use the /api/v3/contenttype/<id>/fields/allfields?filter=SHOW_IN_LIST endpoint to retrieve the fields to be displayed.
  • The response should determine which fields (e.g., Title, Type, URL, Publish Date) appear as columns in the dialog.

2. Content Display

  • Utilize the /api/content/_search endpoint to retrieve content dynamically.
  • The dialog should display a list of related content items, dynamically binding the retrieved fields to the corresponding columns.
  • The display should include thumbnails for items where applicable.
  • When there are many columns, implement horizontal scrolling, ensuring the checkbox and button columns are sticky for better usability.

3. Error Handling

  • If there is no related content, the dialog should display a user-friendly message (e.g., "No related content available.").
  • If content fails to load due to a technical error, a retry option should be provided.
@nicobytes nicobytes mentioned this issue Dec 11, 2024
Open
@nicobytes nicobytes moved this from New to Next 1-3 Sprints in dotCMS - Product Planning Dec 11, 2024
@nicobytes nicobytes changed the title Relationship Field: Listing Content in a Dialog Relationship Field: Listing Content (Dynamic Columns) in a Dialog Dec 11, 2024
@nicobytes nicobytes changed the title Relationship Field: Listing Content (Dynamic Columns) in a Dialog Relationship Field: Listing Content with Dynamic Columns in a Dialog Dec 11, 2024
@nicobytes nicobytes changed the title Relationship Field: Listing Content with Dynamic Columns in a Dialog Relationship Field: Listing Content with Dynamic Columns Dec 11, 2024
@nicobytes nicobytes moved this from Next 1-3 Sprints to In Progress in dotCMS - Product Planning Dec 12, 2024
@nicobytes nicobytes self-assigned this Dec 13, 2024
@nicobytes nicobytes linked a pull request Dec 13, 2024 that will close this issue
chore(editor-content): implement dynamic columns in relationship fields #30941
Merged
3 tasks
@github-actions GitHub Actions
Copy link

PRs:

@nicobytes nicobytes mentioned this issue Dec 17, 2024
Merged
3 tasks
@nicobytes
Copy link
Contributor Author

QA Notes:

  1. A relationship without any associated content or data.
1.mp4
  1. Show related content fields based on “Show in List”
2.mp4
  1. Display the title as the ID when no text field is available.
3.mp4
  1. Manage multiple fields using horizontal scrolling and sticky columns
4.mp4

Note: This feature does not include functionalities like pagination, rendering special fields such as ‘step,’ searching, or sorting. It only displays the content with dynamic columns.

@nicobytes nicobytes moved this from In Progress to In Review in dotCMS - Product Planning Dec 17, 2024
github-merge-queue bot pushed a commit that referenced this issue Dec 18, 2024
@nicobytes
chore(editor-content): implement dynamic columns in relationship fiel…
c83873e 
…ds (#30941)

### Parent Issue

#30923 

### Proposed Changes

This pull request includes several changes across different files to
introduce a new service, update styling, and improve existing
components. The most important changes include adding a new
`DotFieldService`, updating SCSS variables and styles, and enhancing the
`dot-select-existing-content` component.

### Introduction of `DotFieldService`:

* Added `DotFieldService` to handle fetching fields for a specific
content type with optional filtering.
(`core-web/libs/data-access/src/lib/dot-field/dot-field.service.ts`)
* Created unit tests for `DotFieldService` to verify its functionality.
(`core-web/libs/data-access/src/lib/dot-field/dot-field.service.spec.ts`)
* Exported `DotFieldService` in the index file.
(`core-web/libs/data-access/src/index.ts`)

### SCSS Variables and Styles:

* Updated SCSS variables to use CSS custom properties for gray shades.
(`core-web/libs/dotcms-scss/shared/_colors.scss`)
* Added new CSS custom properties for border radius and primeflex
colors. (`core-web/libs/dotcms-scss/angular/styles.scss`,
`core-web/libs/dotcms-scss/shared/_colors.scss`)
[[1]](diffhunk://#diff-19fbe1ab2e0dcad6949b44c72556e4893c233c54263211aa055d0034241fcb5fR43-R44)
[[2]](diffhunk://#diff-a673541496e37f0c8d73eef81a2026235e3d621daf64af8bf35a97881cb2dce5R430-R451)
* Changed table highlight background color.
(`core-web/libs/dotcms-scss/angular/dotcms-theme/components/_table.scss`)

### Enhancements to `dot-select-existing-content` Component:

* Enhanced the component to display error messages and handle empty data
scenarios.
(`core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.html`)
* Updated the component to use dynamic columns and improved table
layout.
(`core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.html`,
`core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.scss`)
[[1]](diffhunk://#diff-ba794904cc95635d9efca07b7e2bfeb948b5b0bb0c8e1e97c777c615398ba011R2)
[[2]](diffhunk://#diff-778cca685214b49b5445efc5613609b68214a24052f4ed77408caeb0c9e6ffb2L5-L13)
* Added a required input for content ID to the component.
(`core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.ts`)
* Updated unit tests to mock the `RelationshipFieldService` and reflect
changes in the component.
(`core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.spec.ts`)


### Checklist
- [x] Tests
- [x] Translations
- [x] Security Implications Contemplated (add notes if applicable)
@github-project-automation github-project-automation bot moved this from In Review to Done in dotCMS - Product Planning Dec 18, 2024
@nicobytes nicobytes moved this from Done to Internal QA in dotCMS - Product Planning Dec 19, 2024
@freddyDOTCMS freddyDOTCMS self-assigned this Dec 19, 2024
@oidacra oidacra assigned oidacra and unassigned nicobytes and freddyDOTCMS Dec 19, 2024
@oidacra
Copy link
Member

oidacra commented Dec 19, 2024

IQA Passed:

  1. A relationship without any associated content or data. ✅
  2. Show related content fields based on “Show in List” ✅
  3. Display the title as the ID when no text field is available. ✅
  4. Manage multiple fields using horizontal scrolling and sticky columns ✅

@oidacra oidacra moved this from Internal QA to Done in dotCMS - Product Planning Dec 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@oidacra oidacra

Labels
dotCMS : Content Management OKR : User Experience Owned by Jason QA : Passed Internal Release : 24.12.20 Team : Falcon Type : Enhancement
Projects
dotCMS - Product Planning
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

chore(editor-content): implement dynamic columns in relationship fields dotCMS/core
3 participants
@oidacra @nicobytes @freddyDOTCMS