Skip to content

Commit

Permalink
new organisation page and cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@ctwhome @dmijatovic
ctwhome authored and dmijatovic committed May 2, 2023
1 parent f7bc602 commit 4960c32
Show file tree
Hide file tree
Showing 2 changed files with 163 additions and 46 deletions.
101 changes: 101 additions & 0 deletions frontend/components/organisation/OrganisationCardV2.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
/* eslint-disable @next/next/no-img-element */
// SPDX-FileCopyrightText: 2022 - 2023 Dusan Mijatovic (dv4all)
// SPDX-FileCopyrightText: 2022 - 2023 dv4all
// SPDX-FileCopyrightText: 2022 Dusan Mijatovic (dv4all) (dv4all)
//
// SPDX-License-Identifier: Apache-2.0

import Link from 'next/link'
import {getImageUrl} from '~/utils/editImage'
import StatCounter from '~/components/layout/StatCounter'

export type OrganisationCardProps = {
id: string,
name: string,
is_tenant: boolean,
rsd_path: string,
logo_id: string | null
software_cnt: number | null
project_cnt: number | null
}

export default function OrganisationCardV2({organisation}: { organisation: OrganisationCardProps }) {


function getCountAndLabel() {
const count = organisation.software_cnt ?? 0
let label = 'software packages'
if (organisation?.software_cnt === 1) label = 'software package'
return {
count,
label
}
}

const {count, label} = getCountAndLabel()

return (

<Link
data-testid="organisation-card-link"
href={`/organisations/${organisation.rsd_path}`}
className="flex h-full hover:text-inherit"
passHref
>
{/* Organization card content */}
<div className="transition bg-white shadow-md hover:shadow-lg
rounded-lg hover:cursor-pointer select-none w-full p-4">

<img
className="object-contain mx-auto h-[150px] rounded"
src={getImageUrl(organisation.logo_id) ?? undefined}
alt={`Cover image for ${organisation.name}`}
/>

<h2 className="mt-5 text-xl font-medium mb-2 line-clamp-2 min-h-[60px]">
{organisation.name}
</h2>

{/* {
// Organization tenant, hidden until we have a beeter use case
organisation.is_tenant && <span title="Officially registered organisation">
<VerifiedIcon
sx={{
position: 'absolute',
right: '0.5rem',
top: '0.5rem',
width: '1rem',
height: '1rem',
opacity: 0.4,
color: 'primary.main'
}}
/></span>
} */}

<div className="flex gap-8 items-end justify text-center mb-2">

{/* Counter */}
<div>
<div className='text-5xl font-light'>
{organisation.software_cnt ?? 0}
</div>
<div className='text-center text-sm'>
software <br />package{(organisation?.software_cnt === 1) ? '' : 's'}
</div>
</div>

{/* Counter */}
<div>
<div className='text-5xl font-light'>
{organisation.project_cnt ?? 0}
</div>
<div className='text-center text-sm'>
research <br />project{(organisation?.software_cnt === 1) ? '' : 's'}
</div>
</div>

</div>
</div>
</Link>
)
}
108 changes: 62 additions & 46 deletions frontend/pages/organisations/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,18 @@ import TablePagination from '@mui/material/TablePagination'
import Pagination from '@mui/material/Pagination'

import {app} from '../../config/app'
import DefaultLayout from '../../components/layout/DefaultLayout'
import PageTitle from '../../components/layout/PageTitle'
import Searchbox from '../../components/form/Searchbox'
import {ssrOrganisationUrl} from '../../utils/postgrestUrl'
import {OrganisationList} from '../../types/Organisation'
import {rowsPerPageOptions} from '../../config/pagination'
import {ssrOrganisationParams} from '../../utils/extractQueryParam'
import {getOrganisationsList} from '../../utils/getOrganisations'
import OrganisationsGrid from '../../components/organisation/OrganisationGrid'
import PageMeta from '~/components/seo/PageMeta'
// import OrganisationsGrid from '../../components/organisation/OrganisationGrid'
import OrganisationCardV2, {OrganisationCardProps} from '~/components/organisation/OrganisationCardV2'
import AppFooter from '~/components/AppFooter'
import AppHeader from '~/components/AppHeader'

