-
Notifications
You must be signed in to change notification settings - Fork 157
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implement fulltext filter on search result page
- Loading branch information
1 parent
30b9aab
commit 65b03c0
Showing
9 changed files
with
234 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| Enhancement: Search fulltext filter | ||
|
|
||
| The search result page now has a fulltext filter which can be used to filter the displayed files by their content. | ||
|
|
||
| https://github.com/owncloud/web/pull/9059 | ||
| https://github.com/owncloud/web/issues/9058 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| <template> | ||
| <div class="item-filter oc-flex" :class="`item-filter-${filterName}`"> | ||
| <oc-filter-chip | ||
| :is-toggle="true" | ||
| :filter-label="filterLabel" | ||
| :is-toggle-active="filterActive" | ||
| @toggle-filter="toggleFilter" | ||
| @clear-filter="toggleFilter" | ||
| /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { defineComponent, onMounted, ref, unref } from 'vue' | ||
| import omit from 'lodash-es/omit' | ||
| import { useRoute, useRouteQuery, useRouter } from 'web-pkg' | ||
| import { queryItemAsString } from 'web-pkg/src/composables/appDefaults' | ||
| export default defineComponent({ | ||
| name: 'ItemFilterToggle', | ||
| props: { | ||
| filterLabel: { | ||
| type: String, | ||
| required: true | ||
| }, | ||
| filterName: { | ||
| type: String, | ||
| required: true | ||
| } | ||
| }, | ||
| emits: ['toggleFilter'], | ||
| setup: function (props, { emit }) { | ||
| const router = useRouter() | ||
| const currentRoute = useRoute() | ||
| const filterActive = ref<boolean>(false) | ||
| const queryParam = `q_${props.filterName}` | ||
| const currentRouteQuery = useRouteQuery(queryParam) | ||
| const setRouteQuery = () => { | ||
| return router.push({ | ||
| query: { | ||
| ...omit(unref(currentRoute).query, [queryParam]), | ||
| ...(unref(filterActive) && { [queryParam]: 'true' }) | ||
| } | ||
| }) | ||
| } | ||
| const toggleFilter = async () => { | ||
| filterActive.value = !unref(filterActive) | ||
| await setRouteQuery() | ||
| emit('toggleFilter', unref(filterActive)) | ||
| } | ||
| onMounted(() => { | ||
| const queryStr = queryItemAsString(unref(currentRouteQuery)) | ||
| if (queryStr === 'true') { | ||
| filterActive.value = true | ||
| } | ||
| }) | ||
| return { | ||
| queryParam, | ||
| filterActive, | ||
| toggleFilter | ||
| } | ||
| } | ||
| }) | ||
| </script> |
56 changes: 56 additions & 0 deletions
56
packages/web-pkg/tests/unit/components/ItemFilterToggle.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import ItemFilterToggle from 'web-pkg/src/components/ItemFilterToggle.vue' | ||
| import { defaultComponentMocks, defaultPlugins, mount } from 'web-test-helpers' | ||
| import { queryItemAsString } from 'web-pkg/src/composables/appDefaults' | ||
|
|
||
| jest.mock('web-pkg/src/composables/appDefaults') | ||
|
|
||
| const selectors = { | ||
| labelSpan: '.oc-filter-chip-label', | ||
| filterBtn: '.oc-filter-chip-button' | ||
| } | ||
|
|
||
| describe('ItemFilterToggle', () => { | ||
| it('renders the toggle filter including its label', () => { | ||
| const filterLabel = 'Toggle' | ||
| const { wrapper } = getWrapper({ props: { filterLabel } }) | ||
| expect(wrapper.find(selectors.labelSpan).text()).toEqual(filterLabel) | ||
| }) | ||
| it('emits the "toggleFilter"-event on click', async () => { | ||
| const { wrapper } = getWrapper() | ||
| await wrapper.find(selectors.filterBtn).trigger('click') | ||
| expect(wrapper.emitted('toggleFilter').length).toBeGreaterThan(0) | ||
| }) | ||
| describe('route query', () => { | ||
| it('sets the active state as query param', async () => { | ||
| const { wrapper, mocks } = getWrapper() | ||
| const currentRouteQuery = (mocks.$router.currentRoute as any).query | ||
| expect(mocks.$router.push).not.toHaveBeenCalled() | ||
| await wrapper.find(selectors.filterBtn).trigger('click') | ||
| expect(currentRouteQuery[wrapper.vm.queryParam]).toBeDefined() | ||
| expect(mocks.$router.push).toHaveBeenCalled() | ||
| }) | ||
| it('sets the active state initially when given via query param', () => { | ||
| const { wrapper } = getWrapper({ initialQuery: 'true' }) | ||
| expect(wrapper.vm.filterActive).toEqual(true) | ||
| }) | ||
| }) | ||
| }) | ||
|
|
||
| function getWrapper({ props = {}, initialQuery = '' } = {}) { | ||
| jest.mocked(queryItemAsString).mockImplementation(() => initialQuery) | ||
| const mocks = defaultComponentMocks() | ||
| return { | ||
| mocks, | ||
| wrapper: mount(ItemFilterToggle, { | ||
| props: { | ||
| filterLabel: 'Toggle', | ||
| filterName: 'toggle', | ||
| ...props | ||
| }, | ||
| global: { | ||
| plugins: [...defaultPlugins()], | ||
| mocks | ||
| } | ||
| }) | ||
| } | ||
| } |
Oops, something went wrong.