Skip to content

Commit

Permalink
1187-add-rol-column-and-filter (#1211)
Browse files Browse the repository at this point in the history
* add-column-role

* version changed

* delete rol useState

* change version package.json

* change version package.json

* change tests

* changed tests

* types changes

* type changes

* enmus and changed version

* change version ui

* version ui changed

* version ui changed

* version ui changed

* version ui changed

* version ui changed

* Update package.json

* Update package-lock.json

* Update FiltersWidget.tsx

* Update handlers.ts

* Update en.json

* Update es.json

* Update UsersTable.tsx

* Update types.tsx

* Update RolFilter.tsx

* Delete web/package-lock.json

* Update RolFilter.tsx

* Update RolFilter.test.tsx

* Update RolFilter.test.tsx

* Update RolFilter.tsx

* Update package-lock.json

* Update package.json

* changes rol

* conflict resolved

* Update package-lock.json

* ColumnDef arguments changed

* enums changed

* Update SideMenu.tsx

* update

* update

---------

Co-authored-by: Kevin Mamaqi <kevinmamaqi@gmail.com>
  • Loading branch information
Xerxi88 and kevinmamaqi authored May 13, 2024
1 parent 954c8ad commit c7898b2
Show file tree
Hide file tree
Showing 21 changed files with 224 additions and 104 deletions.
6 changes: 0 additions & 6 deletions package-lock.json

This file was deleted.

11 changes: 11 additions & 0 deletions web/usuaris/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,15 @@

All notable changes to this project will be documented in this file.


## [0.16.0] - 2024-05-09

### Added

- Added Role column to UsersTable
- Added Roles filter feature


## [0.15.0] - 2024-05-08

### Added
Expand All @@ -14,6 +23,7 @@ All notable changes to this project will be documented in this file.

- Refetch users after user status changes to update interface


## [0.13.0] - 2024-04-29

### Added
Expand All @@ -22,6 +32,7 @@ All notable changes to this project will be documented in this file.
- Added dates to filters to fetch users in FiltersWidget
- Changed qs to handle null, undefined and empty string


## [0.12.0] - 2024-04-29

### Added
Expand Down
6 changes: 3 additions & 3 deletions web/usuaris/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions web/usuaris/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "web_usuaris",
"private": true,
"version": "0.15.0",
"version": "0.16.0",
"type": "module",
"scripts": {
"dev": "vite",
Expand Down Expand Up @@ -57,7 +57,7 @@
"msw": "2.1.5",
"prettier": "2.8.4",
"typescript": "^5.0.4",
"vite": "^5.0.13",
"vite": "5.0.13",
"vitest": "1.2.1"
}
}
8 changes: 7 additions & 1 deletion web/usuaris/src/__mocks__/handlers.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { HttpResponse, http } from 'msw'
import { urls } from '../constants'
import { UserStatus } from '../types'
import { UserRole } from '../types/types'

