Skip to content

Commit

Permalink
CORE-4898: update table rows
Browse files Browse the repository at this point in the history
  • Loading branch information
@ekachxaidze98
ekachxaidze98 committed Aug 2, 2024
1 parent 556042a commit c412a09
Show file tree
Hide file tree
Showing 3 changed files with 157 additions and 67 deletions.
75 changes: 57 additions & 18 deletions templates/fresh-finds/cards/accordion.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,63 @@ import { classNames } from '@oacore/design/lib/utils'

import styles from '../styles.module.css'

const Accordion = ({ tag: Tag = 'td', className, article }) => (
<Tag colSpan="12" className={classNames.use(styles.article).join(className)}>
<>
<div className={styles.articleHeader}>
<h2>{article.DOI}</h2>
</div>
<div className={styles.wrapper}>
<p className={styles.boxProp}>Authors</p>
<div className={styles.box}>
{article.affiliation_info.map((item) => (
<div>
<p className={styles.text}>{item.author_name}</p>
</div>
))}
const Accordion = ({ tag: Tag = 'td', className, article, institution }) => {
const makeBold = (item) => {
const res = item.affiliation.name.filter((name) => {
const split = name.split(',')
return split.some(
(n) => n.trim().toLowerCase() === institution.trim().toLowerCase()
)
})
return res.length > 0
}

return (
<Tag
colSpan="12"
className={classNames.use(styles.article).join(className)}
>
<>
<div className={styles.articleHeader}>
<h2>{article.title}</h2>
</div>
<div className={styles.wrapper}>
<p className={styles.boxProp}>Authors</p>
<div className={styles.box}>
{article.affiliation_info.map((item) => (
<div className={styles.accordionItemWrapper}>
<p
className={classNames.use(styles.text, {
[styles.textBold]: makeBold(item),
})}
>
{item.author_name}
</p>
{item.affiliation.name.some((name) => name.trim() !== '') && (
<a
className={styles.afiliation}
href={`https://ror.org/${item.affiliation.ror_id}`}
target="_blank"
rel="noreferrer"
>{`(${item.affiliation.name})`}</a>
)}
</div>
))}
</div>
</div>
<div className={styles.wrapper}>
<p className={styles.boxProp}>Publisher</p>
<div className={styles.box}>
{article.affiliation_info.map((item) => (
<div className={styles.accordionItemWrapper}>
<p className={styles.text}>{item.publisher}</p>
</div>
))}
</div>
</div>
</div>
</>
</Tag>
)
</>
</Tag>
)
}

export default Accordion
20 changes: 20 additions & 0 deletions templates/fresh-finds/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,10 +117,30 @@
letter-spacing: 0.026px;
}

.afiliation {
color: #b75400;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.026px;
margin: 0 0 10px;
}

.text-bold {
font-weight: 700;
}

.box-prop {
width: 7vw;
margin: 0;
font-weight: 500;
color: var(--primary);
text-align: right;
}

.accordion-item-wrapper {
display: flex;
align-items: center;
gap: 5px;
}
129 changes: 80 additions & 49 deletions templates/fresh-finds/tables/freshFindsTable.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { observer } from 'mobx-react-lite'
import React, { useContext, useEffect, useRef, useState } from 'react'
import { Button } from '@oacore/design/lib/elements'
import React, { useContext, useEffect, useState } from 'react'
// import { Button } from '@oacore/design/lib/elements'

// import { classNames } from '@oacore/design/lib/utils'

import { GlobalContext } from '../../../store'
import styles from '../styles.module.css'
Expand All @@ -9,18 +11,18 @@ import { Card } from '../../../design'
import Tablev2 from '../../../components/tablev2/tablev2'
import Table from '../../../components/table'
import link from '../../../components/upload/assets/link.svg'
import kababMenu from '../../../components/upload/assets/kebabMenu.svg'
import Menu from '../../../components/menu'
// import kababMenu from '../../../components/upload/assets/kebabMenu.svg'
// import Menu from '../../../components/menu'
import ExportButton from '../../../components/export-button'
import TableLoading from '../../../components/tableLoading'
import Accordion from '../cards/accordion'

