feat: create software card without image and use it in software overv…

…iew grid
research-software-directory · Sep 28, 2023 · a2d7773 · a2d7773
1 parent f2759b6
commit a2d7773
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 21 deletions.
diff --git a/frontend/components/organisation/software/OrganisationSoftwareOverview.tsx b/frontend/components/organisation/software/OrganisationSoftwareOverview.tsx
@@ -79,15 +79,18 @@ export default function OrganisationSoftwareOverview({layout,software,loading,ro
   }
 
   // GRID as default
+  // NOTE! we need to use isMaintainer flag to load
+  // grid cards with image placeholder in order to
+  // show admin menu and statuses: not published, blocked etc.
   return (
-    <SoftwareOverviewGrid>
+    <SoftwareOverviewGrid withImg={isMaintainer}>
       {software.map((item) => {
         if (isMaintainer) {
           return (
-            <AdminSoftwareGridCard key={item.id} item={item} />
+            <AdminSoftwareGridCard key={item.id} withImg={isMaintainer} item={item} />
           )
         }
-        return <SoftwareGridCard key={item.id} {...item}/>
+        return <SoftwareGridCard key={item.id} withImg={isMaintainer} {...item}/>
       })}
     </SoftwareOverviewGrid>
   )

diff --git a/frontend/components/organisation/software/card/AdminSoftwareGridCard.tsx b/frontend/components/organisation/software/card/AdminSoftwareGridCard.tsx
@@ -11,14 +11,16 @@ import Link from 'next/link'
 import {SoftwareOfOrganisation} from '~/types/Organisation'
 import IconBtnMenuOnAction from '~/components/menu/IconBtnMenuOnAction'
 import SoftwareCardContent from '~/components/software/overview/cards/SoftwareCardContent'
+import SoftwareCardNoImage from '~/components/software/overview/cards/SoftwareCardNoImage'
 import StatusBanner from '~/components/cards/StatusBanner'
 import {useSoftwareCardActions} from './useSoftwareCardActions'
 
 type AdminSoftwareCardProps = {
   item: SoftwareOfOrganisation
+  withImg?:boolean
 }
 
-export default function AdminSoftwareGridCard({item:software}: AdminSoftwareCardProps) {
+export default function AdminSoftwareGridCard({item:software, withImg}: AdminSoftwareCardProps) {
   const {menuOptions, onAction} = useSoftwareCardActions({software})
 
   // console.group('AdminSoftwareGridCard')
@@ -33,20 +35,26 @@ export default function AdminSoftwareGridCard({item:software}: AdminSoftwareCard
       data-testid="admin-software-grid-card"
       className="relative h-full"
     >
-
       {/* standard software card with link */}
       <Link
         data-testid="software-grid-card"
         href={`/software/${software.slug}`}
         className="h-full hover:text-inherit"
       >
-        <SoftwareCardContent
-          visibleKeywords={3}
-          visibleProgLang={3}
-          {...software}
-        />
+        {withImg ?
+          <SoftwareCardContent
+            visibleKeywords={3}
+            visibleProgLang={3}
+            {...software}
+          />
+          :
+          <SoftwareCardNoImage
+            visibleKeywords={3}
+            visibleProgLang={3}
+            {...software}
+          />
+        }
       </Link>
-
       {/* menu and status icons - at the top of the card */}
       <div className="w-full flex items-center absolute top-0 pt-2 pr-2 opacity-50 hover:opacity-100 z-10">
         <div className="flex-1 flex flex-col">

diff --git a/frontend/components/software/overview/SoftwareOverviewContent.tsx b/frontend/components/software/overview/SoftwareOverviewContent.tsx
@@ -66,9 +66,9 @@ export default function SoftwareOverviewContent({layout, software}: SoftwareOver
 
   // GRID as default
   return (
-    <SoftwareOverviewGrid>
+    <SoftwareOverviewGrid withImg={false}>
       {software.map((item) => (
-        <SoftwareGridCard key={item.id} {...item}/>
+        <SoftwareGridCard key={item.id} withImg={false} {...item}/>
       ))}
     </SoftwareOverviewGrid>
   )

diff --git a/frontend/components/software/overview/cards/SoftwareCardNoImage.tsx b/frontend/components/software/overview/cards/SoftwareCardNoImage.tsx
@@ -0,0 +1,61 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import KeywordList from '~/components/cards/KeywordList'
+import CardTitleSubtitle from '~/components/cards/CardTitleSubtitle'
+import ProgrammingLanguageList from './ProgrammingLanguageList'
+import SoftwareMetrics from './SoftwareMetrics'
+
+type SoftwareCardContentProps = {
+  // slug:string
+  brand_name: string
+  short_statement: string
+  image_id: string | null
+  keywords: string[],
+  prog_lang: string[],
+  contributor_cnt: number | null
+  mention_cnt: number | null
+  downloads?: number
+  visibleKeywords?: number
+  visibleProgLang?: number
+}
+
+export default function SoftwareCardNoImage(item:SoftwareCardContentProps) {
+
+  return (
+    <div
+      data-testid="software-card-content"
+      className="flex-1 p-4 flex flex-col h-full transition overflow-hidden bg-base-100 shadow-md hover:shadow-lg rounded-md" >
+      <CardTitleSubtitle
+        title={item.brand_name}
+        subtitle={item.short_statement}
+      />
+
+      {/* keywords */}
+      <div className="flex-1 overflow-auto py-2">
+        <KeywordList
+          keywords={item.keywords}
+          visibleNumberOfKeywords={item.visibleKeywords ?? 3}
+        />
+      </div>
+
+      <div className="flex gap-2 justify-between mt-4">
+        {/* Languages */}
+        <ProgrammingLanguageList
+          prog_lang={item.prog_lang}
+          visibleNumberOfProgLang={item.visibleProgLang ?? 3}
+        />
+        {/* Metrics */}
+        <div className="flex gap-4">
+          <SoftwareMetrics
+            contributor_cnt={item.contributor_cnt ?? 0}
+            mention_cnt={item.mention_cnt ?? 0}
+            downloads={item.downloads}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/components/software/overview/cards/SoftwareGridCard.tsx b/frontend/components/software/overview/cards/SoftwareGridCard.tsx
@@ -8,6 +8,7 @@
 
 import Link from 'next/link'
 import SoftwareCardContent from './SoftwareCardContent'
+import SoftwareCardNoImage from './SoftwareCardNoImage'
 
 type SoftwareCardProps = {
   slug:string
@@ -18,7 +19,8 @@ type SoftwareCardProps = {
   prog_lang: string[],
   contributor_cnt: number | null
   mention_cnt: number | null
-  downloads?: number
+  downloads?: number,
+  withImg?:boolean
 }
 
 export default function SoftwareGridCard(item:SoftwareCardProps){
@@ -29,11 +31,19 @@ export default function SoftwareGridCard(item:SoftwareCardProps){
       href={`/software/${item.slug}`}
       className="flex-1 flex flex-col hover:text-inherit"
     >
-      <SoftwareCardContent
-        visibleKeywords={3}
-        visibleProgLang={3}
-        {...item}
-      />
+      {item.withImg ?
+        <SoftwareCardContent
+          visibleKeywords={3}
+          visibleProgLang={3}
+          {...item}
+        />
+        :
+        <SoftwareCardNoImage
+          visibleKeywords={3}
+          visibleProgLang={3}
+          {...item}
+        />
+      }
     </Link>
   )
 }
diff --git a/frontend/components/software/overview/cards/SoftwareOverviewGrid.tsx b/frontend/components/software/overview/cards/SoftwareOverviewGrid.tsx
@@ -8,11 +8,11 @@
 
 import {JSX} from 'react'
 
-export default function SoftwareOverviewGrid({children}: { children: JSX.Element | JSX.Element[] }) {
+export default function SoftwareOverviewGrid({children,withImg}: {children: JSX.Element | JSX.Element[],withImg?:boolean }) {
   return (
     <section
       data-testid="software-overview-grid"
-      className="mt-4 grid gap-8 lg:grid-cols-2 xl:grid-cols-3 auto-rows-[28rem]"
+      className={`mt-4 grid gap-8 lg:grid-cols-2 xl:grid-cols-3 ${withImg ? 'auto-rows-[28rem]' : 'auto-rows-[18rem]'}`}
     >
       {children}
     </section>