[FE] (feat): Inventory panel: Protected Areas [MRXN23-239]

[andresgnlez]

Protected Areas by project

NOTE: on hold until API is ready.

Overview

This PR includes the inventory panel protected areas section with MOCKED DATA

Actions included:

• List Protected Areas by project
• Edit Protected Area: rename
• Delete Protected Area
• Bulk Delete Protected Areas
• Sort Protected Area by name
• Search Protected Area by name
• Upload Protected Areas at project level via shapefile
• Display Protected Area on map

Designs

https://www.figma.com/file/0xD4gR9pCqU7NROnlSW6ck/Marxan-Layout---Redesign?node-id=605%3A28284&mode=dev

Testing

Feature relevant tickets

MRXN23-239

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
marxan	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 11, 2023 0:27am

[andresgnlez]

This approach will not scale. Can we pass an array of headers to the table an just render them? Like:

const headers = [
{
text: 'Name',
name: 'name',
columns,
sorting, 
onSortChange,
...,
{
...
}
]

[andresgnlez]

@anamontiaga

Correct me if I am wrong, but when I add several PAs to the map, we should probably iterate over different colours so we can differentiate them. Also, the name of the PA should be listed in the legend below Protected areas preview along with its colour.

[anamontiaga]

@anamontiaga

Correct me if I am wrong, but when I add several PAs to the map, we should probably iterate over different colours so we can differentiate them. Also, the name of the PA should be listed in the legend below Protected areas preview along with its colour.

@andresgnlez As mentioned, the same color is maintained for the protected preview areas (blue) but the legend should show the list of WDPAs on the map