fix: object browser limit is now respected, add logic for deselection…

… and conditional closing of ob in some cases (#363) * fix: object browser limit is now respected, add logic for deselection and conditional closing of ob in some cases * docs: added Release docs and infos * fix: remove stray console.log --------- Co-authored-by: Piero Nicolli <[email protected]>
RedTurtle · Oct 13, 2023 · f6e9c35 · f6e9c35
1 parent 4fea6cd
commit f6e9c35
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 12 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -6,12 +6,19 @@
 <!--- -----------------------------------------------------------------
   Esempio:
   ---------------------------------------------------------------------
+
 ## Versione 7.10.9 (12/09/2023)
+
 ### Migliorie
+
 - Fissato il layout di stampa per pagine con Accordion
+
 ### Novità
+
 - Nuovo blocco "Informazioni" [`Istruzioni`](https://docs.google.com/document/d/1SThuxa_ah0BuNXukWs564kKPfprK41WLQE8Mome-0xg/edit#heading=h.7ty110jumgmd)
+
 ### Fix
+
 - il numero di telefono dentro card ufficio adesso è visibile anche senza indirizzo
 -->
 
@@ -20,22 +27,31 @@
  ----------------------------------------------------------------------
 
 ## Versione X.X.X (dd/mm/yyyy)
+
 ### Migliorie
+
 - ...
 
 ### Novità
+
 - ...  [`Istruzioni`](url della documentazione relativa alla novità)
 
 ### Fix
+
 - ...
 -->
 
 ## Versione X.X.X (dd/mm/yyyy)
 
+### Migliorie
+
+- Migliorato il comportamento alla selezione/deselezione degli elementi multipli nel componente Object Browser
+
 ### Fix
 
 - Cambiato il colore del bordo dell'icona Ricerca nell'header dei sottositi per garantire il contrasto per accessibilità
 - Non mostrare la fascia colorata del footer di un sottosito quando questo non è compilato
+- Risolto un bug nel componente Object Browser che permetteva di selezionare più elementi di quelli consentiti
 
 ## Versione 8.7.8 (12/10/2023)
 

diff --git a/src/customizations/volto/components/manage/Sidebar/ObjectBrowserBody.jsx b/src/customizations/volto/components/manage/Sidebar/ObjectBrowserBody.jsx
@@ -247,7 +247,6 @@ class ObjectBrowserBody extends Component {
   onSelectItem = (item) => {
     const url = item['@id'];
     const { block, data, mode, dataName, onChangeBlock } = this.props;
-
     const updateState = (mode) => {
       switch (mode) {
         case 'image':
@@ -312,8 +311,18 @@ class ObjectBrowserBody extends Component {
   };
 
   isSelectable = (item) => {
-    return this.props.selectableTypes.length > 0
-      ? this.props.selectableTypes.indexOf(item['@type']) >= 0
+    const { maximumSelectionSize, data, mode, selectableTypes } = this.props;
+    if (
+      maximumSelectionSize &&
+      data &&
+      mode === 'multiple' &&
+      maximumSelectionSize <= data.length
+    )
+      return data.some(
+        (d) => flattenToAppURL(d['@id']) === flattenToAppURL(item['@id']),
+      );
+    return selectableTypes.length > 0
+      ? selectableTypes.indexOf(item['@type']) >= 0
       : true;
   };
 
@@ -331,16 +340,24 @@ class ObjectBrowserBody extends Component {
           !this.props.maximumSelectionSize ||
           this.props.mode === 'multiple' ||
           !this.props.data ||
-          this.props.data.length < this.props.maximumSelectionSize
+          this.props.data.length <= this.props.maximumSelectionSize
         ) {
+          let isDeselecting;
+          if (this.props.mode === 'multiple' && Array.isArray(this.props.data))
+            isDeselecting = this.props.data.some(
+              (d) => flattenToAppURL(d['@id']) === flattenToAppURL(item['@id']),
+            );
           this.onSelectItem(item);
           let length = this.props.data ? this.props.data.length : 0;
-
-          let stopSelecting =
-            this.props.mode !== 'multiple' ||
-            (this.props.maximumSelectionSize > 0 &&
-              length + 1 >= this.props.maximumSelectionSize);
-
+          let stopSelecting = this.props.mode !== 'multiple';
+          if (isDeselecting && !stopSelecting)
+            stopSelecting =
+              this.props.maximumSelectionSize > 0 &&
+              length - 1 >= this.props.maximumSelectionSize;
+          else
+            stopSelecting =
+              this.props.maximumSelectionSize > 0 &&
+              length + 1 >= this.props.maximumSelectionSize;
           if (stopSelecting) {
             this.props.closeObjectBrowser();
           }

diff --git a/src/customizations/volto/components/manage/Widgets/ObjectBrowserWidget.jsx b/src/customizations/volto/components/manage/Widgets/ObjectBrowserWidget.jsx
@@ -321,8 +321,15 @@ export class ObjectBrowserWidgetComponent extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    const { id, description, fieldSet, value, mode, onChange, isDisabled } =
-      this.props;
+    const {
+      id,
+      description,
+      fieldSet,
+      value,
+      mode,
+      onChange,
+      isDisabled,
+    } = this.props;
 
     let items = compact(!isArray(value) && value ? [value] : value || []);