From 3dae27e2fc379d0177a5fced68ce92c574f69ac1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Poincelet?= <loic.poincelet@jdev.fr>
Date: Mon, 23 Dec 2024 14:09:00 +0100
Subject: [PATCH 01/15] Improve Parcelles tabs css

---
 js/extension/cadastrapp.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/js/extension/cadastrapp.css b/js/extension/cadastrapp.css
index bf0be3c..db6e3d0 100644
--- a/js/extension/cadastrapp.css
+++ b/js/extension/cadastrapp.css
@@ -108,6 +108,17 @@
   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%;
+}
 /* reconsider this */
 .item-row {
   width: 100%;

From 9225a8adfe9531f916981937c5699d696d33d752 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Poincelet?= <loic.poincelet@jdev.fr>
Date: Thu, 26 Dec 2024 16:59:10 +0100
Subject: [PATCH 02/15] Modify Search Buttons and Search Plot disply

---
 js/extension/cadastrapp.css                      |  8 ++++----
 js/extension/components/lists/ReferencesList.jsx |  2 +-
 js/extension/components/search/PlotSearch.jsx    | 14 ++++++++------
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/js/extension/cadastrapp.css b/js/extension/cadastrapp.css
index db6e3d0..8fe28fe 100644
--- a/js/extension/cadastrapp.css
+++ b/js/extension/cadastrapp.css
@@ -75,9 +75,10 @@
 .cadastrapp .owners-search,
 .cadastrapp .coownership-search,
 .cadastrapp .plots-search {
-  padding: 10px;
-  max-height: 50%;
-  height: 50%;
+  margin: 10px;
+  max-height: 55%;
+  height: 55%;
+  border: solid 1px #ddd;
 }
 .cadastrapp .plots-selection {
   width: 100%;
@@ -95,7 +96,6 @@
   width: 100%;
 }
 .cadastrapp .tab-content {
-  border: solid 1px #ddd;
   border-top: none;
   overflow-x: hidden;
   overflow-y: auto;
diff --git a/js/extension/components/lists/ReferencesList.jsx b/js/extension/components/lists/ReferencesList.jsx
index 48d3daa..59a2e2e 100644
--- a/js/extension/components/lists/ReferencesList.jsx
+++ b/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
diff --git a/js/extension/components/search/PlotSearch.jsx b/js/extension/components/search/PlotSearch.jsx
index 37d7c5d..f618a3c 100644
--- a/js/extension/components/search/PlotSearch.jsx
+++ b/js/extension/components/search/PlotSearch.jsx
@@ -47,12 +47,14 @@ 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>
+                <SearchButtons
+                    loading={loading}
+                    valid={isSearchValid(currentTab, searchState[currentTab])}
+                    onClear={() => resetFormState(currentTab)}
+                    onSearch={() => onSearch(currentTab, searchState[currentTab])}
+                />
+            </div>
         </div>
     );
 }

From 89bc0c5ad9ba3a2d973a19f318a139a9a802b7bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Poincelet?= <loic.poincelet@jdev.fr>
Date: Mon, 30 Dec 2024 09:55:56 +0100
Subject: [PATCH 03/15] modif plots parcelles

---
 js/extension/cadastrapp.css                     | 11 +++++++++--
 js/extension/components/PlotSelection.jsx       | 17 ++++++++++++-----
 js/extension/components/search/PlotSearch.jsx   |  3 ++-
 .../components/search/SearchButtons.jsx         |  4 ++--
 js/extension/reducers/cadastrapp.js             |  2 ++
 5 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/js/extension/cadastrapp.css b/js/extension/cadastrapp.css
index 8fe28fe..69b3681 100644
--- a/js/extension/cadastrapp.css
+++ b/js/extension/cadastrapp.css
@@ -76,10 +76,17 @@
 .cadastrapp .coownership-search,
 .cadastrapp .plots-search {
   margin: 10px;
-  max-height: 55%;
-  height: 55%;
   border: solid 1px #ddd;
 }
