Make location context group editable (#4329)

kartoza · Oct 28, 2024 · 0bbdf10 · 0bbdf10
1 parent b6d11b5
commit 0bbdf10
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 8 deletions.
diff --git a/bims/static/react/js/ContextLayersView.jsx b/bims/static/react/js/ContextLayersView.jsx
@@ -1,7 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import '../css/ContextLayers.scss';
 import {createRoot} from "react-dom/client";
-import ContextGroupView from "./components/ContextGroupView";
 import ContextFilterView from "./components/ContextFilterView";
 
 

diff --git a/bims/static/react/js/components/ContextFilterView.jsx b/bims/static/react/js/components/ContextFilterView.jsx
@@ -27,10 +27,15 @@ const ContextFilterView = (props) => {
     const [isGeocontextListOpen, setIsGeocontextListOpen] = useState(false);
     const [editFilterMode, setEditFilterMode] = useState(false);
 
+    const [isGroupEditModalOpen, setIsGroupEditModalOpen] = useState(false);
+    const [selectedGroup, setSelectedGroup] = useState(null);
+    const [selectedGroupName, setSelectedGroupName] = useState('');
+
     const contextLayerFilterAPI = '/api/context-filter/';
     const contextLayerGroupAPI = '/api/context-layer-group/';
 
     const filterIdInput = useRef(null);
+    const groupNameInput = useRef(null);
 
     const updateOrder = async (updatedFilters, updatedGroups, refresh=false) => {
         try {
@@ -183,6 +188,14 @@ const ContextFilterView = (props) => {
         setIsFilterModalOpen(!isFilterModalOpen)
     }
 
+    const toggleGroupModal = () => {
+        if (!isGroupEditModalOpen) {
+
+        }
+
+        setIsGroupEditModalOpen(!isGroupEditModalOpen);
+    }
+
     const toggleGeocontextListModal = () => {
         setIsGeocontextListOpen(!isGeocontextListOpen);
     }
@@ -207,6 +220,19 @@ const ContextFilterView = (props) => {
         }
     }
 
+    const handleSaveGroup = () => {
+        let groupId = selectedGroup.group.id;
+        const updatedGroups = {
+            [selectedFilter.id]: selectedFilter.location_context_groups.map((group, index) => ({
+                id: group.group.id,
+                group_display_order: index + 1,
+                name: group.group.id === groupId ? selectedGroupName : null
+            }))
+        };
+        setIsGroupEditModalOpen(false);
+        updateOrder({}, updatedGroups, true);
+    }
+
     const handleAddNewGroup = (e, contextFilter) => {
          e.stopPropagation();
          toggleAddNewGropModal();
@@ -239,7 +265,7 @@ const ContextFilterView = (props) => {
         setIsFilterModalOpen(true);
     }
 
-    const handleRemoveGroup = (filter, group) => {
+    const handleDeleteGroup = (filter, group) => {
         const isConfirmed = window.confirm(`Are you sure you want to delete "${group.group.name}"?`);
         if (!isConfirmed) {
             return;
@@ -255,6 +281,13 @@ const ContextFilterView = (props) => {
         updateOrder({}, updatedGroups, true);
     }
 
+    const handleEditGroup = (filter, group) => {
+        setSelectedFilter(filter)
+        setSelectedGroup(group)
+        setSelectedGroupName(group.group?.name);
+        setIsGroupEditModalOpen(true)
+    }
+
     if (loading) {
         return <div>Loading...</div>;
     }
@@ -329,10 +362,16 @@ const ContextFilterView = (props) => {
                                                             {contextGroup.group.name}
                                                             <Button color={'danger'} size={'sm'}
                                                                     style={{float: 'right', right: 0, marginTop: -5}}
-                                                                    onClick={(e) => handleRemoveGroup(contextFilter, contextGroup)}
+                                                                    onClick={(e) => handleDeleteGroup(contextFilter, contextGroup)}
                                                             >
                                                                 <i className="bi bi-trash"></i>
                                                             </Button>
+                                                            <Button color={'warning'} size={'sm'}
+                                                                    style={{float: 'right', marginRight: 5, marginTop: -5}}
+                                                                    onClick={(e) => handleEditGroup(contextFilter, contextGroup)}
+                                                            >
+                                                                <i className="bi bi-pencil"></i>
+                                                            </Button>
                                                         </div>
                                                     </div>
                                                 </SortableItem>
@@ -347,6 +386,7 @@ const ContextFilterView = (props) => {
             </div>
 
             <AddContextGroup isOpen={isAddNewGroupModalOpen} selectedFilter={selectedFilter} toggle={toggleAddNewGropModal} updateOrder={updateOrder}/>
+
             <Modal isOpen={isFilterModalOpen} toggle={toggleFilterModal}>
                 <ModalHeader toggle={toggleFilterModal}>
                     { editFilterMode ? 'Edit filter' : 'Add new filter section' }
@@ -372,6 +412,30 @@ const ContextFilterView = (props) => {
             </ModalFooter>
             </Modal>
 
+            <Modal isOpen={isGroupEditModalOpen} toggle={toggleGroupModal}>
+                <ModalHeader toggle={toggleGroupModal}>
+                   Edit
+                </ModalHeader>
+                <ModalBody>
+                    <Form>
+                        <FormGroup>
+                            <Label for="filterName">
+                                Context Group Name
+                            </Label>
+                             <Input value={selectedGroupName} onChange={e => setSelectedGroupName(e.target.value)}/>
+                        </FormGroup>
+                    </Form>
+                </ModalBody>
+                <ModalFooter>
+                <Button color="secondary" onClick={toggleGroupModal} disabled={savingFilter}>
+                    Close
+                </Button>
+                <Button color="primary" onClick={handleSaveGroup}>
+                    Save
+                </Button>
+            </ModalFooter>
+            </Modal>
+
             <GeocontextListModal toggle={toggleGeocontextListModal} isOpen={isGeocontextListOpen} csrfToken={props.csrfToken} geocontextUrl={props.geocontextUrl}/>
         </div>
     );

diff --git a/bims/templates/under_development.html b/bims/templates/under_development.html
@@ -8,7 +8,6 @@
     <meta name="author" content="">
     <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400i,500,500i,700,700i|Roboto+Condensed:100,100i,300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
-    <link rel="icon" type="image/png" href="{% static 'img/favicon.png' %}" />
     <title>Under development</title>
     <style>
         html, body {
@@ -235,9 +234,8 @@
 </svg>
 
 <div class="center">
-    <img src="{% static 'img/FBIS v2 Logo.png' %}" style="width: 300px; margin-top: -120px;"/>
     <p style="font-size: 30px; margin-top: -40px; font-weight: bold">Site update underway</p>
-    <p class="desc" >We are busy updating functionality and data on the the Freshwater Biodiversity Information System (FBIS). <br/> The site will be up and running again as soon as possible. Thanks for your patience
+    <p class="desc" >We are busy updating functionality and data on the site. <br/> The site will be up and running again as soon as possible. Thanks for your patience
 </p>
 </div>
 

diff --git a/bims/views/context_layers.py b/bims/views/context_layers.py
@@ -193,6 +193,7 @@ def put(self, request, *args):
                 group_id = group_data.get('id')
                 new_group_order = group_data.get('group_display_order')
                 remove = group_data.get('remove', False)
+                group_name = group_data.get('name', None)
                 context_filter_group = LocationContextFilterGroupOrder.objects.filter(
                     filter_id=filter_id,
                     group_id=group_id
@@ -201,8 +202,16 @@ def put(self, request, *args):
                     if remove:
                         context_filter_group.delete()
                     else:
+                        group_updated_data = {
+                            'group_display_order': new_group_order
+                        }
+                        if group_name:
+                           LocationContextGroup.objects.filter(
+                               id=group_id
+                           ).update(name=group_name)
                         context_filter_group.update(
-                            group_display_order=new_group_order)
+                            **group_updated_data
+                        )
                 else:
                     if not remove:
                         LocationContextFilterGroupOrder.objects.create(