Merge pull request #207 from jdev-org/issue-198

ISSUE-198 - Reorganization of the plot of land interface, in particular for waste garbage cans

js/extension/cadastrapp.css

@@ -75,9 +75,18 @@
 .cadastrapp .owners-search,
 .cadastrapp .coownership-search,
 .cadastrapp .plots-search {
-  padding: 10px;
-  max-height: 50%;
-  height: 50%;
+  margin: 10px;
+  border: solid 1px #ddd;
+}
+.cadastrapp .searchButtonsContainer {
+  display: flex;
+  max-height: 48px !important;
+  align-items: center;
+}
+.searchButtons{
+  float: none !important;
+  margin: 10px;
+  margin-left: auto;
 }
 .cadastrapp .plots-selection {
   width: 100%;
@@ -94,19 +103,44 @@
   font-weight: bold;
   width: 100%;
 }
+.cadastrapp .plotSelectionTabActionButtons {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
 .cadastrapp .tab-content {
-  border: solid 1px #ddd;
   border-top: none;
   overflow-x: hidden;
   overflow-y: auto;
   /*height: calc(50vh - 180px);*/
   min-height: 200px;
 }
 .cadastrapp .not-scrolled-tab .tab-content {
+  display: flex;
   overflow-x: visible;
   overflow-y: visible;
-  height: calc(50vh - 180px);
-  min-height: 200px;
+  /* height: calc(50vh - 180px); */
+  /* min-height: 200px; */
+}
+.cadastrapp .not-scrolled-tab .nav {
+  display: flex;
+  flex-wrap: nowrap;
+}
+.cadastrapp .not-scrolled-tab .nav > li > a {
+  padding: 5px;
+}
+.cadastrapp .not-scrolled-tab .nav-tab {
+  justify-content: space-between;
+  width: 100%;
+}
+.cadastrapp .plotPanel a {
+  padding: 10px !important;
+}
+.cadastrapp .plotPanel .btn-default {
+  background-color: rgba(255, 0, 0, 0);
+}
+.cadastrapp .plotPanel.active .btn-default {
+  color: black;
 }
 /* reconsider this */
 .item-row {

js/extension/components/PlotSelection.jsx

@@ -57,58 +57,69 @@ function PlotSelectionTabContent({
     );
 }
 
-function PlotSelectionTabActionButtons({onNewTab = () => {}, onTabDelete = () => {}}) {
+function PlotSelectionTabActionButtons({onNewTab = () => {}}) {
     return (
-        <ButtonGroup className="pull-right">
+        <ButtonGroup className="plotSelectionTabActionButtons">
             <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.search.addTab'}/></Tooltip>}>
                 <Button
-                    className="pull-right"
                     onClick={onNewTab}
                 ><span className="glyphicon glyphicon-plus"></span>
                 </Button>
             </OverlayTrigger>
-            <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.search.deleteTab'}/></Tooltip>}>
-                <ConfirmButton
-                    className="pull-right"
-                    confirmContent={<Message msgId={'cadastrapp.search.confirmDeleteTab'}/>}
-                    onClick={onTabDelete}>
-                    <Glyphicon glyph="trash" />
-                </ConfirmButton>
-            </OverlayTrigger>
         </ButtonGroup>
     );
 }
 
+function DeletePlot ({
+    onDelete = () => {},
+    }) {    
+    return (
+        <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.search.deleteTab'}/></Tooltip>}>
+            <ConfirmButton
+                href="javascript:void(0)"
+                confirmContent={<Message msgId={'cadastrapp.search.confirmDeleteTab'}/>}
+                onClick={(e) => {
+                    e.stopPropagation();
+                    onDelete();
+                    }}>
+                <Glyphicon glyph="remove" />
+            </ConfirmButton>
+        </OverlayTrigger>
+    )
+}
+
 function PlotTabs({
     active,
     onTabChange,
     data,
     plots,
+    onTabDelete = (index) => {index},
     ...props
 }) {
-
     const MAX_TABS = 3; // max number of tabs
     const getPlotTitle = (plot, index) => {
         return plot?.title ?? ("Selection " + (index + 1).toString());
-    };
+    };    
     return (
         <Tab.Container
             onSelect={onTabChange}
             activeKey={active}
             defaultActiveKey={active}>
             <Row className="clearfix">
                 <Col sm={12}>
-                    <Nav bsStyle="tabs">
+                    <Nav bsStyle="tabs" className={plots.length >= MAX_TABS ? "full" : ""}>
                         {plots.slice(0, plots.length > MAX_TABS ? MAX_TABS - 1 : MAX_TABS).map((plot, index) => (
-                            <NavItem role="tab" eventKey={index}>
+                            <NavItem role="tab" eventKey={index} className="plotPanel">
                                 {getPlotTitle(plot, index)}
+                                <DeletePlot onDelete={() => onTabDelete(index)}/>
                             </NavItem>
                         ))}
                         {plots.length > MAX_TABS
                             ? <NavDropdown title={active < MAX_TABS - 1 ? "More..." : getPlotTitle(plots[active], active)}>
                                 {plots.slice(MAX_TABS - 1).map((plot, index) => (
-                                    <MenuItem eventKey={index + MAX_TABS - 1}>
+                                    <MenuItem eventKey={index + MAX_TABS - 1} className="plotPanel">
                                         {getPlotTitle(plot, index + MAX_TABS - 1)}
+                                        <DeletePlot onDelete={() => onTabDelete(index + (MAX_TABS - 1))}/>
                                     </MenuItem>
                                 ))}
                             </NavDropdown>

js/extension/components/lists/ReferencesList.jsx

@@ -38,7 +38,7 @@ export default function ReferencesList({ references = [], cgocommune, onAddRefer
                     style={{ marginLeft: 6, marginTop: 4 }}
                     className="pull-left"><Message msgId={'cadastrapp.parcelle.addMoreReference'}/></span>
             </div>
-            <div style={{ width: "100%", height: "calc(50vh - 290px)", minHeight: 96, "overflowY": "visible" }}>
+            <div style={{ width: "100%", minHeight: 96, "overflowY": "visible" }}>
                 {
                     sections && references.map((row, index) => {
                         return (<ReferenceRow

js/extension/components/lists/StrList.jsx

@@ -20,7 +20,7 @@ export function StrList({items = [], onAdd, onRemove, onSetValue}) {
                     className="pull-left"><Message msgId={'cadastrapp.proprietaire.proprietaires.addMoreProprietaire'}/>
                 </span>
             </div>
-            <div style={{ width: "100%", height: "calc(50vh - 290px)", minHeight: 96, "overflowY": "auto" }}>
+            <div style={{ width: "100%", "overflowY": "auto" }}>
                 {items.map((v, index) => (
                     <div style={{ width: "100%", "float": "left" }}>
                         <FormControl

js/extension/components/search/CoownershipSearch.jsx

@@ -65,18 +65,21 @@ export default function CoownershipSearch({ loading, onSearch = () => { }, onOwn
                     </div>
                 </div>
             </div>
-            <SearchButtons
-                loading={loading}
-                valid={isSearchValid(SEARCH_TYPES.COOWNER, searchState[SEARCH_TYPES.COOWNER])}
-                onClear={() => resetFormState(SEARCH_TYPES.COOWNER)}
-                onSearch={() => {
-                    if (isString(searchState[SEARCH_TYPES.COOWNER]?.proprietaire) && !values?.parcelle) {
-                        onOwnersSearch(SEARCH_TYPES.COOWNER, searchState[SEARCH_TYPES.COOWNER]);
-                    } else {
-                        // plot search
-                        onSearch(SEARCH_TYPES.COOWNER, searchState[SEARCH_TYPES.COOWNER]);
-                    }
+            <div className="searchButtonsContainer">
+                <SearchButtons
+                    cls="searchButtons"
+                    loading={loading}
+                    valid={isSearchValid(SEARCH_TYPES.COOWNER, searchState[SEARCH_TYPES.COOWNER])}
+                    onClear={() => resetFormState(SEARCH_TYPES.COOWNER)}
+                    onSearch={() => {
+                        if (isString(searchState[SEARCH_TYPES.COOWNER]?.proprietaire) && !values?.parcelle) {
+                            onOwnersSearch(SEARCH_TYPES.COOWNER, searchState[SEARCH_TYPES.COOWNER]);
+                        } else {
+                            // plot search
+                            onSearch(SEARCH_TYPES.COOWNER, searchState[SEARCH_TYPES.COOWNER]);
+                        }
                 }}/>
+            </div>
         </div>
     );
 }

js/extension/components/search/OwnersSearch.jsx

@@ -41,13 +41,17 @@ export default function OwnersSearch({ loading, onOwnersSearch = () => {}}) {
                         setValue={(key, value) => setFormState(SEARCH_TYPES.OWNER_LOT, key, value)} />
                 </Tab>
             </Tabs>
-            <SearchButtons
-                loading={loading}
-                valid={isSearchValid(currentTab, searchState[currentTab])}
-                onClear={() => resetFormState(currentTab)}
-                onSearch={() => {
-                    onOwnersSearch(currentTab, searchState[currentTab]);
+            <div className="searchButtonsContainer">
+                <SearchButtons
+                    cls="searchButtons"
+                    loading={loading}
+                    valid={isSearchValid(currentTab, searchState[currentTab])}
+                    onClear={() => resetFormState(currentTab)}
+                    onSearch={() => {
+                        onOwnersSearch(currentTab, searchState[currentTab]);
                 }} />
+            </div>
+
         </div>
     );
 }

js/extension/components/search/PlotSearch.jsx

@@ -51,12 +51,15 @@ export default function PlotsSearch({onSearch = () => {}, loading}) {
                         setValue={(key, value) => setFormState(SEARCH_TYPES.LOT, key, value)} />
                 </Tab>
             </Tabs>
-            <SearchButtons
-                loading={loading}
-                valid={isSearchValid(currentTab, searchState[currentTab])}
-                onClear={() => resetFormState(currentTab)}
-                onSearch={() => onSearch(currentTab, searchState[currentTab])}
-            />
+            <div className="searchButtonsContainer">
+                <SearchButtons
+                    cls="searchButtons"
+                    loading={loading}
+                    valid={isSearchValid(currentTab, searchState[currentTab])}
+                    onClear={() => resetFormState(currentTab)}
+                    onSearch={() => onSearch(currentTab, searchState[currentTab])}
+                />
+            </div>
         </div>
     );
 }

js/extension/components/search/SearchButtons.jsx

@@ -5,9 +5,9 @@ import { Button, ButtonGroup, Glyphicon } from "react-bootstrap";
 
 
 export default function({
-    loading, valid, onClear = () => {}, onSearch = () => {}
+    loading, valid, onClear = () => {}, onSearch = () => {}, cls
 }) {
-    return (<ButtonGroup style={{ margin: "10px", "float": "right" }}>
+    return (<ButtonGroup className={cls}>
         {loading ? <Spinner spinnerName="circle" noFadeIn overrideSpinnerClassName="spinner" /> : null}
         <Button
             onClick={onClear}

js/extension/components/table/PlotsSelectionTable.jsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import { sortBy } from 'lodash';
 import ReactDataGrid from './MultilineHeaderTable';
 import PropTypes from 'prop-types';
@@ -55,12 +55,50 @@ function PlotsSelectionTable({
         }
         return processedRows;
     })(sorting);
+
+    // Calcul height of parcels tab 
+    const [dynamicHeight, setDynamicHeight] = useState(0);
+    const parentChildren = document.querySelector(".right-side").children.length
+
+    useEffect(() => {
+        const calculateHeight = () => {
+            const parent = document.querySelector(".right-side");
+            const parentHeight = document.querySelector(".right-side").clientHeight;
+            // Header height
+            const h3Height = document.querySelector("h3.pull-left").clientHeight;
+            const ulSize = document.querySelector(".plots-selection .nav").clientHeight;
+            // Row height min 35px
+            const rowElement = document.querySelector(".plots-selection .react-grid-Row");
+            const rowHeight = rowElement ? parseInt(rowElement.style.height, 10) : 35;
+            // add margin if needed to parent to see all the panel on top of footer
+            const tabElement = document.querySelector(".plots-selection .tab-content");
+            parent.children.length > 2 ? tabElement.style.marginBottom = "50px" : tabElement.style.marginBottom = "";
+
+            // Calcul tab height needed to display.
+            // +30 add a security bottom margin to avoid scrollbar.
+            // 200 is the minimum height no matter content.
+            // -220 : as the height is based on the total height of cadastrapp component, we need to mount the bottom of the tab.
+            const remainingHeight = parent.children.length > 2 ? Math.max(data.length * rowHeight + h3Height + ulSize + 30, 200) : Math.max(parentHeight - 220, 200);
+            setDynamicHeight(remainingHeight);
+        };
+
+        calculateHeight();
+
+        window.addEventListener("click", calculateHeight);
+        window.addEventListener("resize", calculateHeight);
+        return () => {
+            window.removeEventListener("click", calculateHeight);
+            window.removeEventListener("resize", calculateHeight);
+        }
+    }, [data, parentChildren]);
+
+
     return (<ReactDataGrid
         sortable
         onRowDoubleClick={onRowDoubleClick}
         rowGetter={i => rows[i]}
         rowsCount={rows.length}
-        minHeight={230}
+        minHeight={dynamicHeight}
         columns={columns}
         onGridSort={(sortColumn, sortDirection) => {
             // sortDirection: "ASC", "DESC", "NONE"

js/extension/plugins/cadastrapp/PlotSelection.jsx

@@ -44,7 +44,7 @@ const PlotsSelection = connect((state) => ({
     removePlots: removePlots,
     zoomToSelection: zoomToSelection,
     showLandedPropertyInformationByParcelle,
-    onTabDelete: () => removePlotSelection(),
+    onTabDelete: (index) => removePlotSelection(index),
     onSaveAsAnnotation: saveAsAnnotation
 })(PS);