datacontract catalog: Search form closes datacontract#165

marcggl · May 8, 2024 · 95784cd · 95784cd
1 parent 5f34f2d
commit 95784cd
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
+- datacontract catalog: Search form
+
 
 ## [0.10.3] - 2024-05-05
 

diff --git a/datacontract/catalog/catalog.py b/datacontract/catalog/catalog.py
@@ -71,6 +71,7 @@ def create_index_html(contracts, path):
             datacontract_cli_version=datacontract_cli_version,
             contracts=contracts,
             contracts_size=len(contracts),
+            owners=sorted(set(dc.spec.info.owner for dc in contracts if dc.spec.info.owner)),
         )
         f.write(html_string)
     print(f"Created {index_filepath}")
diff --git a/datacontract/templates/index.html b/datacontract/templates/index.html
@@ -50,13 +50,44 @@ <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm
 
           <section id="catalog">
 
-            {# TODO search and filter form #}
+            {% if contracts_size > 0 %}
+
+            <form aria-labelledby="filter-heading" class="pb-4" >
+              <h2 id="filter-heading" class="sr-only">Filters</h2>
+              <div class="flex items-center justify-between">
+                <div class="hidden sm:flex sm:items-baseline sm:space-x-8">
+                  <div>
+                    <div class="relative rounded-md shadow-sm">
+                      <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+                        <svg class="pointer-events-none absolute h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                          <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
+                        </svg>
+                      </div>
+                      <input type="text" name="q" id="search" class="block w-72 rounded-md border-0 py-1.5 pl-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="Search">
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </form>
+            {% endif %}
+
 
             <ul role="list" class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 ">
 
               {% for contract in contracts %}
 
-              <li class="col-span-1 rounded-lg bg-white shadow hover:bg-gray-50">
+              <li class="col-span-1 rounded-lg bg-white shadow hover:bg-gray-50"
+                  data-search="{{
+    contract.spec.info.title|lower }} {{
+    contract.spec.info.owner|lower if contract.spec.info.owner else '' }} {{
+    contract.spec.info.description|lower }} {%
+    for model_name, model in contract.spec.models.items() %}
+      {{ model.description|lower }} {%
+      for field_name, field in model.fields.items() %}
+        {{ field_name|lower }} {{ field.description|lower if field.description else '' }} {%
+      endfor %}
+    {% endfor %}
+  ">
                 <a href="{{contract.html_link}}" >
                   <div class="flex w-full justify-between space-x-1 p-6 pb-4">
                     <div class="flex-1 truncate">
@@ -98,6 +129,10 @@ <h3 class="truncate text-sm font-medium text-gray-900">{{contract.spec.info.titl
             {% endif %}
 
 
+            <div id="no-results" class="hidden text-sm text-gray-500">
+              No results found.
+            </div>
+
           </section>
 
         </div>
@@ -164,5 +199,35 @@ <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">Dat
 
 </div>
 
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const searchInput = document.getElementById('search');
+    const contractsList = document.querySelectorAll('#catalog li');
+    const noResults = document.getElementById('no-results');
+
+    searchInput.addEventListener('keyup', function() {
+      let visibleCount = 0;  // Counter to track the number of visible items
+      const searchText = searchInput.value.toLowerCase();
+
+      contractsList.forEach(contract => {
+        const searchData = contract.getAttribute('data-search');
+        if (searchData && searchData.includes(searchText)) {
+          contract.style.display = '';
+          visibleCount++;
+        } else {
+          contract.style.display = 'none';
+        }
+      });
+
+      // Manage the visibility of the no results message
+      if (visibleCount === 0) {
+        noResults.classList.remove('hidden');  // Show the message if no items are visible
+      } else {
+        noResults.classList.add('hidden');     // Hide the message if there are visible items
+      }
+    });
+  });
+</script>
+
 </body>
 </html>
diff --git a/datacontract/templates/style/output.css b/datacontract/templates/style/output.css
@@ -566,6 +566,14 @@ video {
   border-width: 0;
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
+.visible {
+  visibility: visible;
+}
+
 .fixed {
   position: fixed;
 }
@@ -582,6 +590,15 @@ video {
   inset: 0px;
 }
 
+.inset-y-0 {
+  top: 0px;
+  bottom: 0px;
+}
+
+.left-0 {
+  left: 0px;
+}
+
 .right-0 {
   right: 0px;
 }
@@ -672,6 +689,10 @@ video {
   -webkit-line-clamp: 3;
 }
 
+.block {
+  display: block;
+}
+
 .inline-block {
   display: inline-block;
 }
@@ -756,6 +777,10 @@ video {
   width: 58.333333%;
 }
 
+.w-72 {
+  width: 18rem;
+}
+
 .w-full {
   width: 100%;
 }
@@ -925,6 +950,10 @@ video {
   border-radius: 0.375rem;
 }
 
+.border-0 {
+  border-width: 0px;
+}
+
 .bg-blue-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 246 255 / var(--tw-bg-opacity));
@@ -1002,6 +1031,11 @@ video {
   padding-bottom: 0.25rem;
 }
 
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1024,6 +1058,14 @@ video {
   padding-bottom: 1.75rem;
 }
 
+.pl-10 {
+  padding-left: 2.5rem;
+}
+
+.pl-3 {
+  padding-left: 0.75rem;
+}
+
 .pl-4 {
   padding-left: 1rem;
 }
@@ -1215,10 +1257,6 @@ video {
   --tw-ring-opacity: 0.05;
 }
 
-.filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1231,6 +1269,16 @@ video {
   transition-duration: 150ms;
 }
 
+.placeholder\:text-gray-400::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.placeholder\:text-gray-400::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -1251,6 +1299,21 @@ video {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-inset:focus {
+  --tw-ring-inset: inset;
+}
+
+.focus\:ring-indigo-600:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity));
+}
+
 .focus-visible\:outline:focus-visible {
   outline-style: solid;
 }
@@ -1330,12 +1393,22 @@ video {
     align-items: center;
   }
 
+  .sm\:items-baseline {
+    align-items: baseline;
+  }
+
   .sm\:space-x-6 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(1.5rem * var(--tw-space-x-reverse));
     margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  .sm\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(2rem * var(--tw-space-x-reverse));
+    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   .sm\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1373,6 +1446,15 @@ video {
     line-height: 2.25rem;
   }
 
+  .sm\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .sm\:leading-6 {
+    line-height: 1.5rem;
+  }
+
   .sm\:tracking-tight {
     letter-spacing: -0.025em;
   }