Merge pull request #911 from NASA-IMPACT/dev-enhanced-merged

Dev enhanced merged
NASA-IMPACT · Aug 1, 2024 · 6b88467 · 6b88467
2 parents 85377f7 + b17b65d
commit 6b88467
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 30 deletions.
diff --git a/sde_indexing_helper/static/css/collections_list.css b/sde_indexing_helper/static/css/collections_list.css
@@ -32,7 +32,7 @@ body {
     color:black;
 }
 
-.dtsp-name { 
+.dtsp-name {
     margin-left:40px;
 }
 
@@ -83,11 +83,11 @@ body {
     border-color:  #fafafa;
     font-size: 0.6875rem;
     box-shadow: 0 2px 2px 0 rgba(153, 153, 153, 0.14), 0 3px 1px -2px rgba(153, 153, 153, 0.2), 0 1px 5px 0 rgba(153, 153, 153, 0.12);  }
-  
+
   .select-dropdown:hover {
     box-shadow: 0 14px 26px -12px rgba(250, 250, 250, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(250, 250, 250, 0.2);
   }
-  
+
   .select-dropdown:focus,
   .select-dropdown.focus {
     box-shadow: none, 0 0 0 0.2rem rgba(76, 175, 80, 0.5);
@@ -104,7 +104,7 @@ body {
     max-width: 400px;
     width: 400px;
   }
-  
+
  .url-cell {
     display:flex;
     align-items: center;
@@ -116,7 +116,7 @@ body {
     text-overflow: ellipsis;
     max-width: calc(100% - 30px);
     display: inline-block;
-    width: 400px;   
+    width: 400px;
     padding-right: 10px;
  }
 
@@ -140,7 +140,7 @@ text-align: left;
 color: rgba(255, 255, 255, 1);
 margin-bottom: 0 !important;
   }
-  
+
   .tableHeader{
     background-color:#15232E !important;
   }
@@ -197,7 +197,7 @@ margin-bottom: 0 !important;
    .table tbody tr:nth-child(odd) {
     background-color: #050E19 !important;
    }
-  
+
    .table tbody tr:nth-child(even) {
     background-color: #3F4A58 !important;
    }
@@ -209,7 +209,7 @@ margin-bottom: 0 !important;
     line-height: 36px;
     letter-spacing: -0.03em;
     }
-    
+
     #hideShowColumnsModal {
         position: fixed;
         top: 0;
@@ -219,19 +219,19 @@ margin-bottom: 0 !important;
         width: 30vw;
         z-index: 2000;
     }
-    
+
  #subTitle {
     font-size: 14px;
     font-weight: 400;
     line-height: 21px;
     letter-spacing: -0.02em;
     }
-    
+
       .checkbox-wrapper {
         display: flex;
         align-items: baseline;
       }
-      
+
       .checkbox-wrapper label {
         font-weight: 600;
         font-size: 16px;
@@ -240,7 +240,7 @@ margin-bottom: 0 !important;
         color: rgba(31, 41, 53, 1);
         padding-left: 10px;
       }
-    
+
       .modalFooter {
         position: sticky;
         bottom: 0;
@@ -275,10 +275,41 @@ margin-bottom: 0 !important;
       }
 
       .custom-pane-title {
-font-size: 16px;
-font-weight: 500;
-line-height: 24px;
-letter-spacing: -0.02em;
-color: rgba(255, 255, 255, 1);
-padding-left: 9px;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 24px;
+        letter-spacing: -0.02em;
+        color: rgba(255, 255, 255, 1);
+        padding-left: 9px;
+      }
+
+      .search-container {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        margin-bottom: 20px;
+      }
+
+      .search-container label {
+          margin-right: 10px;
+          font-weight: bold;
+          font-size: 18px;
+          margin-top: 5px;
+          align-items: center;
+      }
+
+      .search-container input {
+          flex: 1;
+          max-width: 400px;
+      }
+
+      .search-container input {
+        max-width: 400px;
+        padding: 5px;
+        border-radius: 8px;
+        border: 1px solid #ccc;
+      }
+
+      .search-container input:focus {
+        font-style: italic;
       }
