Skip to content

Commit

Permalink
Merge pull request dbca-wa#392 from ka-pr/occurrence-report-highlight…
Browse files Browse the repository at this point in the history 
…-on-map

Occurrence report highlight on map
  • Loading branch information
@jmushtaq
jmushtaq authored Jun 13, 2024
2 parents ee78b2a + 335f80c commit c48784d
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 22 deletions.
35 changes: 35 additions & 0 deletions boranga/frontend/boranga/src/components/common/component_map.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4883,6 +4883,10 @@ export default {
layer.set('editing', false);
}
},
/**
* Queries the tenure layer at point coordinates and pans/zooms to coordinates
* @param {Array} coordinates Point coordinates
*/
highlightPointOnTenureLayer: function (coordinates) {
if (!coordinates) {
return;
Expand All @@ -4898,6 +4902,37 @@ export default {
});
this.centerOnFeature(feature, 12);
},
/**
* Returns a layer by its name
* @param {String} layer_name The 'name' property of the layer. Corresponds to the 'name' property in the layer definition prop
*/
getLayerByName: function (layer_name) {
return this.map
.getLayers()
.getArray()
.find((layer) => {
return layer.get('name') == layer_name;
});
},
/**
* Returns a layer's feature by its id
* @param {Object} layer A layer
* @param {String|Number} feature_id The id of a feature on the layer
*/
getFeatureById: function (layer, feature_id) {
let featureId = Number(feature_id);
if (isNaN(featureId)) {
console.error(`Feature ID ${feature_id} is not a number`);
return;
}
return layer
.getSource()
.getFeatures()
.find((feature) => {
// The features name property is the model instance pk
return feature.getProperties().name == featureId;
});
},
},
};
</script>
Expand Down
55 changes: 39 additions & 16 deletions boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
:spatial-operations-allowed="['__all__']"
:tile-layer-api-url="tileLayerApiUrl"
:query-layer-definition="{
name: 'query_layer',
name: queryLayerName,
title: 'Occurrence Reports',
default: false,
can_edit: true,
Expand Down Expand Up @@ -245,20 +245,24 @@
<OccurrenceTenureDatatable
v-if="occurrence_obj"
ref="occurrence_tenure_datatable"
:key="'occurrence-tenure-datatable-' + uuid"
:key="datatableOCCTenureKey"
:occurrence-id="occurrence_obj.id"
:href-container-id="mapContainerId"
@highlight-on-map="highlightOnMap"
@highlight-on-map="highlightPointOnMap"
></OccurrenceTenureDatatable>
</div>
</FormSection>
<RelatedReports
:isReadOnly="isReadOnly"
:occurrence_obj=occurrence_obj
:section_type="'location'"
@copyUpdate="copyUpdate"
/>

