Merge branch 'dev' into 117-all-delete-buttons-should-have-modal-popup

sde_collections/views.py

@@ -140,7 +140,27 @@ def get_context_data(self, **kwargs):
             )
         if "comments_form" not in context:
             context["comments_form"] = CommentsForm()
-
+
+        # Initialize a dictionary to hold the most recent history for each workflow status
+        timeline_history = {}
+
+        # Get the most recent history for each workflow status
+        recent_histories = WorkflowHistory.objects.filter(collection=self.get_object()).order_by('workflow_status', '-created_at').distinct('workflow_status')
+
+        # Populate the dictionary with the actual history objects
+        for history in recent_histories:
+            timeline_history[history.workflow_status] = history
+
+        # Add placeholders for stages with no workflow history
+        for status in WorkflowStatusChoices:
+            if status not in timeline_history:
+                timeline_history[status] = {
+                    'workflow_status': status,
+                    'created_at': None,
+                    'label': WorkflowStatusChoices(status).label,
+                }
+
+        context['timeline_history'] = [timeline_history[status] for status in WorkflowStatusChoices]
         context["required_urls"] = RequiredUrls.objects.filter(collection=self.get_object())
         context["segment"] = "collection-detail"
         context["comments"] = Comments.objects.filter(collection=self.get_object()).order_by("-created_at")

sde_indexing_helper/static/css/collection_detail.css

@@ -224,4 +224,125 @@ color:black;
     flex-direction: column;
     justify-content: space-between;
    }
+}
+
+/* Status Timeline Classes */
+.timeline-container {
+    position: relative;
+    overflow: hidden;
+    padding: 10px;
+}
+
+.timeline {
+    display: flex;
+    overflow-x: scroll;
+    white-space: nowrap;
+    padding: 10px;
+    margin: 20px 0;
+    position: relative;
+    -ms-overflow-style: none; /* Hide scrollbar IE and Edge */
+    scrollbar-width: none; /* Hide for Firefox */
+}
+
+/* Hide scrollbar on Chrome , Safari, Opera */
+.timeline::-webkit-scrollbar {
+    display: none;
+}
+
+
+.timeline-stage {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    height: 75px;
+    min-width: 170px;
+    max-width: 200px;
+    text-align: center;
+    background-color: #3F4A58;
+    font-size: .85em;
+    border-right: 1px solid #15232E;
+
+}
+
+/* Stage Label Stylings */
+.timeline-stage .status-label {
+    font-weight: bold;
+    margin-bottom: 5px;
+    width: 90%;
+    margin: auto;
+    word-wrap: break-word;
+    white-space: normal;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    margin-top:0px !important;
+}
+
+/* Date Label Styling */
+.timeline-stage:not(.highlight) .modified-date {
+    font-size: .95em;
+    margin-top: auto !important;
+}
+
+/* Color if not inheriting from the selected button color */
+.timeline-stage:not(.highlight) .status-label,
+.timeline-stage:not(.highlight) .modified-date {
+    color: #8697A8;  
+}
+
+/* Overwrite button inheritance for unwanted stylings */
+.highlight {
+    margin: 0;
+    padding: 0;
+    border: 1px solid #ccc !important;
+    text-transform: none;
+
+}
+
+.arrow {
+    font-size: 2em;
+    cursor: pointer;
+    position: absolute;
+    user-select: none;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+    padding: 0 10px;
+    background-color: #15232E;
+    border: 1px solid #A7BACD;
+    border-radius: 5px;
+    height: 30px;
+    width: 30px;
+}
+
+.arrow-svg {
+    margin-bottom: 3px;
+}
+
+.arrow-svg path {
+    fill: #8697AB;
+}
+
+.arrow:hover .arrow-svg path {
+    fill: #FFFFFF;
+}
+
+#left-arrow {
+    left: 20px;
+}
+
+#right-arrow {
+    right: 20px;
+}
+
+.arrow:hover {
+    color: #333;
+    opacity: 100%;
+}
+
+.btn{
+    line-height:24px !important;
 }

sde_indexing_helper/static/css/collections_list.css

@@ -1,9 +1,3 @@
-#collection_table_filter>label>span>input {
-    float: right;
-    margin-bottom: 10px;
-    color: red;
-}
-
 body {
     background-color: #f5f5f5;
 }
