105 lines
3.3 KiB
TypeScript
105 lines
3.3 KiB
TypeScript
'use client'
|
|
import { Mutex } from "async-mutex"
|
|
import { useRef, useState } from "react"
|
|
import styled from "styled-components"
|
|
import useAsyncEffect from "use-async-effect"
|
|
import { useShallow } from "zustand/shallow"
|
|
import { useCurrentAuthenticatedUserStore } from "../providers"
|
|
import { useUserStore } from "../providers/UsersProvider"
|
|
|
|
type UserTableProps = {
|
|
page: number
|
|
}
|
|
const UserTableStyle = styled.table`
|
|
width: 100%
|
|
`
|
|
const UserTableHead = styled.thead`
|
|
background-color: #34067eff
|
|
`
|
|
|
|
const UserTH = styled.th`
|
|
align: center
|
|
`
|
|
const UserTableItem = styled.td`
|
|
align: center
|
|
`
|
|
|
|
const UserTableBody = styled.tbody`
|
|
> :nth-child(even) {
|
|
background-color: #410041ff;
|
|
}
|
|
> :hover {
|
|
background-color: #707070ff;
|
|
}
|
|
`
|
|
|
|
const UserTableRow = styled.tr`
|
|
|
|
`
|
|
|
|
const userTableMutex = new Mutex()
|
|
|
|
export const UserTable = ({page}: UserTableProps) => {
|
|
|
|
const userStore = useUserStore(useShallow((state) => ({
|
|
...state
|
|
})))
|
|
console.log(page)
|
|
|
|
const [callLock, setCallLock] = useState<boolean>(false)
|
|
const authUserStore = useCurrentAuthenticatedUserStore(useShallow((state) => state))
|
|
console.log(authUserStore)
|
|
const callLockRef = useRef(callLock)
|
|
useAsyncEffect(async () => {
|
|
if(!callLockRef.current && authUserStore.Admin) {
|
|
callLockRef.current = true
|
|
setCallLock(true)
|
|
await userStore.sync(page)
|
|
callLockRef.current = false
|
|
setCallLock(false)
|
|
}
|
|
}, [page, authUserStore.Id, authUserStore.Name])
|
|
|
|
useAsyncEffect(async () => {
|
|
if(authUserStore.Id === -1) {
|
|
const release = await userTableMutex.acquire()
|
|
await authUserStore.sync()
|
|
console.log(authUserStore)
|
|
await release()
|
|
}
|
|
}, [authUserStore.Id])
|
|
console.log(userStore.tableUsers)
|
|
return authUserStore.Admin && (
|
|
<UserTableStyle>
|
|
<UserTableHead>
|
|
<tr>
|
|
<UserTH>id</UserTH>
|
|
<UserTH>name</UserTH>
|
|
<UserTH>position</UserTH>
|
|
<UserTH>active</UserTH>
|
|
<UserTH>admin</UserTH>
|
|
</tr>
|
|
</UserTableHead>
|
|
<UserTableBody>
|
|
{userStore.tableUsers.map((u) => (
|
|
<UserTableRow key={u.Id}>
|
|
<UserTableItem>{u.Id}</UserTableItem>
|
|
<UserTableItem>{u.Name}</UserTableItem>
|
|
<UserTableItem>{u.JobPosition}</UserTableItem>
|
|
<UserTableItem><input type="checkbox" onChange={async () => {
|
|
if(u.Active)
|
|
await userStore.deactivateUser(u.Id)
|
|
else
|
|
await userStore.activateUser(u.Id)
|
|
}} checked={u.Active}/></UserTableItem>
|
|
<UserTableItem><input type="checkbox" onChange={async () => {
|
|
if(u.Admin)
|
|
await userStore.demoteUser(u.Id)
|
|
else
|
|
await userStore.promoteUser(u.Id)
|
|
}} checked={u.Admin}/></UserTableItem>
|
|
</UserTableRow>))}
|
|
</UserTableBody>
|
|
</UserTableStyle>
|
|
)
|
|
} |