diff --git a/apps/geoadmin-demo/src/index.html b/apps/geoadmin-demo/src/index.html
index 7f230b875..362747f24 100644
--- a/apps/geoadmin-demo/src/index.html
+++ b/apps/geoadmin-demo/src/index.html
@@ -1,58 +1,103 @@
<!DOCTYPE html>
<html lang="en">
- <head>
- <meta charset="utf-8" />
- <title>Geoadmin + Geocat integration demo</title>
- <base href="/" />
- <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>
-
- <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'],
- })
- .subscribe(console.log)
- </script>
- </body>
+<head>
+ <meta charset="utf-8">
+ <title>Geoadmin + Geocat Search</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <script src="https://cdn.jsdelivr.net/gh/camptocamp/geocat-geonetwork-ui@wc-dist-geocat-gpf/gn-wc.js"></script>
+</head>
+<body>
+<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>
+ 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 = '×';
+ 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);
+ });
+ });
+ }
+
+</script>
+</body>
</html>
diff --git a/apps/geoadmin-demo/src/styles.css b/apps/geoadmin-demo/src/styles.css
index bcc021bda..ed0d76cde 100644
--- a/apps/geoadmin-demo/src/styles.css
+++ b/apps/geoadmin-demo/src/styles.css
@@ -1,45 +1,130 @@
-/* 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;
}
-gn-record-view {
+
+#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;
+}
+
+.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;
}