Fix search block showing no option select in sort on property (plone#…

…5055) (Backport 17.x.x) (plone#6221) Co-authored-by: iRohitSingh <[email protected]> Co-authored-by: David Glick <[email protected]>
RedTurtle · Aug 1, 2024 · b948031 · b948031
1 parent a294573
commit b948031
Show file tree

Hide file tree

Showing 18 changed files with 165 additions and 56 deletions.
diff --git a/locales/ca/LC_MESSAGES/volto.po b/locales/ca/LC_MESSAGES/volto.po
@@ -3379,6 +3379,11 @@ msgstr ""
 msgid "Sorted"
 msgstr ""
 
+#. Default: "Sorted on"
+#: components/manage/Blocks/Search/components/SortOn
+msgid "Sorted on"
+msgstr ""
+
 #. Default: "Source"
 #: components/manage/Blocks/HTML/Edit
 #: components/manage/Controlpanels/Relations/BrokenRelations

diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po
@@ -3378,6 +3378,11 @@ msgstr "Transaktionen nach Nutzernamen, Pfad oder Datum sortieren"
 msgid "Sorted"
 msgstr "Sortiert"
 
+#. Default: "Sorted on"
+#: components/manage/Blocks/Search/components/SortOn
+msgid "Sorted on"
+msgstr ""
+
 #. Default: "Source"
 #: components/manage/Blocks/HTML/Edit
 #: components/manage/Controlpanels/Relations/BrokenRelations

diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po
@@ -3373,6 +3373,11 @@ msgstr ""
 msgid "Sorted"
 msgstr ""
 
+#. Default: "Sorted on"
+#: components/manage/Blocks/Search/components/SortOn
+msgid "Sorted on"
+msgstr ""
+
 #. Default: "Source"
 #: components/manage/Blocks/HTML/Edit
 #: components/manage/Controlpanels/Relations/BrokenRelations

diff --git a/locales/es/LC_MESSAGES/volto.po b/locales/es/LC_MESSAGES/volto.po
@@ -3380,6 +3380,11 @@ msgstr "Ordenar transacciones por nombre de usuario, ruta o fecha"
 msgid "Sorted"
 msgstr "Ordenado"
 
+#. Default: "Sorted on"
+#: components/manage/Blocks/Search/components/SortOn
+msgid "Sorted on"
+msgstr ""
+
 #. Default: "Source"
 #: components/manage/Blocks/HTML/Edit
 #: components/manage/Controlpanels/Relations/BrokenRelations

diff --git a/locales/eu/LC_MESSAGES/volto.po b/locales/eu/LC_MESSAGES/volto.po
@@ -3380,6 +3380,11 @@ msgstr "Ordenatu transakzioak erabiltzaile-izen, bide edo dataren arabera"
 msgid "Sorted"
 msgstr "Ordenatuta"
 
+#. Default: "Sorted on"
+#: components/manage/Blocks/Search/components/SortOn
+msgid "Sorted on"
+msgstr ""
+
 #. Default: "Source"
 #: components/manage/Blocks/HTML/Edit
 #: components/manage/Controlpanels/Relations/BrokenRelations

diff --git a/locales/fi/LC_MESSAGES/volto.po b/locales/fi/LC_MESSAGES/volto.po
@@ -3378,6 +3378,11 @@ msgstr "Lajittele nimen, polun tai päivämäärän perusteella"
 msgid "Sorted"
 msgstr "Lajiteltu"
 
+#. Default: "Sorted on"
+#: components/manage/Blocks/Search/components/SortOn
+msgid "Sorted on"
+msgstr ""
+
 #. Default: "Source"
 #: components/manage/Blocks/HTML/Edit
 #: components/manage/Controlpanels/Relations/BrokenRelations

diff --git a/locales/fr/LC_MESSAGES/volto.po b/locales/fr/LC_MESSAGES/volto.po
@@ -3380,6 +3380,11 @@ msgstr "Trier les transaction par utilisateur, chemin ou date"
 msgid "Sorted"
 msgstr "Trié"
 
+#. Default: "Sorted on"
+#: components/manage/Blocks/Search/components/SortOn
+msgid "Sorted on"
+msgstr ""
+
 #. Default: "Source"
 #: components/manage/Blocks/HTML/Edit
 #: components/manage/Controlpanels/Relations/BrokenRelations

diff --git a/locales/it/LC_MESSAGES/volto.po b/locales/it/LC_MESSAGES/volto.po
@@ -3373,6 +3373,11 @@ msgstr "Ordina transazioni per Username, Percorso o Data"
 msgid "Sorted"
 msgstr "Ordinato"
 
+#. Default: "Sorted on"
+#: components/manage/Blocks/Search/components/SortOn
+msgid "Sorted on"
+msgstr ""
+
 #. Default: "Source"
 #: components/manage/Blocks/HTML/Edit
 #: components/manage/Controlpanels/Relations/BrokenRelations

diff --git a/locales/ja/LC_MESSAGES/volto.po b/locales/ja/LC_MESSAGES/volto.po
@@ -3378,6 +3378,11 @@ msgstr ""
 msgid "Sorted"
 msgstr ""
 
+#. Default: "Sorted on"
+#: components/manage/Blocks/Search/components/SortOn
+msgid "Sorted on"
+msgstr ""
+
 #. Default: "Source"
 #: components/manage/Blocks/HTML/Edit
 #: components/manage/Controlpanels/Relations/BrokenRelations

diff --git a/locales/nl/LC_MESSAGES/volto.po b/locales/nl/LC_MESSAGES/volto.po
@@ -3377,6 +3377,11 @@ msgstr ""
 msgid "Sorted"
 msgstr ""
 
+#. Default: "Sorted on"
+#: components/manage/Blocks/Search/components/SortOn
+msgid "Sorted on"
+msgstr ""
+
 #. Default: "Source"
 #: components/manage/Blocks/HTML/Edit
 #: components/manage/Controlpanels/Relations/BrokenRelations

diff --git a/locales/pt/LC_MESSAGES/volto.po b/locales/pt/LC_MESSAGES/volto.po
@@ -3378,6 +3378,11 @@ msgstr ""
 msgid "Sorted"
 msgstr ""
 
+#. Default: "Sorted on"
+#: components/manage/Blocks/Search/components/SortOn
+msgid "Sorted on"
+msgstr ""
+
 #. Default: "Source"
 #: components/manage/Blocks/HTML/Edit
 #: components/manage/Controlpanels/Relations/BrokenRelations

diff --git a/locales/pt_BR/LC_MESSAGES/volto.po b/locales/pt_BR/LC_MESSAGES/volto.po
@@ -3379,6 +3379,11 @@ msgstr "Ordenar transações por Nome de Usuário, Caminho ou Data"
 msgid "Sorted"
 msgstr "Ordenado"
 
+#. Default: "Sorted on"
+#: components/manage/Blocks/Search/components/SortOn
+msgid "Sorted on"
+msgstr ""
+
 #. Default: "Source"
 #: components/manage/Blocks/HTML/Edit
 #: components/manage/Controlpanels/Relations/BrokenRelations

diff --git a/locales/ro/LC_MESSAGES/volto.po b/locales/ro/LC_MESSAGES/volto.po
@@ -3373,6 +3373,11 @@ msgstr ""
 msgid "Sorted"
 msgstr ""
 
+#. Default: "Sorted on"
+#: components/manage/Blocks/Search/components/SortOn
+msgid "Sorted on"
+msgstr ""
+
 #. Default: "Source"
 #: components/manage/Blocks/HTML/Edit
 #: components/manage/Controlpanels/Relations/BrokenRelations

diff --git a/locales/volto.pot b/locales/volto.pot
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-06-28T15:32:40.460Z\n"
+"POT-Creation-Date: 2024-08-01T17:04:31.246Z\n"
 "Last-Translator: Plone i18n <[email protected]>\n"
 "Language-Team: Plone i18n <[email protected]>\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -3375,6 +3375,11 @@ msgstr ""
 msgid "Sorted"
 msgstr ""
 
+#. Default: "Sorted on"
+#: components/manage/Blocks/Search/components/SortOn
+msgid "Sorted on"
+msgstr ""
+
 #. Default: "Source"
 #: components/manage/Blocks/HTML/Edit
 #: components/manage/Controlpanels/Relations/BrokenRelations

diff --git a/locales/zh_CN/LC_MESSAGES/volto.po b/locales/zh_CN/LC_MESSAGES/volto.po
@@ -3379,6 +3379,11 @@ msgstr "按用户名、路径或日期对事务进行排序"
 msgid "Sorted"
 msgstr "排序"
 
+#. Default: "Sorted on"
+#: components/manage/Blocks/Search/components/SortOn
+msgid "Sorted on"
+msgstr ""
+
 #. Default: "Source"
 #: components/manage/Blocks/HTML/Edit
 #: components/manage/Controlpanels/Relations/BrokenRelations

diff --git a/news/5055.bugfix b/news/5055.bugfix
@@ -0,0 +1 @@
+Fix search block showing no option select in sort on property @iRohitSingh
diff --git a/src/components/manage/Blocks/Search/components/SortOn.jsx b/src/components/manage/Blocks/Search/components/SortOn.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import cx from 'classnames';
@@ -31,6 +30,10 @@ const messages = defineMessages({
     id: 'Descending',
     defaultMessage: 'Descending',
   },
+  sortedOn: {
+    id: 'Sorted on',
+    defaultMessage: 'Sorted on',
+  },
 });
 
 const SortOn = (props) => {
@@ -48,9 +51,17 @@ const SortOn = (props) => {
   const { sortable_indexes } = querystring;
   const Select = reactSelect.default;
 
-  const activeSortOn = sortOn || data?.query?.sort_on || '';
+  const defaultSortOn = data?.query?.sort_on || '';
+  const activeSortOn = sortOn || defaultSortOn;
+
+  let { sortOnOptions = [] } = data;
+  sortOnOptions = [defaultSortOn, ...sortOnOptions];
+  sortOnOptions = [...new Set(sortOnOptions)];
 
-  const { sortOnOptions = [] } = data;
+  const showSelectField = sortOnOptions.length > 1;
+  if (!showSelectField && !activeSortOn) {
+    return;
+  }
   const value = {
     value: activeSortOn || intl.formatMessage(messages.noSelection),
     label:
@@ -62,59 +73,75 @@ const SortOn = (props) => {
   return (
     <div className="search-sort-wrapper">
       <div className="search-sort-on">
-        <span className="sort-label">
-          {intl.formatMessage(messages.sortOn)}
-        </span>
-        <Select
-          id="select-search-sort-on"
-          name="select-searchblock-sort-on"
-          className="search-react-select-container"
-          classNamePrefix="react-select"
-          placeholder={intl.formatMessage(messages.sortOn)}
-          styles={sortOnSelectStyles}
-          theme={selectTheme}
-          components={{ DropdownIndicator, Option }}
-          options={[
-            ...sortOnOptions.map((k) => ({
-              value: k,
-              label: sortable_indexes[k]?.title || k,
-            })),
-          ]}
-          isSearchable={false}
-          value={value}
-          onChange={(data) => {
-            !isEditMode && setSortOn(data.value);
-          }}
-        />
+        {showSelectField ? (
+          <>
+            <span className="sort-label">
+              {intl.formatMessage(messages.sortOn)}
+            </span>
+            <Select
+              id="select-search-sort-on"
+              name="select-searchblock-sort-on"
+              className="search-react-select-container"
+              classNamePrefix="react-select"
+              placeholder={intl.formatMessage(messages.sortOn)}
+              styles={sortOnSelectStyles}
+              theme={selectTheme}
+              components={{ DropdownIndicator, Option }}
+              options={[
+                ...sortOnOptions.map((k) => ({
+                  value: k,
+                  label:
+                    sortable_indexes[k]?.title ||
+                    k ||
+                    intl.formatMessage(messages.noSelection),
+                })),
+              ]}
+              isSearchable={false}
+              value={value}
+              onChange={(data) => {
+                !isEditMode && setSortOn(data.value);
+              }}
+            />
+          </>
+        ) : (
+          <span className="sorted-label">
+            {intl.formatMessage(messages.sortedOn)}
+            <span className="sorted-label-value">{value.label}</span>
+          </span>
+        )}
       </div>
-      <Button
-        icon
-        basic
-        compact
-        title={intl.formatMessage(messages.ascending)}
-        className={cx({
-          active: sortOrder === 'ascending',
-        })}
-        onClick={() => {
-          !isEditMode && setSortOrder('ascending');
-        }}
-      >
-        <Icon name={upSVG} size="25px" />
-      </Button>
-      <Button
-        icon
-        basic
-        compact
-        title={intl.formatMessage(messages.descending)}
-        className={cx({
-          active: sortOrder === 'descending',
-        })}
-        onClick={() => {
-          !isEditMode && setSortOrder('descending');
-        }}
-      >
-        <Icon name={downSVG} size="25px" />
-      </Button>
+      {activeSortOn ? (
+        <>
+          <Button
+            icon
+            basic
+            compact
+            title={intl.formatMessage(messages.ascending)}
+            className={cx({
+              active: sortOrder === 'ascending',
+            })}
+            onClick={() => {
+              !isEditMode && setSortOrder('ascending');
+            }}
+          >
+            <Icon name={downSVG} size="25px" />
+          </Button>
+          <Button
+            icon
+            basic
+            compact
+            title={intl.formatMessage(messages.descending)}
+            className={cx({
+              active: sortOrder === 'descending',
+            })}
+            onClick={() => {
+              !isEditMode && setSortOrder('descending');
+            }}
+          >
+            <Icon name={upSVG} size="25px" />
+          </Button>
+        </>
+      ) : null}
     </div>
   );
 };

diff --git a/theme/themes/pastanaga/extras/blocks.less b/theme/themes/pastanaga/extras/blocks.less
@@ -1119,6 +1119,12 @@ div.image-upload-widget-image {
     flex-direction: row;
     align-items: center;
     margin-right: 0.5em;
+
+    .sorted-label-value {
+      margin-right: 0.5em;
+      margin-left: 0.7em;
+      color: @lightGrey;
+    }
   }
 
   .sort-label {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Fix search block showing no option select in sort on property @iRohitSingh