const FreshFindsTable = observer(
({ getFreshFindsData, freshFindsData, freshFindsDataLoading }) => {
const { ...globalStore } = useContext(GlobalContext)
const menuRef = useRef(null)
const [visibleMenu, setVisibleMenu] = useState(false)
const [selectedRowData, setSelectedRowData] = useState(null)
// const menuRef = useRef(null)
// const [visibleMenu, setVisibleMenu] = useState(false)
// const [selectedRowData, setSelectedRowData] = useState(null)
const [page, setPage] = useState(0)
const [freshData, setFreshData] = useState([])
const [localSearchTerm, setLocalSearchTerm] = useState('')
Expand All @@ -34,12 +36,12 @@ const FreshFindsTable = observer(
getFreshFindsData(globalStore.dataProvider.id)
}, [globalStore.dataProvider.id])

const handleClick = (e, rowDetail) => {
e.preventDefault()
e.stopPropagation()
setSelectedRowData(rowDetail)
setVisibleMenu(!visibleMenu)
}
// const handleClick = (e, rowDetail) => {
// e.preventDefault()
// e.stopPropagation()
// setSelectedRowData(rowDetail)
// setVisibleMenu(!visibleMenu)
// }

const fetchData = () => {
setPage(page + 1)
Expand All @@ -50,17 +52,17 @@ const FreshFindsTable = observer(
window.open(`https://dx.doi.org/${doi}`, '_blank')
}

useEffect(() => {
const handleClickOutside = (event) => {
if (menuRef.current && !menuRef.current.contains(event.target))
setVisibleMenu(false)
}

document.addEventListener('mousedown', handleClickOutside)
return () => {
document.removeEventListener('mousedown', handleClickOutside)
}
}, [menuRef])
// useEffect(() => {
// const handleClickOutside = (event) => {
// if (menuRef.current && !menuRef.current.contains(event.target))
// setVisibleMenu(false)
// }
//
// document.addEventListener('mousedown', handleClickOutside)
// return () => {
// document.removeEventListener('mousedown', handleClickOutside)
// }
// }, [menuRef])

useEffect(() => {
const startIndex = page * 10
Expand All @@ -79,8 +81,11 @@ const FreshFindsTable = observer(
?.map((info) => info.author_name.toLowerCase())
.join(', ')
const doi = item.DOI ? item.DOI.toLowerCase() : ''
const title = item.DOI ? item.DOI.toLowerCase() : ''
return (
authors.includes(lowerSearchTerm) || doi.includes(lowerSearchTerm)
authors.includes(lowerSearchTerm) ||
doi.includes(lowerSearchTerm) ||
title.includes(lowerSearchTerm)
)
})
}
Expand Down Expand Up @@ -117,7 +122,12 @@ const FreshFindsTable = observer(
localSearch
localSearchTerm={localSearchTerm}
searchChange={searchChange}
details={<Accordion article={accordionData} />}
details={
<Accordion
institution={globalStore.dataProvider.institution}
article={accordionData}
/>
}
>
<Table.Column
id="authors"
Expand All @@ -133,6 +143,15 @@ const FreshFindsTable = observer(
return '-'
}}
/>
<Table.Column
id="title"
display="Title"
className={styles.titleColumn}
getter={(v) => {
if (v.title) return <span>{v.title}</span>
return '-'
}}
/>
<Table.Column
id="doi"
display="DOI"
Expand All @@ -155,30 +174,42 @@ const FreshFindsTable = observer(
className={styles.doiColumn}
/>
<Table.Column
id="actions"
getter={(v) => (
<div className={styles.actionButtonWrapper}>
<Button
className={styles.actionButtonPure}
onClick={(e) => handleClick(e, v)}
>
<img src={kababMenu} alt="kababMenu" />
</Button>
<Menu
ref={menuRef}
visible={visibleMenu && selectedRowData === v}
className={styles.menuButton}
stopPropagation
>
{Object.values(texts.actions).map(({ title, key }) => (
<Menu.Item key={key} target="_blank">
<div className={styles.togglerTitle}>{title}</div>
</Menu.Item>
))}
</Menu>
</div>
)}
id="date"
display="Publication date"
className={styles.titleColumn}
getter={(v) => {
if (v.publicationDate) return <span>{v.publicationDate}</span>

return '-'
}}
/>
{/* <Table.Column */}
{/* id="actions" */}
{/* getter={(v) => ( */}
{/* <div className={styles.actionButtonWrapper}> */}
{/* <Button */}
{/* className={styles.actionButtonPure} */}
{/* onClick={(e) => handleClick(e, v)} */}
{/* > */}
{/* <img src={kababMenu} alt="kababMenu" /> */}
{/* </Button> */}
{/* <Menu */}
{/* ref={menuRef} */}
{/* visible={visibleMenu && selectedRowData === v} */}
{/* className={styles.menuButton} */}
{/* stopPropagation */}
{/* > */}
{/* eslint-disable-next-line max-len */}
{/* {Object.values(texts.actions).map(({ title, key }) => ( */}
{/* <Menu.Item key={key} target="_blank"> */}
{/* eslint-disable-next-line max-len */}
{/* <div className={styles.togglerTitle}>{title}</div> */}
{/* </Menu.Item> */}
{/* ))} */}
{/* </Menu> */}
{/* </div> */}
{/* )} */}
{/* /> */}
<Table.Action>
<ExportButton href="">download csv</ExportButton>
</Table.Action>
Expand Down

0 comments on commit c412a09

Please sign in to comment.