diff --git a/sde_indexing_helper/static/images/Task.png b/sde_indexing_helper/static/images/Task.png
diff --git a/sde_indexing_helper/static/images/edit.png b/sde_indexing_helper/static/images/edit.png
diff --git a/sde_indexing_helper/static/js/collection_list.js b/sde_indexing_helper/static/js/collection_list.js
@@ -405,6 +405,29 @@ $(document).ready(function () {
     "Connector Type",
   ];
 
+  // Event listener for the collection search input
+  $('#collectionSearch').on('keyup', function () {
+    // Get the search query
+    let query = $(this).val().toLowerCase();
+
+    // Clear previous search
+    table.search('').columns().search('');
+
+    // Filter the table based on the query in the collection name and config folder data attribute
+    table.rows().every(function () {
+        let row = $(this.node());
+        let name = row.find('td').first().text().toLowerCase();
+        let configFolder = row.data('config-folder').toLowerCase();
+        let url = row.find('td').eq(1).text().toLowerCase();
+
+        if (name.includes(query) || configFolder.includes(query) || url.includes(query)) {
+            row.show();
+        } else {
+            row.hide();
+        }
+    });
+  });
+
   $(".dtsp-searchPane").each(function (index) {
     if ($(this).hasClass("dtsp-hidden")) {
       return;

diff --git a/sde_indexing_helper/templates/sde_collections/collection_detail.html b/sde_indexing_helper/templates/sde_collections/collection_detail.html
@@ -26,7 +26,7 @@
 <br>
 <div class="row">
     <div class="col-md-6 titleCol">
-        <h1 class="nameWrapper"><div class="collectionName" id="collectionName">{{ collection.name }}</div><img class="editTitle" src="../../static/images/Task.png"></img></h1>
+        <h1 class="nameWrapper"><div class="collectionName" id="collectionName">{{ collection.name }}</div><img class="editTitle" src="{% static 'images/edit.png' %}" alt="Edit"></h1>
     </div>
     <div class="col-md-6 buttonsCol">
         <div>
@@ -78,7 +78,7 @@ <h1 class="nameWrapper"><div class="collectionName" id="collectionName">{{ colle
         </div>
         <div class="timeline" id="timeline">
             {% for stage in timeline_history %}
-                <div class="timeline-stage 
+                <div class="timeline-stage
                 {% if stage.workflow_status == collection.workflow_status %} btn highlight {{ collection.workflow_status_button_color }} {% endif %}">
                     <div class="status-label">
                         {% if stage.created_at %}
@@ -346,10 +346,10 @@ <h5 class="modal-title">Rename Collection</h5>
             </div>
             <div class="modal-footer">
                 <form id="titleChangeModalForm">
-                        <input type="text" name="inputFieldName" id="inputFieldId" value="{{collection.name}}"> 
+                        <input type="text" name="inputFieldName" id="inputFieldId" value="{{collection.name}}">
                         <div class="button-wrapper">
-                            <button type="submit" class="btn btn-secondary modal-button-1" id="cancelTitleRename">Cancel</button> 
-                            <button type="submit" class="btn btn-primary modal-button-2" data-dismiss="modal" id="renameTitle">Rename</button> 
+                            <button type="submit" class="btn btn-secondary modal-button-1" id="cancelTitleRename">Cancel</button>
+                            <button type="submit" class="btn btn-primary modal-button-2" data-dismiss="modal" id="renameTitle">Rename</button>
                         </div>
                 </form>
             </div>
@@ -374,8 +374,8 @@ <h5 class="modal-title">Are you sure?</h5>
             <div class="modal-footer">
                 <form id="deleteURLModalForm">
                     <div class="button-wrapper">
-                    <button type="submit" class="btn btn-secondary modal-button-1" id="cancelURLDeletion">No</button> 
-                    <button type="submit" class="btn btn-primary modal-button-2" data-dismiss="modal" id="deleteURL">Yes</button> 
+                    <button type="submit" class="btn btn-secondary modal-button-1" id="cancelURLDeletion">No</button>
+                    <button type="submit" class="btn btn-primary modal-button-2" data-dismiss="modal" id="deleteURL">Yes</button>
                     </div>
                     </form>
             </div>
@@ -399,8 +399,8 @@ <h5 class="modal-title">Are you sure?</h5>
             <div class="modal-footer">
                 <form id="workflowStatusChangeModalForm">
                     <div class="button-wrapper">
-                    <button type="submit" class="btn btn-secondary modal-button-1" id="cancelworkflowStatusChange">No</button> 
-                    <button type="submit" class="btn btn-primary modal-button-2" data-dismiss="modal" id="changeWorkflowStatus">Yes</button> 
+                    <button type="submit" class="btn btn-secondary modal-button-1" id="cancelworkflowStatusChange">No</button>
+                    <button type="submit" class="btn btn-primary modal-button-2" data-dismiss="modal" id="changeWorkflowStatus">Yes</button>
                     </div>
                     </form>
             </div>

diff --git a/sde_indexing_helper/templates/sde_collections/collection_list.html b/sde_indexing_helper/templates/sde_collections/collection_list.html
@@ -48,10 +48,14 @@ <h2 class="title">Welcome back!</h2>
                 <td class="hideDisplay"></td>
             </tr>
         </thead>
-      
+
         <tbody>
+            <div class="search-container">
+                <label for="collectionSearch">Universal Search</label>
+                <input type="text" id="collectionSearch" placeholder="Type to search..." class="table_filter_row_input textBoxStyling">
+            </div>
             {% for collection in collections %}
-                <tr id={{ collection.id }}>
+                <tr id="{{ collection.id }}" data-config-folder="{{ collection.config_folder }}">
                     <td class="noBorder">
                         <a class="nameStyling" href="{% url 'sde_collections:detail' collection.pk %}">{{ collection.name }} <i class="material-icons">chevron_right</i></a>
                     </td>
@@ -73,7 +77,7 @@ <h2 class="title">Welcome back!</h2>
                              data-match-pattern
                              remove_protocol
                              row
-                             url>                          
+                             url>
                             <button class="btn {{ collection.workflow_status_button_color }} btn-sm dropdown-toggle"
                                     type="button"
                                     id="workflow-status-button-{{ collection.id }}"