Skip to content

Commit

Permalink
Add feature to edit spatial filter name (#4328)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dimasciput
dimasciput authored Oct 28, 2024
1 parent a6efded commit b6d11b5
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 32 deletions.
96 changes: 67 additions & 29 deletions bims/static/react/js/components/ContextFilterView.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, {useState, useEffect, useRef} from 'react';
import axios from "axios";
import SortableList, {SortableItem, SortableKnob} from "react-easy-sort";
import { arrayMoveImmutable } from "array-move";
Expand All @@ -18,14 +18,20 @@ const ContextFilterView = (props) => {
const [isAddNewGroupModalOpen, setIsAddNewGroupModalOpen] = useState(false);
const [selectedFilter, setSelectedFilter] = useState(null);
const [contextGroups, setContextGroups] = useState([]);
const [isAddNewFilterModalOpen, setIsAddNewFilterModalOpen] = useState(false);
const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);

const [newFilterName, setNewFilterName] = useState('');
const [savingNewFilter, setSavingNewFilter] = useState(false);
const [updatedFilter, setUpdatedFilter] = useState(null);

const [savingFilter, setSavingFilter] = useState(false);
const [isGeocontextListOpen, setIsGeocontextListOpen] = useState(false);
const [editFilterMode, setEditFilterMode] = useState(false);

const contextLayerFilterAPI = '/api/context-filter/';
const contextLayerGroupAPI = '/api/context-layer-group/';

const filterIdInput = useRef(null);

const updateOrder = async (updatedFilters, updatedGroups, refresh=false) => {
try {
const data = {
Expand All @@ -40,6 +46,7 @@ const ContextFilterView = (props) => {
});
console.log("Order updated successfully.");
if (refresh) {
setIsFilterModalOpen(false)
setContextFilters([]);
fetchContextFilters();
}
Expand Down Expand Up @@ -112,14 +119,14 @@ const ContextFilterView = (props) => {
});
console.log("New filter created successfully:", response.data.filter);

setIsAddNewFilterModalOpen(false);
setIsFilterModalOpen(false);

setContextFilters([]);
fetchContextFilters();
} catch (error) {
console.error("Failed to create new filter:", error);
} finally {
setSavingNewFilter(false);
setSavingFilter(false);
}
};

Expand Down Expand Up @@ -158,20 +165,6 @@ const ContextFilterView = (props) => {
}));
};

const handleFilterChange = (e) => {
setFilterText(e.target.value);
};

const handleSaveAddNewFilter = () => {
const newFilter = {
display_order: contextFilters.length + 1,
location_context_groups: [],
title: newFilterName
}
setSavingNewFilter(true);
createContextFilter(newFilter);
}

const filteredContextFilters = contextFilters.filter(group =>
group.title.toLowerCase().includes(filterText.toLowerCase())
);
Expand All @@ -180,17 +173,40 @@ const ContextFilterView = (props) => {
setIsAddNewGroupModalOpen(!isAddNewGroupModalOpen)
}

