changes to slide-out preview on dashboard page

CDLUC3 · May 22, 2024 · 7ee8cfd · 7ee8cfd
1 parent 4cb7e5f
commit 7ee8cfd
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 10 deletions.
diff --git a/react-client/src/pages/dashboard/dashboard.js b/react-client/src/pages/dashboard/dashboard.js
@@ -367,31 +367,34 @@ function Dashboard() {
                 <div>
 
                   <h3 className="h2" id="preview-heading">
-                    {previewDmp.title}
-                  </h3>
+                    <div>{previewDmp.title}</div>
 
+                    <div className="form-actions">
+                      <button type="button" aria-label="Close" onClick={() => setShow(false)}>
+                        X
+                      </button>
+                    </div>
+                  </h3>
 
                   <h4>Funder</h4>
                   {previewDmp?.funding?.name ? <p>{previewDmp.funding.name}</p> : <p>None</p>}
 
-
                   <h4>DMP ID</h4>
-                  {previewDmp?.id ? <p>{previewDmp.id}</p> : <p>Not Set</p>}
+                  {previewDmp?.draftId !== previewDmp?.id ? <p>{previewDmp.id?.replace(/_/g, '/')}</p> : <p>Not Set</p>}
 
-                  {previewDmp?.funding?.grantId && (
+                  {previewDmp?.funding?.grantId?.identifier && (
                     <>
                       <h4>Grant ID</h4>
-                      <p>{previewDmp.funding?.grantId?.identifier}</p>
+                      <p class="preview-grant">{previewDmp.funding?.grantId?.identifier}</p>
                     </>
                   )}
 
                   {previewDmp?.project && (previewDmp.project.start || previewDmp.project.end) && (
                     <>
                       <h4>Project Dates</h4>
                       <p>
-                        {previewDmp.project.start?.format("YYYY-MM-DD") && `Start: ${previewDmp.project.start.format("YYYY-MM-DD")}`}
-                        {previewDmp.project.start?.format("YYYY-MM-DD") && previewDmp.project.end?.format("YYYY-MM-DD") && " - "}
-                        {previewDmp.project.end?.format("YYYY-MM-DD") && `End: ${previewDmp.project.end.format("YYYY-MM-DD")}`}
+                        {`Start: ${previewDmp.project.start?.format("YYYY-MM-DD") !== 'Invalid date' ? previewDmp.project.start.format("YYYY-MM-DD") : 'Not set'}, `}
+                        {`End: ${previewDmp.project.end?.format("YYYY-MM-DD") !== 'Invalid date' ? previewDmp.project.end.format("YYYY-MM-DD ") : 'Not set '}`}
                       </p>
                     </>
                   )}
@@ -435,7 +438,7 @@ function Dashboard() {
                     {previewDmp.privacy === "public" ? "Yes" : "No"}
                   </p>
 
-                  <h4>Last Updated</h4>
+                  <h4>Last Edited</h4>
                   <p>
                     {previewDmp.modified}
                   </p>

diff --git a/react-client/src/pages/dashboard/dashboard.scss b/react-client/src/pages/dashboard/dashboard.scss
@@ -259,6 +259,30 @@
   }
 }
 
+#quick-view-view h3 {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+}
+
+#quick-view-view h3 .form-actions {
+  margin-top: 0;
+  padding-top: 0;
+  padding-left: 0;
+}
+
+#quick-view-view h3 .form-actions button {
+  margin-top: 0;
+  padding: 0.25rem 0.5rem;
+  font-size: 1rem;
+}
+
+#quick-view-view p.preview-grant {
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
 .filter-tags {
   margin-bottom: 1rem;
 }