+ {/* Left Button */}
+ {scrollPosition > 0 &&
+
+ }
+
+ {/* Right Button */}
+
+
+ {/* Carousel */}
+
+ )
+}
diff --git a/frontend/components/software/highlights/SoftwareHighlights.tsx b/frontend/components/software/highlights/SoftwareHighlights.tsx
new file mode 100644
index 000000000..cb1eed3c8
--- /dev/null
+++ b/frontend/components/software/highlights/SoftwareHighlights.tsx
@@ -0,0 +1,26 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) (dv4all)
+// SPDX-FileCopyrightText: 2023 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {HighlightsCarousel} from './HighlightsCarousel'
+import useSoftwareHighlights from './useSoftwareHighlights'
+
+export default function SoftwareHighlights() {
+ const {highlights} = useSoftwareHighlights()
+
+ // console.group('SoftwareHighlights')
+ // console.log('loading...', loading)
+ // console.log('highlights...', highlights)
+ // console.groupEnd()
+
+ // if there are no hightlights we do not show this section
+ if (highlights.length===0) return null
+
+ return (
+
+ {/* render software card in the row direction */}
+ {items.map(highlight => (
+
+
+
+
+ ))
+ }
+
+
+ )
+}
diff --git a/frontend/components/software/highlights/useSoftwareHighlights.tsx b/frontend/components/software/highlights/useSoftwareHighlights.tsx
new file mode 100644
index 000000000..1b5726ace
--- /dev/null
+++ b/frontend/components/software/highlights/useSoftwareHighlights.tsx
@@ -0,0 +1,37 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) (dv4all)
+// SPDX-FileCopyrightText: 2023 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {useEffect, useState} from 'react'
+
+import {useSession} from '~/auth'
+import {SoftwareHighlight, getSoftwareHighlights} from '~/components/admin/software-highlights/apiSoftwareHighlights'
+
+export default function useSoftwareHighlights() {
+ const {token} = useSession()
+ const [highlights, setHighlights] = useState
+ {/* Cover image */}
+ )
+
+ {/* Card content */}
+
+
+ )
+}
+// TODO Only show images every 3rd card for testing purposes
+// index % 3 === 0 <-- todo
diff --git a/frontend/components/software/overview/SoftwareFilters.tsx b/frontend/components/software/overview/SoftwareFilters.tsx
new file mode 100644
index 000000000..e2148715a
--- /dev/null
+++ b/frontend/components/software/overview/SoftwareFilters.tsx
@@ -0,0 +1,213 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) (dv4all)
+// SPDX-FileCopyrightText: 2023 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import Button from '@mui/material/Button'
+import FormControl from '@mui/material/FormControl'
+import InputLabel from '@mui/material/InputLabel'
+import Select from '@mui/material/Select'
+import MenuItem from '@mui/material/MenuItem'
+import Autocomplete from '@mui/material/Autocomplete'
+import TextField from '@mui/material/TextField'
+import {Keyword} from '~/components/keyword/FindKeyword'
+import {ProgrammingLanguage} from '../filter/softwareFilterApi'
+
+export type LicenseWithCount = {
+ license: string;
+ cnt: number;
+}
+
+type SoftwareFilterPanelProps = {
+ keywords: Keyword[]
+ keywordsList: Keyword[]
+ languages: ProgrammingLanguage[]
+ languagesList: ProgrammingLanguage[]
+ licenses: LicenseWithCount[]
+ licensesList: LicenseWithCount[]
+ orderBy: string,
+ setOrderBy: (order:string)=>void
+ handleQueryChange: (key: string, value: string | string[]) => void
+ getFilterCount: () => number
+ resetFilters: () => void
+}
+
+export default function SoftwareFilters({settings}: { settings: SoftwareFilterPanelProps }) {
+ const {
+ keywords,
+ keywordsList,
+ languages,
+ languagesList,
+ licenses,
+ licensesList,
+ handleQueryChange,
+ orderBy, setOrderBy,
+ getFilterCount,
+ resetFilters
+ } = settings
+
+ const filterCnt = getFilterCount()
+
+ return (
+ <>
+
+
+ + {item.brand_name} +
++ {item.short_statement} +
+ + {/* keywords */} +-
+ {// limits the keywords to 'visibleNumberOfKeywords' per software.
+ item.keywords?.slice(0, visibleNumberOfKeywords)
+ .map((keyword:string, index: number) => (
+
- {keyword} + ))} + + { // Show the number of keywords that are not visible. + (item.keywords?.length > 0) + && (item.keywords?.length > visibleNumberOfKeywords) + && (item.keywords?.length - visibleNumberOfKeywords > 0) + && `+ ${item.keywords?.length - visibleNumberOfKeywords}` + } +
+
+ {/* Languages */}
+
+ -
+ {// limits the keywords to 'visibleNumberOfProgLang' per software.
+ item.prog_lang?.slice(0, visibleNumberOfProgLang)
+ .map((lang:string, index: number) => (
+
- {lang} + ))} + { // Show the number of keywords that are not visible. + (item.prog_lang?.length > 0) + && (item.prog_lang?.length > visibleNumberOfProgLang) + && (item.prog_lang?.length - visibleNumberOfProgLang > 0) + && `+ ${item.prog_lang?.length - visibleNumberOfProgLang}` + } +
+
+
+
+ {item.contributor_cnt || 0}
+
+
+
+
+ {item.mention_cnt || 0}
+
+
+ {/* TODO Add download counts to the cards */}
+ {item?.downloads && item?.downloads > 0 && (
+
+
+ 34K
+
+ )}
+
+
+
+ {/* Order by */}
+
+
+ {filterCnt}
+
+ Filters
+
+
+
+
+ (option.keyword)}
+ isOptionEqualToValue={(option, value) => {
+ return option.keyword === value.keyword
+ }}
+ defaultValue={[]}
+ filterSelectedOptions
+ renderOption={(props, option) => (
+
+
+ )}
+ renderInput={(params) => (
+
+
+ {/* Programme Languages */}
+
+
+ Keywords
+ {keywordsList.length}
+ {
+ option.keyword
+ }
+ ({
+ option.cnt
+ })
+
+
+ option.prog_lang}
+ isOptionEqualToValue={(option, value) => {
+ return option.prog_lang === value.prog_lang
+ }}
+ defaultValue={[]}
+ filterSelectedOptions
+ renderOption={(props, option) => (
+
+
+ )}
+ renderInput={(params) => (
+
+
+ {/* Licenses */}
+
+
+ Program languages
+ {languagesList.length}
+ {
+ option.prog_lang
+ }
+ ({
+ option.cnt
+ })
+
+
+ option.license}
+ isOptionEqualToValue={(option, value) => {
+ return option.license === value.license
+ }}
+ defaultValue={[]}
+ filterSelectedOptions
+ renderOption={(props, option) => (
+
+
+ )}
+ renderInput={(params) => (
+
+
+ )
+}
diff --git a/frontend/components/software/overview/SoftwareFiltersPanel.tsx b/frontend/components/software/overview/SoftwareFiltersPanel.tsx
new file mode 100644
index 000000000..179a36dc8
--- /dev/null
+++ b/frontend/components/software/overview/SoftwareFiltersPanel.tsx
@@ -0,0 +1,13 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) (dv4all)
+// SPDX-FileCopyrightText: 2023 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+export default function SoftwareFiltersPanel({children}: { children: any }) {
+ return (
+
+
+ Licenses
+ {licensesList.length}
+ {option.license}
+ ({option.cnt})
+
+ {children}
+
+ )
+}
diff --git a/frontend/components/software/overview/SoftwareOverviewGrid.tsx b/frontend/components/software/overview/SoftwareOverviewGrid.tsx
new file mode 100644
index 000000000..655f445a2
--- /dev/null
+++ b/frontend/components/software/overview/SoftwareOverviewGrid.tsx
@@ -0,0 +1,20 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) (dv4all)
+// SPDX-FileCopyrightText: 2023 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {SoftwareListItem} from '~/types/SoftwareTypes'
+import {SoftwareCard} from './SoftwareCard'
+
+export default function SoftwareOverviewGrid({software=[]}: { software:SoftwareListItem[]}) {
+ return (
+
+ {/* xl:columns-4 */}
+ {software.map((item, index) => (
+
+ )
+}
diff --git a/frontend/components/software/overview/useSoftwareOverview.ts b/frontend/components/software/overview/useSoftwareOverview.ts
new file mode 100644
index 000000000..c940fb551
--- /dev/null
+++ b/frontend/components/software/overview/useSoftwareOverview.ts
@@ -0,0 +1,211 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) (dv4all)
+// SPDX-FileCopyrightText: 2023 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {useEffect, useState} from 'react'
+import {useRouter} from 'next/router'
+
+import {getBaseUrl} from '~/utils/fetchHelpers'
+import {ProgrammingLanguage} from '~/components/software/filter/softwareFilterApi'
+import {SoftwareListItem} from '~/types/SoftwareTypes'
+import {ssrSoftwareParams} from '~/utils/extractQueryParam'
+import {QueryParams, buildFilterUrl, softwareListUrl} from '~/utils/postgrestUrl'
+import {getSoftwareList} from '~/utils/getSoftware'
+import {Keyword} from '~/components/keyword/FindKeyword'
+import {License} from '~/components/softwarePage/softwarePagePanel'
+
+export default function useSoftwareOverview() {
+ const router = useRouter()
+ const baseUrl = getBaseUrl()
+
+ const [orderBy, setOrderBy] = useState
+
+
+ ))}
+
+ {/* Left Button */}
+ {scrollPosition > 0 &&
+
+ }
+
+ {/* Right Button */}
+
+
+
+ {/* Carousel */}
+
+ )
+}
diff --git a/frontend/components/softwarePage/SearchInput.tsx b/frontend/components/softwarePage/SearchInput.tsx
new file mode 100644
index 000000000..c2156e70f
--- /dev/null
+++ b/frontend/components/softwarePage/SearchInput.tsx
@@ -0,0 +1,62 @@
+// SPDX-FileCopyrightText: 2022 - 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2022 - 2023 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {useState, useEffect} from 'react'
+import {useDebounce} from '~/utils/useDebounce'
+import TextField from '@mui/material/TextField'
+
+type SearchInputProps = {
+ placeholder: string,
+ onSearch: Function,
+ delay?: number,
+ defaultValue?: string,
+}
+
+export default function SearchInput({
+ placeholder,
+ onSearch,
+ delay = 400,
+ defaultValue = ''
+}: SearchInputProps) {
+ const [state, setState] = useState({
+ value: defaultValue ?? '',
+ wait: true
+ })
+ const searchFor = useDebounce(state.value, delay)
+
+ useEffect(() => {
+ if ((searchFor !== '' && defaultValue === '') || defaultValue !== '') {
+ setState({value: defaultValue, wait: true})
+ }
+ }, [searchFor, defaultValue])
+
+ useEffect(() => {
+ let abort = false
+ const {wait, value} = state
+ if (!wait && value === searchFor) {
+ if (abort) return
+ setState({
+ wait: true,
+ value
+ })
+ onSearch(searchFor)
+ }
+ return () => {
+ abort = true
+ }
+ }, [state, searchFor, onSearch])
+
+ return (
+
+ {/* TODO software card type */}
+ {cards.length > 0 && cards.map((card: any, index: number) => (
+
+
+
+
+ ))
+ }
+
+ {/* Cover image */}
+ 
+
+ {/* Card content */}
+
+
+ )
+}
+// TODO Only show images every 3rd card for testing purposes
+// index % 3 === 0 <-- todo
diff --git a/frontend/components/softwarePage/SoftwareFilterPanel.tsx b/frontend/components/softwarePage/SoftwareFilterPanel.tsx
new file mode 100644
index 000000000..00e8fd451
--- /dev/null
+++ b/frontend/components/softwarePage/SoftwareFilterPanel.tsx
@@ -0,0 +1,197 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2023 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {ForwardedRef} from 'react'
+import Button from '@mui/material/Button'
+import FormControl from '@mui/material/FormControl'
+import InputLabel from '@mui/material/InputLabel'
+import Select from '@mui/material/Select'
+import MenuItem from '@mui/material/MenuItem'
+import Autocomplete from '@mui/material/Autocomplete'
+import TextField from '@mui/material/TextField'
+import useSoftwareFilterPanel from '~/components/softwarePage/useSoftwarefilterPanel'
+
+// Ref needed to emebd a custom component inside a MUI modal:
+// https://mui.com/material-ui/guides/composition/#caveat-with-refs
+type Ref = {
+ ref?: ForwardedRef
+
+
+ + {item.brand_name} +
++ {item.short_statement} +
+ {/* keywords */} +-
+
+ {// limits the keywords to 'visibleNumberOfKeywords' per software.
+ item.keywords?.slice(0, visibleNumberOfKeywords)
+ .map((keyword:string, index: number) => (
+
- {keyword} + ))} + + { // Show the number of keywords that are not visible. + (item.keywords?.length > 0) + && (item.keywords?.length > visibleNumberOfKeywords) + && (item.keywords?.length - visibleNumberOfKeywords > 0) + && `+ ${item.keywords?.length - visibleNumberOfKeywords}` + } +
+
+ {/* Languages */}
+
+ -
+ {// limits the keywords to 'visibleNumberOfProgLang' per software.
+ item.prog_lang?.slice(0, visibleNumberOfProgLang)
+ .map((lang:string, index: number) => (
+
- {lang} + ))} + { // Show the number of keywords that are not visible. + (item.prog_lang?.length > 0) + && (item.prog_lang?.length > visibleNumberOfProgLang) + && (item.prog_lang?.length - visibleNumberOfProgLang > 0) + && `+ ${item.prog_lang?.length - visibleNumberOfProgLang}` + } +
+
+
+
+ {item.contributor_cnt || 0}
+
+
+
+
+ {item.mention_cnt || 0}
+
+
+ {/* TODO Add download counts to the cards */}
+ {item.downloads > 0 && (
+
+
+ 34K
+
+ )}
+
+
+ Order by
+
+
+
+ {/* Keywords */}
+
+}
diff --git a/frontend/components/softwarePage/softwarePagePanel.d.ts b/frontend/components/softwarePage/softwarePagePanel.d.ts
new file mode 100644
index 000000000..395af70e6
--- /dev/null
+++ b/frontend/components/softwarePage/softwarePagePanel.d.ts
@@ -0,0 +1,9 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2023 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+export type License = {
+ license: string;
+ cnt: number;
+}
diff --git a/frontend/components/softwarePage/useSoftwarefilterPanel.ts b/frontend/components/softwarePage/useSoftwarefilterPanel.ts
new file mode 100644
index 000000000..94e6ebcd7
--- /dev/null
+++ b/frontend/components/softwarePage/useSoftwarefilterPanel.ts
@@ -0,0 +1,205 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) (dv4all)
+// SPDX-FileCopyrightText: 2023 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {useRouter} from 'next/router'
+import {getBaseUrl} from '~/utils/fetchHelpers'
+import {useEffect, useState} from 'react'
+import {ProgrammingLanguage} from '~/components/software/filter/softwareFilterApi'
+import {SoftwareListItem} from '~/types/SoftwareTypes'
+import {ssrSoftwareParams} from '~/utils/extractQueryParam'
+import {buildFilterUrl, softwareListUrl} from '~/utils/postgrestUrl'
+import {getSoftwareList} from '~/utils/getSoftware'
+import {Keyword} from '../keyword/FindKeyword'
+import {License} from '~/components/softwarePage/softwarePagePanel'
+
+export default function useSoftwarefilterPanel() {
+ const router = useRouter()
+ const baseUrl = getBaseUrl()
+
+ const [orderBy, setOrderBy] = useState
+
+
+ {/* Order by */}
+
+
+ {getFilterCount()}
+
+ Filters
+
+
+
+
+ (option.keyword)}
+ isOptionEqualToValue={(option, value) => {
+ return option.keyword === value.keyword
+ }}
+ defaultValue={[]}
+ filterSelectedOptions
+ renderOption={(props, option) => (
+
+
+ )}
+ renderInput={(params) => (
+
+
+ {/* Programme Languages */}
+
+
+ Keywords
+ {keywordsList.length}
+ {
+ option.keyword
+ }
+ ({
+ option.cnt
+ })
+
+
+ option.prog_lang}
+ isOptionEqualToValue={(option, value) => {
+ return option.prog_lang === value.prog_lang
+ }}
+ defaultValue={[]}
+ filterSelectedOptions
+ renderOption={(props, option) => (
+
+
+ )}
+ renderInput={(params) => (
+
+
+ {/* Licenses */}
+
+
+ Program languages
+ {languagesList.length}
+ {
+ option.prog_lang
+ }
+ ({
+ option.cnt
+ })
+
+
+ option.license}
+ isOptionEqualToValue={(option, value) => {
+ return option.license === value.license
+ }}
+ defaultValue={[]}
+ filterSelectedOptions
+ renderOption={(props, option) => (
+
+
+ )}
+ renderInput={(params) => (
+
+
+
+ Licenses
+ {licensesList.length}
+ {option.license}
+ ({option.cnt})
+ + All software +
+ {/* Filter panel & content panel */} +
+ {/* Filters panel large screen */}
+ {smallScreen===false &&
+
+
+ }
+ {/* Search & card grid section */}
+
+
+ handleQueryChange('search', search)}
+ defaultValue={search}
+ />
+ {/* Filter button for mobile */}
+ {smallScreen === true &&
+
+ }
+
+
+ {software.count} results.
+ {/* Only show when filters are applied, and not just sorted */}
+ {
+ (orderBy !== '' && getFilterCount() > 1) || (orderBy === '' && getFilterCount() > 0) && { resetFilters() }} className="underline pl-2">Clear filters
+ }
+
+ {/* Software Cards Grid */}
+
+ {numPages > 1 &&
+ {
+ // api uses 0 index
+ const param = (page - 1).toString()
+ handleQueryChange('page',param)
+ }}
+ />
+ }
+
+