From 8698ff99f0bcba5fc05053b9aef96a8f37e4b247 Mon Sep 17 00:00:00 2001
From: Benjamin Kott <benjamin.kott@outlook.com>
Date: Thu, 15 Jun 2023 11:48:08 +0200
Subject: [PATCH] [TASK] Optimize indexed search form

---
 .../Private/Partials/IndexedSearch/Form.html  | 266 +++++++++---------
 .../Partials/IndexedSearch/Searchresult.html  |   6 +-
 .../IndexedSearch/Search/Search.html          | 126 +++++----
 3 files changed, 194 insertions(+), 204 deletions(-)

diff --git a/Resources/Private/Partials/IndexedSearch/Form.html b/Resources/Private/Partials/IndexedSearch/Form.html
index 794857412..0ae7c9226 100644
--- a/Resources/Private/Partials/IndexedSearch/Form.html
+++ b/Resources/Private/Partials/IndexedSearch/Form.html
@@ -19,161 +19,149 @@
         <legend class="visually-hidden">
             <f:translate key="form.legend" />
         </legend>
-        <div class="form-group">
-            <label for="tx-indexedsearch-searchbox-sword" class="form-label">
-                <f:translate key="form.searchFor" />
-            </label>
-            <div class="input-group">
-                <f:form.textfield name="search[sword]" value="{sword}" id="tx-indexedsearch-searchbox-sword" class="form-control" />
-                <f:form.submit name="search[submitButton]" value="{f:translate(key: 'form.submit')}" id="tx-indexedsearch-searchbox-button-submit" class="btn btn-primary" />
+        <div class="row g-3">
+            <div class="col-12">
+                <label for="tx-indexedsearch-searchbox-sword" class="form-label">
+                    <f:translate key="form.searchFor" />
+                </label>
+                <div class="input-group">
+                    <f:form.textfield name="search[sword]" value="{sword}" id="tx-indexedsearch-searchbox-sword" class="form-control" />
+                    <f:form.submit name="search[submitButton]" value="{f:translate(key: 'form.submit')}" id="tx-indexedsearch-searchbox-button-submit" class="btn btn-primary" />
+                </div>
             </div>
-        </div>
-
-        <f:if condition="{settings.displayAdvancedSearchLink} || {settings.displayRules}">
-            <div class="form-group">
-                <f:if condition="{settings.displayAdvancedSearchLink}">
-                    <f:if condition="{searchParams.extendedSearch}">
-                        <f:then>
-                            <f:link.action class="btn btn-secondary active" action="form" arguments="{search: {extendedSearch: 0}}">
-                                <f:translate key="form.linkToRegularSearch" />
-                            </f:link.action>
-                        </f:then>
-                        <f:else>
-                            <f:link.action class="btn btn-secondary" action="form" arguments="{search: {extendedSearch: 1}}">
-                                <f:translate key="form.linkToAdvancedSearch" />
-                            </f:link.action>
-                        </f:else>
+            <f:if condition="{settings.displayAdvancedSearchLink} || {settings.displayRules}">
+                <div class="col-12">
+                    <f:if condition="{settings.displayAdvancedSearchLink}">
+                        <f:if condition="{searchParams.extendedSearch}">
+                            <f:then>
+                                <f:link.action class="btn btn-light" action="form" arguments="{search: {extendedSearch: 0}}">
+                                    <f:translate key="form.linkToRegularSearch" />
+                                </f:link.action>
+                            </f:then>
+                            <f:else>
+                                <f:link.action class="btn btn-light" action="form" arguments="{search: {extendedSearch: 1}}">
+                                    <f:translate key="form.linkToAdvancedSearch" />
+                                </f:link.action>
+                            </f:else>
+                        </f:if>
                     </f:if>
