From 48516e7f463e40fb327303a69362d026f46dfdda Mon Sep 17 00:00:00 2001
From: Claus-Peter Huebner <claus-peter.huebner@email.de>
Date: Thu, 4 Apr 2024 21:56:41 +0200
Subject: [PATCH] create page for usersearch

---
 frontend/src/components/Menu/Sidebar.vue |  2 +-
 frontend/src/locales/de.json             |  8 +++-
 frontend/src/locales/en.json             |  8 +++-
 frontend/src/locales/fr.json             |  8 +++-
 frontend/src/pages/UserSearch.vue        | 57 ++++++++++++++++--------
 frontend/src/routes/routes.js            |  2 +-
 6 files changed, 62 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
index 8e19acb15..2421c82c2 100644
--- a/frontend/src/components/Menu/Sidebar.vue
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -28,7 +28,7 @@
             <b-icon icon="layers" aria-hidden="true"></b-icon>
             <span class="ml-2">{{ $t('GDT') }}</span>
           </b-nav-item>
-          <b-nav-item to="/information" class="mb-3"  active-class="activeRoute">
+          <b-nav-item to="/information" class="mb-3" active-class="activeRoute">
             <b-img src="/img/svg/info.svg" height="20" class="svg-icon" />
             <span class="ml-2">{{ $t('navigation.info') }}</span>
           </b-nav-item>
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index bae15f0de..f2f4f6205 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -279,7 +279,8 @@
     "overview": "Willkommen {name}",
     "send": "Sende Gradidos",
     "settings": "Einstellungen",
-    "transactions": "Deine Transaktionen"
+    "transactions": "Deine Transaktionen",
+    "usersearch": "GMS Nutzersuche"
   },
   "qrCode": "QR Code",
   "send_gdd": "GDD versenden",
@@ -412,6 +413,11 @@
   "transaction-link": {
     "send_you": "sendet dir"
   },
+  "usersearch": {
+    "headline": "Gradido GMS-Nutzersuche",
+    "text": "Ganz gleich zu welcher Community du gehörst, über die Gradido-Nutzersuche kannst du in einer geographischen Karte deine Community-Mitglieder als auch andere Communities und deren Mitglieder finden.",
+    "button": "Starte die Nutzersuche..."
+  },
   "via_link": "über einen Link",
   "welcome": "Willkommen in der Gemeinschaft"
 }
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 4a4fe4c7f..c3bf40e29 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -279,7 +279,8 @@
     "overview": "Welcome {name}",
     "send": "Send Gradidos",
     "settings": "Settings",
-    "transactions": "Your transactions"
+    "transactions": "Your transactions",
+    "usersearch": "GMS User-Search"
   },
   "qrCode": "QR Code",
   "send_gdd": "Send GDD",
@@ -412,6 +413,11 @@
   "transaction-link": {
     "send_you": "wants to send you"
   },
+  "usersearch": {
+    "headline": "Gradido GMS-UserSearch",
+    "text": "Ganz gleich zu welcher Community du gehörst, über die Gradido-Nutzersuche kannst du in einer geographischen Karte deine Community-Mitglieder als auch andere Communities und deren Mitglieder finden.",
+    "button": "Start the User-Search..."
+  },
   "via_link": "via Link",
   "welcome": "Welcome to the community"
 }
diff --git a/frontend/src/locales/fr.json b/frontend/src/locales/fr.json
index fef19e169..4581a3c07 100644
--- a/frontend/src/locales/fr.json
+++ b/frontend/src/locales/fr.json
@@ -261,7 +261,8 @@
     "overview": "Bienvenue {name}",
     "send": "Envoyé Gradidos",
     "settings": "Configuration",
-    "transactions": "Vos transactions"
+    "transactions": "Vos transactions",
+    "usersearch": "GMS Recherche d'Utilisateur"
   },
   "qrCode": "QR Code",
   "send_gdd": "Envoyer GDD",
@@ -353,6 +354,11 @@
   "transaction-link": {
     "send_you": "veut vous envoyer"
   },
+  "usersearch": {
+    "headline": "Gradido GMS-Recherche d'Utilisateur",
+    "text": "Ganz gleich zu welcher Community du gehörst, über die Gradido-Nutzersuche kannst du in einer geographischen Karte deine Community-Mitglieder als auch andere Communities und deren Mitglieder finden.",
+    "button": "Lancer le Recherche d'Utilisateur..."
+  },
   "via_link": "par lien",
   "welcome": "Bienvenu dans la communauté"
 }