@@ -270,4 +264,8 @@ margin-bottom: 0 !important;
 
       .centerAlign{
         text-align:center !important;
+      }
+
+      div.dtsp-searchPane div.dt-container div.dt-scroll-body, div.dtsp-searchPane div.dt-container div.dataTables_scrollBody, div.dtsp-searchPane div.dataTables_wrapper div.dt-scroll-body, div.dtsp-searchPane div.dataTables_wrapper div.dataTables_scrollBody {
+        background-color: transparent !important;
       }

sde_indexing_helper/static/css/project.css

@@ -186,12 +186,16 @@ body {
 
 .dt-scroll{
   background-color: #15232E !important;
+  height: 100% !important;
 }
 
 .dt-scroll-body{
-  height:min-content !important;
+  height:100% !important;
 }
 
+.dtsp-searchPane .justify-content-md-center {
+  height: 198px !important;
+}
 
  .table > tbody > tr > td {
   border:none;
@@ -567,5 +571,8 @@ height: 38px;
     justify-content: center;
 }
 
+.dropdown-menu {
+  z-index: 1030;
+}
 
 

sde_indexing_helper/static/js/collection_detail.js

@@ -54,6 +54,16 @@ function postDocTypeChange(collection_id, docType) {
   });
 }
 
+
+// Toast for changing workflow status
+$(document).ready(function() {
+  if (localStorage.getItem("WorkflowStatusChange")) {
+    toastr.success("Workflow Status Updated!");
+    localStorage.removeItem("WorkflowStatusChange")
+
+  }
+})
+
 //////////////////////////////
 ///// DELETE URL CHANGE //////
 //////////////////////////////
@@ -282,6 +292,59 @@ $(document).ready(function () {
   });
 });
 
+const $timeline = $("#timeline");
+
+function checkArrows() {
+  const scrollLeft = $timeline.scrollLeft();
+  const maxScrollLeft = $timeline[0].scrollWidth - $timeline[0].clientWidth;
+
+  if (scrollLeft === 0) {
+      $('#left-arrow').hide();
+  } else {
+      $('#left-arrow').show();
+  }
+
+  if (scrollLeft >= maxScrollLeft) {
+      $('#right-arrow').hide();
+  } else {
+      $('#right-arrow').show();
+  }
+}
+
+// Clicking on left right arrows to move timeline
+$(document).ready(function() {
+  $("#left-arrow").click(function() {
+      $("#timeline").scrollLeft($("#timeline").scrollLeft() - 510);
+      checkArrows();
+  });
+
+  $("#right-arrow").click(function() {
+      $("#timeline").scrollLeft($("#timeline").scrollLeft() + 510);
+      checkArrows();
+  });
+});
+
+$timeline.on("scroll", checkArrows);
+
+
+// Scroll to center the highlighted cell
+function centerHighlighted() {
+    const $timeline = $("#timeline");
+    const $highlighted = $timeline.find(".highlight");
+
+    if ($highlighted.length) {
+        const timelineWidth = $timeline.width();
+        const highlightedOffset = $highlighted.offset().left - $timeline.offset().left;
+        const highlightedWidth = $highlighted.outerWidth(true);
+        const scrollLeft = $timeline.scrollLeft();
+        const centerPosition = highlightedOffset - (timelineWidth / 2) + (highlightedWidth / 2);
+
+        $timeline.scrollLeft(scrollLeft + centerPosition);
+    }
+}
+
+centerHighlighted();
+
 function postWorkflowStatus(collection_id, workflow_status) {
   var url = `/api/collections/${collection_id}/`;
   $.ajax({
@@ -295,7 +358,8 @@ function postWorkflowStatus(collection_id, workflow_status) {
       "X-CSRFToken": csrftoken,
     },
     success: function (data) {
-      toastr.success("Workflow Status Updated!");
+      localStorage.setItem("WorkflowStatusChange", data.OperationStatus);
+      location.reload();
     },
   });
 }

sde_indexing_helper/static/js/collection_list.js

@@ -175,6 +175,14 @@ let table = $("#collection_table").DataTable({
       },
       targets: [7, 8],
     },
+    {
+      searchPanes: {
+        dtOpts: {
+          scrollY: "100%",
+        }
+      },
+      targets: [5],
+    },
   ],
 });
 

sde_indexing_helper/templates/sde_collections/collection_detail.html