-                </f:if>
-                <f:if condition="{settings.displayRules}">
-                    <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#rulesModal">
-                        <f:translate key="rules.headline" />
-                    </button>
-                    <div class="modal fade" id="rulesModal" tabindex="-1" aria-labelledby="searchRulesLabel" aria-hidden="true">
-                        <div class="modal-dialog">
-                            <div class="modal-content">
-                                <div class="modal-header">
-                                    <h5 class="modal-title" id="searchRulesLabel">
-                                        <f:translate key="rules.headline" />
-                                    </h5>
-                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                                </div>
-                                <div class="modal-body">
-                                    <f:format.raw><f:translate key="rules.text" /></f:format.raw>
-                                </div>
-                                <div class="modal-footer">
-                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    <f:if condition="{settings.displayRules}">
+                        <button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#rulesModal">
+                            <f:translate key="rules.headline" />
+                        </button>
+                        <div class="modal fade" id="rulesModal" tabindex="-1" aria-labelledby="searchRulesLabel" aria-hidden="true">
+                            <div class="modal-dialog">
+                                <div class="modal-content">
+                                    <div class="modal-header">
+                                        <h3 class="modal-title h4" id="searchRulesLabel">
+                                            <f:translate key="rules.headline" />
+                                        </h3>
+                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                                    </div>
+                                    <div class="modal-body">
+                                        <f:format.raw><f:translate key="rules.text" /></f:format.raw>
+                                    </div>
+                                    <div class="modal-footer">
+                                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                </f:if>
-            </div>
-        </f:if>
-
-        <f:if condition="{searchParams.extendedSearch}">
-            <f:if condition="{showTypeSearch}">
-                <div class="form-group">
-                    <div class="row">
-                        <f:if condition="{allSearchTypes}">
-                            <div class="col-sm-6 col-xs-12">
-                                <label for="tx-indexedsearch-selectbox-searchtype" class="form-label">
-                                    <f:translate key="form.match" />
-                                </label>
-                                <f:form.select name="search[searchType]" options="{allSearchTypes}" value="{searchParams.searchType}" id="tx-indexedsearch-selectbox-searchtype" class="form-select" />
-                            </div>
-                        </f:if>
-                        <f:if condition="{allDefaultOperands}">
-                            <div class="col-sm-6 col-xs-12">
-                                <label for="tx-indexedsearch-selectbox-defaultoperand" class="form-label">
-                                    <f:translate key="searchForm.element.defaultOperand.label" extensionName="bootstrap_package" />
-                                </label>
-                                <f:form.select name="search[defaultOperand]" options="{allDefaultOperands}" value="{searchParams.defaultOperand}" id="tx-indexedsearch-selectbox-defaultoperand" class="form-select" />
-                            </div>
-                        </f:if>
-                    </div>
-                </div>
-            </f:if>
-            <f:if condition="{showMediaAndLanguageSearch}">
-                <div class="form-group">
-                    <div class="row">
-                        <f:if condition="{allMediaTypes}">
-                            <div class="col-sm-6 col-xs-12">
-                                <label for="tx-indexedsearch-selectbox-media" class="form-label">
-                                    <f:translate key="form.searchIn" />
-                                </label>
-                                <f:form.select name="search[mediaType]" options="{allMediaTypes}" value="{searchParams.mediaType}" id="tx-indexedsearch-selectbox-media" class="form-select" />
-                            </div>
-                        </f:if>
-                        <f:if condition="{allLanguageUids}">
-                            <div class="col-sm-6 col-xs-12">
-                                <label for="tx-indexedsearch-selectbox-lang" class="form-label">
-                                    <f:translate key="searchForm.element.language.label" extensionName="bootstrap_package" />
-                                </label>
-                                <f:form.select name="search[languageUid]" options="{allLanguageUids}" value="{searchParams.languageUid}" id="tx-indexedsearch-selectbox-lang" class="form-select" />
-                            </div>
-                        </f:if>
-                    </div>
-                </div>
-            </f:if>
-            <f:if condition="{allSections}">
-                <div class="form-group">
-                    <label for="tx-indexedsearch-selectbox-sections" class="form-label">
-                        <f:translate key="form.fromSection" />
-                    </label>
-                    <f:form.select name="search[sections]" options="{allSections}" value="{searchParams.sections}" id="tx-indexedsearch-selectbox-sections" class="form-select" />
-                </div>
-            </f:if>
-            <f:if condition="{allIndexConfigurations}">
-                <div class="form-group">
-                    <label for="tx-indexedsearch-selectbox-freeIndexUid" class="form-label">
-                        <f:translate key="form.freeIndexUid" />
-                    </label>
-                    <f:form.select name="search[freeIndexUid]" options="{allIndexConfigurations}" value="{searchParams.freeIndexUid}" id="tx-indexedsearch-selectbox-freeIndexUid" class="form-select" />
+                    </f:if>
                 </div>
             </f:if>
