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

File field: "Create New File" functionality #29875

Closed
Tracked by #29691
oidacra opened this issue Sep 4, 2024 · 4 comments · Fixed by #30391
Closed
Tracked by #29691

File field: "Create New File" functionality #29875

oidacra opened this issue Sep 4, 2024 · 4 comments · Fixed by #30391
Assignees
@dsilvam
Labels
OKR : Technical User Experience Owned by Freddy QA : Approved QA : Passed Internal Release : 24.11.11 Team : Falcon

Comments

@oidacra
Copy link
Member

oidacra commented Sep 4, 2024 •
edited by nicobytes
Loading

Parent Issue

#29691

Task

Implement the "Create New File" feature for File Field, which opens the content edit window for a new file while maintaining the state of the original content item.

Screenshot 2024-10-16 at 12 52 02 PM

Screenshot 2024-10-16 at 12 51 31 PM

Proposed Objective

User Experience

Proposed Priority

Same as Parent Issue

Acceptance Criteria

  1. A "Create New File" option is available in the File field
  2. Clicking the option opens the content edit window for a new file
  3. The default content type for the new file is dotAsset
  4. The state of the original content item is maintained
  5. After saving the new file, the user is returned to the original content item
  6. The newly created file is properly linked to the File field

Assumptions & Initiation Needs

  • API for creating new content items (files) is available
  • Design specifications for the content edit window are provided
@oidacra oidacra moved this from New to Next 1-3 Sprints in dotCMS - Product Planning Sep 4, 2024
@oidacra oidacra mentioned this issue Sep 10, 2024
Closed
@nicobytes nicobytes changed the title Implement "Create New File" functionality File field: Implement "Create New File" functionality Sep 18, 2024
@nicobytes nicobytes moved this from Next 1-3 Sprints to Current Sprint Backlog in dotCMS - Product Planning Sep 18, 2024
@nicobytes nicobytes removed the Triage label Sep 18, 2024
@nicobytes nicobytes changed the title File field: Implement "Create New File" functionality File field: "Create New File" functionality Sep 18, 2024
@nicobytes nicobytes moved this to Next 1-3 Sprints in dotCMS - Product Planning Oct 2, 2024
@nicobytes nicobytes self-assigned this Oct 2, 2024
@nicobytes nicobytes moved this from Current Sprint Backlog to Next 1-3 Sprints in dotCMS - Product Planning Oct 16, 2024
nicobytes added a commit that referenced this issue Oct 18, 2024
@nicobytes
chore(edit-content): create components #29875
3e58391
nicobytes added a commit that referenced this issue Oct 18, 2024
@nicobytes
chore(edit-content): create components #29875
25cdf9d
@nicobytes nicobytes linked a pull request Oct 18, 2024 that will close this issue
feat(edit-content): create new file functionality on File Fields #30391
Merged
3 tasks
@github-actions GitHub Actions
Copy link

PRs:

nicobytes added a commit that referenced this issue Oct 22, 2024
@nicobytes
chore(edit-content): remove inputs #29875
6d2545b
nicobytes added a commit that referenced this issue Oct 22, 2024
@nicobytes
chore(edit-content): upload file #29875
487662d
@nicobytes nicobytes mentioned this issue Oct 23, 2024
Merged
3 tasks
nicobytes added a commit that referenced this issue Oct 23, 2024
@nicobytes
chore(edit-content): change default height #29875
f10041c
nicobytes added a commit that referenced this issue Oct 23, 2024
@nicobytes
chore(edit-content): disable strict #29875
5fe8784
nicobytes added a commit that referenced this issue Oct 23, 2024
@nicobytes
chore(edit-content): add docs #29875
2bff355
nicobytes added a commit that referenced this issue Oct 23, 2024
@nicobytes
chore(edit-content): fix error #29875
7f6ae33
@nicobytes
Copy link
Contributor

QA Notes:

Create files from scratch using the Monaco editor for file fields.

2024-10-23.10-30-20.mp4

