Merge pull request #248 from IQSS/feature/230-add-dataset-info-to-hom…

…e-page

230 - Add dataset card info to Home page

src/dataset/domain/models/DatasetPreview.ts

@@ -1,4 +1,22 @@
-export interface DatasetPreview {
-  persistentId: string
-  title: string
+import { DatasetLabel, DatasetVersion } from './Dataset'
+
+export class DatasetPreview {
+  constructor(
+    public persistentId: string,
+    public title: string,
+    public version: DatasetVersion,
+    public citation: string,
+    public labels: DatasetLabel[],
+    public isDeaccessioned: boolean,
+    public releaseOrCreateDate: Date,
+    public description: string,
+    public thumbnail?: string
+  ) {}
+
+  get abbreviatedDescription(): string {
+    if (this.description.length > 280) {
+      return `${this.description.substring(0, 280)}...`
+    }
+    return this.description
+  }
 }

src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts

@@ -27,7 +27,7 @@ export class DatasetJSDataverseRepository implements DatasetRepository {
     // TODO - Implement using the js-dataverse-client
     return new Promise((resolve) => {
       setTimeout(() => {
-        resolve(DatasetPreviewMother.createMany(200))
+        resolve(DatasetPreviewMother.createManyRealistic(10))
       }, 1000)
     })
   }

src/sections/dataset/dataset-citation/DatasetCitation.module.scss

@@ -17,20 +17,11 @@ min-height: 150px;
     border: 1px solid $dv-danger-color;
 }
 
-.icon {
-    color: #428BCA;
-    font-size: 7.5em;
-    line-height: 1.1;
-}
-
-.preview-image {
-    width: 100%;
-    max-width: 140px;
-    height: auto;
-    max-height: 140px;
-}
-
 .row {
     margin-right: -15px;
     margin-left: -15px;
+}
+
+.thumbnail {
+    font-size: 7.5em;
 }

src/sections/dataset/dataset-citation/DatasetCitation.tsx

@@ -1,9 +1,10 @@
-import { Col, QuestionMarkTooltip, Row } from '@iqss/dataverse-design-system'
+import { Col, Row } from '@iqss/dataverse-design-system'
 import styles from './DatasetCitation.module.scss'
 import { useTranslation } from 'react-i18next'
 import { DatasetPublishingStatus, DatasetVersion } from '../../../dataset/domain/models/Dataset'
-import parse from 'html-react-parser'
-import { CitationThumbnail } from './CitationThumbnail'
+import { DatasetThumbnail } from '../dataset-thumbnail/DatasetThumbnail'
+import { CitationDescription } from '../../shared/citation/CitationDescription'
+import { DatasetCitationTooltip } from './DatasetCitationTooltip'
 
 interface DatasetCitationProps {
   thumbnail?: string
@@ -23,16 +24,19 @@ export function DatasetCitation({ thumbnail, title, citation, version }: Dataset
             : styles.container
         }>
         <Row className={styles.row}>
-          <Col sm={2}>
-            <CitationThumbnail
+          <Col sm={2} className={styles.thumbnail}>
+            <DatasetThumbnail
               thumbnail={thumbnail}
               title={title}
-              publishingStatus={version.publishingStatus}
+              isDeaccessioned={version.publishingStatus === DatasetPublishingStatus.DEACCESSIONED}
             />
           </Col>
           <Col>
             <Row>
-              <CitationDescription citation={citation} version={version} />
+              <span className={styles.citation}>
+                <CitationDescription citation={citation} />
+                <DatasetCitationTooltip status={version.publishingStatus} />
+              </span>
             </Row>
             <Row>
               <div>
@@ -52,35 +56,3 @@ export function DatasetCitation({ thumbnail, title, citation, version }: Dataset
     </>
   )
 }