-            <f:if condition="{showSortOrders}">
-                <div class="form-group">
-                    <div class="row">
+            <f:if condition="{searchParams.extendedSearch}">
+                <f:if condition="{showTypeSearch}">
+                    <f:if condition="{allSearchTypes}">
                         <div class="col-sm-6 col-xs-12">
-                            <label for="tx-indexedsearch-selectbox-order" class="form-label">
-                                <f:translate key="form.orderBy" />
+                            <label for="tx-indexedsearch-selectbox-searchtype" class="form-label">
+                                <f:translate key="form.match" />
                             </label>
-                            <f:form.select name="search[sortOrder]" options="{allSortOrders}" value="{searchParams.sortOrder}" id="tx-indexedsearch-selectbox-order" class="form-select" />
+                            <f:form.select name="search[searchType]" options="{allSearchTypes}" value="{searchParams.searchType}" id="tx-indexedsearch-selectbox-searchtype" class="form-select" />
                         </div>
+                    </f:if>
+                    <f:if condition="{allDefaultOperands}">
                         <div class="col-sm-6 col-xs-12">
-                            <label for="tx-indexedsearch-selectbox-desc" class="form-label">
-                                <f:translate key="searchForm.element.sortDesc.label" extensionName="bootstrap_package" />
+                            <label for="tx-indexedsearch-selectbox-defaultoperand" class="form-label">
+                                <f:translate key="searchForm.element.defaultOperand.label" extensionName="bootstrap_package" />
                             </label>
-                            <f:form.select name="search[sortDesc]"  options="{allSortDescendings}" value="{searchParams.sortDesc}" id="tx-indexedsearch-selectbox-desc" class="form-select" />
+                            <f:form.select name="search[defaultOperand]" options="{allDefaultOperands}" value="{searchParams.defaultOperand}" id="tx-indexedsearch-selectbox-defaultoperand" class="form-select" />
                         </div>
+                    </f:if>
+                </f:if>
+                <f:if condition="{showMediaAndLanguageSearch}">
+                    <f:if condition="{allMediaTypes}">
+                        <div class="col-sm-6 col-xs-12">
+                            <label for="tx-indexedsearch-selectbox-media" class="form-label">
+                                <f:translate key="form.searchIn" />
+                            </label>
+                            <f:form.select name="search[mediaType]" options="{allMediaTypes}" value="{searchParams.mediaType}" id="tx-indexedsearch-selectbox-media" class="form-select" />
+                        </div>
+                    </f:if>
+                    <f:if condition="{allLanguageUids}">
+                        <div class="col-sm-6 col-xs-12">
+                            <label for="tx-indexedsearch-selectbox-lang" class="form-label">
+                                <f:translate key="searchForm.element.language.label" extensionName="bootstrap_package" />
+                            </label>
+                            <f:form.select name="search[languageUid]" options="{allLanguageUids}" value="{searchParams.languageUid}" id="tx-indexedsearch-selectbox-lang" class="form-select" />
+                        </div>
+                    </f:if>
+                </f:if>
+                <f:if condition="{allSections}">
+                    <div class="col-12">
+                        <label for="tx-indexedsearch-selectbox-sections" class="form-label">
+                            <f:translate key="form.fromSection" />
+                        </label>
+                        <f:form.select name="search[sections]" options="{allSections}" value="{searchParams.sections}" id="tx-indexedsearch-selectbox-sections" class="form-select" />
                     </div>