diff --git a/frontend/src/pages/UserSearch.vue b/frontend/src/pages/UserSearch.vue
index 465f19bdd..9e55d487f 100644
--- a/frontend/src/pages/UserSearch.vue
+++ b/frontend/src/pages/UserSearch.vue
@@ -1,47 +1,68 @@
 <template>
-  <div class="h3">
-    {{ gmsPlaygroundUri }}
+  <div class="usersearch">
+    <b-container class="bg-white appBoxShadow gradido-border-radius p-4 mt--3">
+      <div class="h3">{{ $t('usersearch.headline') }}</div>
+      <div class="my-4 text-small">
+        {{ $t('usersearch.text') }}
+      </div>
+      <!-- div class="my-4 text-small">
+        {{ this.gmsUri }}
+      </div -->
+      <b-row class="my-5">
+        <b-col cols="12">
+          <div class="text-lg-right">
+            <b-button variant="gradido" :href="this.gmsUri" target="_blank">
+              {{ $t('usersearch.button') }}
+            </b-button>
+          </div>
+        </b-col>
+      </b-row>
+    </b-container>
   </div>
 </template>
 <script>
 import { authenticateGmsUserSearch } from '@/graphql/queries'
-
+// import GmsInfo from '@/assets/UserSearch/usersearchinfo.json'
 export default {
-  name: 'GMS User Playground',
+  name: 'UserSearch',
   data() {
     return {
-      gmsPlaygroundUrl: 'unknown',
-      gmsAuthToken: '',
+      gmsUri: 'not initialized',
+      // 'http://localhost:8080/playground?access_token=pk.eyJ1IjoidmlrYXNpbG16IiwiYSI6ImNsbG03NzNkNTFwZXMzbHQ2bTV6NHA0ZjgifQ.knlN4jnVdmhDkJTaka5RoQ&coords=[9.620812595440933,49.695725844876904]',
     }
   },
   methods: {
-    authenticateGmsUserPlayground() {
+    async authenticateGmsUserPlayground() {
       this.$apollo
         .query({
           query: authenticateGmsUserSearch,
         })
-        .then((result) => {
-          this.gmsPlaygroundUrl = result.data.url,
-          this.gmsAuthToken = result.data.token
+        .then(async (result) => {
+          this.gmsUri =
+            result.data.authenticateGmsUserSearch.url +
+            '?accesstoken=' +
+            result.data.authenticateGmsUserSearch.token
         })
         .catch(() => {
-          this.toastError('listContributionLinks has no result, use default data')
+          this.toastError('authenticateGmsUserSearch failed!')
         })
     },
   },
   /*
   openGmsUserPlayground: function () {
-    // window.open(this.gmsPlaygroundUrl + '?' + this.gmsAuthToken, '_blank')
-    let uri = this.gmsPlaygroundUrl + '?' + this.gmsAuthToken
-    let route = this.$router.resolve({path: uri});
-    // let route = this.$router.resolve('/link/to/page'); // This also works.
-    window.open(route.href, '_blank');
+    window.open(this.gmsPlaygroundUrl + '?' + this.gmsAuthToken, '_blank')
+    // let uri = this.gmsPlaygroundUrl + '?' + this.gmsAuthToken
+    // let route = this.$router.resolve({path: uri});
+    /// / let route = this.$router.resolve('/link/to/page'); // This also works.
+    // window.open(route.href, '_blank');
+  },
+  beforeCreate() {
+    this.authenticateGmsUserPlayground()
   },
   */
   created() {
     this.authenticateGmsUserPlayground()
+    // this.openGmsUserPlayground()
   },
 }
 </script>
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped></style>
diff --git a/frontend/src/routes/routes.js b/frontend/src/routes/routes.js
index 2636b963b..d8f85b858 100755
--- a/frontend/src/routes/routes.js
+++ b/frontend/src/routes/routes.js
@@ -85,7 +85,7 @@ const routes = [
     component: () => import('@/pages/UserSearch'),
     meta: {
       requiresAuth: true,
-      pageTitle: 'user search',
+      pageTitle: 'usersearch',
     },
   },
   // {