Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 15 commits into from
Jan 23, 2025
Merged

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

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
3dae27e
Improve Parcelles tabs css
LPoin Dec 23, 2024
9225a8a
Modify Search Buttons and Search Plot disply
LPoin Dec 26, 2024
89bc0c5
modif plots parcelles
LPoin Dec 30, 2024
e184c88
clean CSS for plots search and add button
LPoin Dec 31, 2024
110d2e8
css for owners & co-owners search buttons
LPoin Dec 31, 2024
2c1804f
fix index of removed plot
LPoin Jan 2, 2025
1d2ae50
fix plot selection and fix delete when tabs > max tab
LPoin Jan 2, 2025
2d13cd9
fix selection plot after removing one
LPoin Jan 8, 2025
29edca4
clean code
LPoin Jan 8, 2025
8290d6b
change classname props to cls to avoid react problem
LPoin Jan 8, 2025
cc56eaf
improve DeletePlot function
LPoin Jan 9, 2025
80d60ab
fix plotSearch's height and search buttons position
LPoin Jan 17, 2025
d34b2c8
adapt parcels tab height according to content and tools display
LPoin Jan 22, 2025
2161fe3
get row height
LPoin Jan 22, 2025
27276dd
fix height calcul error
LPoin Jan 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 36 additions & 4 deletions js/extension/cadastrapp.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,17 @@
.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;
align-items: center;
}
.searchButtons{
float: none !important;
margin: 10px;
margin-left: auto;
}
.cadastrapp .plots-selection {
width: 100%;
Expand All @@ -94,8 +102,12 @@
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;
Expand All @@ -108,6 +120,26 @@
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 {
width: 100%;
Expand Down
46 changes: 30 additions & 16 deletions js/extension/components/PlotSelection.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,58 +57,72 @@ 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 ({
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));
Copy link

@Gaetanbrl Gaetanbrl Jan 8, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can also (other solution) just pass the delete func as property to reduce function complexity:

<DeletePlot delete={() => onTabDelete(index + (MAX_TABS - 1))}/>

Function :

function DeletePlot ({
    delete = () => {},
}) {    
    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();
                    delete();
                    }}>
                <Glyphicon glyph="remove" />
            </ConfirmButton>
        </OverlayTrigger>
    )
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i dont fully grasp the syntax/logic, but less complexity is always better :)

}}>
<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 index={index} onTabDelete={onTabDelete} MAX_TABS={MAX_TABS}/>
</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 index={index} isDrop={true} onTabDelete={onTabDelete} MAX_TABS={MAX_TABS}/>
</MenuItem>
))}
</NavDropdown>
Expand Down
2 changes: 1 addition & 1 deletion js/extension/components/lists/ReferencesList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
25 changes: 14 additions & 11 deletions js/extension/components/search/CoownershipSearch.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
16 changes: 10 additions & 6 deletions js/extension/components/search/OwnersSearch.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
15 changes: 9 additions & 6 deletions js/extension/components/search/PlotSearch.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,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
className="searchButtons"
loading={loading}
valid={isSearchValid(currentTab, searchState[currentTab])}
onClear={() => resetFormState(currentTab)}
onSearch={() => onSearch(currentTab, searchState[currentTab])}
/>
</div>
</div>
);
}
4 changes: 2 additions & 2 deletions js/extension/components/search/SearchButtons.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
LPoin marked this conversation as resolved.
Show resolved Hide resolved
{loading ? <Spinner spinnerName="circle" noFadeIn overrideSpinnerClassName="spinner" /> : null}
<Button
onClick={onClear}
Expand Down
2 changes: 1 addition & 1 deletion js/extension/plugins/cadastrapp/PlotSelection.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const PlotsSelection = connect((state) => ({
removePlots: removePlots,
zoomToSelection: zoomToSelection,
showLandedPropertyInformationByParcelle,
onTabDelete: () => removePlotSelection(),
onTabDelete: (index) => removePlotSelection(index),
onSaveAsAnnotation: saveAsAnnotation
})(PS);

Expand Down