geosolutions-it#8935 Improve UX of Visual Style Editor for WFS/Vector…

… layers
allyoucanmap · Feb 7, 2023 · f9d144d · f9d144d
1 parent 31abb53
commit f9d144d
Show file tree

Hide file tree

Showing 8 changed files with 507 additions and 63 deletions.
diff --git a/web/client/components/styleeditor/Fields.jsx b/web/client/components/styleeditor/Fields.jsx
@@ -35,7 +35,8 @@ export const fields = {
         value,
         onChange = () => {},
         disableAlpha,
-        format
+        format,
+        disabled
     }) => {
 
         // needed for slider
@@ -72,10 +73,12 @@ export const fields = {
 
         return (
             <PropertyField
-                label={label}>
+                label={label}
+                disabled={disabled}>
                 <ColorSelector
                     color={value}
                     line={config.stroke}
+                    disabled={disabled}
                     disableAlpha={config.disableAlpha || disableAlpha}
                     onChangeColor={(color) => color && onChange(color)}/>
             </PropertyField>
@@ -109,7 +112,8 @@ export const fields = {
     input: ({ label, value, config = {}, onChange = () => {}, disabled, placeholderId }) => {
         return (
             <PropertyField
-                label={label}>
+                label={label}
+                disabled={disabled}>
                 <FormGroup>
                     <InputGroup style={config?.maxWidth ? { maxWidth: config?.maxWidth } : {}}>
                         <DebouncedFormControl
@@ -133,7 +137,8 @@ export const fields = {
     multiInput: (props) => {
         return (
             <PropertyField
-                label={props.label}>
+                label={props.label}
+                disabled={props.disabled}>
                 <MultiInput {...props} />
             </PropertyField>
         );
@@ -206,15 +211,18 @@ export const fields = {
     model: ({
         label,
         value,
-        onChange
+        onChange,
+        disabled
     }) => {
         const [error, setError] = useState(false);
         return (
             <PropertyField
                 label={label}
                 invalid={error}
+                disabled={disabled}
             >
                 <ModelInput
+                    disabled={disabled}
                     label={label}
                     value={value}
                     onChange={onChange}

diff --git a/web/client/components/styleeditor/ModelInput.jsx b/web/client/components/styleeditor/ModelInput.jsx
@@ -19,11 +19,13 @@ const Glyphicon = tooltip(GlyphiconRB);
  * @memberof components.styleeditor
  * @name ModelInput
  * @class
+ * @prop {string} disabled href of the image
  * @prop {string} value href of the image
  * @prop {function} onChange returns the updated href value of the model
  * @prop {function} onError callback to check if the url is valid
  */
 function ModelInput({
+    disabled,
     value,
     onChange = () => {},
     onError = () => {}
@@ -49,6 +51,7 @@ function ModelInput({
             style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
             <FormGroup style={{ flex: 1 }}>
                 <DebouncedFormControl
+                    disabled={disabled}
                     placeholder="styleeditor.placeholderEnterModelUrl"
                     style={{ paddingRight: 26 }}
                     value={moduleUrl}

diff --git a/web/client/components/styleeditor/PropertyField.jsx b/web/client/components/styleeditor/PropertyField.jsx
@@ -16,13 +16,13 @@ function PropertyField({ children, label, tools, divider, invalid, warning, disa
     }
     const warningClassName = warning ? ' ms-symbolizer-value-warning' : '';
     const validationClassName = invalid ? ' ms-symbolizer-value-invalid' : '';
-    const disabledClassName = disabled ? ' ms-symbolizer-value-disabled' : '';
+    const disabledClassName = disabled ? ' ms-symbolizer-field-disabled' : '';
     return (
         <div
-            className="ms-symbolizer-field">
+            className={'ms-symbolizer-field' + disabledClassName}>
             <div className="ms-symbolizer-label"><Message msgId={label} /></div>
             <div
-                className={'ms-symbolizer-value' + validationClassName + disabledClassName + warningClassName}
+                className={'ms-symbolizer-value' + validationClassName + warningClassName}
                 // prevent drag and drop when interacting with property input
                 onDragStart={(event) => {
                     event.stopPropagation();

diff --git a/web/client/components/styleeditor/RulesEditor.jsx b/web/client/components/styleeditor/RulesEditor.jsx
@@ -211,6 +211,7 @@ const RulesEditor = forwardRef(({
                                     glyph: block.glyphAdd || block.glyph,
                                     visible: block.supportedTypes.indexOf(geometryType) !== -1,
                                     tooltipId: block.tooltipAddId,
+                                    disabled: block?.disableAdd ? block.disableAdd() : false,
                                     onClick: () => handleAdd({
                                         name: '',
                                         ruleId: uuidv1(),