SanderCokart

TagTable

Sep 10th, 2020
777
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //REACT
  2. import React, {useContext, useEffect, useState} from 'react';
  3. //MUI COMPONENTS
  4. import {
  5.     Grid,
  6.     IconButton,
  7.     Paper,
  8.     Table,
  9.     TableBody,
  10.     TableCell,
  11.     TableContainer,
  12.     TableHead,
  13.     TableRow,
  14.     TextField,
  15.     Typography,
  16.     useMediaQuery,
  17.     useTheme,
  18. } from '@material-ui/core';
  19. //MUI ICONS
  20. import {Close as CloseIcon, Done as DoneIcon, Edit as EditIcon, Refresh as RefreshIcon} from '@material-ui/icons';
  21. //CONTEXTS
  22. import {NewTagContext} from '../../providers/NewTagContext';
  23. //CUSTOM COMPONENTS
  24. import CreateFields from '../components/CreateFields';
  25. import DeleteButton from '../components/DeleteButton';
  26. //CONFIG FILES
  27. import textFields from './config/textFields.json';
  28. import constraints from './config/textFields.constraints.json';
  29.  
  30. const TagTable = () => {
  31.           //HOOKS START
  32.           const context = useContext(NewTagContext);
  33.           const {tags} = context;
  34.           const theme = useTheme();
  35.           const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
  36.           //HOOKS END
  37.  
  38.           //STATE START
  39.           useEffect(() => {
  40.               if (!context.tags) context.read();
  41.           }, [context]);
  42.  
  43.           const initialState = {tagEditId: null, tag: null};
  44.           const [state, setState] = useState(initialState);
  45.           //STATE END
  46.  
  47.           //FUNCTIONS START
  48.           const setEdit = (tag) => {
  49.               setState({
  50.                   tagEditId: tag.id ? tag.id : null,
  51.                   tag:       {...tag},
  52.               });
  53.           };
  54.  
  55.           const onEditSubmit = (e) => {
  56.               e.preventDefault();
  57.               context.update(state.tag);
  58.               setState(initialState);
  59.           };
  60.  
  61.           const onEditClose = () => {
  62.               context.resetTag(state.tag);
  63.               setState(initialState);
  64.           };
  65.           //FUNCTIONS END
  66.  
  67.           return (
  68.               <TableContainer component={Paper}>
  69.                   <Table size="small">
  70.                       <TableHead>
  71.                           <TableRow>
  72.                               <TableCell colSpan={2}>
  73.                                   <Grid container justify="flex-end" alignItems="center">
  74.                                       <Grid item xs={isMobile}>
  75.                                           <CreateFields entityName="tag" textFields={textFields} constraints={constraints}
  76.                                                         createFunction={context.create}/>
  77.                                       </Grid>
  78.                                       <Grid item>
  79.                                           <IconButton onClick={context.read}><RefreshIcon/></IconButton>
  80.                                       </Grid>
  81.                                   </Grid>
  82.                               </TableCell>
  83.                           </TableRow>
  84.                           <TableRow>
  85.                               <TableCell>Tag Name</TableCell>
  86.                               <TableCell align="right">Actions</TableCell>
  87.                           </TableRow>
  88.                       </TableHead>
  89.                       <TableBody>
  90.                           {tags && tags.map(tag => (
  91.                               <TableRow key={tag.id}>
  92.                                   <TableCell>
  93.                                       {state.tagEditId === tag.id ?
  94.                                           <form noValidate onSubmit={onEditSubmit}>
  95.                                               <TextField type="text" value={tag.name} label={state.tag.name} name="name"
  96.                                                          fullWidth
  97.                                                          autoFocus onFocus={(e) => e.target.select()}
  98.                                                          onChange={(e) => context.handleChange(tag, e)}/>
  99.                                           </form>
  100.                                           :
  101.                                           <Typography>{tag.name}</Typography>
  102.                                       }
  103.                                   </TableCell>
  104.                                   <TableCell align="right">
  105.                                       {state.tagEditId !== tag.id ?
  106.                                           <>
  107.                                               <IconButton color="inherit" onClick={() => setEdit(tag)}>
  108.                                                   <EditIcon/>
  109.                                               </IconButton>
  110.                                               <DeleteButton deleteFunction={context.delete} entity={tag}/>
  111.                                           </>
  112.                                           :
  113.                                           <>
  114.                                               <IconButton color="primary" onClick={onEditSubmit}>
  115.                                                   <DoneIcon/>
  116.                                               </IconButton>
  117.                                               <IconButton color="secondary" onClick={onEditClose}>
  118.                                                   <CloseIcon/>
  119.                                               </IconButton>
  120.                                           </>
  121.                                       }
  122.                                   </TableCell>
  123.                               </TableRow>
  124.                           ))
  125.                           }
  126.                       </TableBody>
  127.                   </Table>
  128.               </TableContainer>
  129.           );
  130.       }
  131. ;
  132.  
  133. export default TagTable;
  134.  
  135.  
RAW Paste Data