Untitled
unknown
plain_text
a year ago
7.4 kB
5
Indexable
#new form import React, { useState, useEffect } from 'react'; import { MenuItem, Select, FormControl, InputLabel, Box, TextField, Modal, Typography, Button, ListItemIcon, } from '@mui/material'; import { useForm, Controller } from 'react-hook-form'; // Import useForm and Controller import Autocomplete from '@mui/material/Autocomplete'; import { newRowModalStyles } from '../styles/NewRowModalStyle'; import BugReportIcon from '@mui/icons-material/BugReport'; import AssignmentIcon from '@mui/icons-material/Assignment'; import AccountTreeIcon from '@mui/icons-material/AccountTree'; import PendingIcon from '@mui/icons-material/Pending'; import CodeIcon from '@mui/icons-material/Code'; import DoneIcon from '@mui/icons-material/Done'; import HourglassTopIcon from '@mui/icons-material/HourglassTop'; const iconMap = { Bug: <BugReportIcon />, Task: <AssignmentIcon />, Project: <AccountTreeIcon />, }; const statusIconMap = { Beklemede: <PendingIcon />, 'Devam Ediyor': <CodeIcon />, Tamamlandı: <DoneIcon />, Ertelendi: <HourglassTopIcon />, }; const NewFormComponent = ({ open, onClose, addNewRow, theadData }) => { const { handleSubmit, control } = useForm(); // Initialize useForm const [currentRow, setCurrentRow] = useState({ TASK_ID: '', TYPE: '', SUBJECT: '', PRIORITY: '', ASSIGNEE: '', ASSIGNED_BY: '', DEADLINE: null, STATUS: '', TEAM: 'CNO', }); useEffect(() => { if (currentRow.TASK_ID) { // If you have an initial value for TASK_ID, set it here setCurrentRow(currentRow); } }, [currentRow]); const onSubmit = (data) => { // Handle form submission here addNewRow(data); onClose(); }; const getContent = () => ( <Box sx={newRowModalStyles.inputFields}> {theadData.map((item) => ( <div key={item.field} className={newRowModalStyles.inputContainer}> {item.field === 'TYPE' && ( <FormControl fullWidth> <InputLabel>{item.headerName}</InputLabel> <Controller name={item.field} control={control} defaultValue={currentRow[item.field]} render={({ field }) => ( <Select {...field} label={item.headerName}> {Object.keys(iconMap).map((option) => ( <MenuItem key={option} value={option}> <ListItemIcon>{iconMap[option]}</ListItemIcon> {option} </MenuItem> ))} </Select> )} /> </FormControl> )} {item.field === 'SUBJECT' && ( <Controller name={item.field} control={control} defaultValue={currentRow[item.field]} render={({ field }) => ( <TextField {...field} fullWidth placeholder={item.headerName} label={item.headerName} /> )} /> )} {item.field === 'PRIORITY' && ( <FormControl fullWidth> <InputLabel>{item.headerName}</InputLabel> <Controller name={item.field} control={control} defaultValue={currentRow[item.field]} render={({ field }) => ( <Select {...field} label={item.headerName}> {['Düşük', 'Orta', 'Yüksek', 'Acil'].map((option) => ( <MenuItem key={option} value={option}> {option} </MenuItem> ))} </Select> )} /> </FormControl> )} {item.field === 'ASSIGNEE' && ( <Controller name={item.field} control={control} defaultValue={currentRow[item.field]} render={({ field }) => ( <Autocomplete options={['User1', 'User2']} value={field.value} onChange={(_, newValue) => field.onChange(newValue)} renderInput={(params) => ( <TextField {...params} label={item.headerName} fullWidth /> )} /> )} /> )} {item.field === 'ASSIGNED_BY' && ( <Controller name={item.field} control={control} defaultValue={currentRow[item.field]} render={({ field }) => ( <Autocomplete options={['User3', 'User4']} value={field.value} onChange={(_, newValue) => field.onChange(newValue)} renderInput={(params) => ( <TextField {...params} label={item.headerName} fullWidth /> )} /> )} /> )} {item.field === 'DEADLINE' && ( <Controller name={item.field} control={control} defaultValue={currentRow[item.field]} render={({ field }) => ( <TextField {...field} type="date" label={item.headerName} InputLabelProps={{ shrink: true, }} fullWidth /> )} /> )} {item.field === 'STATUS' && ( <FormControl fullWidth> <InputLabel>{item.headerName}</InputLabel> <Controller name={item.field} control={control} defaultValue={currentRow[item.field]} render={({ field }) => ( <Select {...field} label={item.headerName}> {Object.keys(statusIconMap).map((option) => ( <MenuItem key={option} value={option}> <ListItemIcon>{statusIconMap[option]}</ListItemIcon> {option} </MenuItem> ))} </Select> )} /> </FormControl> )} </div> ))} </Box> ); return ( <Modal open={open} onClose={onClose}> <Box sx={newRowModalStyles.wrapper}> <Typography variant="h6" component="h2"> Kayıt Ekle </Typography> <Typography sx={{ mt: 2 }}> Alanları doldurduktan sonra Onayla butonuna basınız </Typography> <form onSubmit={handleSubmit(onSubmit)}> {getContent()} <Box sx={newRowModalStyles.buttons}> <Button type="submit" variant="contained"> Onayla </Button> <Button onClick={onClose}>Vazgeç</Button> </Box> </form> </Box> </Modal> ); }; export default NewFormComponent;
Editor is loading...
Leave a Comment