albert/qmining-page
1
0
Fork 0
mirror of https://gitlab.com/MrFry/qmining-page synced 2025-04-01 20:23:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Multiple style fixes, todos page improvements

Browse source
This commit is contained in:
mrfry 2021-05-18 13:01:35 +02:00
parent e928ef87de
commit ef97239c5f
13 changed files with 121 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/components/todoStuff/todoBoard.js
View file

@ -27,21 +27,24 @@ export default function TodoBoard(props) {
<div className={styles.table}>
{Object.keys(columns).map((key) => {
const category = columns[key]
const cardsToShow = cards.filter((card) => {
const shouldHide =
card.state !== key ||
(selectedGroup !== null &&
selectedGroup !== 'uncat' &&
card.group !== selectedGroup) ||
(selectedGroup === 'uncat' && card.group !== undefined)
return !shouldHide
})
return (
<div className={styles.tableCol} key={key}>
<div className={styles.categoryName}>{category.name}</div>
{cards.map((card, i) => {
const shouldHide =
card.state !== key ||
(selectedGroup !== null &&
selectedGroup !== 'uncat' &&
card.group !== selectedGroup) ||
(selectedGroup === 'uncat' && card.group !== undefined)
if (shouldHide) {
return null
}
{cardsToShow.length === 0 && (
<div className={styles.empty}>Üres</div>
)}
{cardsToShow.map((card, i) => {
return (
<TodoCard
key={i}

6
src/components/todoStuff/todoBoard.module.css
View file

@ -22,3 +22,9 @@
.tableCol {
flex: 1;
}
.empty {
display: flex;
justify-content: center;
padding: 10px 0px;
}

2
src/components/todoStuff/todoCard.js
View file

@ -11,7 +11,7 @@ export default function TodoCard(props) {
<div
className={styles.card}
style={{
border: `1px solid ${categories[category].color || '#f2cb05'}`,
border: `1px solid ${group || '#f2cb05'}`,
}}
onClick={() => {
onClick(props.cardData)

27
src/components/todoStuff/todoTable.js
View file

@ -17,22 +17,25 @@ export default function TodoBoard(props) {
return card.state === key
})
const tableCardsToShow = tableCards.filter((card) => {
const shouldHide =
card.state !== key ||
(selectedGroup !== null &&
selectedGroup !== 'uncat' &&
card.group !== selectedGroup) ||
(selectedGroup === 'uncat' && card.group !== undefined)
return !shouldHide
})
return (
<div className={styles.container} key={key}>
<div className={styles.title}>{table.name}</div>
<div className={styles.scroll}>
{tableCards.map((card, i) => {
const shouldHide =
card.state !== key ||
(selectedGroup !== null &&
selectedGroup !== 'uncat' &&
card.group !== selectedGroup) ||
(selectedGroup === 'uncat' && card.group !== undefined)
if (shouldHide) {
return null
}
{tableCardsToShow.length === 0 && (
<div className={styles.empty}>Üres</div>
)}
{tableCardsToShow.map((card, i) => {
return (
<TodoRow
onClick={onClick}

6
src/components/todoStuff/todoTable.module.css
View file

@ -25,3 +25,9 @@
overflow-y: auto;
overflow-x: hidden;
}
.empty {
display: flex;
justify-content: center;
padding: 10px 0px;
}

42
src/components/todoStuff/todos.js
View file

@ -23,6 +23,8 @@ export default function Todos() {
const [namedGroups, setGroups] = useState(null)
const [selectedGroup, setSelectedGroup] = useState(null)
const [activeGroups, setActiveGroups] = useState(null)
useEffect(() => {
fetch(`${constants.apiUrl}todos`, {
credentials: 'include',
@ -43,6 +45,23 @@ export default function Todos() {
setCards(data.todos.cards)
setColumns(data.todos.columns)
setLoaded(true)
const notTables = Object.keys(data.todos.columns).reduce((acc, key) => {
const col = data.todos.columns[key]
if (col.type !== 'table') {
acc.push(key)
}
return acc
}, [])
setActiveGroups(
data.todos.cards.reduce((acc, card) => {
if (card.group && notTables.includes(card.state)) {
if (!acc.includes(card.group)) acc.push(card.group)
}
return acc
}, [])
)
}
const onClick = (card) => {
@ -96,11 +115,17 @@ export default function Todos() {
<div className={'buttonContainer'}>
{groups.map((group) => {
const namedGroup = namedGroups[group]
const shouldSkip = activeGroups && !activeGroups.includes(group)
if (shouldSkip) {
return null
}
return (
<div
className={`${'buttonContainer'}, ${
styles.todoButtons
} ${group === selectedGroup && 'activeButton'}`}
className={`${'buttonContainer'}, ${styles.todoButtons} ${
group === selectedGroup && 'activeButton'
}`}
key={group}
onClick={() => {
setSelectedGroup(group)
@ -111,9 +136,9 @@ export default function Todos() {
)
})}
<div
className={`${'buttonContainer'}, ${
styles.todoButtons
} ${'uncat' === selectedGroup && 'activeButton'}`}
className={`${'buttonContainer'}, ${styles.todoButtons} ${
'uncat' === selectedGroup && 'activeButton'
}`}
onClick={() => {
setSelectedGroup('uncat')
}}
@ -121,8 +146,9 @@ export default function Todos() {
{'Kategorizálatlan'}
</div>
<div
className={`${'buttonContainer'}, ${styles.todoButtons} ${null ===
selectedGroup && 'activeButton'}`}
className={`${'buttonContainer'}, ${styles.todoButtons} ${
null === selectedGroup && 'activeButton'
}`}
onClick={() => {
setSelectedGroup(null)
}}