Merge pull request #137 from devgateway/task/TOBACCO-1585/fix-default-values-in-post-filters

fix (TOBACCO-1585): clear default filters when changing select type. …

Author: timothygachengo

.changeset/itchy-toys-wait.md

@@ -0,0 +1,5 @@
+---
+"@devgateway/dvz-wp-commons": patch
+---
+
+Normalize default values in posts filter

packages/commons/src/Blocks.jsx

@@ -266,16 +266,19 @@ export class BlockEditWithFilters extends ComponentWithSettings {
 
     onDefaultCategoryChanged(value, filterType = 'multi-select', checked) {
         const { setAttributes, attributes: { defaultValues } } = this.props;
+        const normalizedValue = value === null || value === undefined || value === 'none'
+            ? value
+            : Number(value);
 
         if (filterType === 'multi-select') {
             if (!checked) {
-                setAttributes({ defaultValues: defaultValues.filter(i => i !== value) });
+                setAttributes({ defaultValues: defaultValues.filter(i => Number(i) !== normalizedValue) });
             } else {
-                setAttributes({ defaultValues: [...defaultValues, value] });
+                setAttributes({ defaultValues: [...defaultValues, normalizedValue] });
             }
         } else {
             // For single-select, 'checked' parameter is not used, 'value' is the selected value
-            setAttributes({ defaultValues: [value] });
+            setAttributes({ defaultValues: [normalizedValue] });
         }
     }
 
@@ -520,7 +523,7 @@ export class BlockEditWithFilters extends ComponentWithSettings {
                         </Text>
                         <SelectControl
                             options={[{ label: 'None', value: 'none' }, ...this.categoriesOptions()]}
-                            value={defaultValues[0]} onChange={(value) => {
+                            value={defaultValues[0] !== undefined ? String(defaultValues[0]) : 'none'} onChange={(value) => {
                                 this.onDefaultCategoryChanged(value, filterType);
                             }} />
                     </PanelBody>

plugins/wp-react-blocks-plugin/blocks/posts-filter/BlockEdit.jsx

@@ -84,7 +84,7 @@ class BlockEdit extends BlockEditWithFilters {
                             label={__('Filter Type')}
                             value={filterType}
                             onChange={(filterType) => {
-                                setAttributes({ filterType: filterType });
+                                setAttributes({ filterType: filterType, defaultValues: [] });
                             }}
                             options={[
                                 { label: "Single select", value: "single-select" },
@@ -99,7 +99,8 @@ class BlockEdit extends BlockEditWithFilters {
                             onChange={() => setAttributes({
                                 isCountryFilter: !isCountryFilter,
                                 isYearFilter: false,
-                                selectedYear: null
+                                selectedYear: null,
+                                defaultValues: []
                             })} />
 
                         <ToggleControl
@@ -109,7 +110,8 @@ class BlockEdit extends BlockEditWithFilters {
                             onChange={() => setAttributes({
                                 isYearFilter: !isYearFilter,
                                 isCountryFilter: false,
-                                selectedYear: null
+                                selectedYear: null,
+                                defaultValues: []
                             })} />
 
                     </PanelBody>

plugins/wp-react-blocks-plugin/blocks/posts-filter/BlockSave.jsx

@@ -28,6 +28,17 @@ const SaveComponent = (props) => {
         }
     } = props;
 
+    const normalizedDefaultValues = Array.isArray(defaultValues)
+        ? defaultValues
+            .map((value) => {
+                if (value === null || value === undefined || value === 'none') {
+                    return value;
+                }
+                const numericValue = Number(value);
+                return Number.isNaN(numericValue) ? value : numericValue;
+            })
+        : defaultValues;
+
     const divClass = {};
     const divStyles = {};
 
@@ -49,12 +60,12 @@ const SaveComponent = (props) => {
             data-all-none-same-behaviour={allNoneSameBehaviour}
             data-auto-apply={autoApply}
             data-taxonomy={taxonomy}
-            data-categories={categories.toString()}
+            data-categories={encodeURIComponent(JSON.stringify(categories))}
             data-is-country-filter={isCountryFilter}
             data-is-year-filter={isYearFilter}
             data-selected-year={selectedYear}
             data-type={type}
-            data-default-values={encodeURIComponent(JSON.stringify(defaultValues))}
+            data-default-values={encodeURIComponent(JSON.stringify(normalizedDefaultValues))}
             data-wordpress-source={wordpressSource}
             data-wordpress-source-type={wordpressSourceType}>
         </div>