popovspiridon99/tests
1
0
Fork 0
forked from VinokurovVE/tests
Code Issues Pull Requests Projects Releases Wiki Activity

mantine

Browse Source
This commit is contained in:
cracklesparkle
2024-10-09 16:51:37 +09:00
parent b88d83cd74
commit 974fc12b34
32 changed files with 3456 additions and 1671 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
client/src/components/ServerHardware.tsx
View File

@ -1,16 +1,17 @@
import { AppBar, Autocomplete, CircularProgress, Dialog, IconButton, TextField, Toolbar } from '@mui/material'
import { AppBar, CircularProgress, Dialog, IconButton, Toolbar } from '@mui/material'
import { Fragment, useState } from 'react'
import { IRegion } from '../interfaces/fuel'
import { useHardwares, useServers } from '../hooks/swrHooks'
import FullFeaturedCrudGrid from './TableEditable'
import ServerService from '../services/ServersService'
import { GridColDef } from '@mui/x-data-grid'
import { Close } from '@mui/icons-material'
import ServerData from './ServerData'
import { Autocomplete, CloseButton, Table } from '@mantine/core'
import { IServer } from '../interfaces/servers'
export default function ServerHardware() {
const [open, setOpen] = useState(false)
const [selectedOption, setSelectedOption] = useState<IRegion | null>(null)
const [selectedOption, setSelectedOption] = useState<number | null>(null)
const { servers, isLoading } = useServers()
const [serverDataOpen, setServerDataOpen] = useState(false)
@ -71,54 +72,96 @@ export default function ServerHardware() {
}
</Dialog>
<form>
<Autocomplete
placeholder="Сервер"
flex={'1'}
data={servers ? servers.map((item: IServer) => ({ label: item.name, value: item.id.toString() })) : []}
onSelect={(e) => console.log(e.currentTarget.value)}
//onChange={(value) => setSearch(value)}
onOptionSubmit={(value) => setSelectedOption(Number(value))}
rightSection={
//search !== '' &&
(
<CloseButton
size="sm"
onMouseDown={(event) => event.preventDefault()}
onClick={() => {
//setSearch('')
setSelectedOption(null)
}}
aria-label="Clear value"
/>
)
}
//value={search}
/>
</form>
{serversLoading ?
<CircularProgress />
:
<FullFeaturedCrudGrid
autoComplete={
<Autocomplete
open={open}
onOpen={() => {
setOpen(true)
}}
onClose={() => {
setOpen(false)
}}
onInputChange={(_, value) => handleInputChange(value)}
onChange={(_, value) => handleOptionChange(value)}
filterOptions={(x) => x}
isOptionEqualToValue={(option: IRegion, value: IRegion) => option.name === value.name}
getOptionLabel={(option: IRegion) => option.name ? option.name : ""}
options={servers || []}
loading={isLoading}
value={selectedOption}
renderInput={(params) => (
<TextField
{...params}
label="Сервер"
size='small'
InputProps={{
...params.InputProps,
endAdornment: (
<Fragment>
{isLoading ? <CircularProgress color="inherit" size={20} /> : null}
{params.InputProps.endAdornment}
</Fragment>
)
}} />
)} />}
onSave={() => {
}}
onDelete={ServerService.removeServer}
initialRows={hardwares || []}
columns={hardwareColumns}
actions
onRowClick={(params) => {
setCurrentServerData(params.row)
setServerDataOpen(true)
}}
loading={false}
/>
// <FullFeaturedCrudGrid
// autoComplete={
// <Autocomplete
// open={open}
// onOpen={() => {
// setOpen(true)
// }}
// onClose={() => {
// setOpen(false)
// }}
// onInputChange={(_, value) => handleInputChange(value)}
// onChange={(_, value) => handleOptionChange(value)}
// filterOptions={(x) => x}
// isOptionEqualToValue={(option: IRegion, value: IRegion) => option.name === value.name}
// getOptionLabel={(option: IRegion) => option.name ? option.name : ""}
// options={servers || []}
// loading={isLoading}
// value={selectedOption}
// renderInput={(params) => (
// <TextField
// {...params}
// label="Сервер"
// size='small'
// InputProps={{
// ...params.InputProps,
// endAdornment: (
// <Fragment>
// {isLoading ? <CircularProgress color="inherit" size={20} /> : null}
// {params.InputProps.endAdornment}
// </Fragment>
// )
// }} />
// )} />}
// onSave={() => {
// }}
// onDelete={ServerService.removeServer}
// initialRows={hardwares || []}
// columns={hardwareColumns}
// actions
// onRowClick={(params) => {
// setCurrentServerData(params.row)
// setServerDataOpen(true)
// }}
// loading={false}
// />
<Table highlightOnHover>
<Table.Thead>
<Table.Tr>
{hardwareColumns.map(column => (
<Table.Th key={column.field}>{column.headerName}</Table.Th>
))}
</Table.Tr>
</Table.Thead>
<Table.Tbody>
<Table.Tr>
{hardwareColumns.map(column => (
<Table.Td key={column.field}>{hardwares ? hardwares[column.field] : ''}</Table.Td>
))}
</Table.Tr>
</Table.Tbody>
</Table>
}
</>
)