-
-function CitationDescription({ citation, version }: { citation: string; version: DatasetVersion }) {
-  const citationAsReactElement = parse(citation)
-
-  return (
-    <span className={styles.citation}>
-      {citationAsReactElement}
-      <CitationTooltip status={version.publishingStatus} />
-    </span>
-  )
-}
-
-interface CitationDatasetStatusProps {
-  status: DatasetPublishingStatus
-}
-
-function CitationTooltip({ status }: CitationDatasetStatusProps) {
-  const { t } = useTranslation('dataset')
-
-  if (status !== DatasetPublishingStatus.RELEASED) {
-    return (
-      <>
-        {' '}
-        <QuestionMarkTooltip
-          placement={'top'}
-          message={t(`citation.status.${status}.description`)}
-        />
-      </>
-    )
-  }
-  return <></>
-}

src/sections/dataset/dataset-citation/DatasetCitationTooltip.tsx

@@ -0,0 +1,24 @@
+import { DatasetPublishingStatus } from '../../../dataset/domain/models/Dataset'
+import { useTranslation } from 'react-i18next'
+import { QuestionMarkTooltip } from '@iqss/dataverse-design-system'
+
+interface DatasetCitationTooltipProps {
+  status: DatasetPublishingStatus
+}
+
+export function DatasetCitationTooltip({ status }: DatasetCitationTooltipProps) {
+  const { t } = useTranslation('dataset')
+
+  if (status !== DatasetPublishingStatus.RELEASED) {
+    return (
+      <>
+        {' '}
+        <QuestionMarkTooltip
+          placement={'top'}
+          message={t(`citation.status.${status}.description`)}
+        />
+      </>
+    )
+  }
+  return <></>
+}

src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileDate.tsx

@@ -1,17 +1,13 @@
 import { FileDate as FileDateModel } from '../../../../../../../files/domain/models/File'
 import { useTranslation } from 'react-i18next'
