Added Datahub Search and record view

camptocamp · Dec 19, 2024 · c5507f3 · c5507f3
1 parent 91e4058
commit c5507f3
Show file tree

Hide file tree

Showing 3 changed files with 208 additions and 74 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -11,7 +11,6 @@ on:
       - geocat-gpf
 
 jobs:
-
   gh-pages:
     name: Deploy geoadmin demo
     runs-on: ubuntu-latest

diff --git a/apps/geoadmin-demo/src/index.html b/apps/geoadmin-demo/src/index.html
@@ -2,57 +2,108 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Geoadmin + Geocat integration demo</title>
-    <base href="/" />
+    <title>Geoadmin + Geocat Search</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <script src="https://cdn.jsdelivr.net/gh/camptocamp/geocat-geonetwork-ui@wc-dist-geocat-gpf/gn-wc.js"></script>
   </head>
   <body>
-    <iframe
-      id="geoadmin-root"
-      src="https://map.geo.admin.ch/#embed?bgLayer=ch.swisstopo.pixelkarte-grau"
-    ></iframe>
-
-    <input class="search-input" type="text" />
-
-    <!-- this stays hidden but is just there for initializing the GNUI global -->
-    <gn-search-input
-      style="display: none"
-      api-url="https://www.geocat.ch/geonetwork/srv/api"
-      primary-color="#0f4395"
-      secondary-color="#8bc832"
-    ></gn-search-input>
-
-    <gn-record-view
-      api-url="https://www.geocat.ch/geonetwork/srv/api"
-      primary-color="#0f4395"
-      secondary-color="#8bc832"
-      record-id="417e9f31-d9d7-4165-9a5c-2f12b7191926"
-    ></gn-record-view>
-
+    <div class="map-container">
+      <div class="search-container">
+        <input type="text" id="search" placeholder="Search for record.." />
+        <ul id="results"></ul>
+      </div>
+      <iframe
+        id="geoadmin-root"
+        src="https://map.geo.admin.ch/#embed?bgLayer=ch.swisstopo.pixelkarte-grau"
+      ></iframe>
+    </div>
     <script>
-      // window.addEventListener(
-      //   'message',
-      //   (e) => {
-      //     if (e.origin !== 'https://map.geo.admin.ch') return
-      //     console.log(e.data) // log iframe events
-      //   },
-      //   false
-      // )
-
-      GNUI.recordsRepository
-        .search({
-          filters: {
-            any: 'wasser',
-            linkProtocol: '/OGC:WMT?S.*/',
-          },
-          offset: 0,
-          limit: 10,
-          sort: ['desc', '_score'],
-          fields: ['resourceTitleObject', 'link', 'uuid'],
+      const searchInput = document.getElementById('search')
+      const resultsContainer = document.getElementById('results')
+
+      searchInput.addEventListener('input', (e) => {
+        const searchTerm = e.target.value
+
+        if (!searchTerm) {
+          resultsContainer.innerHTML = ''
+          return
+        }
+
+        GNUI.recordsRepository
+          .search({
+            filters: {
+              any: searchTerm,
+              linkProtocol: '/OGC:WMT?S.*/',
+            },
+            offset: 0,
+            limit: 10,
+            sort: ['desc', '_score'],
+            fields: ['resourceTitleObject', 'link', 'uuid'],
+          })
+          .subscribe({
+            next: (results) => {
+              displayResults(results.records)
+            },
+            error: (err) => {
+              console.error('Error fetching search results:', err)
+            },
+          })
+      })
+
+      function displayResults(items) {
+        resultsContainer.innerHTML = items
+          .map(
+            (item) => `
+      <li>
+        <div>
+          <div class="result-title">${item.title || 'No title available'}</div>
+        </div>
+        <button class="open-btn" data-uuid="${
+          item.uniqueIdentifier
+        }">Open</button>
+      </li>
+    `
+          )
+          .join('')
+
+        resultsContainer.querySelectorAll('.open-btn').forEach((btn) => {
+          btn.addEventListener('click', (e) => {
+            const uuid = e.target.dataset.uuid
+            console.log('Selected UUID:', uuid)
+
+            const existingContainer = document.querySelector(
+              '.gn-record-view-container'
+            )
+            if (existingContainer) {
+              existingContainer.remove()
+            }
+
+            const container = document.createElement('div')
+            container.classList.add('gn-record-view-container')
+
+            const closeButton = document.createElement('button')
+            closeButton.classList.add('close-btn')
+            closeButton.innerHTML = '&times;'
+            closeButton.addEventListener('click', () => {
+              container.remove()
+            })
+
+            const recordView = document.createElement('gn-record-view')
+            recordView.setAttribute(
+              'api-url',
+              'https://www.geocat.ch/geonetwork/srv/api'
+            )
+            recordView.setAttribute('primary-color', '#0f4395')
+            recordView.setAttribute('secondary-color', '#8bc832')
+            recordView.setAttribute('record-id', uuid)
+
+            container.appendChild(closeButton)
+            container.appendChild(recordView)
+
+            document.body.appendChild(container)
+          })
         })
-        .subscribe(console.log)
+      }
     </script>
   </body>
 </html>
diff --git a/apps/geoadmin-demo/src/styles.css b/apps/geoadmin-demo/src/styles.css
@@ -1,45 +1,129 @@
-/* You can add global styles to this file, and also import other style files */
-html,
-body {
+body,
+html {
+  margin: 0;
+  padding: 0;
   height: 100%;
+  font-family: Arial, sans-serif;
 }
-body {
-  margin: 0;
+.map-container {
   position: relative;
-}
-
-#geoadmin-root {
   width: 100%;
-  height: calc(100% - 4px);
-  border: 0;
+  height: 100vh;
 }
-
-.search-input {
+.search-container {
   position: absolute;
+  top: 60px;
   left: 20px;
-  top: 55px;
-  width: 40%;
+  width: 300px;
+  z-index: 10;
+}
+#search {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 0;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+#results {
   background: white;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  max-height: 400px;
+  overflow-y: auto;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  width: 100%;
 }
 
-gn-results-list {
-  position: absolute;
-  left: 20px;
-  top: 125px;
-  bottom: 20px;
-  width: 40%;
-  padding: 8px;
-  background: white;
-  overflow: auto;
+#results li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  border-bottom: 1px solid #eee;
+  transition: background-color 0.2s;
+  gap: 10px;
+}
+
+#results li div {
+  flex: 1;
+  overflow-wrap: break-word;
+}
+
+#results li:hover {
+  background-color: #f0f8ff;
+  transform: scale(1.02);
+}
+
+#results li:last-child {
+  border-bottom: none;
+}
+
+.result-title {
+  font-size: 14px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 5px;
+  line-height: 1.2;
+}
+
+.open-btn {
+  flex-shrink: 0;
+  background-color: #0f4395;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 3px;
+  cursor: pointer;
+  transition: background-color 0.3s;
 }
 
-gn-record-view {
+.open-btn:hover {
+  background-color: #0e3d84;
+}
+
+#geoadmin-root {
+  width: 100%;
+  height: 100vh;
+  border: none;
+}
+.gn-record-view-container {
   position: absolute;
-  right: 20px;
-  top: 125px;
-  bottom: 20px;
+  right: 55px;
+  top: 40px;
+  bottom: 40px;
   width: 40%;
-  padding: 8px;
   background: white;
+  padding: 20px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
   overflow: auto;
+  z-index: 100;
+}
+
+.close-btn {
+  position: sticky;
+  top: 0;
+  margin-left: auto;
+  margin-right: 8px;
+  background: #050505;
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+}
+
+.close-btn:hover {
+  background: #d32f2f;
 }