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

Select Existing File: Show host/folder on the left #30215

Closed
Tracked by #29873
nicobytes opened this issue Oct 2, 2024 · 4 comments · Fixed by #30562
Closed
Tracked by #29873

Select Existing File: Show host/folder on the left #30215

nicobytes opened this issue Oct 2, 2024 · 4 comments · Fixed by #30562
Assignees
@jcastro-dotcms
Labels
dotCMS : Content Management QA : Approved QA : Passed Internal Release : 24.11.14 Bug Fixing Team : Falcon

Comments

@nicobytes
Copy link
Contributor

nicobytes commented Oct 2, 2024 •
edited
Loading

Parent Issue

#29873

Task

Show Hosts/Folders on the left panel in the Select Existing File Dialog for File Fields.

Proposed Objective

User Experience

Proposed Priority

Same as Parent Issue

Acceptance Criteria

  1. In the File field, there is a "Select Existing File" option.
  2. Clicking on this option opens a popup
  3. Hosts/Folders should appear on the left side.
  4. Navigate through the levels

Screenshot

The UI should be similar to the Dojo dialog.

Screenshot 2024-10-02 at 12 00 38 PM

https://primeng.org/tree
@nicobytes nicobytes mentioned this issue Oct 2, 2024
Closed
@nicobytes nicobytes moved this from New to Next 1-3 Sprints in dotCMS - Product Planning Oct 2, 2024
@nicobytes nicobytes moved this from New to Next 1-3 Sprints in dotCMS - Product Planning Oct 16, 2024
@nicobytes nicobytes self-assigned this Oct 16, 2024
@nicobytes nicobytes changed the title Select Existing File: Show host/folder on the left Select Existing File: Show host/folder on the left with e2e Oct 30, 2024
@nicobytes nicobytes changed the title Select Existing File: Show host/folder on the left with e2e Select Existing File: Show host/folder on the left Oct 30, 2024
nicobytes added a commit that referenced this issue Nov 4, 2024
@nicobytes
chore(edit-content): implement endpoint to fetch sites #30215
34b8103
@nicobytes nicobytes mentioned this issue Nov 4, 2024
Merged
3 tasks
@nicobytes nicobytes linked a pull request Nov 4, 2024 that will close this issue
chore(edit-content): implement endpoint to fetch sites #30562
Merged
3 tasks
@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 4, 2024

PRs:

nicobytes added a commit that referenced this issue Nov 5, 2024
@nicobytes
chore(edit-content): Load sites for select existing file dialog #30215
54cd5e4
nicobytes added a commit that referenced this issue Nov 5, 2024
@nicobytes
chore(edit-content): Add docs #30215
473820a
nicobytes added a commit that referenced this issue Nov 5, 2024
@nicobytes
chore(edit-content): Fix unit tests #30215
ff9c63f
nicobytes added a commit that referenced this issue Nov 5, 2024
@nicobytes
chore(edit-content): Fix sonar issue #30215
23cdfc5
nicobytes added a commit that referenced this issue Nov 5, 2024
@nicobytes
chore(edit-content): add unit tests #30215
9364dd5
nicobytes added a commit that referenced this issue Nov 5, 2024
@nicobytes
chore(edit-content): add unit tests #30215
6b1bf9d
nicobytes added a commit that referenced this issue Nov 5, 2024
@nicobytes
chore(edit-content): fix error #30215
0aac381
nicobytes added a commit that referenced this issue Nov 6, 2024
@nicobytes
chore(edit-content): apply feedback #30215
dbbe0b8
@nicobytes
Copy link
Contributor Author

nicobytes commented Nov 6, 2024 •
edited
Loading

QA Notes:

  1. In the File field, there is a "Select Existing File" option.
  2. Clicking on this option opens a popup
  3. Hosts/Folders should appear on the left side.
  4. Navigate through the levels
2024-11-05.18-20-03.mp4

