Add context layer filters view (#4314)

kartoza · Oct 16, 2024 · 3538ecb · 3538ecb
1 parent f6e6c47
commit 3538ecb
Show file tree

Hide file tree

Showing 10 changed files with 469 additions and 126 deletions.
diff --git a/bims/api_urls.py b/bims/api_urls.py
@@ -64,7 +64,7 @@
 from bims.api_views.hide_popup_info_user import HidePopupInfoUser
 from bims.api_views.send_notification_to_validator import \
     SendNotificationValidation
-from bims.views.context_layers import ContextLayerGroup, CloudNativeLayerAutoCompleteAPI
+from bims.views.context_layers import ContextLayerGroup, CloudNativeLayerAutoCompleteAPI, ContextFilter
 from bims.views.locate import filter_farm_ids_view, get_farm_view
 from bims.api_views.user_boundary import (
     UserBoundaryList,
@@ -389,6 +389,9 @@
     path('context-layer-group/',
          ContextLayerGroup.as_view(),
          name='context-layers-group'),
+    path('context-filter/',
+         ContextFilter.as_view(),
+         name='context-filter'),
     path('context-layer-group/<int:pk>/',
          ContextLayerGroup.as_view(),),
     path('cloud-native-layer-autocomplete/',

diff --git a/bims/package-lock.json b/bims/package-lock.json
diff --git a/bims/package.json b/bims/package.json
@@ -27,11 +27,13 @@
     "@babel/preset-env": "^7.0.0-beta.54",
     "@babel/preset-react": "^7.0.0-beta.54",
     "@babel/runtime": "^7.4.5",
+    "array-move": "^4.0.0",
     "async": "^2.6.4",
     "axios": "^1.7.4",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^27.4.6",
     "babel-loader": "^8.3.0",
+    "bootstrap-icons": "^1.11.3",
     "braces": "^3.0.3",
     "clean-webpack-plugin": "^4.0.0-alpha.0",
     "clipboard": "^1.7.1",
@@ -55,6 +57,7 @@
     "react-bootstrap": "^1.6.1",
     "react-confirm-alert": "^2.7.0",
     "react-dom": "^18.3.1",
+    "react-easy-sort": "^1.6.0",
     "react-rnd": "^10.3.4",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

diff --git a/bims/static/react/css/ContextLayers.scss b/bims/static/react/css/ContextLayers.scss
@@ -20,3 +20,26 @@
 .autocomplete-item:hover {
     background-color: #f0f0f0;
 }
+
+.context-filter-header {
+    cursor: pointer;
+    font-weight: bold;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    background-color: #f9f9f9;
+}
+
+.context-group-box {
+    margin-left: 20px;
+    border-left: 2px solid #ddd;
+    margin-bottom: 10px;
+    background-color: white;
+}
+
+.context-group-item {
+    margin-bottom: 5px;
+    border-bottom: 1px solid #ddd;
+    border-right: 1px solid #ddd;
+    padding: 10px;
+}
diff --git a/bims/static/react/js/ContextLayersView.jsx b/bims/static/react/js/ContextLayersView.jsx
@@ -1,132 +1,13 @@
 import React, { useState, useEffect } from 'react';
-import axios from "axios";
 import '../css/ContextLayers.scss';
 import {createRoot} from "react-dom/client";
-import {ContextGroupDetailModal} from "./components/ContextGroupDetailModal";
-import {ContextGroupCard} from "./components/ContextGroupCard";
-import {Button} from "reactstrap";
+import ContextGroupView from "./components/ContextGroupView";
+import ContextFilterView from "./components/ContextFilterView";
 
 
 const ContextLayersView = (props) => {
-    const [loading, setLoading] = useState(true)
-    const [contextGroups, setContextGroups] = useState([])
-    const [error, setError] = useState(null)
-    const [selectedGroup, setSelectedGroup] = useState(null)
-    const [showModal, setShowModal] = useState(false)
-    const [filterText, setFilterText] = useState('')
-    const [showOnlyActive, setShowOnlyActive] = useState(false)
-
-    const fetchContextGroups = async () => {
-        setContextGroups([])
-        try {
-            setLoading(true)
-            const response = await axios.get('/api/context-layer-group');
-            setContextGroups(response.data);
-        } catch (error) {
-            console.error("Error fetching context groups:", error);
-            setError("Failed to load context groups");
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    useEffect(() => {
-        fetchContextGroups();
-    }, []);
-
-    const handleCardClick = (group) => {
-        setSelectedGroup(group);
-        setShowModal(true);
-    };
-
-    const handleCloseModal = () => {
-        setShowModal(false);
-        setSelectedGroup(null);
-    };
-
-    const handleSaveGroup = async (groupData) => {
-        setShowModal(false)
-        let url = `/api/context-layer-group/${groupData.id}/`;
-
-        const response = await fetch(url, {
-            method: 'PUT',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-CSRFToken': props.csrfToken
-            },
-            body: JSON.stringify(groupData),
-        });
-
-        if (response.ok) {
-            const data = await response.json();
-            fetchContextGroups()
-        } else {
-          console.error('Error saving group:', response.statusText);
-        }
-    }
-
-    const handleFilterChange = (e) => {
-        setFilterText(e.target.value);
-    };
-
-    const handleShowOnlyActiveChange = (e) => {
-        setShowOnlyActive(e.target.checked);
-    };
-
-    const filteredGroups = contextGroups.filter(group => {
-        const matchesName = group.name.toLowerCase().includes(filterText.toLowerCase());
-        const matchesActive = showOnlyActive ? group.active : true;
-        return matchesName && matchesActive;
-    });
-
-    if (loading) {
-        return <div>Loading...</div>;
-    }
-
-    if (error) {
-        return <div>{error}</div>;
-    }
-
     return (
-        <div>
-            <div className="filter-input">
-                <input
-                    type="text"
-                    placeholder="Filter by name"
-                    value={filterText}
-                    onChange={handleFilterChange}
-                    className="form-control mb-2"
-                />
-            </div>
-            <div className="form-check mb-3">
-                <input
-                    type="checkbox"
-                    className="form-check-input"
-                    id="showOnlyActive"
-                    checked={showOnlyActive}
-                    onChange={handleShowOnlyActiveChange}
-                />
-                <label className="form-check-label" htmlFor="showOnlyActive">
-                    Show only active
-                </label>
-                <div style={{ position: 'absolute', right: 0, marginTop: -27}}>
-                    <Button color={'primary'}>Add new</Button>
-                </div>
-            </div>
-            <div className="row">
-                {filteredGroups.map((group) => (
-                    <div className="col-md-12" key={group.id}>
-                        <ContextGroupCard group={group} onClick={handleCardClick}/>
-                    </div>
-                ))}
-            </div>
-            <ContextGroupDetailModal
-                show={showModal}
-                handleClose={handleCloseModal}
-                group={selectedGroup}
-                handleSave={handleSaveGroup}
-            />
-        </div>
+        <ContextFilterView csrfToken={props.csrfToken}/>
     )
 }