Add remove svg icon

This commit is contained in:
adam-skowronek 2022-06-23 01:05:52 +02:00
parent 84f2e235fb
commit d56226ccc5
4 changed files with 47 additions and 36 deletions

View File

@ -0,0 +1,2 @@
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m12 2c5.5228475 0 10 4.4771525 10 10s-4.4771525 10-10 10-10-4.4771525-10-10 4.4771525-10 10-10zm0 2c-4.418278 0-8 3.581722-8 8s3.581722 8 8 8 8-3.581722 8-8-3.581722-8-8-8zm-4.70675 3.29325c.36092308-.36092308.92719527-.38868639 1.31971051-.08328994l.09428949.08328994 3.293 3.293 3.293-3.293c.391-.391 1.023-.391 1.414 0 .3609231.36092308.3886864.92719527.0832899 1.31971051l-.0832899.09428949-3.293 3.293 3.293 3.293c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293-.2133333 0-.4266667-.0680556-.6046991-.203588l-.1023009-.089412-3.293-3.293-3.293 3.293c-.195.195-.451.293-.707.293s-.512-.098-.707-.293c-.36092308-.3609231-.38868639-.9271953-.08328994-1.3197105l.08328994-.0942895 3.293-3.293-3.293-3.293c-.391-.391-.391-1.023 0-1.414z" fill-rule="evenodd"/></svg>

After

Width:  |  Height:  |  Size: 864 B

View File

@ -3,6 +3,7 @@ import { useEffect, useState } from 'react'
import { useMutation, useQuery } from 'react-query' import { useMutation, useQuery } from 'react-query'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import { deleteGroup, getGroups } from '../../api/groups' import { deleteGroup, getGroups } from '../../api/groups'
import { ReactComponent as IconRemove } from '../../assets/svg/icon-remove.svg'
const Groups = () => { const Groups = () => {
let navigate = useNavigate() let navigate = useNavigate()
@ -43,11 +44,11 @@ const Groups = () => {
onSuccess: () => refetchGroups(), onSuccess: () => refetchGroups(),
}, },
) )
useEffect(() => { useEffect(() => {
setPage(1) setPage(1)
}, [perPage]) }, [perPage])
if (areGroupsLoading) { if (areGroupsLoading) {
return <div>Ładowanie</div> return <div>Ładowanie</div>
} }
@ -98,7 +99,9 @@ const Groups = () => {
<td>{points_for_first_term}</td> <td>{points_for_first_term}</td>
<td>{points_for_second_term}</td> <td>{points_for_second_term}</td>
<td> <td>
<button onClick={() => mutateDelete(id)}>X</button> <button onClick={() => mutateDelete(id)}>
<IconRemove />
</button>
</td> </td>
</tr> </tr>
), ),
@ -107,40 +110,40 @@ const Groups = () => {
</table> </table>
</div> </div>
<div className="w-full flex items-center justify-center mt-2"> <div className="w-full flex items-center justify-center mt-2">
<div className="btn-group"> <div className="btn-group">
<button
className="btn btn-outline"
onClick={() => setPage(page - 1)}
disabled={page === 1}
>
«
</button>
{[
...Array(
groups?.data?.max_pages && groups?.data?.max_pages + 1,
).keys(),
]
.slice(1)
.map((p) => (
<button <button
className="btn btn-outline" key={p}
onClick={() => setPage(page - 1)} className={classNames('btn btn-outline', {
disabled={page === 1} 'bg-success': p === page,
})}
onClick={() => setPage(p)}
> >
« {p}
</button> </button>
{[ ))}
...Array( <button
groups?.data?.max_pages && groups?.data?.max_pages + 1, className="btn btn-outline"
).keys(), onClick={() => setPage(page + 1)}
] disabled={page === groups?.data?.max_pages}
.slice(1) >
.map((p) => ( »
<button </button>
key={p} </div>
className={classNames('btn btn-outline', { </div>
'bg-success': p === page,
})}
onClick={() => setPage(p)}
>
{p}
</button>
))}
<button
className="btn btn-outline"
onClick={() => setPage(page + 1)}
disabled={page === groups?.data?.max_pages}
>
»
</button>
</div>
</div>
</div> </div>
) )
} }

View File

@ -3,6 +3,7 @@ import { useMutation, useQuery } from 'react-query'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import { getLeaders, deleteLeader } from '../../api/leaders' import { getLeaders, deleteLeader } from '../../api/leaders'
import classNames from 'classnames' import classNames from 'classnames'
import { ReactComponent as IconRemove } from '../../assets/svg/icon-remove.svg'
const Leaders = () => { const Leaders = () => {
let navigate = useNavigate() let navigate = useNavigate()
@ -111,7 +112,9 @@ const Leaders = () => {
: 'Nie/stacjonarny'} : 'Nie/stacjonarny'}
</td> </td>
<td> <td>
<button onClick={() => mutateDelete(id)}>X</button> <button onClick={() => mutateDelete(id)}>
<IconRemove />
</button>
</td> </td>
</tr> </tr>
), ),

View File

@ -8,6 +8,7 @@ import {
downloadStudents, downloadStudents,
} from '../../api/students' } from '../../api/students'
import classNames from 'classnames' import classNames from 'classnames'
import { ReactComponent as IconRemove } from '../../assets/svg/icon-remove.svg'
const Students = () => { const Students = () => {
let navigate = useNavigate() let navigate = useNavigate()
@ -179,7 +180,9 @@ const Students = () => {
<td>{group === null ? 'Nie' : 'Tak'}</td> <td>{group === null ? 'Nie' : 'Tak'}</td>
<td>{mode ? 'Stacjonarny' : 'Niestacjonarny'}</td> <td>{mode ? 'Stacjonarny' : 'Niestacjonarny'}</td>
<td> <td>
<button onClick={() => mutateDelete(index)}>X</button> <button onClick={() => mutateDelete(index)}>
<IconRemove />
</button>
</td> </td>
</tr> </tr>
))} ))}