Proyectos de Subversion LeadersLinked - SPA

import React, { useContext, useRef, useState } from 'react'

import { DataGrid } from '@mui/x-data-grid'

import { IconButton, Menu, MenuItem } from '@mui/material'

import { MoreVert } from '@mui/icons-material'

import { PurposesContext } from '@app/contexts/purposes'

import Widget from '@app/components/UI/Widget'

export default function Purposes() {

  const { purposes, toggleModal } = useContext(PurposesContext)

  const [open, setOpen] = useState(false)

  const actionsEl = useRef()

  const toggleActions = () => setOpen(!open)

  const columns = [{ field: 'description', headerName: 'Descripción' }]

  return (

    <>

      <Widget>

        <Widget.Header

          title='Propósitos'

          renderAction={() => (

            <>

              <IconButton

                id='purposes-button'

                aria-controls={open ? 'purposes-menu' : undefined}

                aria-haspopup='true'

                aria-expanded={open ? 'true' : undefined}

                onClick={toggleActions}

                ref={actionsEl}

              >

                <MoreVert />

              </IconButton>

              <Menu

                id='purposes-menu'

                anchorEl={actionsEl.current}

                open={open}

                onClose={toggleActions}

                MenuListProps={{

                  'aria-labelledby': 'purposes-button'

                }}

                anchorOrigin={{

                  vertical: 'bottom',

                  horizontal: 'left'

                }}

                transformOrigin={{

                  vertical: 'top',

                  horizontal: 'left'

                }}

              >

                <MenuItem

                  onClick={() => {

                    toggleModal()

                    toggleActions()

                  }}

                >

                  Agregar

                </MenuItem>

              </Menu>

            </>

          )}

        />

        <Widget.Body>

          <DataGrid

            rows={purposes}

            columns={columns}

            initialState={{

              pagination: {

                paginationModel: { page: 0, pageSize: 10 }

              }

            }}

            pageSizeOptions={[10]}

          />

        </Widget.Body>

      </Widget>

    </>

  )

}