<RelatedReports
v-if="occurrence_obj"
ref="related_reports_datatable"
:key="datatableRelatedOCRKey"
:is-read-only="isReadOnly"
:occurrence_obj="occurrence_obj"
:section_type="'location'"
:href-container-id="mapContainerId"
@copyUpdate="copyUpdate"
@highlight-on-map="highlightIdOnMapLayer"
/>
</FormSection>
</div>
</template>
Expand Down Expand Up @@ -308,7 +312,9 @@ export default {
emits: [],
data() {
return {
uuid: uuid(),
uuid_component_map: uuid(),
uuid_datatable_ocr: uuid(),
uuid_datatable_occ_tenure: uuid(),
crs: [],
region_list: [],
district_list: [],
Expand All @@ -319,11 +325,18 @@ export default {
coordination_source_list: [],
location_accuracy_list: [],
mapReady: false,
queryLayerName: 'query_layer',
};
},
computed: {
componentMapKey: function () {
return `component-map-${this.uuid}`;
return `component-map-${this.uuid_component_map}`;
},
datatableRelatedOCRKey: function () {
return `datatable-ocr-${this.uuid_datatable_ocr}`;
},
datatableOCCTenureKey: function () {
return `datatable-occ-tenure-${this.uuid_datatable_occ_tenure}`;
},
coordinateReferenceSystems: function () {
return this.crs;
Expand Down Expand Up @@ -354,15 +367,15 @@ export default {
},
mapContainerId: function () {
if (!this.mapReady) {
return null;
return '';
}
return this.$refs.component_map.map_container_id;
},
},
created: async function () {
let vm = this;
this.uuid = uuid();
let action = this.$route.query.action;
// this.uuid = uuid();
fetch(
helpers.add_endpoint_join(
Expand Down Expand Up @@ -428,6 +441,10 @@ export default {
error
);
});
// Make sure the datatables have access to the map container id to have the page scroll to the map anchor
this.uuid_datatable_ocr = uuid();
this.uuid_datatable_occ_tenure = uuid();
},
methods: {
filterDistrict: function (event) {
Expand Down Expand Up @@ -516,7 +533,7 @@ export default {
);
},
incrementComponentMapKey: function () {
this.uuid = uuid();
this.uuid_component_map = uuid();
},
searchForCRS: function (search, loading) {
const vm = this;
Expand Down Expand Up @@ -566,13 +583,19 @@ export default {
console.log('Map features loaded.');
this.mapReady = true;
},
highlightOnMap: function (coordinates) {
highlightPointOnMap: function (coordinates) {
if (!coordinates) {
console.warn('No coordinates found');
return;
}
this.$refs.component_map.highlightPointOnTenureLayer(coordinates);
},
highlightIdOnMapLayer: function (id) {
const map = this.$refs.component_map;
const layer = map.getLayerByName(this.queryLayerName);
const feature = map.getFeatureById(layer, id);
map.centerOnFeature(feature, 12);
},
},
};
</script>
Expand Down
37 changes: 32 additions & 5 deletions boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template lang="html">
<div :id="'related_ocr'+section_type">
<FormSection :formCollapse="true" label="Related Occurrence Reports" :Index="'related_ocr'+section_type" @toggle-collapse="toggleCollapse">
<FormSection :formCollapse="false" label="Related Occurrence Reports" :Index="'related_ocr'+section_type" @toggle-collapse="toggleCollapse">
<div>
<datatable
ref="related_ocr_datatable"
Expand All @@ -21,6 +21,7 @@
:sectionObj="sectionObj"
/>
</div>
{{ hrefContainerId }}
</div>
</template>

Expand Down Expand Up @@ -58,12 +59,18 @@ export default {
type: Boolean,
default: false
},
hrefContainerId: {
type: String,
required: false,
default: '',
},
},
emits: ['copyUpdate', 'highlight-on-map'],
data() {
let vm = this;
return {
uuid:0,
datatable_id: uuid(),
uuid: uuid(),
datatable_id: 'datatable-related-ocr-' + uuid(),
sectionOCRId: null,
sectionTypeFormatted: null,
sectionObj: null,
Expand Down Expand Up @@ -141,6 +148,7 @@ export default {
}
},
column_copy_action: function(){
const vm = this;
return {
//name: 'action',
data: 'id',
Expand All @@ -149,10 +157,14 @@ export default {
visible: true,
'render': function(row, type, full){
let links = '';
// full.occurrence_report_number
if (vm.section_type == 'location') {
links += `<a href="#${vm.hrefContainerId}" data-highlight-on-map='${full.id}'>Highlight on Map</a><br>`;
}
links += `<a href='#' data-view-section='${full.id}'>View Section</a><br>`;
//links += `<a href='#' data-merge-section='${full.id}'>Copy Section Data (merge)</a><br>`;
links += `<a href='#' data-replace-section='${full.id}'>Copy Section Data</a><br>`;
return links;
}
}
Expand Down Expand Up @@ -296,7 +308,22 @@ export default {
var id = $(this).attr('data-replace-section');
vm.copySection(id,false);
});
}
vm.$refs.related_ocr_datatable.vmDataTable.on(
'click',
'a[data-highlight-on-map]',
function (e) {
let id = $(this).attr('data-highlight-on-map');
id = id || null;
if (!id) {
e.preventDefault();
}
vm.highlightOnMap(id);
}
);
},
highlightOnMap: function (id = null) {
this.$emit('highlight-on-map', id);
},
},
mounted: function(){
let vm = this;
Expand Down
2 changes: 1 addition & 1 deletion boranga/frontend/boranga/src/components/internal/occurrence/occurrence_tenure_datatable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default {
hrefContainerId: {
type: String,
required: false,
default: '#',
default: '',
},
},
data: function () {
Expand Down

0 comments on commit c48784d

Please sign in to comment.