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

Remove spread fill to avoid duplicate values on autocomplete

Browse Source
This commit is contained in:
cracklesparkle
2024-07-22 17:00:47 +09:00
parent a3b0b1b222
commit a1a5c2b3a6
5 changed files with 106 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
frontend_reactjs/src/components/ServerHardware.tsx
View File

@ -1,5 +1,5 @@
import { AppBar, Autocomplete, CircularProgress, Dialog, IconButton, TextField, Toolbar } from '@mui/material' import { AppBar, Autocomplete, CircularProgress, Dialog, IconButton, TextField, Toolbar } from '@mui/material'
import { Fragment, useEffect, useState } from 'react' import { Fragment, useState } from 'react'
import { IRegion } from '../interfaces/fuel' import { IRegion } from '../interfaces/fuel'
import { useHardwares, useServers } from '../hooks/swrHooks' import { useHardwares, useServers } from '../hooks/swrHooks'
import FullFeaturedCrudGrid from './TableEditable' import FullFeaturedCrudGrid from './TableEditable'
@ -10,19 +10,12 @@ import ServerData from './ServerData'
export default function ServerHardware() { export default function ServerHardware() {
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const [options, setOptions] = useState<IRegion[]>([])
const [selectedOption, setSelectedOption] = useState<IRegion | null>(null) const [selectedOption, setSelectedOption] = useState<IRegion | null>(null)
const { servers, isLoading } = useServers() const { servers, isLoading } = useServers()
const [serverDataOpen, setServerDataOpen] = useState(false) const [serverDataOpen, setServerDataOpen] = useState(false)
const [currentServerData, setCurrentServerData] = useState<any | null>(null) const [currentServerData, setCurrentServerData] = useState<any | null>(null)
useEffect(() => {
if (servers) {
setOptions([...servers])
}
}, [servers])
const handleInputChange = (value: string) => { const handleInputChange = (value: string) => {
return value return value
} }
@ -81,43 +74,43 @@ export default function ServerHardware() {
{serversLoading ? {serversLoading ?
<CircularProgress /> <CircularProgress />
: :
hardwares &&
<FullFeaturedCrudGrid <FullFeaturedCrudGrid
autoComplete={<Autocomplete autoComplete={
open={open} <Autocomplete
onOpen={() => { open={open}
setOpen(true) onOpen={() => {
}} setOpen(true)
onClose={() => { }}
setOpen(false) onClose={() => {
}} setOpen(false)
onInputChange={(_, value) => handleInputChange(value)} }}
onChange={(_, value) => handleOptionChange(value)} onInputChange={(_, value) => handleInputChange(value)}
filterOptions={(x) => x} onChange={(_, value) => handleOptionChange(value)}
isOptionEqualToValue={(option: IRegion, value: IRegion) => option.name === value.name} filterOptions={(x) => x}
getOptionLabel={(option: IRegion) => option.name ? option.name : ""} isOptionEqualToValue={(option: IRegion, value: IRegion) => option.name === value.name}
options={options} getOptionLabel={(option: IRegion) => option.name ? option.name : ""}
loading={isLoading} options={servers || []}
value={selectedOption} loading={isLoading}
renderInput={(params) => ( value={selectedOption}
<TextField renderInput={(params) => (
{...params} <TextField
label="Сервер" {...params}
size='small' label="Сервер"
InputProps={{ size='small'
...params.InputProps, InputProps={{
endAdornment: ( ...params.InputProps,
<Fragment> endAdornment: (
{isLoading ? <CircularProgress color="inherit" size={20} /> : null} <Fragment>
{params.InputProps.endAdornment} {isLoading ? <CircularProgress color="inherit" size={20} /> : null}
</Fragment> {params.InputProps.endAdornment}
) </Fragment>
}} /> )
)} />} }} />
)} />}
onSave={() => { onSave={() => {
}} }}
onDelete={ServerService.removeServer} onDelete={ServerService.removeServer}
initialRows={hardwares} initialRows={hardwares || []}
columns={hardwareColumns} columns={hardwareColumns}
actions actions
onRowClick={(params) => { onRowClick={(params) => {

75
frontend_reactjs/src/components/ServerIpsView.tsx
View File

@ -1,5 +1,5 @@
import { AppBar, Autocomplete, CircularProgress, Dialog, IconButton, TextField, Toolbar } from '@mui/material' import { AppBar, Autocomplete, CircularProgress, Dialog, IconButton, TextField, Toolbar } from '@mui/material'
import { Fragment, useEffect, useState } from 'react' import { Fragment, useState } from 'react'
import { IRegion } from '../interfaces/fuel' import { IRegion } from '../interfaces/fuel'
import { useServerIps, useServers } from '../hooks/swrHooks' import { useServerIps, useServers } from '../hooks/swrHooks'
import FullFeaturedCrudGrid from './TableEditable' import FullFeaturedCrudGrid from './TableEditable'
@ -10,19 +10,12 @@ import ServerData from './ServerData'
export default function ServerIpsView() { export default function ServerIpsView() {
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const [options, setOptions] = useState<IRegion[]>([])
const [selectedOption, setSelectedOption] = useState<IRegion | null>(null) const [selectedOption, setSelectedOption] = useState<IRegion | null>(null)
const { servers, isLoading } = useServers() const { servers, isLoading } = useServers()
const [serverDataOpen, setServerDataOpen] = useState(false) const [serverDataOpen, setServerDataOpen] = useState(false)
const [currentServerData, setCurrentServerData] = useState<any | null>(null) const [currentServerData, setCurrentServerData] = useState<any | null>(null)
useEffect(() => {
if (servers) {
setOptions([...servers])
}
}, [servers])
const handleInputChange = (value: string) => { const handleInputChange = (value: string) => {
return value return value
} }
@ -79,43 +72,43 @@ export default function ServerIpsView() {
{serversLoading ? {serversLoading ?
<CircularProgress /> <CircularProgress />
: :
serverIps &&
<FullFeaturedCrudGrid <FullFeaturedCrudGrid
autoComplete={<Autocomplete autoComplete={
open={open} <Autocomplete
onOpen={() => { open={open}
setOpen(true) onOpen={() => {
}} setOpen(true)
onClose={() => { }}
setOpen(false) onClose={() => {
}} setOpen(false)
onInputChange={(_, value) => handleInputChange(value)} }}
onChange={(_, value) => handleOptionChange(value)} onInputChange={(_, value) => handleInputChange(value)}
filterOptions={(x) => x} onChange={(_, value) => handleOptionChange(value)}
isOptionEqualToValue={(option: IRegion, value: IRegion) => option.name === value.name} filterOptions={(x) => x}
getOptionLabel={(option: IRegion) => option.name ? option.name : ""} isOptionEqualToValue={(option: IRegion, value: IRegion) => option.name === value.name}
options={options} getOptionLabel={(option: IRegion) => option.name ? option.name : ""}
loading={isLoading} options={servers || []}
value={selectedOption} loading={isLoading}
renderInput={(params) => ( value={selectedOption}
<TextField renderInput={(params) => (
{...params} <TextField
size='small' {...params}
label="Сервер" size='small'
InputProps={{ label="Сервер"
...params.InputProps, InputProps={{
endAdornment: ( ...params.InputProps,
<Fragment> endAdornment: (
{isLoading ? <CircularProgress color="inherit" size={20} /> : null} <Fragment>
{params.InputProps.endAdornment} {isLoading ? <CircularProgress color="inherit" size={20} /> : null}
</Fragment> {params.InputProps.endAdornment}
) </Fragment>
}} /> )
)} />} }} />
)} />}
onSave={() => { onSave={() => {
}} }}
onDelete={ServerService.removeServer} onDelete={ServerService.removeServer}
initialRows={serverIps} initialRows={serverIps || []}
columns={serverIpsColumns} columns={serverIpsColumns}
actions actions
onRowClick={(params) => { onRowClick={(params) => {

75
frontend_reactjs/src/components/ServerStorages.tsx
View File

@ -1,5 +1,5 @@
import { AppBar, Autocomplete, CircularProgress, Dialog, IconButton, TextField, Toolbar } from '@mui/material' import { AppBar, Autocomplete, CircularProgress, Dialog, IconButton, TextField, Toolbar } from '@mui/material'
import { Fragment, useEffect, useState } from 'react' import { Fragment, useState } from 'react'
import { IRegion } from '../interfaces/fuel' import { IRegion } from '../interfaces/fuel'
import { useHardwares, useStorages } from '../hooks/swrHooks' import { useHardwares, useStorages } from '../hooks/swrHooks'
import FullFeaturedCrudGrid from './TableEditable' import FullFeaturedCrudGrid from './TableEditable'
@ -10,19 +10,12 @@ import ServerData from './ServerData'
export default function ServerStorage() { export default function ServerStorage() {
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const [options, setOptions] = useState<IRegion[]>([])
const [selectedOption, setSelectedOption] = useState<IRegion | null>(null) const [selectedOption, setSelectedOption] = useState<IRegion | null>(null)
const { hardwares, isLoading } = useHardwares() const { hardwares, isLoading } = useHardwares()
const [serverDataOpen, setServerDataOpen] = useState(false) const [serverDataOpen, setServerDataOpen] = useState(false)
const [currentServerData, setCurrentServerData] = useState<any | null>(null) const [currentServerData, setCurrentServerData] = useState<any | null>(null)
useEffect(() => {
if (hardwares) {
setOptions([...hardwares])
}
}, [hardwares])
const handleInputChange = (value: string) => { const handleInputChange = (value: string) => {
return value return value
} }
@ -78,43 +71,43 @@ export default function ServerStorage() {
{serversLoading ? {serversLoading ?
<CircularProgress /> <CircularProgress />
: :
storages &&
<FullFeaturedCrudGrid <FullFeaturedCrudGrid
autoComplete={<Autocomplete autoComplete={
open={open} <Autocomplete
onOpen={() => { open={open}
setOpen(true) onOpen={() => {
}} setOpen(true)
onClose={() => { }}
setOpen(false) onClose={() => {
}} setOpen(false)
onInputChange={(_, value) => handleInputChange(value)} }}
onChange={(_, value) => handleOptionChange(value)} onInputChange={(_, value) => handleInputChange(value)}
filterOptions={(x) => x} onChange={(_, value) => handleOptionChange(value)}
isOptionEqualToValue={(option: IRegion, value: IRegion) => option.name === value.name} filterOptions={(x) => x}
getOptionLabel={(option: IRegion) => option.name ? option.name : ""} isOptionEqualToValue={(option: IRegion, value: IRegion) => option.name === value.name}
options={options} getOptionLabel={(option: IRegion) => option.name ? option.name : ""}
loading={isLoading} options={hardwares || []}
value={selectedOption} loading={isLoading}
renderInput={(params) => ( value={selectedOption}
<TextField renderInput={(params) => (
{...params} <TextField
size='small' {...params}
label="Hardware" size='small'
InputProps={{ label="Hardware"
...params.InputProps, InputProps={{
endAdornment: ( ...params.InputProps,
<Fragment> endAdornment: (
{isLoading ? <CircularProgress color="inherit" size={20} /> : null} <Fragment>
{params.InputProps.endAdornment} {isLoading ? <CircularProgress color="inherit" size={20} /> : null}
</Fragment> {params.InputProps.endAdornment}
) </Fragment>
}} /> )
)} />} }} />
)} />}
onSave={() => { onSave={() => {
}} }}
onDelete={ServerService.removeServer} onDelete={ServerService.removeServer}
initialRows={storages} initialRows={storages || []}
columns={storageColumns} columns={storageColumns}
actions actions
onRowClick={(params) => { onRowClick={(params) => {

13
frontend_reactjs/src/components/ServersView.tsx
View File

@ -1,5 +1,5 @@
import { AppBar, Autocomplete, Box, CircularProgress, Dialog, Grid, IconButton, TextField, Toolbar } from '@mui/material' import { AppBar, Autocomplete, Box, CircularProgress, Dialog, Grid, IconButton, TextField, Toolbar } from '@mui/material'
import { Fragment, useEffect, useState } from 'react' import { Fragment, useState } from 'react'
import { IRegion } from '../interfaces/fuel' import { IRegion } from '../interfaces/fuel'
import { useRegions, useServers, useServersInfo } from '../hooks/swrHooks' import { useRegions, useServers, useServersInfo } from '../hooks/swrHooks'
import FullFeaturedCrudGrid from './TableEditable' import FullFeaturedCrudGrid from './TableEditable'
@ -14,7 +14,6 @@ import CardInfoChip from './CardInfo/CardInfoChip'
import { useDebounce } from '@uidotdev/usehooks' import { useDebounce } from '@uidotdev/usehooks'
export default function ServersView() { export default function ServersView() {
const [options, setOptions] = useState<IRegion[]>([])
const [search, setSearch] = useState<string | null>("") const [search, setSearch] = useState<string | null>("")
const debouncedSearch = useDebounce(search, 500) const debouncedSearch = useDebounce(search, 500)
@ -28,12 +27,6 @@ export default function ServersView() {
const [serverDataOpen, setServerDataOpen] = useState(false) const [serverDataOpen, setServerDataOpen] = useState(false)
const [currentServerData, setCurrentServerData] = useState<any | null>(null) const [currentServerData, setCurrentServerData] = useState<any | null>(null)
useEffect(() => {
if (regions) {
setOptions([...regions])
}
}, [regions])
const { servers, isLoading: serversLoading } = useServers(selectedOption?.id, 0, 10) const { servers, isLoading: serversLoading } = useServers(selectedOption?.id, 0, 10)
const serversColumns: GridColDef[] = [ const serversColumns: GridColDef[] = [
@ -58,7 +51,7 @@ export default function ServersView() {
}} }}
isOptionEqualToValue={(option: IRegion, value: IRegion) => option.name === value.name} isOptionEqualToValue={(option: IRegion, value: IRegion) => option.name === value.name}
getOptionLabel={(option: IRegion) => option.name ? option.name : ""} getOptionLabel={(option: IRegion) => option.name ? option.name : ""}
options={options} options={regions || []}
loading={isLoading} loading={isLoading}
value={params.value} value={params.value}
renderInput={(params) => ( renderInput={(params) => (
@ -147,7 +140,7 @@ export default function ServersView() {
onChange={(_, value) => setSelectedOption(value)} onChange={(_, value) => setSelectedOption(value)}
isOptionEqualToValue={(option: IRegion, value: IRegion) => option.id === value.id} isOptionEqualToValue={(option: IRegion, value: IRegion) => option.id === value.id}
getOptionLabel={(option: IRegion) => option.name ? option.name : ""} getOptionLabel={(option: IRegion) => option.name ? option.name : ""}
options={options} options={regions || []}
loading={isLoading} loading={isLoading}
value={selectedOption} value={selectedOption}
renderInput={(params) => ( renderInput={(params) => (

9
frontend_reactjs/src/pages/Reports.tsx
View File

@ -10,7 +10,6 @@ import { mutate } from "swr"
export default function Reports() { export default function Reports() {
const [download, setDownload] = useState(false) const [download, setDownload] = useState(false)
const [options, setOptions] = useState<ICity[]>([])
const [search, setSearch] = useState<string | null>("") const [search, setSearch] = useState<string | null>("")
const debouncedSearch = useDebounce(search, 500) const debouncedSearch = useDebounce(search, 500)
const [selectedOption, setSelectedOption] = useState<ICity | null>(null) const [selectedOption, setSelectedOption] = useState<ICity | null>(null)
@ -20,12 +19,6 @@ export default function Reports() {
const { reportExported } = useReportExport(selectedOption?.id, download) const { reportExported } = useReportExport(selectedOption?.id, download)
useEffect(() => {
if (cities) {
setOptions([...cities])
}
}, [cities])
const refreshReport = async () => { const refreshReport = async () => {
mutate(`/info/reports/${selectedOption?.id}?to_export=false`) mutate(`/info/reports/${selectedOption?.id}?to_export=false`)
} }
@ -57,7 +50,7 @@ export default function Reports() {
onChange={(_, value) => setSelectedOption(value)} onChange={(_, value) => setSelectedOption(value)}
isOptionEqualToValue={(option: ICity, value: ICity) => option.id === value.id} isOptionEqualToValue={(option: ICity, value: ICity) => option.id === value.id}
getOptionLabel={(option: ICity) => option.name ? option.name : ""} getOptionLabel={(option: ICity) => option.name ? option.name : ""}
options={options} options={cities || []}
loading={isLoading} loading={isLoading}
value={selectedOption} value={selectedOption}
renderInput={(params) => ( renderInput={(params) => (