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

LPoin · 2024-12-20T10:19:09Z

!! MERGE AFTER PR 202 FOR ISSUE-197 !!

Add a new icon in the toolbar for searching owner & co-owner
Modify positon of search owner & co-owner buttons
Search owner & co-owner panel unchanged
Modify TButton to accept custom icons

landryb · 2024-12-23T08:59:12Z

same as #203, needs plumbing to install the svg, otherwise you get a broken icon:

remark on the selected tool icon: it should be green not grey to hilight which one from owner/co-owner is active.. same thing for the new button color, it should be green if we're on the owner tools pane.

there's a weird behaviour, if you click on the (already selected) tool button, it .. comes back to the cadastrapp welcome pane ?

pierrejego · 2024-12-23T09:02:25Z

Not tested in integration for the moment, only in dev

Gaetanbrl · 2024-12-24T07:29:20Z

needs plumbing to install the svg

We find build patch to includes SVG files in build process. I dunno if they finally works well....

mapstore2-cadastrapp/build/extension/prod-webpack.config.js

Lines 31 to 39 in e2f87a8

    
           const fileLoader = { 
        
               test: /\.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/, 
        
               use: [{ 
        
                   loader: 'file-loader', 
        
                   options: { 
        
                       name: "[name].[ext]" 
        
                   } 
        
               }] 
        
           };

For this pull, we can set image source from svg data string.

Gaetanbrl

J'opterai pour une autre manière de gérer l'icône avec une image en n'utilsant pas uniquement la clé glyph (pour moi réservée dans MapStore à une valeur de glyphicon).

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

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

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

js/extension/plugins/cadastrapp/SearchSection.jsx

LPoin · 2024-12-24T09:36:46Z

Tested in integration.
Mapstore 2023.02

SVG fixed
"if you click on the (already selected) tool button, it .. comes back to the cadastrapp welcome pane", it's the current behaviour, if you click on en tool already selected, it close the panel and return to welcome panel.

landryb · 2024-12-26T07:58:36Z

For this pull, we can set image source from svg data string.

im not a fan of this solution since it makes it very hard to (eventually) override the icon.. we should be able to use svgs in extensions, im surprised there's no working example elsewhere ?

i dunno if its my local build, but it seems this PR/ranch includes #202 since i get to test both when building this branch... which is perfect from a testing POV, not sure from a project mgmt POV :)

the ppl search icon renders okay here, there's just a small inconsistency in title positioning wrt icons in the pane (above/below):

vs

that makes the display weird when you switch from one to the other.

"if you click on the (already selected) tool button, it .. comes back to the cadastrapp welcome pane", it's the current behaviour, if you click on en tool already selected, it close the panel and return to welcome panel.

ah, maybe that's the current behaviour, right. But ... from an UX pov, isn't it... super confusing ? :)

Gaetanbrl · 2024-12-27T07:33:23Z

im surprised there's no working example elsewhere ?

Same for me. But SVG's build config seems only apply in mapstore2-cadatrapp repo.

This works well in dev mode but not after extension build process (due to different build config / process).

it makes it very hard to (eventually) override the icon

You mean if you want to override via the extensions directory (datadir) ?

Gaetanbrl · 2024-12-27T07:37:06Z

(due to different build config / process).

I suppose webpack config on simple npm:start use mapstore2 config with a SVG management :

...and extension build (to create zip) use a different config :

https://github.com/georchestra/mapstore2-cadastrapp/blob/master/package.json#L113

Note that npm ext:start should runs mapstore + extension locally in a state close to production env. But this not works correctly with mapstore2-cadastrapp...

landryb · 2024-12-27T09:29:50Z

You mean if you want to override via the extensions directory (datadir) ?

yes, since here the extension is unpacked in the georchestra datadir, having the icon as an asset/svg file makes it easy to override/historize in git.

...and extension build (to create zip) use a different config :
* https://github.com/georchestra/mapstore2-cadastrapp/blob/master/package.json#L113

now that's a good catch. with that local diff on top of this branch, and the owners.svg file in the toplevel assets subdir:

