Read-only/edit switch

[GretaD]

Is your feature request related to a problem? Please describe.

Improve the read-only/edit view on contacts

Describe the solution you'd like

Enhancements related to view/edit mode, including points from the original design review and previous mockups:

• Use vue components
• When a new contact is created:
  • It should be in edit mode
  • The name field should be focused and selected

View mode:

• None of the fields are editable in view mode
• They can be edited by clicking on an "Edit" button which takes you to Edit mode
• Fields which are not filled are not shown
• Don't show address books in view mode as it's kind of an obscure field
• Convert "Title" and "Company" fields to read more nicely in view mode, for eg. Analyst at Company

Edit mode:

• In edit mode, users can edit the properties and save using the "Save" button
• Fields in the header (name, title, company) should look like input fields with the appropriate placeholder when they are empty
• Fields that are not set are not shown
• Groups are always shown even if the contact is not a part of any group yet so that they can be easily added. It can be the second-to-last item
• Address book is shown in edit mode but as read-only (ie, similar to how it would be shown if it was in view mode). It can be the last item
• The properties that already exist (Phone, email, address) have an option to add another value using a "+" icon on the right (eg. add another phone number for work)
• Positions of all elements should remain consistent when editing (currently, "Title" field position shifts slightly when syncing to server)
• If contact name is empty:
  • Should default to "New contact" on saving
  • Or the save button should be disabled
• Order of newly added properties:
  • The newly added properties should appear in the same order as their position in the list of properties (If new "Phone" property is added, it will always show up as the first item, "Mail" is always second item, etc)
  • Scroll to the newly added property

Describe alternatives you've considered

No response

Additional context

[GretaD]

closing as a duplication of #3284