[STORY] Edit an existing contact in a dialog

[itswillta]

User story summary

1. Related epic
2. Definition
3. Criteria
4. UI/UX Design
5. Tasks

Related epic

Synchronize Contacts' UI/UX with Calendar's

Definition

As a user, I want to be able to edit an existing contact in a dialog on desktop.

• I login and go to Contacts
• Then I choose to edit an existing contact
• Then the content used to edit an existing contact should display in a dialog

Criteria

• The content used to edit an existing contact should display in a dialog
• The dialog should stand out from the rest of the viewport (as seen in the pictures below).
• The header of the dialog is named "Edit contact" and has a "X" icon button to close the dialog.
• The body of the dialog will have the following fields (they will also appear in the following order):
  • Address book selector
  • Avatar, first name, and last name
  • Organization, job title
  • Email, type of email (can add more than one email with a "+" button)
  • Phone, type of phone (can add more than one phone number with a "+" button)
  • Street, type of address, city, city's zip code, country (can add more than one address with a "+" button)
  • Tags
  • Website (collapsible, can add more than one website with a "+" button)
  • Social account, type of social account (collapsible, can add more than one website with a "+" button)
  • Birthday (collapsible)
  • Nickname (collapsible)
  • Comments (collapsible)
• There are a "More options" button and a "Save" button at the bottom of the dialog.
  • The "More options" button will display all the collapsible fields mentioned above. And afterwards, there will be a "Fewer options" to hide those fields again.
  • The "Save" button is used to save the contact.

UI/UX Design

1. [Desktop] The main "Edit contact" screen:

2. [Desktop] The "Edit contact" dialog:

3. [Desktop] The "Edit contact" dialog with the collapsible fields shown:

Tasks

adapt the contact edit template

adapt or create the route state of the contact edit dialog