-                </div>
-            </f:if>
-            <f:if condition="{allNumberOfResults}">
-                <div class="form-group">
-                    <label for="tx-indexedsearch-selectbox-results" class="form-label">
-                        <f:translate key="form.atATime" />
-                    </label>
-                    <f:form.select name="search[numberOfResults]" options="{allNumberOfResults}" value="{searchParams.numberOfResults}" id="tx-indexedsearch-selectbox-results" class="form-select" />
-                </div>
-            </f:if>
-            <f:if condition="{allGroups}">
-                <div class="form-group">
-                    <label for="tx-indexedsearch-selectbox-group" class="form-label">
-                        <f:translate key="form.style" />
-                    </label>
-                    <div class="input-group">
-                        <f:form.select name="search[group]" options="{allGroups}" value="{searchParams.group}" id="tx-indexedsearch-selectbox-group" class="form-select" />
-                        <f:if condition="{settings.blind.extResume} == 0">
-                            <div class="input-group-text">
-                                <f:form.checkbox class="form-check-input mt-0" name="search[extResume]" id="tx_indexedsearch_extResume" checked="{searchParams.extResume}" value="1" />
-                            </span>
-                        </f:if>
+                </f:if>
+                <f:if condition="{allIndexConfigurations}">
+                    <div class="col-12">
+                        <label for="tx-indexedsearch-selectbox-freeIndexUid" class="form-label">
+                            <f:translate key="form.freeIndexUid" />
+                        </label>
+                        <f:form.select name="search[freeIndexUid]" options="{allIndexConfigurations}" value="{searchParams.freeIndexUid}" id="tx-indexedsearch-selectbox-freeIndexUid" class="form-select" />
                     </div>
-                </div>
+                </f:if>
+                <f:if condition="{showSortOrders}">
+                    <div class="col-sm-6 col-xs-12">
+                        <label for="tx-indexedsearch-selectbox-order" class="form-label">
+                            <f:translate key="form.orderBy" />
+                        </label>
+                        <f:form.select name="search[sortOrder]" options="{allSortOrders}" value="{searchParams.sortOrder}" id="tx-indexedsearch-selectbox-order" class="form-select" />
+                    </div>
+                    <div class="col-sm-6 col-xs-12">
+                        <label for="tx-indexedsearch-selectbox-desc" class="form-label">
+                            <f:translate key="searchForm.element.sortDesc.label" extensionName="bootstrap_package" />
+                        </label>
+                        <f:form.select name="search[sortDesc]"  options="{allSortDescendings}" value="{searchParams.sortDesc}" id="tx-indexedsearch-selectbox-desc" class="form-select" />
+                    </div>
+                </f:if>
+                <f:if condition="{allNumberOfResults}">
+                    <div class="col-12">
+                        <label for="tx-indexedsearch-selectbox-results" class="form-label">
+                            <f:translate key="form.atATime" />
+                        </label>
+                        <f:form.select name="search[numberOfResults]" options="{allNumberOfResults}" value="{searchParams.numberOfResults}" id="tx-indexedsearch-selectbox-results" class="form-select" />
+                    </div>
+                </f:if>
+                <f:if condition="{allGroups}">
+                    <div class="col-12">
+                        <label for="tx-indexedsearch-selectbox-group" class="form-label">
+                            <f:translate key="form.style" />
+                        </label>
+                        <div class="input-group">
+                            <f:form.select name="search[group]" options="{allGroups}" value="{searchParams.group}" id="tx-indexedsearch-selectbox-group" class="form-select" />
+                            <f:if condition="{settings.blind.extResume} == 0">
+                                <div class="input-group-text">
+                                    <f:form.checkbox class="form-check-input mt-0" name="search[extResume]" id="tx_indexedsearch_extResume" checked="{searchParams.extResume}" value="1" />
+                                </span>
+                            </f:if>
+                        </div>
+                    </div>
+                </f:if>
             </f:if>