nicobytes added a commit that referenced this issue Nov 6, 2024
@nicobytes
chore(edit-content): fix error #30215
e29e890
github-merge-queue bot pushed a commit that referenced this issue Nov 8, 2024
@nicobytes
chore(edit-content): implement endpoint to fetch sites (#30562)
9269649 
### Parent Issue

#30215

### Proposed Changes

This pull request includes multiple changes to the `dot-site` service
and the `dot-select-existing-file` component, primarily focusing on
adding pagination support and improving the file selection UI and its
state management.

### DotSiteService Enhancements:
* Added a `DEFAULT_PAGE` constant and included a `page` parameter in the
`getSites` method to support pagination.
(`core-web/libs/data-access/src/lib/dot-site/dot-site.service.ts`)
[[1]](diffhunk://#diff-c4872eacb42281fa7aa6fd3d5c084e08fd41e79eb2778581421e7344f9aa4e12R20-R21)
[[2]](diffhunk://#diff-c4872eacb42281fa7aa6fd3d5c084e08fd41e79eb2778581421e7344f9aa4e12L44-R56)
* Updated test cases to reflect the new `page` parameter in the URLs.
(`core-web/libs/data-access/src/lib/dot-site/dot-site.service.spec.ts`)
[[1]](diffhunk://#diff-ad4a37aa4e92da7343f4da8185ea2031a67319500d820946e0d24fa515e33241L30-R30)
[[2]](diffhunk://#diff-ad4a37aa4e92da7343f4da8185ea2031a67319500d820946e0d24fa515e33241L44-R44)

### DotSelectExistingFile Component Enhancements:
* Improved the `dot-sidebar` component to handle loading states and
display skeleton loaders while data is being fetched.
(`core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/components/dot-sidebar/dot-sidebar.component.html`,
`core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/components/dot-sidebar/dot-sidebar.component.ts`)
[[1]](diffhunk://#diff-c3ff3590364bc12ded7173d7374838dfab13f67598f80daa198dfd96c935d459L1-R22)
[[2]](diffhunk://#diff-b6e7f5a1ad7c221178b3ddf3f3dfc06021ba87b4e18ef9d7f6c6c9a6eab016d3L1-R82)
* Added event handling for node expansion in the `dot-sidebar` component
to dynamically load child nodes.
(`core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/dot-select-existing-file.component.html`)
* Introduced a new test suite for the `SelectExisingFileStore` to cover
folder loading and child node expansion logic.
(`core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/store/select-existing-file.store.test.ts`)
* Updated the `SelectExisingFileStore` to manage the state of folder
nodes, including loading states and expanded nodes.
(`core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/store/select-existing-file.store.ts`)
[[1]](diffhunk://#diff-4e8a1b332dae5fb8ead291b76bf6099437aaf4aa6fd0a759ffe71c3074ffe7f0R2-R22)
[[2]](diffhunk://#diff-4e8a1b332dae5fb8ead291b76bf6099437aaf4aa6fd0a759ffe71c3074ffe7f0L20-R35)
[[3]](diffhunk://#diff-4e8a1b332dae5fb8ead291b76bf6099437aaf4aa6fd0a759ffe71c3074ffe7f0L36-R51)
[[4]](diffhunk://#diff-4e8a1b332dae5fb8ead291b76bf6099437aaf4aa6fd0a759ffe71c3074ffe7f0R70-R71)
[[5]](diffhunk://#diff-4e8a1b332dae5fb8ead291b76bf6099437aaf4aa6fd0a759ffe71c3074ffe7f0L75-R153)

### Miscellaneous:
* Minor CSS adjustments to the `dot-select-existing-file` component to
improve layout and styling.
(`core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/dot-select-existing-file.component.scss`)
* Refactored the `file-field.store.spec.ts` to use `TestBed` for
dependency injection and added missing imports.
(`core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/store/file-field.store.spec.ts`)
[[1]](diffhunk://#diff-57a0231d8f4135b48e8dd7e31f8e216157f1fd49a145d9cc0c7d7bf912a00de4L2-R4)
[[2]](diffhunk://#diff-57a0231d8f4135b48e8dd7e31f8e216157f1fd49a145d9cc0c7d7bf912a00de4L19-R22)

### Checklist
- [x] Tests
- [x] Translations
- [x] Security Implications Contemplated (add notes if applicable)

### Screenshots



https://github.com/user-attachments/assets/56370a81-b204-456e-85c2-7d7dc9f26a57
@github-project-automation github-project-automation bot moved this from In Review to Internal QA in dotCMS - Product Planning Nov 8, 2024
@jcastro-dotcms
Copy link
Contributor

INTERNAL QA: PASSED

  • Docker Image: trunk_7a5f044

The new File Dialog shows up as described in Nicolas' comment. Remember to enable the new Edit Mode for your test Content Type.

IMPORTANT:

This PR is meant to:

  1. Display the new File Dialog.
  2. Allow the user to list and expand the Sites and their folders.

Displaying the actual contents of such folders was not part of the ticket's scope. It'll be taken care of in another ticket.

@jcastro-dotcms jcastro-dotcms moved this from Internal QA to QA - Backlog in dotCMS - Product Planning Nov 8, 2024
@josemejias11
Copy link
Contributor

Approved: Tested on trunk_4548b16, Docker, macOS 14.5, FF v126.0.1

@josemejias11 josemejias11 moved this from QA - In Progress to Done in dotCMS - Product Planning Nov 11, 2024
nicobytes added a commit that referenced this issue Nov 20, 2024
@nicobytes
chore(edit-content): fix errors with testing #30215
2a0acf4
nicobytes added a commit that referenced this issue Nov 20, 2024
@nicobytes
chore(edit-content): fix error #30215
b0e7dc1
nicobytes added a commit that referenced this issue Nov 20, 2024
@nicobytes
chore(edit-content): fix error #30215
53b4ca5
nicobytes added a commit that referenced this issue Nov 22, 2024
@nicobytes
chore(edit-content): fix error #30215
1315692
nicobytes added a commit that referenced this issue Nov 27, 2024
@nicobytes
chore(edit-content): fix unit tests #30215
8b55735
nicobytes added a commit that referenced this issue Nov 27, 2024
@nicobytes
chore(edit-content): add format date #30215
76e2429
nicobytes added a commit that referenced this issue Nov 29, 2024
@nicobytes
chore(edit-content): fix unit tests errors #30215
df02687
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jcastro-dotcms jcastro-dotcms

Labels
dotCMS : Content Management QA : Approved QA : Passed Internal Release : 24.11.14 Bug Fixing Team : Falcon
Projects
dotCMS - Product Planning
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

chore(edit-content): implement endpoint to fetch sites dotCMS/core
4 participants
@dsilvam @nicobytes @jcastro-dotcms @josemejias11