Skip to content

Commit be176b0

Browse files
nfebenfebe
committed
WIP: New UI global search
Resolves: #39162 Signed-off-by: fenn-cs <fenn25.fn@gmail.com>
1 parent ea47f49 commit be176b0

File tree

9 files changed

+682
-0
lines changed

9 files changed

+682
-0
lines changed

‎core/src/components/GlobalSearch/CustomDateRangeModal.vue‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<template>
2+
<NcModal v-if="isVisible"
3+
id="global-search"
4+
:name="t('core', 'Date range filter')"
5+
:show.sync="isVisible"
6+
:clear-view-delay="0"
7+
:title="t('Date range filter')"
8+
@close="closeModal">
9+
<!-- Custom date range -->
10+
<div class="global_search__custom-date-range-modal">
11+
<h1>{{ t('core', 'Date range filter') }}</h1>
12+
<NcDateTimePicker />
13+
<NcDateTimePicker />
14+
<NcButton type="tertiary-no-background">
15+
{{ t('core', 'Apply range') }}
16+
<template #icon>
17+
<CalendarRangeIcon :size="20" />
18+
</template>
19+
</NcButton>
20+
</div>
21+
</NcModal>
22+
</template>
23+
24+
<script>
25+
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
26+
import NcDateTimePicker from '@nextcloud/vue/dist/Components/NcDateTimePicker.js'
27+
import CalendarRangeIcon from 'vue-material-design-icons/CalendarRange.vue'
28+
29+
export default {
30+
name: 'CustomDateRangeModal',
31+
components: {
32+
NcButton,
33+
NcModal,
34+
CalendarRangeIcon,
35+
NcDateTimePicker,
36+
},
37+
props: {
38+
isVisible: {
39+
type: Boolean,
40+
required: true,
41+
},
42+
},
43+
data() {
44+
return {
45+
46+
}
47+
},
48+
mounted() {
49+
},
50+
methods: {
51+
closeModal() {
52+
// close operations like clean search?
53+
},
54+
},
55+
}
56+
</script>
57+
58+
<style lang="scss" scoped>
59+
.global_search__custom-date-range-modal {
60+
padding: 10px 20px 10px 20px;
61+
62+
h1 {
63+
font-size: 16px;
64+
font-weight: bolder;
65+
line-height: 2em;
66+
}
67+
68+
}
69+
</style>

‎core/src/components/GlobalSearch/SearchFilterChip.vue‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<template>
2+
<div class="chip">
3+
<span class="icon">
4+
<slot v-if="filter.type === 'app' || filter.type === 'person'" name="icon" />
5+
<span v-if="filter.type == 'date'"> {{ filter.pretext }} : </span>
6+
</span>
7+
<span class="text">{{ filter.text }}</span>
8+
<span class="close-icon" @click="removeChip">
9+
<CloseIcon :size="16" />
10+
</span>
11+
</div>
12+
</template>
13+
14+
<script>
15+
import CloseIcon from 'vue-material-design-icons/CloseThick.vue'
16+
17+
export default {
18+
name: 'SearchFilterChip',
19+
components: {
20+
CloseIcon,
21+
},
22+
props: {
23+
filter: Object,
24+
},
25+
methods: {
26+
removeChip() {
27+
this.$emit('delete', this.filter)
28+
},
29+
},
30+
}
31+
</script>
32+
33+
<style lang="scss" scoped>
34+
.chip {
35+
display: flex;
36+
align-items: center;
37+
padding: 2px 4px;
38+
border: 1px solid var(--color-primary-element-light);
39+
border-radius: 20px;
40+
background-color: var(--color-primary-element-light);
41+
margin: 2px;
42+
font-size: 10px;
43+
font-weight: bolder;
44+
45+
.icon {
46+
display: flex;
47+
align-items: center;
48+
padding-right: 5px;
49+
50+
img {
51+
width: 20px;
52+
padding: 2px;
53+
background-color: var(--color-primary-element);
54+
border-radius: 20px;
55+
}
56+
}
57+
58+
.text {
59+
margin: 0 2px;
60+
}
61+
62+
.close-icon {
63+
cursor: pointer;
64+
65+
:hover {
66+
border-radius: 4px;
67+
padding: 1px;
68+
}
69+
}
70+
}
71+
</style>

‎core/src/global-search.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/**
2+
* @copyright Copyright (c) 2020 Fon E. Noel NFEBE <fenn25.fn@gmail.com>
3+
*
4+
* @author Fon E. Noel NFEBE <fenn25.fn@gmail.com>
5+
*
6+
* @license AGPL-3.0-or-later
7+
*
8+
* This program is free software: you can redistribute it and/or modify
9+
* it under the terms of the GNU Affero General Public License as
10+
* published by the Free Software Foundation, either version 3 of the
11+
* License, or (at your option) any later version.
12+
*
13+
* This program is distributed in the hope that it will be useful,
14+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
15+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16+
* GNU Affero General Public License for more details.
17+
*
18+
* You should have received a copy of the GNU Affero General Public License
19+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
20+
*
21+
*/
22+
23+
import { getLoggerBuilder } from '@nextcloud/logger'
24+
import { getRequestToken } from '@nextcloud/auth'
25+
import { translate as t, translatePlural as n } from '@nextcloud/l10n'
26+
import Vue from 'vue'
27+
28+
import GlobalSearch from './views/GlobalSearch.vue'
29+
30+
// eslint-disable-next-line camelcase
31+
__webpack_nonce__ = btoa(getRequestToken())
32+
33+
const logger = getLoggerBuilder()
34+
.setApp('global-search')
35+
.detectUser()
36+
.build()
37+
38+
Vue.mixin({
39+
data() {
40+
return {
41+
logger,
42+
}
43+
},
44+
methods: {
45+
t,
46+
n,
47+
},
48+
})
49+
50+
export default new Vue({
51+
el: '#global-search',
52+
// eslint-disable-next-line vue/match-component-file-name
53+
name: 'GlobalSearchRoot',
54+
render: h => h(GlobalSearch),
55+
})

‎core/src/services/GlobalSearchService.js‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/**
2+
* @copyright 2023, Fon E. Noel NFEBE <fenn25.fn@gmail.com>
3+
*
4+
* @author Fon E. Noel NFEBE <fenn25.fn@gmail.com>
5+
*
6+
* @license AGPL-3.0-or-later
7+
*
8+
* This program is free software: you can redistribute it and/or modify
9+
* it under the terms of the GNU Affero General Public License as
10+
* published by the Free Software Foundation, either version 3 of the
11+
* License, or (at your option) any later version.
12+
*
13+
* This program is distributed in the hope that it will be useful,
14+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
15+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16+
* GNU Affero General Public License for more details.
17+
*
18+
* You should have received a copy of the GNU Affero General Public License
19+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
20+
*
21+
*/
22+
23+
import { generateOcsUrl } from '@nextcloud/router'
24+
import { loadState } from '@nextcloud/initial-state'
25+
import axios from '@nextcloud/axios'
26+
27+
export const defaultLimit = loadState('unified-search', 'limit-default')
28+
export const minSearchLength = loadState('unified-search', 'min-search-length', 1)
29+
export const enableLiveSearch = loadState('unified-search', 'live-search', true)
30+
31+
export const regexFilterIn = /(^|\s)in:([a-z_-]+)/ig
32+
export const regexFilterNot = /(^|\s)-in:([a-z_-]+)/ig
33+
34+
/**
35+
* Create a cancel token
36+
*
37+
* @return {import('axios').CancelTokenSource}
38+
*/
39+
const createCancelToken = () => axios.CancelToken.source()
40+
41+
/**
42+
* Get the list of available search providers
43+
*
44+
* @return {Promise<Array>}
45+
*/
46+
export async function getProviders() {
47+
try {
48+
const { data } = await axios.get(generateOcsUrl('search/providers'), {
49+
params: {
50+
// Sending which location we're currently at
51+
from: window.location.pathname.replace('/index.php', '') + window.location.search,
52+
},
53+
})
54+
if ('ocs' in data && 'data' in data.ocs && Array.isArray(data.ocs.data) && data.ocs.data.length > 0) {
55+
// Providers are sorted by the api based on their order key
56+
return data.ocs.data
57+
}
58+
} catch (error) {
59+
console.error(error)
60+
}
61+
return []
62+
}
63+
64+
/**
65+
* Get the list of available search providers
66+
*
67+
* @param {object} options destructuring object
68+
* @param {string} options.type the type to search
69+
* @param {string} options.query the search
70+
* @param {number|string|undefined} options.cursor the offset for paginated searches
71+
* @return {object} {request: Promise, cancel: Promise}
72+
*/
73+
export function search({ type, query, cursor }) {
74+
/**
75+
* Generate an axios cancel token
76+
*/
77+
const cancelToken = createCancelToken()
78+
79+
const request = async () => axios.get(generateOcsUrl('search/providers/{type}/search', { type }), {
80+
cancelToken: cancelToken.token,
81+
params: {
82+
term: query,
83+
cursor,
84+
// Sending which location we're currently at
85+
from: window.location.pathname.replace('/index.php', '') + window.location.search,
86+
},
87+
})
88+
89+
return {
90+
request,
91+
cancel: cancelToken.cancel,
92+
}
93+
}

‎core/src/views/GlobalSearch.vue‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!--
2+
- @copyright Copyright (c) 2020 Fon E. Noel NFEBE <fenn25.fn@gmail.com>
3+
-
4+
- @author Fon E. Noel NFEBE <fenn25.fn@gmail.com>
5+
-
6+
- @license GNU AGPL version 3 or any later version
7+
-
8+
- This program is free software: you can redistribute it and/or modify
9+
- it under the terms of the GNU Affero General Public License as
10+
- published by the Free Software Foundation, either version 3 of the
11+
- License, or (at your option) any later version.
12+
-
13+
- This program is distributed in the hope that it will be useful,
14+
- but WITHOUT ANY WARRANTY; without even the implied warranty of
15+
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16+
- GNU Affero General Public License for more details.
17+
-
18+
- You should have received a copy of the GNU Affero General Public License
19+
- along with this program. If not, see <http://www.gnu.org/licenses/>.
20+
-
21+
-->
22+
<template>
23+
<div>
24+
<NcButton aria-label="Global search" @click="toggleGlobalSearch">
25+
<template #icon>
26+
<Magnify class="unified-search__trigger" :size="22" />
27+
</template>
28+
</NcButton>
29+
<GlobalSearchModal :isVisible="showGlobalSearch" />
30+
</div>
31+
</template>
32+
33+
<script>
34+
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
35+
import Magnify from 'vue-material-design-icons/Magnify.vue'
36+
import GlobalSearchModal from './GlobalSearchModal.vue';
37+
38+
export default {
39+
name: 'GlobalSearch',
40+
components: {
41+
NcButton,
42+
Magnify,
43+
GlobalSearchModal,
44+
},
45+
data() {
46+
return {
47+
showGlobalSearch: false,
48+
};
49+
},
50+
mounted() {
51+
console.debug("Global search initialized!")
52+
},
53+
methods: {
54+
toggleGlobalSearch() {
55+
this.showGlobalSearch = !this.showGlobalSearch
56+
}
57+
}
58+
};
59+
</script>
60+
61+
<style lang="scss" scoped></style>

0 commit comments

Comments
 (0)