-        </f:if>
+        </div>
     </fieldset>
 </f:form>
 </html>
diff --git a/Resources/Private/Partials/IndexedSearch/Searchresult.html b/Resources/Private/Partials/IndexedSearch/Searchresult.html
index 82320681a..c83603ae6 100644
--- a/Resources/Private/Partials/IndexedSearch/Searchresult.html
+++ b/Resources/Private/Partials/IndexedSearch/Searchresult.html
@@ -1,6 +1,6 @@
-<div class="media">
-    <div class="media-body">
-        <h4 class="media-heading">
+<article class="card">
+    <div class="card-body">
+        <h4>
             <f:if condition="{settings.displayResultNumber}">
                 <span class="tx-indexedsearch-result-number">{row.result_number}</span>
             </f:if>
diff --git a/Resources/Private/Templates/IndexedSearch/Search/Search.html b/Resources/Private/Templates/IndexedSearch/Search/Search.html
index 1a2d781ba..368180f86 100644
--- a/Resources/Private/Templates/IndexedSearch/Search/Search.html
+++ b/Resources/Private/Templates/IndexedSearch/Search/Search.html
@@ -3,73 +3,75 @@
     <f:render partial="Form" arguments="{_all}" />
 </f:alias>
 <f:for each="{resultsets}" as="result">
-    <f:if condition="{result.categoryTitle}">
-        <h1>{result.categoryTitle}</h1>
-    </f:if>
-    <!-- show the info what was searched for -->
-    <f:for each="{searchWords}" as="searchWord" key="key">
-        <p>
-            <f:if condition="{key} > 0">
-                <f:then>
-                    <f:translate key="searchFor.{searchWord.oper}" /> <strong>{searchWord.sword}</strong>
-                </f:then>
-                <f:else>
-                    <f:translate key="searchFor" /> <strong>{searchWord.sword}</strong>
-                </f:else>
-            </f:if>
-        </p>
-    </f:for>
-    <f:if condition="{result.searchedInSectionInfo}">
-        <!-- show the info in which section was searched for -->
-        <p>{result.searchedInSectionInfo}</p>
-    </f:if>
-    <f:if condition="{result.count} > 0">
-        <f:then>
+    <div class="mt-3">
+        <f:if condition="{result.categoryTitle}">
+            <h2>{result.categoryTitle}</h2>
+        </f:if>
+        <!-- show the info what was searched for -->
+        <f:for each="{searchWords}" as="searchWord" key="key">
             <p>
-                <is:pageBrowsingResults numberOfResults="{result.count}" currentPage="{searchParams.pointer}" resultsPerPage="{searchParams.numberOfResults}" />
-                {result.sectionText}
-            </p>
-            <!-- render the anchor-links to the sections inside the displayed result rows -->
-            <f:if condition="{result.affectedSections}">
-                <div class="list-group">
-                    <f:for each="{result.affectedSections}" as="sectionData" key="sectionId">
-                        <a href="#anchor_{sectionId}" class="list-group-item">
-                            <span class="badge">
-                                {sectionData.1}
-                                <f:translate key="{f:if(condition: '{sectionData.1} > 1', then: 'word_pages', else: 'word_pages')}" />
-                            </span>
-                            <f:if condition="{sectionData.0}">
-                                <f:then>{sectionData.0}</f:then>
-                                <f:else><f:translate key="result.unnamedSection" /></f:else>
-                            </f:if>
-                        </a>
-                    </f:for>
-                </div>
-            </f:if>
-            <f:for each="{result.rows}" as="row">
-                <f:if condition="{row.isSectionHeader}">
+                <f:if condition="{key} > 0">
                     <f:then>