+.cadastrapp .plots-search .searchButtonsContainer {
+  display: flex;
+  align-items: center;
+}
+.searchButtons{
+  float: none !important;
+  margin: 10px;
+  margin-left: auto;
+}
 .cadastrapp .plots-selection {
   width: 100%;
   padding: 10px;
diff --git a/js/extension/components/PlotSelection.jsx b/js/extension/components/PlotSelection.jsx
index fce3be0..2e057d2 100644
--- a/js/extension/components/PlotSelection.jsx
+++ b/js/extension/components/PlotSelection.jsx
@@ -59,22 +59,20 @@ function PlotSelectionTabContent({
 
 function PlotSelectionTabActionButtons({onNewTab = () => {}, onTabDelete = () => {}}) {
     return (
-        <ButtonGroup className="pull-right">
+        <ButtonGroup style={{position: "absolute", top: "50%", transform: "translateY(-50%)"}}>
             <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>}>
+            {/* <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>
+            </OverlayTrigger> */}
         </ButtonGroup>
     );
 }
@@ -84,6 +82,8 @@ function PlotTabs({
     onTabChange,
     data,
     plots,
+    onTabDelete = () => {},
+    onRowsSelected,
     ...props
 }) {
 
@@ -102,6 +102,13 @@ function PlotTabs({
                         {plots.slice(0, plots.length > MAX_TABS ? MAX_TABS - 1 : MAX_TABS).map((plot, index) => (
                             <NavItem role="tab" eventKey={index}>
                                 {getPlotTitle(plot, index)}
+                                <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.search.deleteTab'}/></Tooltip>}>
+                                    <ConfirmButton
+                                        confirmContent={<Message msgId={'cadastrapp.search.confirmDeleteTab'}/>}
+                                        onClick={() => {onRowsSelected(); onTabDelete(index);}}>
+                                        <Glyphicon glyph="remove" />
+                                    </ConfirmButton>
+                                </OverlayTrigger>
                             </NavItem>
                         ))}
                         {plots.length > MAX_TABS
diff --git a/js/extension/components/search/PlotSearch.jsx b/js/extension/components/search/PlotSearch.jsx
index f618a3c..222c848 100644
--- a/js/extension/components/search/PlotSearch.jsx
+++ b/js/extension/components/search/PlotSearch.jsx
@@ -47,8 +47,9 @@ export default function PlotsSearch({onSearch = () => {}, loading}) {
                         setValue={(key, value) => setFormState(SEARCH_TYPES.LOT, key, value)} />
                 </Tab>
             </Tabs>
-            <div>
+            <div className="searchButtonsContainer">
                 <SearchButtons
+                    className="searchButtons"
                     loading={loading}
                     valid={isSearchValid(currentTab, searchState[currentTab])}
                     onClear={() => resetFormState(currentTab)}
diff --git a/js/extension/components/search/SearchButtons.jsx b/js/extension/components/search/SearchButtons.jsx
index e1f83d8..32ca1b7 100644
--- a/js/extension/components/search/SearchButtons.jsx
+++ b/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 = () => {}, className
 }) {
-    return (<ButtonGroup style={{ margin: "10px", "float": "right" }}>
+    return (<ButtonGroup className={className}>
         {loading ? <Spinner spinnerName="circle" noFadeIn overrideSpinnerClassName="spinner" /> : null}
         <Button
             onClick={onClear}
diff --git a/js/extension/reducers/cadastrapp.js b/js/extension/reducers/cadastrapp.js
index 7b52c6d..1cad7bd 100644
--- a/js/extension/reducers/cadastrapp.js
+++ b/js/extension/reducers/cadastrapp.js
@@ -193,6 +193,8 @@ export default function cadastrapp(state = DEFAULT_STATE, action) {
     case REMOVE_PLOT_SELECTION: {
         const active = action.active ?? state.activePlotSelection;
         const newPlots = [...state.plots.filter((_, i) => i !== active)];
+        console.log({active});
+        console.log({newPlots});
         return compose(
             set(`plots`, newPlots),
             set(`activePlotSelection`, Math.max(state.activePlotSelection - 1, 0))

From e184c88cdda07a50deb71aeb693357db087046e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Poincelet?= <loic.poincelet@jdev.fr>
Date: Tue, 31 Dec 2024 15:29:40 +0100
Subject: [PATCH 04/15] clean CSS for plots search and add button

---
 js/extension/cadastrapp.css               | 14 +++++++++++++
 js/extension/components/PlotSelection.jsx | 24 +++++++++++------------
 js/extension/reducers/cadastrapp.js       |  2 --
 3 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/js/extension/cadastrapp.css b/js/extension/cadastrapp.css
index 69b3681..24f908e 100644
--- a/js/extension/cadastrapp.css
+++ b/js/extension/cadastrapp.css
@@ -102,6 +102,11 @@
   font-weight: bold;
   width: 100%;
 }
+.cadastrapp .plotSelectionTabActionButtons {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
 .cadastrapp .tab-content {
   border-top: none;
   overflow-x: hidden;
@@ -126,6 +131,15 @@
   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 {
   width: 100%;
diff --git a/js/extension/components/PlotSelection.jsx b/js/extension/components/PlotSelection.jsx
index 2e057d2..2563516 100644
--- a/js/extension/components/PlotSelection.jsx
+++ b/js/extension/components/PlotSelection.jsx
@@ -57,22 +57,15 @@ function PlotSelectionTabContent({
     );
 }
 
-function PlotSelectionTabActionButtons({onNewTab = () => {}, onTabDelete = () => {}}) {
+function PlotSelectionTabActionButtons({onNewTab = () => {}}) {
     return (
-        <ButtonGroup style={{position: "absolute", top: "50%", transform: "translateY(-50%)"}}>
+        <ButtonGroup className="plotSelectionTabActionButtons">
             <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.search.addTab'}/></Tooltip>}>
                 <Button
                     onClick={onNewTab}
                 ><span className="glyphicon glyphicon-plus"></span>
                 </Button>
             </OverlayTrigger>
-            {/* <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.search.deleteTab'}/></Tooltip>}>
-                <ConfirmButton
-                    confirmContent={<Message msgId={'cadastrapp.search.confirmDeleteTab'}/>}
-                    onClick={onTabDelete}>
-                    <Glyphicon glyph="trash" />
-                </ConfirmButton>
-            </OverlayTrigger> */}
         </ButtonGroup>
     );
 }
@@ -98,9 +91,9 @@ function PlotTabs({
             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} href="javascript:void(0)" className="plotPanel">
                                 {getPlotTitle(plot, index)}
                                 <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.search.deleteTab'}/></Tooltip>}>
                                     <ConfirmButton
@@ -114,8 +107,15 @@ function PlotTabs({
                         {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} href="javascript:void(0)" className="plotPanel">
                                         {getPlotTitle(plot, index + MAX_TABS - 1)}
+                                        <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.search.deleteTab'}/></Tooltip>}>
+                                            <ConfirmButton
+                                                confirmContent={<Message msgId={'cadastrapp.search.confirmDeleteTab'}/>}
+                                                onClick={() => {onRowsSelected(); onTabDelete(index);}}>
+                                                <Glyphicon glyph="remove" />
+                                            </ConfirmButton>
+                                        </OverlayTrigger>
                                     </MenuItem>
                                 ))}
                             </NavDropdown>
diff --git a/js/extension/reducers/cadastrapp.js b/js/extension/reducers/cadastrapp.js
index 1cad7bd..7b52c6d 100644
--- a/js/extension/reducers/cadastrapp.js
+++ b/js/extension/reducers/cadastrapp.js
@@ -193,8 +193,6 @@ export default function cadastrapp(state = DEFAULT_STATE, action) {
     case REMOVE_PLOT_SELECTION: {
         const active = action.active ?? state.activePlotSelection;
         const newPlots = [...state.plots.filter((_, i) => i !== active)];
-        console.log({active});
-        console.log({newPlots});
         return compose(
             set(`plots`, newPlots),
             set(`activePlotSelection`, Math.max(state.activePlotSelection - 1, 0))

From 110d2e89354cf02d40a07043b61254ac67e875e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Poincelet?= <loic.poincelet@jdev.fr>
Date: Tue, 31 Dec 2024 16:32:21 +0100
Subject: [PATCH 05/15] css for owners & co-owners search buttons

---
 js/extension/cadastrapp.css                   |  2 +-
 .../components/search/CoownershipSearch.jsx   | 25 +++++++++++--------
 .../components/search/OwnersSearch.jsx        | 16 +++++++-----
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/js/extension/cadastrapp.css b/js/extension/cadastrapp.css
index 24f908e..4cf2baf 100644
--- a/js/extension/cadastrapp.css
+++ b/js/extension/cadastrapp.css
@@ -78,7 +78,7 @@
   margin: 10px;
   border: solid 1px #ddd;
 }
-.cadastrapp .plots-search .searchButtonsContainer {
+.cadastrapp .searchButtonsContainer {
   display: flex;
   align-items: center;
 }
diff --git a/js/extension/components/search/CoownershipSearch.jsx b/js/extension/components/search/CoownershipSearch.jsx
index ae77e16..92f3c22 100644
--- a/js/extension/components/search/CoownershipSearch.jsx
+++ b/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
+                    className="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>
     );
 }
diff --git a/js/extension/components/search/OwnersSearch.jsx b/js/extension/components/search/OwnersSearch.jsx
index a05428c..3b52515 100644
--- a/js/extension/components/search/OwnersSearch.jsx
+++ b/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
+                    className="searchButtons"
+                    loading={loading}
+                    valid={isSearchValid(currentTab, searchState[currentTab])}
+                    onClear={() => resetFormState(currentTab)}
+                    onSearch={() => {
+                        onOwnersSearch(currentTab, searchState[currentTab]);
                 }} />
+            </div>
+            
         </div>
     );
 }

From 2c1804f01806d834e2a433506a082dfe53c0b0e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Poincelet?= <loic.poincelet@jdev.fr>
Date: Thu, 2 Jan 2025 14:49:11 +0100
Subject: [PATCH 06/15] fix index of removed plot

---
 js/extension/components/PlotSelection.jsx         | 6 +++---
 js/extension/plugins/cadastrapp/PlotSelection.jsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/js/extension/components/PlotSelection.jsx b/js/extension/components/PlotSelection.jsx
index 2563516..917d648 100644
--- a/js/extension/components/PlotSelection.jsx
+++ b/js/extension/components/PlotSelection.jsx
@@ -75,7 +75,7 @@ function PlotTabs({
     onTabChange,
     data,
     plots,
-    onTabDelete = () => {},
+    onTabDelete = (index) => {index},
     onRowsSelected,
     ...props
 }) {
@@ -98,7 +98,7 @@ function PlotTabs({
                                 <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.search.deleteTab'}/></Tooltip>}>
                                     <ConfirmButton
                                         confirmContent={<Message msgId={'cadastrapp.search.confirmDeleteTab'}/>}
-                                        onClick={() => {onRowsSelected(); onTabDelete(index);}}>
+                                        onClick={() => {onTabDelete(index);}}>
                                         <Glyphicon glyph="remove" />
                                     </ConfirmButton>
                                 </OverlayTrigger>
@@ -112,7 +112,7 @@ function PlotTabs({
                                         <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.search.deleteTab'}/></Tooltip>}>
                                             <ConfirmButton
                                                 confirmContent={<Message msgId={'cadastrapp.search.confirmDeleteTab'}/>}
-                                                onClick={() => {onRowsSelected(); onTabDelete(index);}}>
+                                                onClick={() => {onTabDelete(index);}}>
                                                 <Glyphicon glyph="remove" />
                                             </ConfirmButton>
                                         </OverlayTrigger>
diff --git a/js/extension/plugins/cadastrapp/PlotSelection.jsx b/js/extension/plugins/cadastrapp/PlotSelection.jsx
index f1567ce..c4e4d64 100644
--- a/js/extension/plugins/cadastrapp/PlotSelection.jsx
+++ b/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);
 

From 1d2ae50deb6517ecbd1bc70fc1fcd66d10ff1a1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Poincelet?= <loic.poincelet@jdev.fr>
Date: Thu, 2 Jan 2025 16:09:32 +0100
Subject: [PATCH 07/15] fix plot selection and fix delete when tabs > max tab

---
 js/extension/components/PlotSelection.jsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/js/extension/components/PlotSelection.jsx b/js/extension/components/PlotSelection.jsx
index 917d648..9401137 100644
--- a/js/extension/components/PlotSelection.jsx
+++ b/js/extension/components/PlotSelection.jsx
@@ -76,7 +76,6 @@ function PlotTabs({
     data,
     plots,
     onTabDelete = (index) => {index},
-    onRowsSelected,
     ...props
 }) {
 
@@ -93,10 +92,11 @@ function PlotTabs({
                 <Col sm={12}>
                     <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} href="javascript:void(0)" className="plotPanel">
+                            <NavItem role="tab" eventKey={index} className="plotPanel">
                                 {getPlotTitle(plot, index)}
                                 <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.search.deleteTab'}/></Tooltip>}>
                                     <ConfirmButton
+                                        href="javascript:void(0)"
                                         confirmContent={<Message msgId={'cadastrapp.search.confirmDeleteTab'}/>}
                                         onClick={() => {onTabDelete(index);}}>
                                         <Glyphicon glyph="remove" />
@@ -107,12 +107,13 @@ function PlotTabs({
                         {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} href="javascript:void(0)" className="plotPanel">
+                                    <MenuItem eventKey={index + MAX_TABS - 1} className="plotPanel">
                                         {getPlotTitle(plot, index + MAX_TABS - 1)}
                                         <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.search.deleteTab'}/></Tooltip>}>
-                                            <ConfirmButton
+                                            <ConfirmButton  
+                                                href="javascript:void(0)"
                                                 confirmContent={<Message msgId={'cadastrapp.search.confirmDeleteTab'}/>}
-                                                onClick={() => {onTabDelete(index);}}>
+                                                onClick={() => {onTabDelete(index + (MAX_TABS - 1));}}>
                                                 <Glyphicon glyph="remove" />
                                             </ConfirmButton>
                                         </OverlayTrigger>

From 2d13cd904fec4f913b2c2b98040e6bd6d053567d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Poincelet?= <loic.poincelet@jdev.fr>
Date: Wed, 8 Jan 2025 14:29:49 +0100
Subject: [PATCH 08/15] fix selection plot after removing one

---
 js/extension/components/PlotSelection.jsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/js/extension/components/PlotSelection.jsx b/js/extension/components/PlotSelection.jsx
index 9401137..746cd28 100644
--- a/js/extension/components/PlotSelection.jsx
+++ b/js/extension/components/PlotSelection.jsx
@@ -78,11 +78,10 @@ function PlotTabs({
     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}
@@ -98,7 +97,10 @@ function PlotTabs({
                                     <ConfirmButton
                                         href="javascript:void(0)"
                                         confirmContent={<Message msgId={'cadastrapp.search.confirmDeleteTab'}/>}
-                                        onClick={() => {onTabDelete(index);}}>
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            onTabDelete(index);
+                                            }}>
                                         <Glyphicon glyph="remove" />
                                     </ConfirmButton>
                                 </OverlayTrigger>
@@ -113,7 +115,10 @@ function PlotTabs({
                                             <ConfirmButton  
                                                 href="javascript:void(0)"
                                                 confirmContent={<Message msgId={'cadastrapp.search.confirmDeleteTab'}/>}
-                                                onClick={() => {onTabDelete(index + (MAX_TABS - 1));}}>
+                                                onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    onTabDelete(index + (MAX_TABS - 1));
+                                                    }}>
                                                 <Glyphicon glyph="remove" />
                                             </ConfirmButton>
                                         </OverlayTrigger>

From 29edca4489ecf892402c9f52bc676cadbc40c880 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Poincelet?= <loic.poincelet@jdev.fr>
Date: Wed, 8 Jan 2025 15:25:59 +0100
Subject: [PATCH 09/15] clean code

---
 js/extension/components/PlotSelection.jsx | 45 ++++++++++++-----------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/js/extension/components/PlotSelection.jsx b/js/extension/components/PlotSelection.jsx
index 746cd28..dd729ab 100644
--- a/js/extension/components/PlotSelection.jsx
+++ b/js/extension/components/PlotSelection.jsx
@@ -70,6 +70,27 @@ function PlotSelectionTabActionButtons({onNewTab = () => {}}) {
     );
 }
 
+function DeletePlot ({
+    index, 
+    isDrop=false,
+    onTabDelete,
+    MAX_TABS
+    }) {    
+    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();
+                    onTabDelete(!isDrop ? index : index + (MAX_TABS - 1));
+                    }}>
+                <Glyphicon glyph="remove" />
+            </ConfirmButton>
+        </OverlayTrigger>
+    )
+}
+
 function PlotTabs({
     active,
     onTabChange,
@@ -93,17 +114,7 @@ function PlotTabs({
                         {plots.slice(0, plots.length > MAX_TABS ? MAX_TABS - 1 : MAX_TABS).map((plot, index) => (
                             <NavItem role="tab" eventKey={index} className="plotPanel">
                                 {getPlotTitle(plot, index)}
-                                <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();
-                                            onTabDelete(index);
-                                            }}>
-                                        <Glyphicon glyph="remove" />
-                                    </ConfirmButton>
-                                </OverlayTrigger>
+                                <DeletePlot index={index} onTabDelete={onTabDelete} MAX_TABS={MAX_TABS}/>
                             </NavItem>
                         ))}
                         {plots.length > MAX_TABS
@@ -111,17 +122,7 @@ function PlotTabs({
                                 {plots.slice(MAX_TABS - 1).map((plot, index) => (
                                     <MenuItem eventKey={index + MAX_TABS - 1} className="plotPanel">
                                         {getPlotTitle(plot, index + MAX_TABS - 1)}
-                                        <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();
-                                                    onTabDelete(index + (MAX_TABS - 1));
-                                                    }}>
-                                                <Glyphicon glyph="remove" />
-                                            </ConfirmButton>
-                                        </OverlayTrigger>
+                                        <DeletePlot index={index} isDrop={true} onTabDelete={onTabDelete} MAX_TABS={MAX_TABS}/>
                                     </MenuItem>
                                 ))}
                             </NavDropdown>

From 8290d6bceea55893e5bf94b915ba3999865a862d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Poincelet?= <loic.poincelet@jdev.fr>
Date: Wed, 8 Jan 2025 17:19:29 +0100
Subject: [PATCH 10/15] change classname props to cls to avoid react problem

---
 js/extension/components/search/CoownershipSearch.jsx | 2 +-
 js/extension/components/search/OwnersSearch.jsx      | 2 +-
 js/extension/components/search/PlotSearch.jsx        | 2 +-
 js/extension/components/search/SearchButtons.jsx     | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/js/extension/components/search/CoownershipSearch.jsx b/js/extension/components/search/CoownershipSearch.jsx
index 92f3c22..60e888e 100644
--- a/js/extension/components/search/CoownershipSearch.jsx
+++ b/js/extension/components/search/CoownershipSearch.jsx
@@ -67,7 +67,7 @@ export default function CoownershipSearch({ loading, onSearch = () => { }, onOwn
             </div>
             <div className="searchButtonsContainer">
                 <SearchButtons
-                    className="searchButtons"
+                    cls="searchButtons"
                     loading={loading}
                     valid={isSearchValid(SEARCH_TYPES.COOWNER, searchState[SEARCH_TYPES.COOWNER])}
                     onClear={() => resetFormState(SEARCH_TYPES.COOWNER)}
diff --git a/js/extension/components/search/OwnersSearch.jsx b/js/extension/components/search/OwnersSearch.jsx
index 3b52515..f894b4d 100644
--- a/js/extension/components/search/OwnersSearch.jsx
+++ b/js/extension/components/search/OwnersSearch.jsx
@@ -43,7 +43,7 @@ export default function OwnersSearch({ loading, onOwnersSearch = () => {}}) {
             </Tabs>
             <div className="searchButtonsContainer">
                 <SearchButtons
-                    className="searchButtons"
+                    cls="searchButtons"
                     loading={loading}
                     valid={isSearchValid(currentTab, searchState[currentTab])}
                     onClear={() => resetFormState(currentTab)}
diff --git a/js/extension/components/search/PlotSearch.jsx b/js/extension/components/search/PlotSearch.jsx
index 222c848..708224d 100644
--- a/js/extension/components/search/PlotSearch.jsx
+++ b/js/extension/components/search/PlotSearch.jsx
@@ -49,7 +49,7 @@ export default function PlotsSearch({onSearch = () => {}, loading}) {
             </Tabs>
             <div className="searchButtonsContainer">
                 <SearchButtons
-                    className="searchButtons"
+                    cls="searchButtons"
                     loading={loading}
                     valid={isSearchValid(currentTab, searchState[currentTab])}
                     onClear={() => resetFormState(currentTab)}
diff --git a/js/extension/components/search/SearchButtons.jsx b/js/extension/components/search/SearchButtons.jsx
index 32ca1b7..fdd6f84 100644
--- a/js/extension/components/search/SearchButtons.jsx
+++ b/js/extension/components/search/SearchButtons.jsx
@@ -5,9 +5,9 @@ import { Button, ButtonGroup, Glyphicon } from "react-bootstrap";
 
 
 export default function({
-    loading, valid, onClear = () => {}, onSearch = () => {}, className
+    loading, valid, onClear = () => {}, onSearch = () => {}, cls
 }) {
-    return (<ButtonGroup className={className}>
+    return (<ButtonGroup className={cls}>
         {loading ? <Spinner spinnerName="circle" noFadeIn overrideSpinnerClassName="spinner" /> : null}
         <Button
             onClick={onClear}

From cc56eaf49be01bcdbb1fde13f938f90144b9ec51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Poincelet?= <loic.poincelet@jdev.fr>
Date: Thu, 9 Jan 2025 15:03:08 +0100
Subject: [PATCH 11/15] improve DeletePlot function

---
 js/extension/components/PlotSelection.jsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/js/extension/components/PlotSelection.jsx b/js/extension/components/PlotSelection.jsx
index dd729ab..8d29b7f 100644
--- a/js/extension/components/PlotSelection.jsx
+++ b/js/extension/components/PlotSelection.jsx
@@ -71,10 +71,7 @@ function PlotSelectionTabActionButtons({onNewTab = () => {}}) {
 }
 
 function DeletePlot ({
-    index, 
-    isDrop=false,
-    onTabDelete,
-    MAX_TABS
+    onDelete = () => {},
     }) {    
     return (
         <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.search.deleteTab'}/></Tooltip>}>
@@ -83,7 +80,7 @@ function DeletePlot ({
                 confirmContent={<Message msgId={'cadastrapp.search.confirmDeleteTab'}/>}
                 onClick={(e) => {
                     e.stopPropagation();
-                    onTabDelete(!isDrop ? index : index + (MAX_TABS - 1));
+                    onDelete();
                     }}>
                 <Glyphicon glyph="remove" />
             </ConfirmButton>
@@ -114,7 +111,7 @@ function PlotTabs({
                         {plots.slice(0, plots.length > MAX_TABS ? MAX_TABS - 1 : MAX_TABS).map((plot, index) => (
                             <NavItem role="tab" eventKey={index} className="plotPanel">
                                 {getPlotTitle(plot, index)}
-                                <DeletePlot index={index} onTabDelete={onTabDelete} MAX_TABS={MAX_TABS}/>
+                                <DeletePlot onDelete={() => onTabDelete(index)}/>
                             </NavItem>
                         ))}
                         {plots.length > MAX_TABS
@@ -122,7 +119,7 @@ function PlotTabs({
                                 {plots.slice(MAX_TABS - 1).map((plot, index) => (
                                     <MenuItem eventKey={index + MAX_TABS - 1} className="plotPanel">
                                         {getPlotTitle(plot, index + MAX_TABS - 1)}
-                                        <DeletePlot index={index} isDrop={true} onTabDelete={onTabDelete} MAX_TABS={MAX_TABS}/>
+                                        <DeletePlot onDelete={() => onTabDelete(index + (MAX_TABS - 1))}/>
                                     </MenuItem>
                                 ))}
                             </NavDropdown>

From 80d60ab11880b55636264dd9147e170b351a9cf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Poincelet?= <loic.poincelet@jdev.fr>
Date: Fri, 17 Jan 2025 16:34:04 +0100
Subject: [PATCH 12/15] fix plotSearch's height and search buttons position

---
 js/extension/cadastrapp.css               | 6 ++++--
 js/extension/components/lists/StrList.jsx | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/js/extension/cadastrapp.css b/js/extension/cadastrapp.css
index 4cf2baf..ed40cba 100644
--- a/js/extension/cadastrapp.css
+++ b/js/extension/cadastrapp.css
@@ -80,6 +80,7 @@
 }
 .cadastrapp .searchButtonsContainer {
   display: flex;
+  max-height: 48px !important;
   align-items: center;
 }
 .searchButtons{
@@ -115,10 +116,11 @@
   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;
diff --git a/js/extension/components/lists/StrList.jsx b/js/extension/components/lists/StrList.jsx
index e49fe2b..9d8fe28 100644
--- a/js/extension/components/lists/StrList.jsx
+++ b/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

From d34b2c8242c1b9304890ee8d815078d9a366f7f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Poincelet?= <loic.poincelet@jdev.fr>
Date: Wed, 22 Jan 2025 10:23:15 +0100
Subject: [PATCH 13/15] adapt parcels tab height according to content and tools
 display

---
 .../components/table/PlotsSelectionTable.jsx  | 36 +++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/js/extension/components/table/PlotsSelectionTable.jsx b/js/extension/components/table/PlotsSelectionTable.jsx
index 50cd7d4..836d955 100644
--- a/js/extension/components/table/PlotsSelectionTable.jsx
+++ b/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,44 @@ 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 size
+            const h3Height = document.querySelector("h3.pull-left").clientHeight;
+            const ulSize = document.querySelector(".plots-selection .nav").clientHeight;
+            
+            // 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 = "";            
+
+            const remainingHeight = parent.children.length > 2 ? Math.max(data.length * 35 + h3Height + ulSize + 30, 200) : Math.max(parentHeight - 220, 200); // 200px min
+            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"

From 2161fe38b27894c35105ff7bddc0b1799ce33d10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Poincelet?= <loic.poincelet@jdev.fr>
Date: Wed, 22 Jan 2025 14:41:04 +0100
Subject: [PATCH 14/15] get row height

---
 .../components/table/PlotsSelectionTable.jsx         | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/js/extension/components/table/PlotsSelectionTable.jsx b/js/extension/components/table/PlotsSelectionTable.jsx
index 836d955..a33ef1b 100644
--- a/js/extension/components/table/PlotsSelectionTable.jsx
+++ b/js/extension/components/table/PlotsSelectionTable.jsx
@@ -64,15 +64,21 @@ function PlotsSelectionTable({
         const calculateHeight = () => {
             const parent = document.querySelector(".right-side");
             const parentHeight = document.querySelector(".right-side").clientHeight;
-            // Header size
+            // 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 ? rowElement.style.height : 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 = "";            
 
-            const remainingHeight = parent.children.length > 2 ? Math.max(data.length * 35 + h3Height + ulSize + 30, 200) : Math.max(parentHeight - 220, 200); // 200px min
+            // 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);
         };
     

From 27276ddcf3570e40db8b58476376be9a3db45603 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Poincelet?= <loic.poincelet@jdev.fr>
Date: Wed, 22 Jan 2025 16:43:12 +0100
Subject: [PATCH 15/15] fix height calcul error

---
 js/extension/components/table/PlotsSelectionTable.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/js/extension/components/table/PlotsSelectionTable.jsx b/js/extension/components/table/PlotsSelectionTable.jsx
index a33ef1b..1ed57b5 100644
--- a/js/extension/components/table/PlotsSelectionTable.jsx
+++ b/js/extension/components/table/PlotsSelectionTable.jsx
@@ -69,11 +69,11 @@ function PlotsSelectionTable({
             const ulSize = document.querySelector(".plots-selection .nav").clientHeight;
             // Row height min 35px
             const rowElement = document.querySelector(".plots-selection .react-grid-Row");
-            const rowHeight = rowElement ? rowElement.style.height : 35;
+            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 = "";            
-
+            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.