[27/12 10:15] [email protected]:/data/src/georchestra/mapstore2-cadastrapp $git diff build/extension/prod-webpack.config.js 
diff --git a/build/extension/prod-webpack.config.js b/build/extension/prod-webpack.config.js
index bf61990..73431f8 100644
--- a/build/extension/prod-webpack.config.js
+++ b/build/extension/prod-webpack.config.js
@@ -12,6 +12,7 @@ const plugins = [
     new CopyPlugin([
         { from: path.resolve(__dirname, "..", "..", "assets", "translations"), to: "translations" },
+        { from: path.resolve(__dirname, "..", "..", "assets", "owners.svg"), to: "owners.svg" },
         { from: path.resolve(__dirname, "..", "..", "assets", "index.json"), to: "index.json" }

     ]),
     new ZipPlugin({
         filename: `${name}.zip`,

and building the extension:

[27/12 10:15] [email protected]:/data/src/georchestra/mapstore2-cadastrapp $npm install && npm run ext:build

the resulting zip contains the svg file at the toplevel dir:

[27/12 10:22] [email protected]:/data/src/georchestra/mapstore2-cadastrapp $unzip -l dist/Cadastrapp.zip |grep svg
     5551  2024-12-27 10:21   spritesheet.svg
   444379  2024-12-27 10:21   fontawesome-webfont.svg
      570  2024-12-27 10:21   symbolMissing.svg
     4322  2024-12-27 10:21   owners.svg

that could be used/reached from the extension code probably the same way how translations/index.json is imported/used. Or find the right magic so that the svg is copied under assets/img within the zip ?

btw i think the same thing/construct should be done to install the svg in #204 for the extension icon. instead of inlining the svg in a js file....

Gaetanbrl · 2024-12-27T09:53:17Z

the resulting zip contains the svg file at the toplevel dir:

Indeed, we have this behvior with SVG but it's a real ngithmare :

in dev mode -> All works fine if we locate SVG file in js/extension/assets folder
we start build
SVG is at the top level and component (.jsx) -> No image exists under this path

So, to avoid to disrupt webpack process and ease next / potential upgrade (if process changes) i'd suggest to use SVG string (juste copy / past SVG to constant file seems easy).

Or find the right magic so that the svg is copied under assets/img within the zip ?

That's the question we discussed this morning with @LPoin ...

…cadastrapp

LPoin · 2025-01-03T16:39:59Z

About our SVG issue :

const fileLoader = {
    test: /\.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/,
    use: [{
        loader: 'file-loader',
        options: {
            name: "[name].[ext]"
        }
    }]
};

It treats svg as modules and places them in the defined output, in this case the root.

Tested solutions :

Add our custom icon in glyphIcons : need external app to include our custom svg, but depprecated (bootstrap 3 not maintained).
Add external loader : don't work neither.
Modify fileLoader in prod-webpack.config.js in build/extension (file used for npm run ext:build) to put svg in "asset/img/[name].[ext]". The path is not recognised once the build is complete.

Current test :

Modify prod-webpack.config.js to create new paths according to relative path of SVG file imported.

LPoin · 2025-01-07T09:42:16Z

I try to modify prod-webpack.config.js (used in ext:build run) to fiw svg issue.
Webpack is now in version 5.54.0 for 3 months and many elements don't works as before.
I modify fileLoader to

const fileLoader = {
    test: /\.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/,
    type: 'asset/resource', // file loader for v5 webpack
    generator: {
        filename: 'assets/[name][ext]',
        publicPath: '/',
    },
};

as it work in V5.
I have to manage polyfills as webpack 5 removed automatics polyfills for node.js.
And I add alias to manage import with alias in files and supported extensions

alias: {
            "@mapstore/patcher": path.resolve(__dirname, '..', '..', "node_modules", "@mapstore", "patcher"),
            "@mapstore": path.resolve(__dirname, '..', '..', "MapStore2", "web", "client"),
            "@js": path.resolve(__dirname, '..', '..', "js"),
        },
extensions: ['.js', '.jsx', '.json']

With all these changes, build is fixed, svg are stored in the right place but I still have an error

It might need modifications elsewhere.
I'll create an issue on mapStore-Extension linked to this one.

LPoin · 2025-01-08T16:48:41Z

An issue have been created in mapstore-extension here to solve the svg problem.
We could use the current solution in this PR and in PR-204 and I create a new issue to solve the problem after mapstore-extension solution.

pierrejego · 2025-01-13T14:06:51Z

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

+   id="svg5"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   sodipodi:docname="interface__cadastrApp.svg"
+   inkscape:export-filename="C:\Users\Agathe\Desktop\Cadastrapp\Refonte_interface\Cadastrapp__interfaceSearchProp.svg"


can it be removed from svg ?

pierrejego · 2025-01-13T14:17:01Z

Conflict need to be merge

LPoin added 5 commits December 16, 2024 16:49

modify selection tools position to add them in search panel

d94635a

Set default tool at POINT and move uf under search panel in toolbar

b200d9a

Modify Cadastrapp button icon

ee75860

Add USERS search tool and group owner and co-owners

8f0a5f6

remove cadastrapp icon to create a specific branch for issue 175

4e423cd

pierrejego self-requested a review December 23, 2024 09:00

pierrejego self-assigned this Dec 23, 2024

pierrejego added this to the v2.2.2 milestone Dec 23, 2024

pierrejego marked this pull request as draft December 23, 2024 09:01

LPoin added 2 commits December 23, 2024 16:42

fix custom icon svg build import

19b223d

lint

bb1d384

change owners icon colors

a72cace

Gaetanbrl reviewed Dec 24, 2024

View reviewed changes

LPoin added 3 commits December 24, 2024 11:37

modify TButton custom and fix class name

d069661

uncomment code

e602d6d

fix selection tool by default

db8340f

modify plot search icon color to maintain the overall consistency of …

6ee6f6d

…cadastrapp

LPoin mentioned this pull request Jan 7, 2025

SVG importation fail geosolutions-it/MapStoreExtension#63

Open

pierrejego approved these changes Jan 13, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

LPoin commented Dec 20, 2024

landryb commented Dec 23, 2024

pierrejego commented Dec 23, 2024

Gaetanbrl commented Dec 24, 2024 •

edited

Loading

Gaetanbrl left a comment •

edited

Loading

LPoin commented Dec 24, 2024

landryb commented Dec 26, 2024

Gaetanbrl commented Dec 27, 2024

Gaetanbrl commented Dec 27, 2024 •

edited

Loading

landryb commented Dec 27, 2024

Gaetanbrl commented Dec 27, 2024 •

edited

Loading

LPoin commented Jan 3, 2025

LPoin commented Jan 7, 2025

LPoin commented Jan 8, 2025 •

edited

Loading

pierrejego Jan 13, 2025

pierrejego commented Jan 13, 2025

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

Are you sure you want to change the base?

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

Conversation

LPoin commented Dec 20, 2024

landryb commented Dec 23, 2024

pierrejego commented Dec 23, 2024

Gaetanbrl commented Dec 24, 2024 • edited Loading

Gaetanbrl left a comment • edited Loading

Choose a reason for hiding this comment

LPoin commented Dec 24, 2024

landryb commented Dec 26, 2024

Gaetanbrl commented Dec 27, 2024

Gaetanbrl commented Dec 27, 2024 • edited Loading

landryb commented Dec 27, 2024

Gaetanbrl commented Dec 27, 2024 • edited Loading

LPoin commented Jan 3, 2025

LPoin commented Jan 7, 2025

LPoin commented Jan 8, 2025 • edited Loading

pierrejego Jan 13, 2025

Choose a reason for hiding this comment

pierrejego commented Jan 13, 2025

Gaetanbrl commented Dec 24, 2024 •

edited

Loading

Gaetanbrl left a comment •

edited

Loading

Gaetanbrl commented Dec 27, 2024 •

edited

Loading

Gaetanbrl commented Dec 27, 2024 •

edited

Loading

LPoin commented Jan 8, 2025 •

edited

Loading