WIP: New UI global search

Resolves: #39162

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

core/src/components/GlobalSearch/SearchResultItem.vue

@@ -0,0 +1,68 @@
+ <!--
+  - @copyright Copyright (c) 2020 Fon E. Noel NFEBE <fenn25.fn@gmail.com>
+  -
+  - @author Fon E. Noel NFEBE <fenn25.fn@gmail.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/>.
+  -
+  -->
+<template>
+  <div class="result-item">
+    <slot name="icon"></slot>
+    <div class="details">
+      <span>Result Title</span>
+      <small>More details about result</small>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'SearchResultItem',
+  components: {
+  },
+
+  data() {
+    return {
+    }
+  },
+
+  methods: {
+
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.result-item {
+  display: flex;
+  padding: 5px; /* Add padding for the border effect */
+  border: 1px solid #f0f0f0; /* Faint border */
+  border-radius: 10px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); /* Light shadow */
+  transition: background-color 0.3s ease; /* Smooth hover transition */
+
+  & .details {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &:hover {
+    background-color: var(--color-placeholder-light);
+  }
+}
+</style>

core/src/global-search.js

@@ -0,0 +1,55 @@
+/**
+ * @copyright Copyright (c) 2020 Fon E. Noel NFEBE <fenn25.fn@gmail.com>
+ *
+ * @author Fon E. Noel NFEBE <fenn25.fn@gmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * 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/>.
+ *
+ */
+
+import { getLoggerBuilder } from '@nextcloud/logger'
+import { getRequestToken } from '@nextcloud/auth'
+import { translate as t, translatePlural as n } from '@nextcloud/l10n'
+import Vue from 'vue'
+
+import GlobalSearch from './views/GlobalSearch.vue'
+
+// eslint-disable-next-line camelcase
+__webpack_nonce__ = btoa(getRequestToken())
+
+const logger = getLoggerBuilder()
+	.setApp('global-search')
+	.detectUser()
+	.build()
+
+Vue.mixin({
+	data() {
+		return {
+			logger,
+		}
+	},
+	methods: {
+		t,
+		n,
+	},
+})
+
+export default new Vue({
+	el: '#global-search',
+	// eslint-disable-next-line vue/match-component-file-name
+	name: 'GlobalSearchRoot',
+	render: h => h(GlobalSearch),
+})

core/src/views/GlobalSearch.vue

@@ -0,0 +1,61 @@
+ <!--
+  - @copyright Copyright (c) 2020 Fon E. Noel NFEBE <fenn25.fn@gmail.com>
+  -
+  - @author Fon E. Noel NFEBE <fenn25.fn@gmail.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/>.
+  -
+  -->
+<template>
+    <div>
+        <NcButton aria-label="Global search" @click="toggleGlobalSearch">
+            <template #icon>
+                <Magnify class="unified-search__trigger" :size="22" />
+            </template>
+        </NcButton>
+        <GlobalSearchModal :isVisible="showGlobalSearch" />
+    </div>
+</template>
+
+<script>
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import Magnify from 'vue-material-design-icons/Magnify.vue'
+import GlobalSearchModal from './GlobalSearchModal.vue';
+
+export default {
+    name: 'GlobalSearch',
+    components: {
+        NcButton,
+        Magnify,
+        GlobalSearchModal,
+    },
+    data() {
+        return {
+            showGlobalSearch: false,
+        };
+    },
+    mounted() {
+        console.debug("Global search initialized!")
+    },
+    methods: {
+        toggleGlobalSearch() {
+            this.showGlobalSearch = !this.showGlobalSearch
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped></style>

core/src/views/GlobalSearchModal.vue

@@ -0,0 +1,173 @@
+<template>
+	<NcModal v-if="isVisible" :show.sync="isVisible" id="global-search" :clear-view-delay="0" :title="t('Global search')"
+		@close="closeModal">
+		<!-- Global search form -->
+		<div class="global_search_modal">
+			<NcInputField :value.sync="searchQuery" type="text" :label="t('core', 'Global search')" />
+			<div class="filters">
+				<div class="top-apps">
+					<div v-for="(appFilter, index) in userTopApps()" :class="{'top-app': true, 'active': index == 0 || index == 1}">
+						<span></span><span> {{ appFilter.appName }}</span>
+					</div>
+				</div>
+				<NcInputField :value.sync="placesFilter" type="text" :label="t('core', 'Places')" />
+				<NcDateTimePicker v-model="dateTimeFilter" type="datetime" confirm />
+				<NcSelect v-bind="peopleSeclectProps" v-model="peopleSeclectProps.value" />
+			</div>
+			<div v-for="appResult in dummyAppResults" class="results">
+				<div class="result">
+					<div class="result-title">
+						<span>{{ appResult.appName }}</span>
+					</div>
+					<div class="result-items">
+						<SearcResultItem v-for="result in [{}, {}, {}, {}]" />
+					</div>
+					<div class="result-footer">
+						<NcButton type="tertiary-no-background">
+							Load more results
+							<template #icon>
+								<DotsHorizontalIcon :size="20" />
+							</template>
+						</NcButton>
+						<NcButton alignment="end-reverse" type="tertiary-no-background">
+							Search in files
+							<template #icon>
+								<ArrowRight :size="20" />
+							</template>
+						</NcButton>
+					</div>
+				</div>
+			</div>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcDateTimePicker from '@nextcloud/vue/dist/Components/NcDateTimePicker.js'
+import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+import DotsHorizontalIcon from 'vue-material-design-icons/DotsHorizontal.vue'
+import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+
+import SearcResultItem from '../components/GlobalSearch/SearchResultItem.vue'
+
+export default {
+	name: 'GlobalSearchModal',
+	components: {
+		NcButton,
+		NcModal,
+		NcSelect,
+		NcInputField,
+		ArrowRight,
+		DotsHorizontalIcon,
+		SearcResultItem,
+		NcDateTimePicker,
+	},
+	props: {
+		isVisible: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			searchQuery: '',
+			placesFilter: '',
+			dateTimeFilter: null,
+			dummyAppResults: [
+				{ appName: 'Files' },
+				{ appName: 'Talk' },
+			]
+		}
+	},
+
+	computed: {
+		peopleSeclectProps: {
+			get() {
+				return {
+					// inputId: getRandomId(),
+					multiple: true,
+					placement: 'top',
+					options: this.getUsers(),
+				}
+			}
+
+		}
+
+	},
+	methods: {
+		closeModal() {
+			this.isVisible = false
+		},
+		userTopApps() {
+			return [
+				{ appName: 'Files', icon: '' },
+				{ appName: 'Talk', icon: '' },
+				{ appName: 'Mail', icon: '' },
+			]
+		},
+		getUsers() {
+			return [
+				'foo',
+				'bar',
+				'baz',
+				'qux',
+				'quux',
+			]
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.global_search_modal {
+	padding: 10px 20px 10px 20px;
+
+	& .filters {
+		display: flex;
+		padding-top: 5px;
+		justify-content: space-between;
+
+		& .top-apps {
+			display: flex;
+			align-items: center;
+			flex: 1;
+
+			& .top-app {
+				margin-right: 2px;
+				padding: 4px 6px 4px 6px;
+				border-radius: 10px;
+
+				&.active {
+					color: var(--color-main-background);
+					background-color: var(--color-primary-element);
+				}
+			}
+		}
+	}
+
+	& .results {
+		padding: 10px;
+
+		& .result {
+
+			& .result-title {
+				span {
+					color: var(--color-primary-element);
+					font-weight: bolder;
+					font-size: 16px;
+				}
+			}
+
+			& .result-footer {
+				justify-content: space-between;
+				align-items: center;
+				display: flex;
+			}
+		}
+
+	}
+}
+</style>

core/templates/layout.user.php

@@ -68,6 +68,7 @@
 			</div>
 
 			<div class="header-right">
+			    <div id="global-search"></div>
 				<div id="unified-search"></div>
 				<div id="notifications"></div>
 				<div id="contactsmenu"></div>

lib/private/TemplateLayout.php

@@ -110,6 +110,7 @@ public function __construct($renderAs, $appId = '') {
 			$this->initialState->provideInitialState('unified-search', 'min-search-length', (int)$this->config->getAppValue('core', 'unified-search.min-search-length', (string)1));
 			$this->initialState->provideInitialState('unified-search', 'live-search', $this->config->getAppValue('core', 'unified-search.live-search', 'yes') === 'yes');
 			Util::addScript('core', 'unified-search', 'core');
+			Util::addScript('core', 'global-search', 'core');
 
 			// Set body data-theme
 			$this->assign('enabledThemes', []);

webpack.modules.js

@@ -38,6 +38,7 @@ module.exports = {
 		profile: path.join(__dirname, 'core/src', 'profile.js'),
 		recommendedapps: path.join(__dirname, 'core/src', 'recommendedapps.js'),
 		systemtags: path.resolve(__dirname, 'core/src', 'systemtags/merged-systemtags.js'),
+		'global-search': path.join(__dirname, 'core/src', 'global-search.js'),
 		'unified-search': path.join(__dirname, 'core/src', 'unified-search.js'),
 		'unsupported-browser': path.join(__dirname, 'core/src', 'unsupported-browser.js'),
 		'unsupported-browser-redirect': path.join(__dirname, 'core/src', 'unsupported-browser-redirect.js'),