feat: add keyword filter link to project page

frontend/components/layout/TagChipFilter.tsx

@@ -1,16 +1,12 @@
 import Chip from '@mui/material/Chip'
-import {softwareUrl} from '~/utils/postgrestUrl'
 import SearchIcon from '@mui/icons-material/Search'
 import Link from 'next/link'
 
-export default function TagChipFilter({label, title}:
-  { label: string, title?: string }) {
+export default function TagChipFilter({url,label, title}:
+  { label: string, url:string ,title?: string }) {
 
   if (!label) return null
 
-  const url = softwareUrl({keywords: [label]})
-  // console.log('url...',url)
-
   return (
     <Link
       href={url}
@@ -20,7 +16,6 @@ export default function TagChipFilter({label, title}:
       title={`Click to filter for ${title ? title.toLowerCase() : label.toLowerCase()}`}
       label={label}
       icon={<SearchIcon />}
-      // onDelete={() => {}}
       clickable
       sx={{
         marginBottom: '1rem',

frontend/components/projects/ProjectKeywordFilter.tsx

@@ -15,7 +15,7 @@ type KeywordFilterProps = {
  * Keywords filter component. It receives array of keywords and returns
  * array of selected tags to use in filter using onSelect callback function
  */
-export default function ProjectKeywordsFilter({items=[], onApply}:KeywordFilterProps) {
+export default function ProjectKeywordFilter({items=[], onApply}:KeywordFilterProps) {
   return (
     <KeywordFilter
       items={items}

frontend/components/projects/ProjectKeywords.tsx

@@ -0,0 +1,43 @@
+// SPDX-FileCopyrightText: 2022 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2022 Ewan Cahen (Netherlands eScience Center) <e.cahen@esciencecenter.nl>
+// SPDX-FileCopyrightText: 2022 Netherlands eScience Center
+// SPDX-FileCopyrightText: 2022 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {KeywordForProject} from '~/types/Project'
+import {ssrProjectsUrl} from '~/utils/postgrestUrl'
+import TagChipFilter from '../layout/TagChipFilter'
+
+type TagWithTitle = {
+  title: string
+  label: string
+}
+
+export default function ProjectKeywords({keywords=[]}:{keywords:KeywordForProject[]}) {
+
+  function renderTags() {
+    if (keywords.length === 0) {
+      return <i>Not specified</i>
+    }
+    return (
+      <div className="flex flex-wrap py-1">
+        {
+          keywords.map((item, pos) => {
+            const url = ssrProjectsUrl({keywords: [item.keyword]})
+            return <TagChipFilter url={url} key={pos} label={item.keyword} />
+          })
+        }
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <h4 className="text-primary py-4">
+        Keywords
+      </h4>
+      {renderTags()}
+    </div>
+  )
+}

frontend/components/projects/ProjectSidebar.tsx

@@ -10,7 +10,7 @@ import {KeywordForProject, ProjectLink, ResearchDomain} from '../../types/Projec
 import ProjectStatus from './ProjectStatus'
 import ProjectFunding from './ProjectFunding'
 import ProjectLinks from './ProjectLinks'
-import ProjectTags from './ProjectTags'
+import ProjectKeywords from './ProjectKeywords'
 import {ProjectOrganisationProps} from '~/types/Organisation'
 import ResearchDomains from './ResearchDomains'
 
@@ -48,9 +48,8 @@ export default function ProjectSidebar({date_start, date_end, grant_id, links, r
         domains={researchDomains}
       />
 
-      <ProjectTags
-        title="Keywords"
-        tags={keywords.map(item=>item.keyword)}
+      <ProjectKeywords
+        keywords={keywords}
       />
 
     </aside>

frontend/components/software/SoftwareKeywords.tsx

@@ -6,6 +6,7 @@
 import LocalOfferIcon from '@mui/icons-material/LocalOffer'
 import {KeywordForSoftware} from '../../types/SoftwareTypes'
 import TagChipFilter from '../layout/TagChipFilter'
+import {softwareUrl} from '~/utils/postgrestUrl'
 
 export default function SoftwareKeywords({keywords = []}: { keywords: KeywordForSoftware[] }) {
 
@@ -18,7 +19,8 @@ export default function SoftwareKeywords({keywords = []}: { keywords: KeywordFor
     return (
       <div className="flex flex-wrap py-1">
         {keywords.map((item, pos) => {
-          return <TagChipFilter key={pos} label={item.keyword} />
+          const url = softwareUrl({keywords: [item.keyword]})
+          return <TagChipFilter url={url} key={pos} label={item.keyword} />
         })}
       </div>
     )