Create/insert data react table into the ‘Offices’ page on the SMB App

[HollyJoyPhillips]

Dependent on ticket : #62

Summary: To add the spreadsheet component (https://reapit.github.io/elements/?path=/story/spreadsheet--basic) to the 'Offices' page and link to endpoint: / Offices

Columns should contain the following headings with the correct formatting options:

• Office Name* – Field should allow any text

• Building Number - Field should allow any text

• Address 1* - Field should allow any text

• Address 2 - Field should allow any text

• Address 3 - Field should allow any text

• Address 4 - Field should allow any text

• Postcode* – Postcode validation (TBC)

• Telephone* – Number only

• Fax – Number only

• Email* – Email validation

• Postcode referrals – TBC

• The above columns with * indicates they are required fields and must be completed. If a row has been created and those fields are missing, should indicate this by changing the background of the cell. Use colour and opacity settings from https://reapit.github.io/elements/?path=/story/helper--warning

• Should not post a mutation to the server unless the required fields have been completed.

• Button: Add New – should add another row and office record when clicked

• Editing an item should updated the record

• Buttons to ‘Upload File’ and ‘Download file’

• Should use Apollo GQL Queries and mutations, tasks to write these on the server side

See mock up: