WIP 2, fixup

Signed-off-by: fenn-cs <fenn25.fn@gmail.com>

core/src/store/index.js

@@ -0,0 +1,11 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import search from './unified-search-external-filters';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+    modules: {
+        search,
+    },
+});

core/src/store/unified-search-external-filters.js

@@ -0,0 +1,43 @@
+/*
+ * @copyright Copyright (c) 2021 Fon E. Noel NFEBE <me@nfebe.com>
+ *
+ * @author Fon E. Noel NFEBE <me@nfebe.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+const state = {
+    externalFilters: [],
+  };
+
+  const mutations = {
+    registerExternalFilter(state, { label, callback, icon }) {
+      state.externalFilters.push({ label, callback, icon });
+    },
+  };
+
+  const actions = {
+    registerExternalFilter({ commit }, { label, callback, icon }) {
+      commit('registerExternalFilter', { label, callback, icon });
+    },
+  };
+
+  export default {
+    state,
+    mutations,
+    actions,
+  };
+

core/src/unified-search.js

@@ -26,6 +26,7 @@ import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 import Vue from 'vue'
 
 import UnifiedSearch from './views/UnifiedSearch.vue'
+import store from '../src/store/index.js'
 
 // eslint-disable-next-line camelcase
 __webpack_nonce__ = btoa(getRequestToken())
@@ -47,9 +48,22 @@ Vue.mixin({
 	},
 })
 
+// Register the add/register filter action API globally
+window.OCA.Core = window.OCA.Core || {}
+window.OCA.Core.UnifiedSearch = {
+	registerFilterAction: ({ label, callback, icon }) => {
+		store.dispatch('search/registerExternalFilter', {
+			label,
+			icon,
+			callback,
+		})
+	},
+}
+
 export default new Vue({
 	el: '#unified-search',
 	// eslint-disable-next-line vue/match-component-file-name
 	name: 'UnifiedSearchRoot',
+	store,
 	render: h => h(UnifiedSearch),
 })

core/src/views/UnifiedSearchModal.vue

@@ -1,33 +1,22 @@
 <template>
-	<NcModal id="unified-search"
-		ref="unifiedSearchModal"
-		:show.sync="internalIsVisible"
-		:clear-view-delay="0"
+	<NcModal id="unified-search" ref="unifiedSearchModal" :show.sync="internalIsVisible" :clear-view-delay="0"
 		@close="closeModal">
-		<CustomDateRangeModal :is-open="showDateRangeModal"
-			class="unified-search__date-range"
-			@set:custom-date-range="setCustomDateRange"
-			@update:is-open="showDateRangeModal = $event" />
-		<ConversationsListModal :is-open="showConversationListModal"
-			class="unified-search__date-range"
-			@search-in:conversation="setSearchScopeToConversation"
-			@update:is-open="showConversationListModal = $event" />
+		<CustomDateRangeModal :is-open="showDateRangeModal" class="unified-search__date-range"
+			@set:custom-date-range="setCustomDateRange" @update:is-open="showDateRangeModal = $event" />
+		<ConversationsListModal :is-open="showConversationListModal" class="unified-search__date-range"
+			@search-in:conversation="setSearchScopeToConversation" @update:is-open="showConversationListModal = $event" />
 		<!-- Unified search form -->
 		<div ref="unifiedSearch" class="unified-search-modal">
 			<div class="unified-search-modal__header">
 				<h2>{{ t('core', 'Unified search') }}</h2>
-				<NcInputField ref="searchInput"
-					:value.sync="searchQuery"
-					type="text"
-					:label="t('core', 'Search apps, files, tags, messages') + '...'"
-					@update:value="debouncedFind" />
+				<NcInputField ref="searchInput" :value.sync="searchQuery" type="text"
+					:label="t('core', 'Search apps, files, tags, messages') + '...'" @update:value="debouncedFind" />
 				<div class="unified-search-modal__filters">
 					<NcActions :menu-name="t('core', 'Places')" :open.sync="providerActionMenuIsOpen">
 						<template #icon>
 							<ListBox :size="20" />
 						</template>
-						<NcActionButton v-for="provider in providers"
-							:key="provider.id"
+						<NcActionButton v-for="provider in providers" :key="provider.id"
 							@click="addProviderFilter(provider)">
 							<template #icon>
 								<img :src="provider.icon" class="filter-button__icon" alt="">
@@ -58,10 +47,8 @@
 							{{ t('core', 'Custom date range') }}
 						</NcActionButton>
 					</NcActions>
-					<SearchableList :label-text="t('core', 'Search people')"
-						:search-list="userContacts"
-						:empty-content-text="t('core', 'Not found')"
-						@search-term-change="debouncedFilterContacts"
+					<SearchableList :label-text="t('core', 'Search people')" :search-list="userContacts"
+						:empty-content-text="t('core', 'Not found')" @search-term-change="debouncedFilterContacts"
 						@item-selected="applyPersonFilter">
 						<template #trigger>
 							<NcButton>
@@ -80,18 +67,11 @@
 					</NcButton>
 				</div>
 				<div class="unified-search-modal__filters-applied">
-					<FilterChip v-for="filter in filters"
-						:key="filter.id"
-						:text="filter.name ?? filter.text"
-						:pretext="''"
+					<FilterChip v-for="filter in filters" :key="filter.id" :text="filter.name ?? filter.text" :pretext="''"
 						@delete="removeFilter(filter)">
 						<template #icon>
-							<NcAvatar v-if="filter.type === 'person'"
-								:user="filter.user"
-								:size="24"
-								:disable-menu="true"
-								:show-user-status="false"
-								:hide-favorite="false" />
+							<NcAvatar v-if="filter.type === 'person'" :user="filter.user" :size="24" :disable-menu="true"
+								:show-user-status="false" :hide-favorite="false" />
 							<CalendarRangeIcon v-else-if="filter.type === 'date'" />
 							<img v-else :src="filter.icon" alt="">
 						</template>
@@ -157,6 +137,7 @@ import SearchResult from '../components/UnifiedSearch/SearchResult.vue'
 import debounce from 'debounce'
 import { emit } from '@nextcloud/event-bus'
 import { useBrowserLocation } from '@vueuse/core'
+import { mapState } from 'vuex'
 import { getProviders, search as unifiedSearch, getContacts } from '../services/UnifiedSearchService.js'
 
 export default {
@@ -225,6 +206,9 @@ export default {
 	},
 
 	computed: {
+		...mapState({
+			externalFilters: state => state.search.externalFilters,
+		}),
 		userContacts() {
 			return this.contacts
 		},
@@ -267,6 +251,7 @@ export default {
 			this.contacts = this.mapContacts(contacts)
 			console.debug('Contacts', this.contacts)
 		})
+		console.debug("Calm down", this.externalFilters)
 	},
 	methods: {
 		find(query) {
@@ -277,13 +262,13 @@ export default {
 				return
 			}
 			switch (this.searchScope) {
-			case 'everywhere':
-				// Code to execute if searchScope is 'everywhere'
-				break
-			case 'conversation':
-				// Code to execute if searchScope is 'conversation'
-				break
-			default:
+				case 'everywhere':
+					// Code to execute if searchScope is 'everywhere'
+					break
+				case 'conversation':
+					// Code to execute if searchScope is 'conversation'
+					break
+				default:
 				// Code to execute if searchScope is neither 'everywhere' nor 'conversation'
 			}
 			// Event should probably be refactored at some point to used nextcloud:unified-search.search
@@ -503,39 +488,39 @@ export default {
 			let endDate
 
 			switch (range) {
-			case 'today':
-				// For 'Today', both start and end are set to today
-				startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0, 0)
-				endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59, 999)
-				this.dateFilter.text = t('core', 'Today')
-				break
-			case '7days':
-				// For 'Last 7 days', start date is 7 days ago, end is today
-				startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6, 0, 0, 0, 0)
-				this.dateFilter.text = t('core', 'Last 7 days')
-				break
-			case '30days':
-				// For 'Last 30 days', start date is 30 days ago, end is today
-				startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 29, 0, 0, 0, 0)
-				this.dateFilter.text = t('core', 'Last 30 days')
-				break
-			case 'thisyear':
-				// For 'This year', start date is the first day of the year, end is the last day of the year
-				startDate = new Date(today.getFullYear(), 0, 1, 0, 0, 0, 0)
-				endDate = new Date(today.getFullYear(), 11, 31, 23, 59, 59, 999)
-				this.dateFilter.text = t('core', 'This year')
-				break
-			case 'lastyear':
-				// For 'Last year', start date is the first day of the previous year, end is the last day of the previous year
-				startDate = new Date(today.getFullYear() - 1, 0, 1, 0, 0, 0, 0)
-				endDate = new Date(today.getFullYear() - 1, 11, 31, 23, 59, 59, 999)
-				this.dateFilter.text = t('core', 'Last year')
-				break
-			case 'custom':
-				this.showDateRangeModal = true
-				return
-			default:
-				return
+				case 'today':
+					// For 'Today', both start and end are set to today
+					startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0, 0)
+					endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59, 999)
+					this.dateFilter.text = t('core', 'Today')
+					break
+				case '7days':
+					// For 'Last 7 days', start date is 7 days ago, end is today
+					startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6, 0, 0, 0, 0)
+					this.dateFilter.text = t('core', 'Last 7 days')
+					break
+				case '30days':
+					// For 'Last 30 days', start date is 30 days ago, end is today
+					startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 29, 0, 0, 0, 0)
+					this.dateFilter.text = t('core', 'Last 30 days')
+					break
+				case 'thisyear':
+					// For 'This year', start date is the first day of the year, end is the last day of the year
+					startDate = new Date(today.getFullYear(), 0, 1, 0, 0, 0, 0)
+					endDate = new Date(today.getFullYear(), 11, 31, 23, 59, 59, 999)
+					this.dateFilter.text = t('core', 'This year')
+					break
+				case 'lastyear':
+					// For 'Last year', start date is the first day of the previous year, end is the last day of the previous year
+					startDate = new Date(today.getFullYear() - 1, 0, 1, 0, 0, 0, 0)
+					endDate = new Date(today.getFullYear() - 1, 11, 31, 23, 59, 59, 999)
+					this.dateFilter.text = t('core', 'Last year')
+					break
+				case 'custom':
+					this.showDateRangeModal = true
+					return
+				default:
+					return
 			}
 			this.dateFilter.startFrom = startDate
 			this.dateFilter.endAt = endDate