type OrganisationsIndexPageProps = {
count: number,
Expand All @@ -30,19 +32,19 @@ type OrganisationsIndexPageProps = {
}

const pageTitle = `Organisations | ${app.title}`
const pageDesc = 'The list of organisations participating in the development of research software registerd in the Research Software Directory.'
const pageDesc = 'List of organizations involved in the development of research software.'

export default function OrganisationsIndexPage({
organisations = [], count, page, rows, search
}: OrganisationsIndexPageProps){
}: OrganisationsIndexPageProps) {
// use next router (hook is only for browser)
const router = useRouter()

// next/previous page button
function handleTablePageChange(
event: MouseEvent<HTMLButtonElement> | null,
newPage: number,
){
) {
const url = ssrOrganisationUrl({
// take existing params from url (query)
...ssrOrganisationParams(router.query),
Expand All @@ -62,7 +64,7 @@ export default function OrganisationsIndexPage({
// change number of cards per page
function handleItemsPerPage(
event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
){
) {
const url = ssrOrganisationUrl({
// take existing params from url (query)
...ssrOrganisationParams(router.query),
Expand All @@ -73,7 +75,7 @@ export default function OrganisationsIndexPage({
router.push(url)
}

function handleSearch(searchFor:string){
function handleSearch(searchFor: string) {
const url = ssrOrganisationUrl({
// take existing params from url (query)
...ssrOrganisationParams(router.query),
Expand All @@ -85,48 +87,62 @@ export default function OrganisationsIndexPage({
}

return (
<DefaultLayout>
{/* Page Head meta tags */}
<PageMeta
title={pageTitle}
description={pageDesc}
/>
<PageTitle title="Organisations">
<div className="md:flex flex-wrap justify-end">
<div className="flex items-center lg:ml-4">
<Searchbox
placeholder='Find organisation'
onSearch={handleSearch}
defaultValue={search}
/>
</div>
<TablePagination
component="nav"
count={count}
page={page}
labelRowsPerPage="Per page"
onPageChange={handleTablePageChange}
rowsPerPage={rows}
rowsPerPageOptions={rowsPerPageOptions}
onRowsPerPageChange={handleItemsPerPage}
<div className="bg-gray-100">
<AppHeader />

<div className="py-4 flex-1 flex flex-col px-4 lg:container lg:mx-auto">
{/* Page Head meta tags */}
<PageMeta
title={pageTitle}
description={pageDesc}
/>

<div className="px-4 rounded-lg bg-base-100 sticky top-0">
<PageTitle title="Organisations">
<div className="md:flex flex-wrap justify-end">
<div className="flex items-center lg:ml-4">
<Searchbox
placeholder='Find organisation'
onSearch={handleSearch}
defaultValue={search}
/>
</div>
<TablePagination
component="nav"
count={count}
page={page}
labelRowsPerPage="Per page"
onPageChange={handleTablePageChange}
rowsPerPage={rows}
rowsPerPageOptions={rowsPerPageOptions}
onRowsPerPageChange={handleItemsPerPage}
/>
</div>
</PageTitle>
</div>

{/* Organizations cards */}
<div className="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 my-12">
{organisations.map((organisation: OrganisationCardProps, index: number) => (
<div key={index}>
<OrganisationCardV2 organisation={organisation} />
</div>
))}
</div>

<div className="flex flex-wrap justify-center mb-10">
<Pagination
count={Math.ceil(count / rows)}
page={page + 1}
onChange={handlePaginationChange}
size="large"
shape="rounded"
/>

</div>
</PageTitle>

<OrganisationsGrid
organisations={organisations}
/>

<div className="flex flex-wrap justify-center mb-8">
<Pagination
count={Math.ceil(count/rows)}
page={page + 1}
onChange={handlePaginationChange}
size="large"
shape="rounded"
/>
</div>
</DefaultLayout>
<AppFooter />
</div >
)
}

Expand Down

0 comments on commit 4960c32

Please sign in to comment.