export const handlers = [
http.get(urls.getUsers, ({ request }) => {
Expand Down Expand Up @@ -45,6 +46,7 @@ export const handlers = [
name: 'Ona Sitgar',
dni: '12345678A',
status: 'PENDING',
role: UserRole.ADMIN,
createdAt: '2023/11/05 00:00:00.000',
itineraryName: 'Backend Node',
},
Expand All @@ -53,6 +55,7 @@ export const handlers = [
name: 'Marc Bofill',
dni: '87654321B',
status: 'ACTIVE',
role: UserRole.REGISTERED,
createdAt: '2023/11/06 00:00:00.000',
itineraryName: 'Frontend React',
},
Expand All @@ -61,6 +64,7 @@ export const handlers = [
name: 'Montserrat Capdevila',
dni: '45678912C',
status: 'BLOCKED',
role: UserRole.REGISTERED,
createdAt: '2023/11/07 00:00:00.000',
itineraryName: 'Fullstack Php',
},
Expand All @@ -69,6 +73,7 @@ export const handlers = [
name: 'Anna Brull',
dni: '45678912D',
status: 'BLOCKED',
role: UserRole.ADMIN,
createdAt: '2023/11/08 00:00:00.000',
itineraryName: 'Frontend React',
},
Expand All @@ -77,6 +82,7 @@ export const handlers = [
name: 'Marc Serra',
dni: '12378912D',
status: 'BLOCKED',
role: UserRole.ADMIN,
createdAt: '2023/11/09 00:00:00.000',
itineraryName: 'Frontend Angular',
},
Expand Down Expand Up @@ -106,7 +112,7 @@ export const handlers = [
{
dni: '12345678A',
email: 'test@example.cat',
role: 'ADMIN',
role: UserRole.ADMIN,
},
],
{ status: 200 }
Expand Down
7 changes: 6 additions & 1 deletion web/usuaris/src/__tests__/hooks/useGetUsers.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { renderHook, waitFor } from '../test-utils'
import { queryClient } from '../setup'
import { type TFilters } from '../../types'
import { UserStatus } from '../../types'
import { UserRole } from '../../types/types'

describe('useGetUsers', () => {
it('fetches users successfully', async () => {
Expand All @@ -23,6 +24,7 @@ describe('useGetUsers', () => {
name: 'Ona Sitgar',
dni: '12345678A',
status: 'PENDING',
role: UserRole.ADMIN,
createdAt: '2023/11/05 00:00:00.000',
itineraryName: 'Backend Node',
},
Expand All @@ -31,6 +33,7 @@ describe('useGetUsers', () => {
name: 'Marc Bofill',
dni: '87654321B',
status: 'ACTIVE',
role: UserRole.REGISTERED,
createdAt: '2023/11/06 00:00:00.000',
itineraryName: 'Frontend React',
},
Expand All @@ -39,6 +42,7 @@ describe('useGetUsers', () => {
name: 'Montserrat Capdevila',
dni: '45678912C',
status: 'BLOCKED',
role: UserRole.REGISTERED,
createdAt: '2023/11/07 00:00:00.000',
itineraryName: 'Fullstack Php',
},
Expand All @@ -47,6 +51,7 @@ describe('useGetUsers', () => {
name: 'Anna Brull',
dni: '45678912D',
status: 'BLOCKED',
role: UserRole.ADMIN,
createdAt: '2023/11/08 00:00:00.000',
itineraryName: 'Frontend React',
},
Expand All @@ -55,6 +60,7 @@ describe('useGetUsers', () => {
name: 'Marc Serra',
dni: '12378912D',
status: 'BLOCKED',
role: UserRole.ADMIN,
createdAt: '2023/11/09 00:00:00.000',
itineraryName: 'Frontend Angular',
},
Expand All @@ -69,7 +75,6 @@ describe('useGetUsers', () => {
endDate: '2026-03-05T00:00:00.000Z',
name: 'John Doe',
dni: '99999999R',
role: 'ADMIN',
}
const wrapper = ({ children }: { children: React.ReactNode }) => (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
Expand Down
51 changes: 51 additions & 0 deletions web/usuaris/src/__tests__/molecules/RoleFilter.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { vi } from 'vitest'
import { fireEvent, render, screen, waitFor } from '../test-utils'
import { RoleFilter } from '../../components/molecules/RoleFilter'
import { UserRole } from '../../types/types'
import { roles } from '../../constants'

const mockHandleClick = vi.fn()

afterEach(() => {
vi.restoreAllMocks()
})

describe('RolesFilter', () => {
it('renders correctly', () => {
render(<RoleFilter handleRole={mockHandleClick} />)

waitFor(() => expect(screen.getByText(/rol/i)).toBeInTheDocument())
})

it('renders RoleList options when dropdown is clicked', async () => {
render(<RoleFilter handleRole={mockHandleClick} />)

const dropdown = screen.getByTestId('dropdown-header')

fireEvent.click(dropdown)

const promises = roles.map((role) =>
waitFor(() => screen.getByTestId(role.id))
)

await Promise.all(promises)
})

it('calls handleRole with the correct role when an option is clicked', () => {
render(<RoleFilter handleRole={mockHandleClick} />)

const dropdown = screen.getByTestId('dropdown-header')

fireEvent.click(dropdown)

const roleOption = screen.getByText(/ADMIN/i)

fireEvent.click(roleOption)

expect(mockHandleClick).toHaveBeenCalledWith({
id: UserRole.ADMIN,
name: 'Administrador',
slug: UserRole.ADMIN,
})
})
})
7 changes: 6 additions & 1 deletion web/usuaris/src/__tests__/organisms/UsersTable.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { UsersTable } from '../../components/organisms'
import { errorHandlers } from '../../__mocks__/handlers'
import { server } from '../../__mocks__/server'
import { UserStatus } from '../../types'
import { UserRole } from '../../types/types'

afterEach(() => {
server.resetHandlers()
Expand Down Expand Up @@ -37,13 +38,16 @@ describe('UsersTable', () => {
expect(screen.getByText(/Pendent/i)).toBeInTheDocument()
expect(screen.getByText(/Backend Node/i)).toBeInTheDocument()
expect(screen.getByText(/Acceptar/i)).toBeInTheDocument()
expect(screen.getByText(/Actiu/i)).toBeInTheDocument()
expect(screen.getByText('Bloquejar')).toBeInTheDocument()
expect(screen.getByText(/Actiu/i)).toBeInTheDocument()
expect(screen.getByText(/Fullstack Php/i)).toBeInTheDocument()

const frontReact = screen.getAllByText(/Frontend React/i)
frontReact.forEach((item) => expect(item).toBeInTheDocument())

const adminRol = screen.getAllByText(/Administrador/i)
adminRol.forEach((item) => expect(item).toBeInTheDocument())

const blockedStatus = screen.getAllByText('Bloquejat')
blockedStatus.forEach((status) => expect(status).toBeInTheDocument())

Expand All @@ -65,6 +69,7 @@ describe('UsersTable', () => {
endDate: '2023/11/06 00:00:00.000',
name: 'marc',
dni: 'marc',
role: UserRole.ADMIN,
}}
/>
)
Expand Down
60 changes: 60 additions & 0 deletions web/usuaris/src/components/molecules/RoleFilter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import { FC } from 'react'
import styled from 'styled-components'
import {
colors,
dimensions,
Dropdown,
font,
type TDropdownOption,
} from '@itacademy/ui'
import { useTranslation } from 'react-i18next'
import { TRole } from '../../types/types'
import { roles } from '../../constants'

const StyledDropdown = styled(Dropdown)`
&& button {
width: 210px;
padding: ${dimensions.spacing.xxs};
font-size: ${font.xs};
font-weight: 500;
&:hover {
background-color: ${colors.primary};
color: ${colors.white};
}
> span {
padding-left: ${dimensions.spacing.xxxs};
font-weight: 400;
}
}
`

type TRoleFilter = {
handleRole: (value: TRole | undefined) => void
}

export const RoleFilter: FC<TRoleFilter> = ({ handleRole }) => {
const { t } = useTranslation()

const handleSelectedValue = (selectedOption: TDropdownOption | undefined) => {
if (selectedOption) {
const selectedRole = roles.find(
(role: TRole) => role.id === selectedOption.id
)
if (selectedRole) {
handleRole(selectedRole)
}
} else {
handleRole(undefined)
}
}

return roles && roles.length > 0 ? (
<StyledDropdown
options={roles}
placeholder={t('Rol')}
onValueChange={handleSelectedValue}
/>
) : null
}
2 changes: 2 additions & 0 deletions web/usuaris/src/components/molecules/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
export { DateRange, type TDateRange } from './DateRange'
export { ItineraryDropdown } from './ItineraryDropdown'
export { StatusDropdown } from './StatusDropdown'
export { RoleFilter } from './RoleFilter'

export { Table, type TTable } from './Table'
7 changes: 7 additions & 0 deletions web/usuaris/src/components/organisms/FiltersWidget.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { useTranslation } from 'react-i18next'
import { DateRange, StatusDropdown } from '../molecules'
import { ItineraryDropdown } from '../molecules/ItineraryDropdown'
import { type TFilters, TItinerary, UserStatus } from '../../types'
import { RoleFilter } from '../molecules/RoleFilter'
import { TRole } from '../../types/types'

const FiltersContainer = styled(FlexBox)`
width: 100%;
Expand All @@ -21,6 +23,9 @@ export const FiltersWidget: FC<TFiltersWidget> = ({ filters, setFilters }) => {
const handleItinerary = (itinerary: TItinerary | undefined) => {
setFilters({ ...filters, itinerarySlug: itinerary?.slug })
}
const handleRole = (role: TRole | undefined) => {
setFilters({ ...filters, role: role?.slug })
}

const handleStatus = (selectedStatus: UserStatus | undefined) => {
setFilters({ ...filters, status: selectedStatus })
Expand Down Expand Up @@ -54,6 +59,8 @@ export const FiltersWidget: FC<TFiltersWidget> = ({ filters, setFilters }) => {
>
<ItineraryDropdown handleItinerary={handleItinerary} />
<StatusDropdown handleStatus={handleStatus} />
<RoleFilter handleRole={handleRole} />

<DateRange
labelStartDate={t('Fecha de inicio')}
labelEndDate={t('Fecha final')}
Expand Down
3 changes: 1 addition & 2 deletions web/usuaris/src/components/organisms/SideMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -80,8 +80,7 @@ const CategoryStyled = styled.span`
const ImgStyled = styled(Icon)`
height: 30px;
margin-right: ${dimensions.spacing.xxxs};
&[data-testid] {
&[data-testid]
content: attr(data-testid);
`

Expand Down
Loading

0 comments on commit c7898b2

Please sign in to comment.