|
27 | 27 | :label="t('core', 'Search apps, files, tags, messages') + '...'" |
28 | 28 | @update:value="debouncedFind" /> |
29 | 29 | <div class="unified-search-modal__filters" data-cy-unified-search-filters> |
30 | | - <NcActions v-model:open="providerActionMenuIsOpen" :menu-name="t('core', 'Places')" data-cy-unified-search-filter="places"> |
| 30 | + <NcActions :open.sync="providerActionMenuIsOpen" :menu-name="t('core', 'Places')" data-cy-unified-search-filter="places"> |
31 | 31 | <template #icon> |
32 | 32 | <IconListBox :size="20" /> |
33 | 33 | </template> |
|
43 | 43 | {{ provider.name }} |
44 | 44 | </NcActionButton> |
45 | 45 | </NcActions> |
46 | | - <NcActions v-model:open="dateActionMenuIsOpen" :menu-name="t('core', 'Date')" data-cy-unified-search-filter="date"> |
| 46 | + <NcActions :open.sync="dateActionMenuIsOpen" :menu-name="t('core', 'Date')" data-cy-unified-search-filter="date"> |
47 | 47 | <template #icon> |
48 | 48 | <IconCalendarRange :size="20" /> |
49 | 49 | </template> |
|
120 | 120 | <h3 class="hidden-visually"> |
121 | 121 | {{ t('core', 'Results') }} |
122 | 122 | </h3> |
123 | | - <div v-for="providerResult in results" :key="providerResult.id" class="result"> |
| 123 | + <!-- Filtered results section --> |
| 124 | + <div v-for="providerResult in filteredResults" :key="providerResult.id" class="result"> |
124 | 125 | <h4 :id="`unified-search-result-${providerResult.id}`" class="result-title"> |
125 | 126 | {{ providerResult.name }} |
126 | 127 | </h4> |
|
144 | 145 | </NcButton> |
145 | 146 | </div> |
146 | 147 | </div> |
| 148 | + <!-- Unfiltered results section --> |
| 149 | + <template v-if="unfilteredResults.length > 0"> |
| 150 | + <div class="unified-search-modal__unfiltered-header"> |
| 151 | + <span class="unified-search-modal__unfiltered-label">{{ t('core', 'Partial matches') }}</span> |
| 152 | + </div> |
| 153 | + <div v-for="providerResult in unfilteredResults" :key="`unfiltered-${providerResult.id}`" class="result result--unfiltered"> |
| 154 | + <h4 :id="`unified-search-result-unfiltered-${providerResult.id}`" class="result-title"> |
| 155 | + {{ providerResult.name }} |
| 156 | + </h4> |
| 157 | + <ul class="result-items" :aria-labelledby="`unified-search-result-unfiltered-${providerResult.id}`"> |
| 158 | + <SearchResult |
| 159 | + v-for="(result, index) in providerResult.results" |
| 160 | + :key="index" |
| 161 | + v-bind="result" /> |
| 162 | + </ul> |
| 163 | + <div class="result-footer"> |
| 164 | + <NcButton v-if="providerResult.results.length === providerResult.limit" variant="tertiary-no-background" @click="loadMoreResultsForProvider(providerResult)"> |
| 165 | + {{ t('core', 'Load more results') }} |
| 166 | + <template #icon> |
| 167 | + <IconDotsHorizontal :size="20" /> |
| 168 | + </template> |
| 169 | + </NcButton> |
| 170 | + <NcButton v-if="providerResult.inAppSearch" alignment="end-reverse" variant="tertiary-no-background"> |
| 171 | + {{ t('core', 'Search in') }} {{ providerResult.name }} |
| 172 | + <template #icon> |
| 173 | + <IconArrowRight :size="20" /> |
| 174 | + </template> |
| 175 | + </NcButton> |
| 176 | + </div> |
| 177 | + </div> |
| 178 | + </template> |
147 | 179 | </div> |
148 | 180 | </NcDialog> |
149 | 181 | </template> |
@@ -426,6 +458,7 @@ export default defineComponent({ |
426 | 458 | ...provider, |
427 | 459 | results: response.data.ocs.data.entries, |
428 | 460 | limit: params.limit ?? 5, |
| 461 | + supportsActiveFilters, |
429 | 462 | }) |
430 | 463 |
|
431 | 464 | unifiedSearchLogger.debug('Unified search results:', { results: this.results, newResults }) |
@@ -765,9 +798,27 @@ export default defineComponent({ |
765 | 798 | align-items: center; |
766 | 799 | display: flex; |
767 | 800 | } |
| 801 | +
|
| 802 | + &--unfiltered { |
| 803 | + opacity: 0.7; |
| 804 | + } |
768 | 805 | } |
769 | 806 |
|
770 | 807 | } |
| 808 | +
|
| 809 | + &__unfiltered-header { |
| 810 | + display: flex; |
| 811 | + flex-direction: column; |
| 812 | + gap: 2px; |
| 813 | + margin-block: 16px 8px; |
| 814 | + padding-block: 12px 0; |
| 815 | + border-top: 1px solid var(--color-border); |
| 816 | + } |
| 817 | +
|
| 818 | + &__unfiltered-label { |
| 819 | + font-weight: bold; |
| 820 | + color: var(--color-text-maxcontrast); |
| 821 | + } |
771 | 822 | } |
772 | 823 |
|
773 | 824 | .filter-button__icon { |
|
0 commit comments