From b6d11b512ed4eb381effd78176b6c61fc680796b Mon Sep 17 00:00:00 2001 From: Dimas Ciputra Date: Mon, 28 Oct 2024 08:17:36 +0000 Subject: [PATCH] Add feature to edit spatial filter name (#4328) --- .../react/js/components/ContextFilterView.jsx | 96 +++++++++++++------ bims/templates/context_layers.html | 2 +- bims/templates/navigation_bar.html | 2 +- bims/views/context_layers.py | 12 ++- 4 files changed, 80 insertions(+), 32 deletions(-) diff --git a/bims/static/react/js/components/ContextFilterView.jsx b/bims/static/react/js/components/ContextFilterView.jsx index e510692bd..f7127fbc1 100644 --- a/bims/static/react/js/components/ContextFilterView.jsx +++ b/bims/static/react/js/components/ContextFilterView.jsx @@ -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"; @@ -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 = { @@ -40,6 +46,7 @@ const ContextFilterView = (props) => { }); console.log("Order updated successfully."); if (refresh) { + setIsFilterModalOpen(false) setContextFilters([]); fetchContextFilters(); } @@ -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); } }; @@ -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()) ); @@ -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(); @@ -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) { @@ -244,7 +275,7 @@ const ContextFilterView = (props) => { />
- +
- - - Add new filter section + + + { editFilterMode ? 'Edit filter' : 'Add new filter section' }
@@ -321,15 +358,16 @@ const ContextFilterView = (props) => { Filter section name setNewFilterName(e.target.value)}/> +
- - diff --git a/bims/templates/context_layers.html b/bims/templates/context_layers.html index e9e366e48..693c4fe4b 100644 --- a/bims/templates/context_layers.html +++ b/bims/templates/context_layers.html @@ -2,7 +2,7 @@ {% load static %} {% block subtitle %} - Context Layers + Spatial filters {% endblock %} {% block head %} diff --git a/bims/templates/navigation_bar.html b/bims/templates/navigation_bar.html index 2d85a5b26..653cceb88 100644 --- a/bims/templates/navigation_bar.html +++ b/bims/templates/navigation_bar.html @@ -118,7 +118,7 @@ Validate Records {% endif %} Upload Spatial Layers - Context Layers + Spatial Filters Visualization Layers
Admin Page diff --git a/bims/views/context_layers.py b/bims/views/context_layers.py index d25721db3..cd3c169ff 100644 --- a/bims/views/context_layers.py +++ b/bims/views/context_layers.py @@ -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():