nicobytes added a commit that referenced this issue Oct 24, 2024
@nicobytes
chore(edit-content): fix problem with editor #29875
08e04f0
nicobytes added a commit that referenced this issue Oct 24, 2024
@nicobytes
chore(edit-content): fix error #29875
5640398
nicobytes added a commit that referenced this issue Oct 24, 2024
@nicobytes
chore(edit-content): fix error #29875
0b7f934
github-merge-queue bot pushed a commit that referenced this issue Oct 24, 2024
@nicobytes @oidacra
feat(edit-content): create new file functionality on File Fields (#30391
0c1b222 
)

### Parent Issue

#29875 

### Proposed Changes

This pull request introduces a new file editor component with Angular
and PrimeNG, adds a store for managing the editor state, and updates
related components and tests. The most important changes include the
addition of the `DotFormFileEditorComponent`, its associated styles,
constants, and store, as well as updates to the
`DotFormImportUrlComponent` and its tests.

### New File Editor Component:

*
[`dot-form-file-editor.component.html`](diffhunk://#diff-dad0deafcdeaeb3aa5c4374c558e9e5493505545f78dcc46ec7dbaea8cff4f56R1-R59):
Added a form for file editing with fields for file name and content, and
buttons for saving or canceling the upload.
*
[`dot-form-file-editor.component.scss`](diffhunk://#diff-4508b6c98b0ef6b04cce00f33fc93d89eaf27283ec4fc731c983ad1d3e637919R1-R93):
Added styles for the file editor component, including layout and
state-specific styles.
*
[`dot-form-file-editor.component.ts`](diffhunk://#diff-4e07289537a18f138b8657c2505e3416523ee356c698aeb38f3d519a2257dadaR1-R270):
Implemented the logic for the file editor component, including form
handling, state management, and interaction with the store.
*
[`dot-form-file-editor.conts.ts`](diffhunk://#diff-32c45307bdce4649b35b4279ce966eeb847285431f1761f71cbde3caebea90f1R1-R17):
Defined default configuration options for the Monaco editor used in the
file editor component.
*
[`form-file-editor.store.ts`](diffhunk://#diff-5184979843abf3baa538afc8613a1fa040a7907c9614bfb64ddc472c31b4cfa7R1-R207):
Created a store to manage the state of the file editor, including file
upload logic and state transitions.

### Related Component Updates:

*
[`dot-form-import-url.component.html`](diffhunk://#diff-47b91a5a2108d26181aede1a70773f546e1499df45a54a630daaa7d5670f13c0L22-R22):
Updated the validation message binding to use `form.controls.url`
instead of `form.get('url')`.
*
[`dot-form-import-url.component.spec.ts`](diffhunk://#diff-0d18173fe874af517af41ad1e4422ff7681ba1c2ad4daf75c9806a07fa37e7b2R11):
Updated the test cases to use the new `ComponentStatus` enum for state
transitions.
[[1]](diffhunk://#diff-0d18173fe874af517af41ad1e4422ff7681ba1c2ad4daf75c9806a07fa37e7b2R11)
[[2]](diffhunk://#diff-0d18173fe874af517af41ad1e4422ff7681ba1c2ad4daf75c9806a07fa37e7b2L67-R68)
[[3]](diffhunk://#diff-0d18173fe874af517af41ad1e4422ff7681ba1c2ad4daf75c9806a07fa37e7b2L81-R90)

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

### Video


https://github.com/user-attachments/assets/123eb3f8-8689-4210-ae03-d31ae18688b1

---------

Co-authored-by: Arcadio Quintero <[email protected]>
@github-project-automation github-project-automation bot moved this from In Review to Internal QA in dotCMS - Product Planning Oct 24, 2024
@dsilvam dsilvam assigned dsilvam and unassigned nicobytes Oct 24, 2024
@dsilvam
Copy link
Contributor

dsilvam commented Oct 24, 2024

Passed Internal QA: Created different type of files and working as expected.

Formats tested:

  • HTML
  • Markdown
  • JavaScript
  • Velocity

Functionality tested:

  • View the different links
  • Download the file
  • dotAssets created for each
  • Removing the files from the content

Image
Image

@dsilvam dsilvam moved this from Internal QA to QA - Backlog in dotCMS - Product Planning Oct 24, 2024
@josemejias11
Copy link
Contributor

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

@josemejias11 josemejias11 moved this from QA - In Progress to Done in dotCMS - Product Planning Oct 29, 2024
spbolton pushed a commit that referenced this issue Nov 11, 2024
@nicobytes @oidacra @spbolton
feat(edit-content): create new file functionality on File Fields (#30391
a4a65c1 
)

### Parent Issue

#29875 

### Proposed Changes

This pull request introduces a new file editor component with Angular
and PrimeNG, adds a store for managing the editor state, and updates
related components and tests. The most important changes include the
addition of the `DotFormFileEditorComponent`, its associated styles,
constants, and store, as well as updates to the
`DotFormImportUrlComponent` and its tests.

### New File Editor Component:

*
[`dot-form-file-editor.component.html`](diffhunk://#diff-dad0deafcdeaeb3aa5c4374c558e9e5493505545f78dcc46ec7dbaea8cff4f56R1-R59):
Added a form for file editing with fields for file name and content, and
buttons for saving or canceling the upload.
*
[`dot-form-file-editor.component.scss`](diffhunk://#diff-4508b6c98b0ef6b04cce00f33fc93d89eaf27283ec4fc731c983ad1d3e637919R1-R93):
Added styles for the file editor component, including layout and
state-specific styles.
*
[`dot-form-file-editor.component.ts`](diffhunk://#diff-4e07289537a18f138b8657c2505e3416523ee356c698aeb38f3d519a2257dadaR1-R270):
Implemented the logic for the file editor component, including form
handling, state management, and interaction with the store.
*
[`dot-form-file-editor.conts.ts`](diffhunk://#diff-32c45307bdce4649b35b4279ce966eeb847285431f1761f71cbde3caebea90f1R1-R17):
Defined default configuration options for the Monaco editor used in the
file editor component.
*
[`form-file-editor.store.ts`](diffhunk://#diff-5184979843abf3baa538afc8613a1fa040a7907c9614bfb64ddc472c31b4cfa7R1-R207):
Created a store to manage the state of the file editor, including file
upload logic and state transitions.

### Related Component Updates:

*
[`dot-form-import-url.component.html`](diffhunk://#diff-47b91a5a2108d26181aede1a70773f546e1499df45a54a630daaa7d5670f13c0L22-R22):
Updated the validation message binding to use `form.controls.url`
instead of `form.get('url')`.
*
[`dot-form-import-url.component.spec.ts`](diffhunk://#diff-0d18173fe874af517af41ad1e4422ff7681ba1c2ad4daf75c9806a07fa37e7b2R11):
Updated the test cases to use the new `ComponentStatus` enum for state
transitions.
[[1]](diffhunk://#diff-0d18173fe874af517af41ad1e4422ff7681ba1c2ad4daf75c9806a07fa37e7b2R11)
[[2]](diffhunk://#diff-0d18173fe874af517af41ad1e4422ff7681ba1c2ad4daf75c9806a07fa37e7b2L67-R68)
[[3]](diffhunk://#diff-0d18173fe874af517af41ad1e4422ff7681ba1c2ad4daf75c9806a07fa37e7b2L81-R90)

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

### Video


https://github.com/user-attachments/assets/123eb3f8-8689-4210-ae03-d31ae18688b1

---------

Co-authored-by: Arcadio Quintero <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@dsilvam dsilvam

Labels
OKR : Technical User Experience Owned by Freddy QA : Approved QA : Passed Internal Release : 24.11.11 Team : Falcon
Projects
dotCMS - Product Planning
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(edit-content): create new file functionality on File Fields dotCMS/core
4 participants
@dsilvam @oidacra @nicobytes @josemejias11