feat(core): added ability to embed discovery table (#923)

* feat(core): added ability to embed discovery table * Create angry-cycles-arrive.md
event-catalog · Oct 29, 2024 · 9a531d2 · 9a531d2
1 parent 112f735
commit 9a531d2
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 12 deletions.
diff --git a/.changeset/angry-cycles-arrive.md b/.changeset/angry-cycles-arrive.md
@@ -0,0 +1,5 @@
+---
+"@eventcatalog/core": patch
+---
+
+feat(core): added ability to embed discovery table
diff --git a/src/components/Tables/Table.tsx b/src/components/Tables/Table.tsx
@@ -15,7 +15,7 @@ import type { CollectionEntry } from 'astro:content';
 import DebouncedInput from './DebouncedInput';
 
 import { getColumnsByCollection } from './columns';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import type { CollectionTypes } from '@types';
 
 declare module '@tanstack/react-table' {
@@ -40,6 +40,18 @@ export const Table = ({
   const [data, _setData] = useState(initialData);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 
+  useEffect(() => {
+    console.log(window.location.pathname);
+  }, []);
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const id = urlParams.get('id');
+    if (id) {
+      setColumnFilters([{ id: 'name', value: id }]);
+    }
+  }, []);
+
   const columns = useMemo(() => getColumnsByCollection(collection), [collection]);
 
   const table = useReactTable({

diff --git a/src/layouts/DiscoverLayout.astro b/src/layouts/DiscoverLayout.astro
@@ -76,16 +76,7 @@ const tabs = [
 
 <VerticalSideBarLayout title={`Explore | ${title}`}>
   <main class="ml-0">
-    <div>
-      <!-- <div class="sm:hidden">
-        <label for="tabs" class="sr-only">Select a tab</label>
-        <select id="tabs" name="tabs" class="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
-          <option>My Account</option>
-          <option>Company</option>
-          <option selected>Team Members</option>
-          <option>Billing</option>
-        </select>
-      </div> -->
+    <div id="discover-collection-tabs">
       <div class="hidden sm:block">
         <div class="border-b border-gray-200">
           <nav class="flex space-x-8 -mb-0.5 pl-6" aria-label="Tabs">

diff --git a/src/layouts/VerticalSideBarLayout.astro b/src/layouts/VerticalSideBarLayout.astro
@@ -224,23 +224,27 @@ const showSideBarOnLoad = currentNavigationItem?.sidebar;
     const urlSearchParams = new URLSearchParams(window.location.search);
     const params = Object.fromEntries(urlSearchParams.entries());
     const embeded = params.embed === 'true' ? true : false;
+    const content = document.getElementById('content');
 
     if (embeded) {
       const elementsToHide = [
         'eventcatalog-vertical-nav',
         'eventcatalog-header',
         'eventcatalog-header-spacer',
         'visualiser-footer',
+        'discover-collection-tabs',
       ];
 
       elementsToHide.forEach((id) => {
         const element = document.getElementById(id);
         if (element) element.style.display = 'none';
       });
+
+      content.classList.remove('ml-16');
+      return;
     }
 
     const sidebar = document.getElementById('sidebar');
-    const content = document.getElementById('content');
     const currentPath = window.location.href;
 
     // Hide the sidebar if the current navigation item is not a sidebar item