-                        <div id="anchor_{row.sectionId}">
-                            <h2>
-                                <f:format.html>{row.sectionTitle}</f:format.html>
-                                <span class="tx-indexedsearch-result-count">
-                                    {row.numResultRows} <f:translate key="{f:if(condition: '{row.numResultRows} > 1', then: 'result.pages', else: 'result.page')}" />
-                                </span>
-                            </h2>
-                        </div>
+                        <f:translate key="searchFor.{searchWord.oper}" /> <strong>{searchWord.sword}</strong>
                     </f:then>
                     <f:else>
-                        <f:render partial="Searchresult" arguments="{row: row}" />
+                        <f:translate key="searchFor" /> <strong>{searchWord.sword}</strong>
                     </f:else>
                 </f:if>
-            </f:for>
-            <is:pageBrowsing numberOfResults="{result.count}" maximumNumberOfResultPages="{settings.page_links}" currentPage="{searchParams.pointer}" resultsPerPage="{searchParams.numberOfResults}" />
-        </f:then>
-        <f:else>
-            <div class="alert alert-info">
-                <f:translate key="result.noResult" />
-            </div>
-        </f:else>
-    </f:if>
+            </p>
+        </f:for>
+        <f:if condition="{result.searchedInSectionInfo}">
+            <!-- show the info in which section was searched for -->
+            <p>{result.searchedInSectionInfo}</p>
+        </f:if>
+        <f:if condition="{result.count} > 0">
+            <f:then>
+                <p>
+                    <is:pageBrowsingResults numberOfResults="{result.count}" currentPage="{searchParams.pointer}" resultsPerPage="{searchParams.numberOfResults}" />
+                    {result.sectionText}
+                </p>
+                <!-- render the anchor-links to the sections inside the displayed result rows -->
+                <f:if condition="{result.affectedSections}">
+                    <div class="list-group">
+                        <f:for each="{result.affectedSections}" as="sectionData" key="sectionId">
+                            <a href="#anchor_{sectionId}" class="list-group-item">
+                                <span class="badge">
+                                    {sectionData.1}
+                                    <f:translate key="{f:if(condition: '{sectionData.1} > 1', then: 'word_pages', else: 'word_pages')}" />
+                                </span>
+                                <f:if condition="{sectionData.0}">
+                                    <f:then>{sectionData.0}</f:then>
+                                    <f:else><f:translate key="result.unnamedSection" /></f:else>
+                                </f:if>
+                            </a>
+                        </f:for>
+                    </div>
+                </f:if>
+                <f:for each="{result.rows}" as="row">
+                    <f:if condition="{row.isSectionHeader}">
+                        <f:then>
+                            <div id="anchor_{row.sectionId}">
+                                <h2>
+                                    <f:format.html>{row.sectionTitle}</f:format.html>
+                                    <span class="tx-indexedsearch-result-count">
+                                        {row.numResultRows} <f:translate key="{f:if(condition: '{row.numResultRows} > 1', then: 'result.pages', else: 'result.page')}" />
+                                    </span>
+                                </h2>
+                            </div>
+                        </f:then>
+                        <f:else>
+                            <f:render partial="Searchresult" arguments="{row: row}" />
+                        </f:else>
+                    </f:if>
+                </f:for>
+                <is:pageBrowsing numberOfResults="{result.count}" maximumNumberOfResultPages="{settings.page_links}" currentPage="{searchParams.pointer}" resultsPerPage="{searchParams.numberOfResults}" />
+            </f:then>
+            <f:else>
+                <div class="alert alert-info">
+                    <f:translate key="result.noResult" />
+                </div>
+            </f:else>
+        </f:if>
+    </section>
 </f:for>
 </html>