tethys.backend/resources/js/Components/Map/MapComponentView.vue
Arno Kaimbacher be6b38d0a3 hotfix (dataset): implement reject to reviewer functionality for editors
- Added "rejected_to_reviewer" state to the `ServerStates` enum.
- Implemented routes and controller actions (`rejectToReviewer`, `rejectToReviewerUpdate`) for editors to reject datasets back to reviewers with a rejection note.
- Added UI elements (button) in the editor dataset index and publish views to trigger the "reject to reviewer" action.
- Updated the reviewer dataset index view to display datasets in the "rejected_to_reviewer" state and show the editor's rejection note.
- Modified the reviewer dataset review page to allow reviewers to view and accept datasets that have been rejected back to them by editors.
- Updated the database migration to include the "rejected_to_reviewer" state in the `documents_server_state_check` constraint.
- Updated dependencies (pinia, redis).
2025-05-02 14:35:58 +02:00

124 lines
No EOL
3.1 KiB
Vue

<script setup>
import { onMounted, ref, watch } from 'vue';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
const DEFAULT_BASE_LAYER_NAME = 'BaseLayer';
const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors';
const props = defineProps({
coverage: {
type: Object,
required: true
},
height: {
type: String,
default: '250px'
},
mapId: {
type: String,
default: 'view-map'
}
});
const map = ref(null);
const mapContainer = ref(null);
onMounted(() => {
initializeMap();
});
watch(() => props.coverage, (newCoverage) => {
if (map.value && newCoverage) {
updateBounds();
}
}, { deep: true });
const initializeMap = () => {
// Create the map with minimal controls
map.value = L.map(mapContainer.value, {
zoomControl: false,
attributionControl: false,
dragging: false,
scrollWheelZoom: false,
doubleClickZoom: false,
boxZoom: false,
tap: false,
keyboard: false,
touchZoom: false
});
// // Add a simple tile layer (OpenStreetMap)
let osmGgray = new L.TileLayer.WMS('https://ows.terrestris.de/osm-gray/service', {
format: 'image/png',
attribution: DEFAULT_BASE_LAYER_ATTRIBUTION,
layers: 'OSM-WMS',
});
let layerOptions = {
label: DEFAULT_BASE_LAYER_NAME,
visible: true,
layer: osmGgray,
};
layerOptions.layer.addTo(map.value);
// Add a light-colored rectangle for the coverage area
updateBounds();
};
const updateBounds = () => {
if (!props.coverage || !map.value) return;
// Clear any existing layers except the base tile layer
map.value.eachLayer(layer => {
if (layer instanceof L.Rectangle) {
map.value.removeLayer(layer);
}
});
// Create bounds from the coverage coordinates
const bounds = L.latLngBounds(
[props.coverage.y_min, props.coverage.x_min],
[props.coverage.y_max, props.coverage.x_max]
);
// Add a rectangle with emerald styling
L.rectangle(bounds, {
color: '#10b981', // emerald-500
weight: 2,
fillColor: '#d1fae5', // emerald-100
fillOpacity: 0.5
}).addTo(map.value);
// Fit the map to the bounds with some padding
map.value.fitBounds(bounds, {
padding: [20, 20]
});
};
</script>
<template>
<div class="map-container bg-emerald-50 dark:bg-emerald-900/30
rounded-lg shadow-sm overflow-hidden">
<div :id="mapId" ref="mapContainer" :style="{ height: height }" class="w-full"></div>
</div>
</template>
<style scoped>
/* Ensure the Leaflet container has proper styling */
:deep(.leaflet-container) {
background-color: #f0fdf4;
/* emerald-50 */
}
/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
:deep(.leaflet-container) {
background-color: rgba(6, 78, 59, 0.3);
/* emerald-900/30 */
}
:deep(.leaflet-tile) {
filter: brightness(0.8) contrast(1.2) grayscale(0.3);
}
}
</style>