@@ -45,14 +45,63 @@ <h1 class="nameWrapper"><div class="collectionName" id="collectionName">{{ colle
 </div>
 
 <div class="detailContainer">
+    <div class="timeline-container">
+        <div class="arrow" id="left-arrow">
+            <svg
+                class="arrow-svg"
+                width="6"
+                height="10"
+                viewBox="0 0 6 10"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                style="transform: rotate(180deg);"
+                >
+                <path
+                    id="Icon/Arrow"
+                    d="M1.69209 0.273249C2.05245 0.624986 5.57328 4.32082 5.57328 4.32082C5.76553 4.50962 5.86208 4.75532 5.86208 5.00102C5.86208 5.24672 5.76553 5.49242 5.57328 5.6795C5.57328 5.6795 2.05245 9.37706 1.69209 9.72707C1.33173 10.0788 0.683431 10.1029 0.299795 9.72707C-0.0847026 9.35292 -0.114876 8.82962 0.299795 8.37012L3.53009 5.00102L0.299795 1.63192C-0.114876 1.17242 -0.0847026 0.648263 0.299795 0.273249C0.683431 -0.102628 1.33173 -0.0793515 1.69209 0.273249Z"
+                />
+            </svg>
+        </div>
+        <div class="timeline" id="timeline">
+            {% for stage in timeline_history %}
+                <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 %}
+                            {{ stage.get_workflow_status_display }}
+                        {% else %}
+                            {{ stage.label }}
+                        {% endif %}
+                    </div>
+                        <div class="modified-date"> {{ stage.created_at|date:"m/d/Y" }} </div>
+                </div>
+            {% endfor %}
+        </div>
+        <div class="arrow" id="right-arrow">
+            <svg
+                class="arrow-svg"
+                width="6"
+                height="10"
+                viewBox="0 0 6 10"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                style="transform: rotate(0deg);"
+                >
+                <path
+                    id="Icon/Arrow"
+                    d="M1.69209 0.273249C2.05245 0.624986 5.57328 4.32082 5.57328 4.32082C5.76553 4.50962 5.86208 4.75532 5.86208 5.00102C5.86208 5.24672 5.76553 5.49242 5.57328 5.6795C5.57328 5.6795 2.05245 9.37706 1.69209 9.72707C1.33173 10.0788 0.683431 10.1029 0.299795 9.72707C-0.0847026 9.35292 -0.114876 8.82962 0.299795 8.37012L3.53009 5.00102L0.299795 1.63192C-0.114876 1.17242 -0.0847026 0.648263 0.299795 0.273249C0.683431 -0.102628 1.33173 -0.0793515 1.69209 0.273249Z"
+                />
+            </svg>
+        </div>
+    </div>
 
     <!-- Nav tabs -->
     <ul class="nav nav-tabs">
         <li class="nav-item">
             <a class="tab-nav active tabStyle" data-toggle="tab" href="#metadata">Metadata</a>
         </li>
         <li class="nav-item">
-            <a class="tab-nav tabStyle" data-toggle="tab" href="#statustimeline">Status Timeline</a>
+            <a class="tab-nav tabStyle" data-toggle="tab" href="#workflowhistory">Workflow History</a>
         </li>
     </ul>
 
@@ -215,13 +264,13 @@ <h1 class="nameWrapper"><div class="collectionName" id="collectionName">{{ colle
             </table>
 
         </div>
-        <div class="tab-pane fade" id="statustimeline">
+        <div class="tab-pane fade" id="workflowhistory">
             <table class="table table-striped">
                 <thead>
                     <tr class="tableHeaderRow">
                         <th class="whiteText">Workflow Status</th>
                         <th class="whiteText">Curator</th>
-                        <th class="whiteText">Timeframe</th>
+                        <th class="whiteText">Time Updated</th>
                     </tr>
                 <thead>
                 <tbody>
@@ -235,7 +284,7 @@ <h1 class="nameWrapper"><div class="collectionName" id="collectionName">{{ colle
                         </td>
                         <td class="whiteText">                            
                             {{ entry.curated_by }}</td>
-                        <td class="whiteText">{{entry.created_at|timesince}}</td>
+                        <td class="whiteText">{{entry.created_at|timesince}} ago</td>
                     </tr>
                     {% endfor %}
                 </tbody>