+import { DateHelper } from '../../../../../../../shared/domain/helpers/DateHelper'
 
 export function FileDate({ date }: { date: FileDateModel }) {
   const { t } = useTranslation('files')
   return (
     <div>
       <span>
-        {t(`table.date.${date.type}`)}{' '}
-        {date.date.toLocaleDateString(Intl.DateTimeFormat().resolvedOptions().locale, {
-          year: 'numeric',
-          month: 'short',
-          day: 'numeric'
-        })}
+        {t(`table.date.${date.type}`)} {DateHelper.toDisplayFormat(date.date)}
       </span>
     </div>
   )

src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileEmbargoDate.tsx

@@ -1,5 +1,6 @@
 import { FileEmbargo, FilePublishingStatus } from '../../../../../../../files/domain/models/File'
 import { useTranslation } from 'react-i18next'
+import { DateHelper } from '../../../../../../../shared/domain/helpers/DateHelper'
 
 interface FileEmbargoDateProps {
   embargo: FileEmbargo | undefined
@@ -17,11 +18,7 @@ export function FileEmbargoDate({ embargo, publishingStatus }: FileEmbargoDatePr
     <div>
       <span>
         {t(embargoTypeOfDate(embargo.isActive, publishingStatus))}{' '}
-        {embargo.dateAvailable.toLocaleDateString(Intl.DateTimeFormat().resolvedOptions().locale, {
-          year: 'numeric',
-          month: 'short',
-          day: 'numeric'
-        })}
+        {DateHelper.toDisplayFormat(embargo.dateAvailable)}
       </span>
     </div>
   )

src/sections/dataset/dataset-icon/DatasetIcon.module.scss

@@ -0,0 +1,6 @@
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
+
+.icon {
+  color: $dv-info-border-color;
+  line-height: 1.1;
+}

src/sections/dataset/dataset-icon/DatasetIcon.tsx

@@ -0,0 +1,10 @@
+import styles from './DatasetIcon.module.scss'
+import { Icon, IconName } from '@iqss/dataverse-design-system'
+
+export function DatasetIcon() {
+  return (
+    <div className={styles.icon}>
+      <Icon name={IconName.DATASET} />
+    </div>
+  )
+}

src/sections/dataset/dataset-thumbnail/DatasetThumbnail.module.scss

@@ -0,0 +1,6 @@
+.preview-image {
+  width: 100%;
+  max-width: 140px;
+  height: auto;
+  max-height: 140px;
+}

src/sections/dataset/dataset-thumbnail/DatasetThumbnail.tsx

@@ -0,0 +1,16 @@
+import styles from './DatasetThumbnail.module.scss'
+import { DatasetIcon } from '../dataset-icon/DatasetIcon'
+
+interface DatasetThumbnailProps {
+  thumbnail?: string
+  title: string
+  isDeaccessioned?: boolean
+}
+
+export function DatasetThumbnail({ thumbnail, title, isDeaccessioned }: DatasetThumbnailProps) {
+  if (thumbnail && !isDeaccessioned) {
+    return <img className={styles['preview-image']} src={thumbnail} alt={title} />
+  }
+
+  return <DatasetIcon />
+}

src/sections/home/datasets-list/DatasetsList.module.scss

@@ -1,12 +1,13 @@
 @import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
 
 .container {
-    padding:15px;
+  min-height: calc(100vh + 100px);
+  padding:15px;
   border: 1px solid #ddd;
   border-radius: 4px;
 }
 
 .empty-message-container {
   padding: .5em 1em;
   background: $dv-warning-box-color;
-}
+}

src/sections/home/datasets-list/DatasetsList.tsx

@@ -5,11 +5,10 @@ import { useEffect, useState } from 'react'
 import { PaginationResultsInfo } from '../../shared/pagination/PaginationResultsInfo'
 import { PaginationControls } from '../../shared/pagination/PaginationControls'
 import { DatasetPaginationInfo } from '../../../dataset/domain/models/DatasetPaginationInfo'
-import { LinkToPage } from '../../shared/link-to-page/LinkToPage'
-import { Route } from '../../Route.enum'
 import { useLoading } from '../../loading/LoadingContext'
 import { DatasetsListSkeleton } from './DatasetsListSkeleton'
 import { NoDatasetsMessage } from './NoDatasetsMessage'
+import { DatasetCard } from './dataset-card/DatasetCard'
 
 interface DatasetsListProps {
   datasetRepository: DatasetRepository
@@ -40,13 +39,7 @@ export function DatasetsList({ datasetRepository }: DatasetsListProps) {
             <PaginationResultsInfo paginationInfo={paginationInfo} />
           </div>
           {datasets.map((dataset) => (
-            <article key={dataset.persistentId}>
-              <LinkToPage
-                page={Route.DATASETS}
-                searchParams={{ persistentId: dataset.persistentId }}>
-                {dataset.title}
-              </LinkToPage>
-            </article>
+            <DatasetCard dataset={dataset} key={dataset.persistentId} />
           ))}
           <PaginationControls
             onPaginationInfoChange={setPaginationInfo}

src/sections/home/datasets-list/DatasetsListSkeleton.tsx

@@ -9,16 +9,16 @@ export function DatasetsListSkeleton() {
           <Skeleton width="14%" />
         </div>
         <article>
-          <Skeleton width="50%" />
-          <Skeleton width="50%" />
-          <Skeleton width="50%" />
-          <Skeleton width="50%" />
-          <Skeleton width="50%" />
-          <Skeleton width="50%" />
-          <Skeleton width="50%" />
-          <Skeleton width="50%" />
-          <Skeleton width="50%" />
-          <Skeleton width="50%" />
+          <Skeleton height="109px" style={{ marginBottom: 6 }} />
+          <Skeleton height="109px" style={{ marginBottom: 6 }} />
+          <Skeleton height="109px" style={{ marginBottom: 6 }} />
+          <Skeleton height="109px" style={{ marginBottom: 6 }} />
+          <Skeleton height="109px" style={{ marginBottom: 6 }} />
+          <Skeleton height="109px" style={{ marginBottom: 6 }} />
+          <Skeleton height="109px" style={{ marginBottom: 6 }} />
+          <Skeleton height="109px" style={{ marginBottom: 6 }} />
+          <Skeleton height="109px" style={{ marginBottom: 6 }} />
+          <Skeleton height="109px" style={{ marginBottom: 6 }} />
         </article>
       </section>
     </SkeletonTheme>