WIP: New UI global search

Resolves: #39162

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

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,62 @@
+ <!--
+  - @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: 'UnifiedSearch',
+    components: {
+        NcButton,
+        Magnify,
+        GlobalSearchModal,
+    },
+    data() {
+        return {
+            showGlobalSearch: false,
+        };
+    },
+    mounted() {
+        console.debug("Global search initialized!")
+    },
+    methods: {
+        toggleGlobalSearch() {
+            this.showGlobalSearch = !this.showGlobalSearch
+            console.log("I de here")
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped></style>

core/src/views/GlobalSearchModal.vue

@@ -0,0 +1,46 @@
+<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">
+			<h1> Hello there </h1>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+
+export default {
+	name: 'GlobalSearchModal',
+	components: {
+		NcModal,
+	},
+	props: {
+		isVisible: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	data() {
+		return {
+		}
+	},
+
+	computed: {
+
+	},
+	methods: {
+		closeModal() {
+			this.isVisible = false
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.global_search_modal {
+	padding: 5px;
+
+}
+</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'),