const toggleAddNewFilterModal = () => {
if (!isAddNewFilterModalOpen) {
const toggleFilterModal = () => {
if (!isFilterModalOpen) {
setNewFilterName('');
}
setIsAddNewFilterModalOpen(!isAddNewFilterModalOpen)
if (isFilterModalOpen) {
setUpdatedFilter(null)
}
setIsFilterModalOpen(!isFilterModalOpen)
}

const toggleGeocontextListModal = () => {
setIsGeocontextListOpen(!isGeocontextListOpen);
}

const handleFilterChange = (e) => {
setFilterText(e.target.value);
};

const handleSaveFilter = () => {
if (!editFilterMode) {
const newFilter = {
display_order: contextFilters.length + 1,
location_context_groups: [],
title: newFilterName
}
setSavingFilter(true);
createContextFilter(newFilter);
} else {
let _updatedFilter = {...updatedFilter};
_updatedFilter['title'] = newFilterName;
updateOrder([_updatedFilter], {}, true)
}
}

const handleAddNewGroup = (e, contextFilter) => {
e.stopPropagation();
toggleAddNewGropModal();
Expand All @@ -208,6 +224,21 @@ const ContextFilterView = (props) => {
}
}

const handleEditFilter = (e, contextFilter) => {
e.stopPropagation();
setEditFilterMode(true);
setNewFilterName(contextFilter.title);
setIsFilterModalOpen(true);
setUpdatedFilter(contextFilter);
}

const handleAddFilter = (e) => {
e.stopPropagation();
setEditFilterMode(false);
setNewFilterName('');
setIsFilterModalOpen(true);
}

const handleRemoveGroup = (filter, group) => {
const isConfirmed = window.confirm(`Are you sure you want to delete "${group.group.name}"?`);
if (!isConfirmed) {
Expand Down Expand Up @@ -244,7 +275,7 @@ const ContextFilterView = (props) => {
/>
</div>
<div style={{ width: '100%' }}>
<Button color={'success'} size={'sm'} style={{ marginBottom: 5 }} onClick={toggleAddNewFilterModal}>
<Button color={'success'} size={'sm'} style={{ marginBottom: 5 }} onClick={handleAddFilter}>
<i className="bi bi-plus"></i> Add new filter section
</Button>
<Button color='warning' size={'sm'} style={{ marginBottom: 5, float: 'right' }} onClick={toggleGeocontextListModal}>
Expand All @@ -270,6 +301,12 @@ const ContextFilterView = (props) => {
style={{ float: 'right', right: 0, marginTop: -5 }}>
<i className="bi bi-plus"></i>
</Button>
<Button color={'warning'} size={'sm'}
outline
onClick={(e) => handleEditFilter(e, contextFilter)}
style={{ float: 'right', right: 0, marginTop: -5, marginRight: 5 }}>
<i className="bi bi-pencil"></i>
</Button>
<Button color={'danger'} size={'sm'}
outline
onClick={(e) => handleDeleteFilter(e, contextFilter)}
Expand Down Expand Up @@ -310,9 +347,9 @@ const ContextFilterView = (props) => {
</div>

<AddContextGroup isOpen={isAddNewGroupModalOpen} selectedFilter={selectedFilter} toggle={toggleAddNewGropModal} updateOrder={updateOrder}/>
<Modal isOpen={isAddNewFilterModalOpen} toggle={toggleAddNewFilterModal}>
<ModalHeader toggle={toggleAddNewFilterModal}>
Add new filter section
<Modal isOpen={isFilterModalOpen} toggle={toggleFilterModal}>
<ModalHeader toggle={toggleFilterModal}>
{ editFilterMode ? 'Edit filter' : 'Add new filter section' }
</ModalHeader>
<ModalBody>
<Form>
Expand All @@ -321,15 +358,16 @@ const ContextFilterView = (props) => {
Filter section name
</Label>
<Input value={newFilterName} onChange={e => setNewFilterName(e.target.value)}/>
<Input value={''} type={'hidden'} innerRef={filterIdInput}/>
</FormGroup>
</Form>
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={toggleAddNewFilterModal} disabled={savingNewFilter}>
<Button color="secondary" onClick={toggleFilterModal} disabled={savingFilter}>
Close
</Button>
<Button color="primary" onClick={handleSaveAddNewFilter} disabled={!newFilterName || savingNewFilter}>
{savingNewFilter ? 'Saving...' : 'Save'}
<Button color="primary" onClick={handleSaveFilter} disabled={!newFilterName || savingFilter}>
{savingFilter ? 'Saving...' : 'Save'}
</Button>
</ModalFooter>
</Modal>
Expand Down
2 changes: 1 addition & 1 deletion bims/templates/context_layers.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
{% load static %}

{% block subtitle %}
Context Layers
Spatial filters
{% endblock %}

{% block head %}
Expand Down
2 changes: 1 addition & 1 deletion bims/templates/navigation_bar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@
<a class="dropdown-item" href="/site-visit/list/?&inReview=True">Validate Records</a>
{% endif %}
<a class="dropdown-item" href="/upload-spatial-layer/">Upload Spatial Layers</a>
<a class="dropdown-item" href="/context-layers/">Context Layers</a>
<a class="dropdown-item" href="/context-layers/">Spatial Filters</a>
<a class="dropdown-item" href="/visualization-layer/">Visualization Layers</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/admin/">Admin Page</a>
Expand Down
12 changes: 11 additions & 1 deletion bims/views/context_layers.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,8 +174,18 @@ def put(self, request, *args):
for filter_data in filters_data:
filter_id = filter_data.get('id')
new_order = filter_data.get('display_order')
updated_data = {
'display_order': new_order
}

filter_title = filter_data.get('title')
if filter_title:
updated_data['title'] = filter_title

LocationContextFilter.objects.filter(
id=filter_id).update(display_order=new_order)
id=filter_id).update(
**updated_data
)

# Update group order within each filter
for filter_id, groups in groups_data.items():
Expand Down

0 comments on commit b6d11b5

Please sign in to comment.