#9219: Feature grid in context creator (#9262)

geosolutions-it · Jul 3, 2023 · 3df202c · 3df202c
1 parent 894e88a
commit 3df202c
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 59 deletions.
diff --git a/web/client/components/contextcreator/ContextCreator.jsx b/web/client/components/contextcreator/ContextCreator.jsx
@@ -198,7 +198,7 @@ export default class ContextCreator extends React.Component {
             {
                 "name": "TOC",
                 "overrides": {
-                    "cfg": { activateQueryTool: false }
+                    "cfg": { activateQueryTool: true }
 
                 }
             },
@@ -235,7 +235,16 @@ export default class ContextCreator extends React.Component {
             "Redo",
             "Expander",
             "FilterLayer",
-            "GlobeViewSwitcher"
+            "GlobeViewSwitcher",
+            {
+                "name": "FeatureEditor",
+                "overrides": {
+                    "cfg": {
+                        // To forcefully hide edit feature for all user roles
+                        editingAllowedRoles: []
+                    }
+                }
+            }
         ],
         ignoreViewerPlugins: false,
         allAvailablePlugins: [],

diff --git a/web/client/plugins/featuregrid/FeatureEditor.jsx b/web/client/plugins/featuregrid/FeatureEditor.jsx
@@ -189,63 +189,65 @@ const FeatureDock = (props = {
     const toolbarItems = items.filter(({target}) => target === 'toolbar');
 
     return (
-        <Dock {...dockProps} onSizeChange={size => { props.onSizeChange(size, dockProps); }}>
-            {props.open &&
-        <ContainerDimensions>
-            { ({ height }) =>
-            // added height to solve resize issue in firefox, edge and ie
-                <BorderLayout
-                    className="feature-grid-container"
-                    key={"feature-grid-container"}
-                    height={height - (42 + 32)}
-                    header={getHeader({
-                        toolbarItems,
-                        hideCloseButton: props.hideCloseButton,
-                        hideLayerTitle: props.hideLayerTitle,
-                        pluginCfg: props.pluginCfg
-                    })}
-                    columns={getPanels(props.tools)}
-                    footer={getFooter(props)}>
-                    {getDialogs(props.tools)}
-                    <Grid
-                        showCheckbox={props.showCheckbox}
-                        editingAllowedRoles={props.editingAllowedRoles}
-                        customEditorsOptions={props.customEditorsOptions}
-                        autocompleteEnabled={props.autocompleteEnabled}
-                        url={props.url}
-                        typeName={props.typeName}
-                        filterRenderers={getFilterRenderers(props.describe)}
-                        enableColumnFilters={props.enableColumnFilters}
-                        emptyRowsView={getEmptyRowsView()}
-                        focusOnEdit={props.focusOnEdit}
-                        newFeatures={props.newFeatures}
-                        changes={props.changes}
-                        mode={props.mode}
-                        select={props.select}
-                        key={"feature-grid-container"}
-                        columnSettings={props.attributes}
-                        fields={props.fields}
-                        gridEvents={props.gridEvents}
-                        pageEvents={props.pageEvents}
-                        describeFeatureType={props.describe}
-                        features={props.features}
-                        minHeight={600}
-                        tools={props.gridTools}
-                        pagination={props.pagination}
-                        pages={props.pages}
-                        virtualScroll={virtualScroll}
-                        maxStoredPages={props.maxStoredPages}
-                        vsOverScan={props.vsOverScan}
-                        scrollDebounce={props.scrollDebounce}
-                        size={props.size}
-                        actionOpts={{maxZoom}}
-                        dateFormats={props.dateFormats}
-                    />
-                </BorderLayout> }
+        <div className={"feature-grid-wrapper"}>
+            <Dock  {...dockProps} onSizeChange={size => { props.onSizeChange(size, dockProps); }}>
+                {props.open &&
+                    (<ContainerDimensions>
+                        { ({ height }) =>
+                        // added height to solve resize issue in firefox, edge and ie
+                            <BorderLayout
+                                className="feature-grid-container"
+                                key={"feature-grid-container"}
+                                height={height - (42 + 32)}
+                                header={getHeader({
+                                    toolbarItems,
+                                    hideCloseButton: props.hideCloseButton,
+                                    hideLayerTitle: props.hideLayerTitle,
+                                    pluginCfg: props.pluginCfg
+                                })}
+                                columns={getPanels(props.tools)}
+                                footer={getFooter(props)}>
+                                {getDialogs(props.tools)}
+                                <Grid
+                                    showCheckbox={props.showCheckbox}
+                                    editingAllowedRoles={props.editingAllowedRoles}
+                                    customEditorsOptions={props.customEditorsOptions}
+                                    autocompleteEnabled={props.autocompleteEnabled}
+                                    url={props.url}
+                                    typeName={props.typeName}
+                                    filterRenderers={getFilterRenderers(props.describe)}
+                                    enableColumnFilters={props.enableColumnFilters}
+                                    emptyRowsView={getEmptyRowsView()}
+                                    focusOnEdit={props.focusOnEdit}
+                                    newFeatures={props.newFeatures}
+                                    changes={props.changes}
+                                    mode={props.mode}
+                                    select={props.select}
+                                    key={"feature-grid-container"}
+                                    columnSettings={props.attributes}
+                                    fields={props.fields}
+                                    gridEvents={props.gridEvents}
+                                    pageEvents={props.pageEvents}
+                                    describeFeatureType={props.describe}
+                                    features={props.features}
+                                    minHeight={600}
+                                    tools={props.gridTools}
+                                    pagination={props.pagination}
+                                    pages={props.pages}
+                                    virtualScroll={virtualScroll}
+                                    maxStoredPages={props.maxStoredPages}
+                                    vsOverScan={props.vsOverScan}
+                                    scrollDebounce={props.scrollDebounce}
+                                    size={props.size}
+                                    actionOpts={{maxZoom}}
+                                    dateFormats={props.dateFormats}
+                                />
+                            </BorderLayout> }
 
-        </ContainerDimensions>
-            }
-        </Dock>);
+                    </ContainerDimensions>)
+                }
+            </Dock>
+        </div>);
 };
 export const selector = createStructuredSelector({
     open: state => get(state, "featuregrid.open"),

diff --git a/web/client/themes/default/less/featuregrid.less b/web/client/themes/default/less/featuregrid.less
@@ -48,6 +48,17 @@
     cursor: auto;
 }
 
+.feature-grid-wrapper {
+    // Override dock style
+    > div {
+        position: unset !important;
+        > div {
+            position: absolute !important;
+            z-index: 1060 !important;
+        }
+    }
+}
+
 // **************
 // FeatureEditorFallback Layout
 // **************
@@ -63,4 +74,4 @@
         align-items: center;
         position: absolute;
     }
-}
+}