iritmaximus/nowdatabase
1
0
Fork 0
mirror of https://github.com/nowcommunity/nowdatabase.git synced 2026-10-12 19:13:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

Rename FormComponents to tabLayoutHelpers and move editabletextfield to editable components file

Browse Source
This commit is contained in:
arttu
2024-05-22 18:34:10 +03:00
parent 30cca9bbf1
commit d24ed4437d
22 changed files with 50 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/DetailView/DetailView.tsx
+1 -2
View File
@@ -6,9 +6,8 @@ import SaveIcon from '@mui/icons-material/Save'
import { useEffect, useState, JSX } from 'react'
import { DetailContextProvider, ModeType } from './Context/DetailContext'
import { cloneDeep } from 'lodash-es'
import { EditableTextField } from './common/FormComponents'
import { useDetailContext } from './hooks'
import { DropdownOption, DropdownSelector, RadioSelector } from './common/editingComponents'
import { DropdownOption, DropdownSelector, EditableTextField, RadioSelector } from './common/editingComponents'
export type TabType = {
title: string
frontend/src/components/DetailView/common/editingComponents.tsx
+27 -1
View File
@@ -12,7 +12,7 @@ import {
import { ChangeEvent, ReactNode } from 'react'
import { RegisterOptions, FieldValues, UseFormRegisterReturn, FieldErrors } from 'react-hook-form'
import { useDetailContext } from '../hooks'
import { DataValue } from './FormComponents'
import { DataValue } from './tabLayoutHelpers'
export type DropdownOption = { value: string; display: string }
@@ -119,3 +119,29 @@ const MultiSelector = <T extends object>({
const displayValue = option ? getDisplay(option) : null
return <DataValue<T> field={field} EditElement={editingComponent} displayValue={displayValue} />
}
export const EditableTextField = <T extends object>({
field,
type,
}: {
field: keyof T
type?: React.HTMLInputTypeAttribute
}) => {
const { setEditData, editData, validator } = useDetailContext<T>()
const error = validator(editData, field)
const editingComponent = (
<TextField
onChange={(event: ChangeEvent<HTMLInputElement>) =>
setEditData({ ...editData, [field]: event?.currentTarget?.value })
}
value={editData[field] ?? ''}
variant="outlined"
size="small"
error={error !== null}
helperText={error ?? ''}
type={type ?? 'text'}
/>
)
return <DataValue<T> field={field} EditElement={editingComponent} />
}
frontend/src/components/DetailView/common/FormComponents.tsx → frontend/src/components/DetailView/common/tabLayoutHelpers.tsx
+2 -85
View File
@@ -1,5 +1,5 @@
import { Card, Typography, Box, Grid, Divider, Modal, Button, TextField } from '@mui/material'
import { ReactNode, useState, ChangeEvent } from 'react'
import { Card, Typography, Box, Grid, Divider } from '@mui/material'
import { ReactNode } from 'react'
import { useDetailContext } from '../hooks'
export const ArrayToTable = ({ array, half }: { array: Array<Array<ReactNode>>; half?: boolean }) => {
@@ -104,86 +104,3 @@ export const DataValue = <T extends object>({
}
return displayValue ?? data[field]
}
export const EditableTextField = <T extends object>({
field,
type,
}: {
field: keyof T
type?: React.HTMLInputTypeAttribute
}) => {
const { setEditData, editData, validator } = useDetailContext<T>()
const error = validator(editData, field)
const editingComponent = (
<TextField
onChange={(event: ChangeEvent<HTMLInputElement>) =>
setEditData({ ...editData, [field]: event?.currentTarget?.value })
}
value={editData[field] ?? ''}
variant="outlined"
size="small"
error={error !== null}
helperText={error ?? ''}
type={type ?? 'text'}
/>
)
return <DataValue<T> field={field} EditElement={editingComponent} />
}
/*
buttonText = Text for the button that opens modal
children = Content of modal
onSave = If defined, the modal will have a separate saving button.
onSave is a function, that will return true or false, depending
on if we want to proceed with closing the form (return false to cancel closing)
*/
export const EditingModal = ({
buttonText,
children,
onSave,
}: {
buttonText: string
children: ReactNode | ReactNode[]
onSave?: () => Promise<boolean>
}) => {
const [open, setOpen] = useState(false)
const closeWithSave = async () => {
if (!onSave) return
const close = await onSave()
if (!close) return
setOpen(false)
}
const modalStyle = {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 1200,
maxHeight: '90%',
bgcolor: 'background.paper',
border: '2px solid #000',
overflow: 'auto',
boxShadow: 24,
p: 4,
}
return (
<Box>
<Button onClick={() => setOpen(true)} variant="contained" sx={{ marginBottom: '1em' }}>
{buttonText}
</Button>
<Modal open={open} aria-labelledby={`modal-${buttonText}`} aria-describedby={`modal-${buttonText}`}>
<Box sx={{ ...modalStyle }}>
<Box marginBottom="2em" marginTop="1em">
{' '}
{children}
</Box>
{onSave && <Button onClick={() => void closeWithSave()}>Save</Button>}
<Button onClick={() => setOpen(false)}>{onSave ? 'Cancel' : 'Close'}</Button>
</Box>
</Modal>
</Box>
)
}
frontend/src/components/Locality/Tabs/AgeTab.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { LocalityDetails } from '@/backendTypes'
import { ArrayFrame, HalfFrames } from '@components/DetailView/common/FormComponents'
import { ArrayFrame, HalfFrames } from '@/components/DetailView/common/tabLayoutHelpers'
import { useDetailContext } from '@/components/DetailView/hooks'
export const AgeTab = () => {
frontend/src/components/Locality/Tabs/ClimateTab.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { LocalityDetails } from '@/backendTypes'
import { ArrayFrame, HalfFrames } from '@components/DetailView/common/FormComponents'
import { ArrayFrame, HalfFrames } from '@/components/DetailView/common/tabLayoutHelpers'
import { useDetailContext } from '@/components/DetailView/hooks'
export const ClimateTab = () => {
frontend/src/components/Locality/Tabs/EcometricsTab.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { LocalityDetails } from '@/backendTypes'
import { ArrayFrame } from '../../DetailView/common/FormComponents'
import { ArrayFrame } from '../../DetailView/common/tabLayoutHelpers'
import { useDetailContext } from '@/components/DetailView/hooks'
export const EcometricsTab = () => {
frontend/src/components/Locality/Tabs/LithologyTab.tsx
+2 -1
View File
@@ -1,6 +1,7 @@
import { Editable, LocalityDetails, SedimentaryStructure } from '@/backendTypes'
import { EditableTable } from '@/components/DetailView/common/EditableTable'
import { ArrayFrame, HalfFrames, EditingModal, Grouped } from '@/components/DetailView/common/FormComponents'
import { EditingModal } from '@/components/DetailView/common/EditingModal'
import { ArrayFrame, HalfFrames, Grouped } from '@/components/DetailView/common/tabLayoutHelpers'
import { useDetailContext } from '@/components/DetailView/hooks'
import { Box, TextField } from '@mui/material'
import { MRT_ColumnDef } from 'material-react-table'
frontend/src/components/Locality/Tabs/LocalityTab.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { Editable, LocalityDetails, LocalitySynonym } from '@/backendTypes'
import { useDetailContext } from '@/components/DetailView/hooks'
import { Grouped, ArrayFrame, HalfFrames } from '@/components/DetailView/common/FormComponents'
import { Grouped, ArrayFrame, HalfFrames } from '@/components/DetailView/common/tabLayoutHelpers'
import { Box, TextField } from '@mui/material'
import { MRT_ColumnDef } from 'material-react-table'
import { useForm } from 'react-hook-form'
frontend/src/components/Locality/Tabs/MuseumTab.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { Editable, LocalityDetails, Museum } from '@/backendTypes'
import { EditableTable } from '@/components/DetailView/common/EditableTable'
import { EditingForm } from '@/components/DetailView/common/EditingForm'
import { Grouped } from '@/components/DetailView/common/FormComponents'
import { Grouped } from '@/components/DetailView/common/tabLayoutHelpers'
import { SelectingTable } from '@/components/DetailView/common/SelectingTable'
import { useDetailContext } from '@/components/DetailView/hooks'
import { useGetAllMuseumsQuery } from '@/redux/museumReducer'
frontend/src/components/Locality/Tabs/ProjectTab.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { Editable, LocalityDetails, LocalityProject } from '@/backendTypes'
import { EditableTable } from '@/components/DetailView/common/EditableTable'
import { Grouped } from '@/components/DetailView/common/FormComponents'
import { Grouped } from '@/components/DetailView/common/tabLayoutHelpers'
import { EditingModal } from '@/components/DetailView/common/EditingModal'
import { useDetailContext } from '@/components/DetailView/hooks'
import { Box, TextField } from '@mui/material'
frontend/src/components/Locality/Tabs/SpeciesTab.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { Editable, LocalityDetails, LocalitySpecies } from '@/backendTypes'
import { EditableTable } from '@/components/DetailView/common/EditableTable'
import { EditingModal } from '@/components/DetailView/common/EditingModal'
import { Grouped } from '@/components/DetailView/common/FormComponents'
import { Grouped } from '@/components/DetailView/common/tabLayoutHelpers'
import { useDetailContext } from '@/components/DetailView/hooks'
import { Box, TextField } from '@mui/material'
import { MRT_ColumnDef } from 'material-react-table'
frontend/src/components/Locality/Tabs/TaphonomyTab.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { Editable, LocalityDetails, CollectingMethod } from '@/backendTypes'
import { useDetailContext } from '@/components/DetailView/hooks'
import { Grouped, ArrayFrame, HalfFrames } from '@/components/DetailView/common/FormComponents'
import { Grouped, ArrayFrame, HalfFrames } from '@/components/DetailView/common/tabLayoutHelpers'
import { Box, TextField } from '@mui/material'
import { MRT_ColumnDef } from 'material-react-table'
import { useForm } from 'react-hook-form'
frontend/src/components/Locality/Tabs/UpdateTab.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { Editable, LocalityDetails, LocalityUpdate } from '@/backendTypes'
import { EditableTable } from '@/components/DetailView/common/EditableTable'
import { Grouped } from '@/components/DetailView/common/FormComponents'
import { Grouped } from '@/components/DetailView/common/tabLayoutHelpers'
import { useDetailContext } from '@/components/DetailView/hooks'
import { Box } from '@mui/material'
import { MRT_ColumnDef } from 'material-react-table'
frontend/src/components/Species/Tabs/DietTab.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { SpeciesDetails } from '@/backendTypes'
import { ArrayFrame } from '@components/DetailView/common/FormComponents'
import { ArrayFrame } from '@/components/DetailView/common/tabLayoutHelpers'
import { useDetailContext } from '@/components/DetailView/hooks'
export const DietTab = () => {
frontend/src/components/Species/Tabs/LocalitySpeciesTab.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { Editable, SpeciesDetails, SpeciesLocality } from '@/backendTypes'
import { EditableTable } from '@/components/DetailView/common/EditableTable'
import { EditingModal } from '@/components/DetailView/common/EditingModal'
import { Grouped } from '@/components/DetailView/common/FormComponents'
import { Grouped } from '@/components/DetailView/common/tabLayoutHelpers'
import { useDetailContext } from '@/components/DetailView/hooks'
import { Box, TextField } from '@mui/material'
import { MRT_ColumnDef } from 'material-react-table'
frontend/src/components/Species/Tabs/LocalityTab.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { Editable, Locality, SpeciesDetails } from '@/backendTypes'
import { Grouped } from '@/components/DetailView/common/FormComponents'
import { Grouped } from '@/components/DetailView/common/tabLayoutHelpers'
import { EditableTable } from '@/components/DetailView/common/EditableTable'
import { useDetailContext } from '@/components/DetailView/hooks'
import { useGetAllLocalitiesQuery } from '@/redux/localityReducer'
frontend/src/components/Species/Tabs/LocomotionTab.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { SpeciesDetails } from '@/backendTypes'
import { ArrayFrame, HalfFrames } from '@components/DetailView/common/FormComponents'
import { ArrayFrame, HalfFrames } from '@/components/DetailView/common/tabLayoutHelpers'
import { useDetailContext } from '@/components/DetailView/hooks'
export const LocomotionTab = () => {
frontend/src/components/Species/Tabs/SizeTab.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { SpeciesDetails } from '@/backendTypes'
import { ArrayFrame, HalfFrames } from '@components/DetailView/common/FormComponents'
import { ArrayFrame, HalfFrames } from '@/components/DetailView/common/tabLayoutHelpers'
import { useDetailContext } from '@components/DetailView/hooks'
export const SizeTab = () => {
frontend/src/components/Species/Tabs/SynonymTab.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { Editable, SpeciesDetails, SpeciesSynonym } from '@/backendTypes'
import { useDetailContext } from '@/components/DetailView/hooks'
import { Grouped } from '@/components/DetailView/common/FormComponents'
import { Grouped } from '@/components/DetailView/common/tabLayoutHelpers'
import { Box, TextField } from '@mui/material'
import { MRT_ColumnDef } from 'material-react-table'
import { useForm } from 'react-hook-form'
frontend/src/components/Species/Tabs/TaxonomyTab.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { SpeciesDetails } from '@/backendTypes'
import { ArrayFrame, HalfFrames } from '@components/DetailView/common/FormComponents'
import { ArrayFrame, HalfFrames } from '@/components/DetailView/common/tabLayoutHelpers'
import { useDetailContext } from '@/components/DetailView/hooks'
export const TaxonomyTab = () => {
frontend/src/components/Species/Tabs/TeethTab.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { SpeciesDetails } from '@/backendTypes'
import { ArrayFrame, HalfFrames } from '@components/DetailView/common/FormComponents'
import { ArrayFrame, HalfFrames } from '@/components/DetailView/common/tabLayoutHelpers'
import { useDetailContext } from '@/components/DetailView/hooks'
export const TeethTab = () => {
frontend/src/components/Species/Tabs/UpdateTab.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { Editable, SpeciesDetails, SpeciesUpdate } from '@/backendTypes'
import { EditableTable } from '@/components/DetailView/common/EditableTable'
import { Grouped } from '@/components/DetailView/common/FormComponents'
import { Grouped } from '@/components/DetailView/common/tabLayoutHelpers'
import { useDetailContext } from '@/components/DetailView/hooks'
import { Box } from '@mui/material'
import { MRT_ColumnDef } from 'material-react-table'