Proyectos de Subversion LeadersLinked - SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
2499 stevensc 1 
import React, { useContext, useRef, useState } from 'react'
2485 stevensc 2 
import { DataGrid } from '@mui/x-data-grid'
2504 stevensc 3 
import { IconButton, Menu, MenuItem } from '@mui/material'
2499 stevensc 4 
import { MoreVert } from '@mui/icons-material'
2485 stevensc 5 
 
2488 stevensc 6 
import { ParadigmsContext } from '@app/contexts/paradigms'
2485 stevensc 7 
import Widget from '@app/components/UI/Widget'
2494 stevensc 8 
import ParadigmsModal from './ParadigmsModal'
2485 stevensc 9 
 
10 
export default function Paradigms() {
2493 stevensc 11 
  const { paradigms, toggleModal } = useContext(ParadigmsContext)
2499 stevensc 12 
  const [open, setOpen] = useState(false)
13 
  const actionsEl = useRef()
2485 stevensc 14 
 
2499 stevensc 15 
  const toggleActions = () => setOpen(!open)
16 
 
2498 stevensc 17 
  const columns = [{ field: 'description', headerName: 'Descripción' }]
2486 stevensc 18 
 
2485 stevensc 19 
  return (
2494 stevensc 20 
    <>
21 
      <Widget>
2499 stevensc 22 
        <Widget.Header
23 
          title='Paradigmas'
24 
          renderAction={() => (
25 
            <>
2504 stevensc 26 
              <IconButton
2502 stevensc 27 
                id='paradigms-button'
28 
                aria-controls={open ? 'paradigms-menu' : undefined}
2499 stevensc 29 
                aria-haspopup='true'
30 
                aria-expanded={open ? 'true' : undefined}
31 
                onClick={toggleActions}
2503 stevensc 32 
                ref={actionsEl}
2499 stevensc 33 
              >
34 
                <MoreVert />
2504 stevensc 35 
              </IconButton>
2499 stevensc 36 
              <Menu
2502 stevensc 37 
                id='paradigms-menu'
2501 stevensc 38 
                anchorEl={actionsEl.current}
2499 stevensc 39 
                open={open}
40 
                onClose={toggleActions}
41 
                MenuListProps={{
2502 stevensc 42 
                  'aria-labelledby': 'paradigms-button'
2499 stevensc 43 
                }}
2502 stevensc 44 
                anchorOrigin={{
2504 stevensc 45 
                  vertical: 'bottom',
2525 stevensc 46 
                  horizontal: 'left'
2502 stevensc 47 
                }}
48 
                transformOrigin={{
49 
                  vertical: 'top',
50 
                  horizontal: 'left'
51 
                }}
2499 stevensc 52 
              >
2505 stevensc 53 
                <MenuItem
54 
                  onClick={() => {
55 
                    toggleModal()
56 
                    toggleActions()
57 
                  }}
58 
                >
59 
                  Agregar
60 
                </MenuItem>
2499 stevensc 61 
              </Menu>
62 
            </>
63 
          )}
64 
        />
2494 stevensc 65 
        <Widget.Body>
66 
          <DataGrid
67 
            rows={paradigms}
68 
            columns={columns}
69 
            initialState={{
70 
              pagination: {
71 
                paginationModel: { page: 0, pageSize: 10 }
72 
              }
73 
            }}
74 
            pageSizeOptions={[10]}
75 
          />
76 
        </Widget.Body>
77 
      </Widget>
78 
      <ParadigmsModal />
79 
    </>
2485 stevensc 80 
  )
81 
}