Code Refactoring

[rs4231199]

Pull Request for Issue #8.

• [x] Add controller methods

  • [x] SaveInline()
  • [x] To simulate a full POST request when the one field's data is received.
  • [x] Send the saved data(or the error messages) with the response.
  • [x] getRenderedField()
  • [x] To dynamically retrieve a form field.

• [x] Render inline-editable fields differently

  • [x] Create a universal template for inline editing
  • [x] Add an inline-editing HTML Helper service
  • [x] Use the service inside com_content
  • [x] Use the service inside com_fields

• [ ] CSS Part

  • [x] Add basic :hover styling
  • [ ] Style inline editable forms and fields

• [x] JavaScript Part

  • [x] Retrieve fields
  • [x] Render fields
  • [x] Client side field validation
  • [x] Submit data
  • [x] Show response received from the server (Messages are always renders at the start of the page. But the user might have scrolled up and would not be able to see the messages. Maybe, render messages with an absolute position)

• [x] Language Support

  • [x] Move success and error messages to a language file

• [x] Form Fields covered

  • [x] text
  • [x] text-area
  • [x] check-boxes
  • [x] list
  • [x] radio

[rs4231199]

Controller for the inline editing is working.

Sample Responses Images (click here to expand)

    

Code changes highlights

In the Normal save() method, whenever an exception occurs, the user gets redirected to the appropriate page with an informative message. I have made some changes in the CMSApplication to modify the above-mentioned redirect behavior if the request is made for the inline editing.

[rs4231199]

I have undone the changes in the CMSApplication.

Sample responses from the server (click here to expand)

 

[anibalsanchez]

The JsonResponse message should also have the same JText::_('JINVALID_TOKEN')

In this way, if something goes wrong you can also report the error message.

[rs4231199]

Added informative messages with the JsonResponse.

Sample responses from the server (click here to expand)

   

[rs4231199]

Added Method to get a form field from the server via Ajax request.

Some Screenshots of sample responses

    `Empty field` means no field was requested in the Ajax request.

[rs4231199]

Some screenshots.

Front-end when inline-editing is enabled.


Front-end when inline-editing is disabled or the user is not authorized.


[roland-d]

@rs4231199 I checked out this branch but I am unable to do front-end inline editing. Nothing happens when I click on a title or description. Inline editing is enabled in the Global Configuration. What is missing?

[rs4231199]

What is missing?

The JavaScript part.

[rs4231199]

The fields are successfully fetched from the server.

https://user-images.githubusercontent.com/43215292/127031421-2da0d34e-cb33-46e8-846c-b6228fa341d3.mp4

Proper rendering needs some more work.

[rs4231199]

The data is saved successfully.


Editing experience needs some improvements.

[rs4231199]

There are two commits.

1) We can never be sure about what got saved in the database. For example, Custom Fields has a filter option that modifies the received value before it gets saved to the database. So, instead of displaying what the user has entered, it now receives the saved value along with the saved status.

2) The aim is to create an inline editable version of each field. We'll define a new layout for each inline editable field. Inline editable fields would require different scripts and styles than the regular fields. We can add those in the new layouts. The renderField() method now accepts an extra parameter to determine what layout to render.

As of now, Custom Text Field and article title can be edited inline. But I haven't modified the layout to inline experience. This commit is more about finalizing the approach. So, wait for a few more commits to experience the final inline editing. 🙂

[rs4231199]

Gif: Save and Cancel buttons in action