ISSUE-199 - Grouping of icons to search for an owner/co-owner

assets/translations/data.en-US.json

@@ -181,6 +181,9 @@
             "coProprietaire": {
                 "tooltip": "Co-owner"
             },
+            "rechercheProprietaires": {
+                "tooltip": "Owner and co-owner"
+            },
             "bordereauparcellaire": {
                 "title": "Plot information",
                 "basemap": "Choose baseMap",

assets/translations/data.fr-FR.json

@@ -181,6 +181,9 @@
             "coProprietaire": {
                 "tooltip": "Co-propriétaire"
             },
+            "rechercheProprietaires": {
+                "tooltip": "Propiétaires et co-propiétaires"
+            },
             "bordereauparcellaire": {
                 "title": "Bordereau parcellaire",
                 "basemap": "Fond de plan",

js/extension/cadastrapp.css

@@ -336,8 +336,12 @@ input.request-obj-double.form-control{
   user-select: text;
 }
 
-.cadstrap_selectionToolsButton {
+.cadastrapp_selectionToolsButton {
   display: flex;
   justify-content: center;
   margin: 10px 0 10px 0;
-}
+}
+
+.btn-active .ownersIcon {
+  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(140deg) brightness(105%) contrast(104%);
+}

js/extension/components/search/PlotSearch.jsx

@@ -21,7 +21,7 @@ export default function PlotsSearch({onSearch = () => {}, loading}) {
     return (
         <div className="plots-search">
             <h3><Message msgId={'cadastrapp.parcelle.title'}/></h3>
-            <div className='cadstrap_selectionToolsButton'>
+            <div className="cadastrapp_selectionToolsButton">
                 <SelectionTools foncier = {false}/>
             </div>
             <Tabs

js/extension/constants.js

@@ -23,6 +23,7 @@ export const SELECTION_TYPES = {
  */
 export const SEARCH_TOOLS = {
     PLOT: "PLOT",
+    OWNERS: "OWNERS",
     OWNER: "OWNER",
     COOWNER: "COOWNER"
 };

js/extension/plugins/cadastrapp/SearchSection.jsx

@@ -15,6 +15,7 @@ import { search, ownersSearch, clearOwners } from '../../actions/cadastrapp';
 import {
     SEARCH_TOOLS
 } from '../../constants';
+import SearchTools from './toolbar/SearchTools';
 
 const mapSearchLoadingToProps = createSelector(
     searchLoadingSelector,
@@ -60,12 +61,25 @@ export default function SearchSection({
     case SEARCH_TOOLS.PLOT:
         return (<PlotsSearch
         />);
+    case SEARCH_TOOLS.OWNERS:
     case SEARCH_TOOLS.OWNER:
-        return (<><OwnersSearch
-        /><OwnersList /></>);
+        return (
+            <>
+                <div className="cadastrapp_selectionToolsButton">
+                    <SearchTools owners/>
+                </div>
+                <OwnersSearch/>
+                <OwnersList />
+            </>);
     case SEARCH_TOOLS.COOWNER:
-        return (<><CoownershipSearch
-        /><OwnersList /></>);
+        return (
+            <>
+                <div className="cadastrapp_selectionToolsButton">
+                    <SearchTools owners/>
+                </div>
+                <CoownershipSearch/>
+                <OwnersList />
+            </>);
 
     default:
         return null;

js/extension/plugins/cadastrapp/toolbar/SearchTools.jsx

@@ -7,19 +7,26 @@ import TButton from './TButton';
 import { connect } from 'react-redux';
 import { Tooltip } from "react-bootstrap";
 import Message from "@mapstore/components/I18N/Message";
+import { ownersIcon } from './toolbarIcons';
 
 /*
 ["zoom-to", "search-plots", "Plots Search"],
 ["search", "search-owners", "Owners Search"],
 ["user", "coownership", "Co-ownership data Search"],
 
  */
+const svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(ownersIcon)}`;
 const tooltip = (id, msgId) => <Tooltip id={"id"}><Message msgId={msgId}/></Tooltip>;
 const BUTTONS_SETTINGS = {
     [SEARCH_TOOLS.PLOT]: {
         glyph: "search",
         tooltip: tooltip("search", "cadastrapp.parcelle.tooltip")
     },
+    [SEARCH_TOOLS.OWNERS]: {
+        imgSrc: svgDataUrl,
+        cls: "ownersIcon",
+        tooltip: tooltip("users", "cadastrapp.rechercheProprietaires.tooltip")
+    },
     [SEARCH_TOOLS.OWNER]: {
         glyph: "user",
         tooltip: tooltip("user", "cadastrapp.proprietaire.tooltip")
@@ -39,12 +46,16 @@ const BUTTONS_SETTINGS = {
  * Implements Search tools buttons.
  * They are mutually exclusive and allow to select the needed search form.
  */
-function SearchTools({ authLevel = {}, currentTool, onClick = () => { } }) {
+function SearchTools({ authLevel = {}, currentTool, onClick = () => { }, owners = false }) {
     const { isCNIL1, isCNIL2 } = authLevel;
-
+    if (currentTool === "OWNERS") currentTool = "OWNER";
     return <>
         {
             Object.keys(SEARCH_TOOLS)
+                .filter(k => owners ?
+                    [SEARCH_TOOLS.OWNER, SEARCH_TOOLS.COOWNER].includes(k) :
+                    [SEARCH_TOOLS.PLOT, SEARCH_TOOLS.OWNERS].includes(k)
+                )
                 .filter(k => {
                     if (isCNIL1 || isCNIL2) {
                         return true;
@@ -55,7 +66,10 @@ function SearchTools({ authLevel = {}, currentTool, onClick = () => { } }) {
                 .map(toolName => {
                     const isActive = toolName === currentTool;
                     return (<TButton
-                        bsStyle={isActive && "active"}
+                        bsStyle={isActive && toolName !== "PLOT"? "success"
+                            : (["OWNER", "COOWNER"].includes(currentTool) && toolName === "OWNERS") || (toolName === "PLOT" && ["PLOT"].includes(currentTool))
+                                ? "active"
+                                : ""}
                         {...BUTTONS_SETTINGS[toolName]}
                         onClick={() => isActive ? onClick() : onClick(toolName)}
                     />);

js/extension/plugins/cadastrapp/toolbar/TButton.jsx

@@ -10,16 +10,22 @@ import {
  */
 export default ({
     glyph,
+    imgSrc,
+    cls,
     bsStyle,
     tooltip = <span></span>,
+    isCustom,
     ...props
 }) => {
     return (<OverlayTrigger placement="left" overlay={tooltip}>
         <Button
             {...props}
             bsStyle={bsStyle || "primary"}
             className="square-button">
-            <Glyphicon glyph={glyph} />
+                {imgSrc ? 
+                    <img src={imgSrc} className={cls} /> : 
+                    <Glyphicon glyph={glyph} />
+                }
         </Button>
     </OverlayTrigger>);
 };

js/extension/plugins/cadastrapp/toolbar/toolbarIcons.js

@@ -0,0 +1,58 @@
+export const ownersIcon = `<svg
+   width="5.7034912mm"
+   height="7.2020416mm"
+   viewBox="0 0 5.7034912 7.2020417"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   sodipodi:docname="interface__cadastrApp.svg"
+   inkscape:export-xdpi="150"
+   inkscape:export-ydpi="150"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="false"
+     lock-margins="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="0.76666667"
+     inkscape:cx="1211.7391"
+     inkscape:cy="500.21739"
+     inkscape:window-width="2400"
+     inkscape:window-height="1271"
+     inkscape:window-x="2391"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg5"
+     inkscape:showpageshadow="2"
+     inkscape:deskcolor="#d1d1d1" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:groupmode="layer"
+     id="g40097"
+     inkscape:label="search_Proprietaire"
+     style="display:inline"
+     sodipodi:insensitive="true"
+     transform="translate(-354.13348,-81.762931)">
+    <path
+       style="display:inline;fill:#ffffff;stroke-width:0.0116178"
+       d="m 356.51262,88.949055 c 0.0242,-0.0092 0.0609,-0.02812 0.0813,-0.04203 0.0205,-0.01393 0.26562,-0.252922 0.54473,-0.531104 l 0.50748,-0.505777 0.10246,0.04738 c 0.19775,0.09144 0.38378,0.131578 0.61364,0.132395 0.40834,0.0014 0.75283,-0.140774 1.04089,-0.429753 0.22158,-0.222276 0.34233,-0.44406 0.40735,-0.74813 0.0356,-0.166561 0.0353,-0.418105 -6.9e-4,-0.588017 -0.12782,-0.604052 -0.60492,-1.056981 -1.21988,-1.158072 -0.14312,-0.02352 -0.3846,-0.01773 -0.52402,0.01257 -0.70949,0.15423 -1.2065,0.796189 -1.16908,1.510059 0.0109,0.208124 0.0586,0.401133 0.14087,0.569644 l 0.0395,0.08096 -0.51576,0.516993 c -0.59172,0.593134 -0.58042,0.578438 -0.58042,0.755155 0,0.08241 0.005,0.109707 0.0308,0.164934 0.0374,0.08051 0.11219,0.157658 0.18977,0.195821 0.0713,0.03509 0.23906,0.04425 0.31097,0.01696 z m 1.62785,-1.458122 c -0.56871,-0.143378 -0.87055,-0.768546 -0.62644,-1.297485 0.0961,-0.208224 0.25009,-0.362877 0.46007,-0.462053 0.13792,-0.06514 0.2157,-0.08119 0.39398,-0.08123 0.18352,-4.5e-5 0.28466,0.0232 0.43023,0.09894 0.56829,0.295658 0.68024,1.065291 0.21882,1.504269 -0.12902,0.12274 -0.25626,0.194532 -0.42165,0.237903 -0.11724,0.03075 -0.33235,0.03058 -0.45501,-3.46e-4 z m -1.66733,-0.676804 c -0.0271,-0.190118 -0.003,-0.5127 0.0538,-0.723209 0.19166,-0.709531 0.79323,-1.270961 1.49446,-1.39473 0.0597,-0.01053 0.12148,-0.02164 0.1373,-0.02469 l 0.0288,-0.0055 -0.0288,-0.02275 c -0.087,-0.06891 -0.25732,-0.17279 -0.40053,-0.244365 l -0.16265,-0.08128 -0.15684,0.07541 c -0.29951,0.143994 -0.47721,0.186184 -0.7842,0.186184 -0.17133,0 -0.23043,-0.0046 -0.32702,-0.02539 -0.16198,-0.03489 -0.3349,-0.09686 -0.48328,-0.173237 l -0.12484,-0.06426 -0.10171,0.04859 c -0.6381,0.304851 -1.07338,0.789315 -1.32187,1.471203 -0.0745,0.20446 -0.18468,0.735422 -0.15829,0.762829 0.0113,0.0117 0.27272,0.07004 0.50132,0.111847 0.5265,0.09627 1.21404,0.163988 1.66798,0.164278 l 0.17508,1.32e-4 -0.009,-0.06099 z m 0.42382,-2.570351 c 0.25545,-0.05305 0.4788,-0.17457 0.64981,-0.353562 0.14841,-0.155348 0.25648,-0.343967 0.31545,-0.55063 0.0364,-0.127663 0.0498,-0.339472 0.0308,-0.490035 -0.0688,-0.546994 -0.52038,-1.003326 -1.06433,-1.0755 -0.39174,-0.05198 -0.78049,0.07999 -1.05549,0.358302 -0.20996,0.212495 -0.32906,0.460811 -0.35817,0.74677 -0.0639,0.628091 0.32199,1.187657 0.93037,1.348914 0.11754,0.03116 0.43385,0.04018 0.55155,0.01575 z"
+       id="path40091"
+       inkscape:export-filename="./owners.svg"
+       inkscape:export-xdpi="150"
+       inkscape:export-ydpi="150" />
+  </g>
+</svg>`;