T405412: Proof of concept for editing statements in Paulina.

Kimondoroserequested to merge
kimondorose/paulina:T405412_edit_nationality_ui_proof_of_concept into main

Summary

This patch implements a Proof-of-Concept (PoC) for inline editing of biographical data (specifically, the Nationality field) on the author page. This work is based on the initial requirements to create a seamless, two-state editing experience (read-only and editable) controlled by a pencil icon. This change adheres to the visual requirements set in the task, including the use of specific colors for the icons and the correct layout for the save and cancel actions.

Functional Changes

The "Nationality" row now supports two states, toggled by clicking the pencil icon:

Read-Only State: Displays the current nationality value and a dark orange pencil icon.

Editable State: Hides the value and the pencil icon, Displays an input field pre-filled with the current value, Displays a dark orange, bold checkmark icon followed by the blue, non-underlined "publish" text (to save changes).

  • Displays a blue "cancel" text (to discard changes).

Functionality implemented:

  • Edit Activation: Clicking the pencil icon switches to the editable view and focuses the input.
  • Save/Publish: Clicking the "publish" link or pressing the Enter key updates the displayed nationality value (PoC level, without server persistence) and reverts to the read-only view.
  • Cancel/Discard: Clicking the "cancel" link discards any changes made in the input field and reverts to the read-only view.
  • Initial State Guarantee: A robust CSS and JavaScript implementation ensures the editable view is hidden on page load.

Code Changes (Summary)

  • templates/author.html: The Nationality row HTML was refactored to contain separate, mutually exclusive read-only and editable spans. The pencil icon now uses the custom text-dark-orange class.
  • templates/author.html script block: New JavaScript added to handle view toggling, dynamic creation/removal of the input field and links (publish/cancel), and saving/discarding data locally.
  • main.css: Added the custom CSS class .text-dark-orange to achieve the required darker shade for the icons.

Testing Instructions

  1. Navigate to an author page (e.g., Paulina Luisi).
  2. Verify the Nationality field shows the value and an orange pencil icon.
  3. Click the pencil icon.
  4. Verify the input field, the dark orange checkmark, the blue "publish" link, and the blue "cancel" link appear.
  5. Change the input value and click "publish". Verify the new value is displayed, and the view reverts to read-only.
  6. Click the pencil icon, change the value, and click "cancel". Verify the value reverts to the last saved value, and the view reverts to read-only.

What the "Nationality" field looks like before the user clicks on the pencil: image What the "Nationality" field looks like after the user clicks on the pencil, with an editable text form and the option to cancel their edit: image After editing, displaying the new nationality (Paulina "saves" the edition and the user interface looks again as in the first sketch, but with the new nationality): image

Edited by Kimondorose

Merge request reports