Components

Components & UI

This project follows a modular component-based architecture using Vue 3. Components are categorized into logical groups and stored inside the src/components/ directory. This section provides an in-depth explanation of each folder, its purpose, and when to use the components inside it.

Component Library

This project extensively uses PrimeVue as a component library for UI elements such as buttons, dialogs, tables, and forms. PrimeVue components are used across the project to ensure consistency, responsiveness, and accessibility.

Key PrimeVue Components Used:

• Button – Used for standard actions across the application.
• Dialog – Provides modal dialogs for various interactions.
• DataTable – Displays structured tabular data with sorting and filtering capabilities.
• Dropdown – Used for selecting options from predefined lists.
• InputText – Handles user input fields.

Where & How PrimeVue is Used:

• All form elements use PrimeVue components (InputText, Dropdown, Button, etc.).
• Data listings and tables are implemented using DataTable.
• Dialogs (Dialog) are used for pop-up interactions.
• Styled UI elements such as buttons, panels, and tooltips come from PrimeVue.

Developers should use PrimeVue components instead of manually styling basic UI elements to maintain design consistency.

Component Structure

📂 components
 ┣ 📂 Base            # Reusable UI components
 ┣ 📂 Data            # Components handling geoserver data visualization
 ┣ 📂 Geostories      # Components for geospatial storytelling
 ┣ 📂 Map             # Map-related components (MapLibre)
 ┣ 📂 Participation   # Citizen participation UI components

1. Base Components

Purpose: These are foundational UI components that provide basic reusable elements such as sidebars, buttons, and chip wrappers.

Key Components

• BaseSidebarComponent.vue – A flexible sidebar component that can hold any content.
• ChipWrapper.vue – A wrapper for displaying filter or category chips.

When to Use:

• Use BaseSidebarComponent.vue when creating a sidebar that requires dynamic content.
• Use ChipWrapper.vue when displaying categorized filters or tags.

---

2. Data Components

Purpose: These components handle geoserver data listing, displaying structured information in lists.

Key Components

• WorkspaceLayerListing.vue – Displays a list of layers under specific workspace.
• WorkspaceRasterLayerListingItem.vue – Represents a raster layer in the workspace.
• WorkspaceVectorLayerListingItem.vue – Represents a vector layer in the workspace.

When to Use:

• Use WorkspaceLayerListing.vue to display all available layers in a workspace.
• Use MapLayerResultTable.vue when showing tabular data for selected map features.

---

3. Geostories Components

Purpose: These components facilitate storytelling with geospatial data.

Key Components

• FloodSidebar.vue – A sidebar specifically designed for flood-related geospatial storytelling.

When to Use:

• Use FloodSidebar.vue when building interactive flood-related scenarios.

---

4. Map Components

Purpose: These components manage mapping functionality, including layers, drawing, and filtering.

Key Components

• MapContainer.vue – The main map container that initializes and renders the map.
• MapLayerListing.vue – Lists all active layers on the map.
• MapLayerResultTable.vue – A table to display attributes of map features.
• AttributeFiltering.vue – Allows filtering layers on the map based on attributes. Layers must be geoserver vector layer.
• DrawContainer.vue – Enables users to draw on the map.
• BufferContainer.vue – Handles buffer operations on selected features.

When to Use:

• Use MapContainer.vue when embedding a map in a view.
• Use DrawContainer.vue when implementing interactive drawing tools.
• Use AttributeFiltering.vue when users need to filter map features by attributes.

---

5. Participation Components

Purpose: These components enable citizen participation in mapping activities, such as campaigns and feedback submissions.

Key Components

• CampaignList.vue – Displays a list of active campaigns.
• ParticipationForm.vue – A form where users submit participation data.
• ParticipationSidebar.vue – A sidebar dedicated to participation-related actions.

When to Use:

• Use CampaignList.vue when listing available campaigns.
• Use ParticipationForm.vue when collecting user input for participatory mapping.

---

Styling & Best Practices

• Scoped Styles: Use scoped styles to avoid conflicts.
• Composition API: Prefer Vue 3's setup function for cleaner code.
• Reusability: Extract reusable UI elements into Base/ components.
• Lazy Loading: Load components dynamically to improve performance.

By leveraging PrimeVue components and modular architecture, the UI remains consistent, scalable, and easy to maintain.