Add DNI to UsersTable (#1180)

IT-Academy-BCN · Apr 18, 2024 · e5ae6b5 · e5ae6b5
1 parent ca6c043
commit e5ae6b5
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 1 deletion.
diff --git a/web/usuaris/CHANGELOG.md b/web/usuaris/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.10.0] - 2024-04-18
+
+### Added
+
+- Added DNI column to UsersTable
+
 ## [0.9.0] - 2024-04-17
 
 ### Added

diff --git a/web/usuaris/package.json b/web/usuaris/package.json
@@ -1,7 +1,7 @@
 {
   "name": "web_usuaris",
   "private": true,
-  "version": "0.9.0",
+  "version": "0.10.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/web/usuaris/src/__mocks__/handlers.ts b/web/usuaris/src/__mocks__/handlers.ts
@@ -8,20 +8,23 @@ export const handlers = [
         {
           id: '1',
           name: 'Ona Sitgar',
+          dni: '12345678A',
           status: 'PENDING',
           createdAt: '2023/11/05 00:00:00.000',
           itineraryName: 'Backend Node',
         },
         {
           id: '2',
           name: 'Marc Bofill',
+          dni: '87654321B',
           status: 'ACTIVE',
           createdAt: '2023/11/05 00:00:00.000',
           itineraryName: 'Frontend React',
         },
         {
           id: '3',
           name: 'Montserrat Capdevila',
+          dni: '45678912C',
           status: 'BLOCKED',
           createdAt: '2023/11/05 00:00:00.000',
           itineraryName: 'Fullstack Php',

diff --git a/web/usuaris/src/__tests__/hooks/useGetUsers.test.tsx b/web/usuaris/src/__tests__/hooks/useGetUsers.test.tsx
@@ -19,20 +19,23 @@ describe('useGetUsers', () => {
       {
         id: '1',
         name: 'Ona Sitgar',
+        dni: '12345678A',
         status: 'PENDING',
         createdAt: '2023/11/05 00:00:00.000',
         itineraryName: 'Backend Node',
       },
       {
         id: '2',
         name: 'Marc Bofill',
+        dni: '87654321B',
         status: 'ACTIVE',
         createdAt: '2023/11/05 00:00:00.000',
         itineraryName: 'Frontend React',
       },
       {
         id: '3',
         name: 'Montserrat Capdevila',
+        dni: '45678912C',
         status: 'BLOCKED',
         createdAt: '2023/11/05 00:00:00.000',
         itineraryName: 'Fullstack Php',

diff --git a/web/usuaris/src/__tests__/organisms/UsersTable.test.tsx b/web/usuaris/src/__tests__/organisms/UsersTable.test.tsx
@@ -27,16 +27,19 @@ describe('UsersTable', () => {
 
     await waitFor(() => {
       expect(screen.getByLabelText(/Ona Sitgar/i)).toBeInTheDocument()
+      expect(screen.getByText('12345678A')).toBeInTheDocument()
       expect(screen.getByText(/Pendent/i)).toBeInTheDocument()
       expect(screen.getByText(/Backend Node/i)).toBeInTheDocument()
       expect(screen.getByText(/Acceptar/i)).toBeInTheDocument()
 
       expect(screen.getByLabelText(/Marc Bofill/i)).toBeInTheDocument()
+      expect(screen.getByText('87654321B')).toBeInTheDocument()
       expect(screen.getByText(/Actiu/i)).toBeInTheDocument()
       expect(screen.getByText(/Frontend React/i)).toBeInTheDocument()
       expect(screen.getByText('Bloquejar')).toBeInTheDocument()
 
       expect(screen.getByLabelText(/Montserrat Capdevila/i)).toBeInTheDocument()
+      expect(screen.getByText('45678912C')).toBeInTheDocument()
       expect(screen.getByText('Bloquejat')).toBeInTheDocument()
       expect(screen.getByText(/Fullstack Php/i)).toBeInTheDocument()
       expect(screen.getByText('Desbloquejar')).toBeInTheDocument()

diff --git a/web/usuaris/src/components/organisms/UsersTable/UsersTable.tsx b/web/usuaris/src/components/organisms/UsersTable/UsersTable.tsx
@@ -129,6 +129,21 @@ export const UsersTable: FC = () => {
         return <DisabledStyled disabled={isDisabled}>{name}</DisabledStyled>
       },
     }),
+    columHelper.accessor('dni', {
+      header: 'DNI/NIE',
+      cell: ({ row }) => {
+        const dni: string = row.getValue('dni')
+        const status: string = row.getValue('status')
+        let isDisabled: boolean | undefined
+
+        if (selectedStatus && selectedStatus !== status) {
+          isDisabled = true
+        } else {
+          isDisabled = undefined
+        }
+        return <DisabledStyled disabled={isDisabled}>{dni}</DisabledStyled>
+      },
+    }),
     columHelper.accessor('itineraryName', {
       header: `${t('Especialización')}`,
       cell: ({ row }) => {

diff --git a/web/usuaris/src/types/types.tsx b/web/usuaris/src/types/types.tsx
@@ -1,6 +1,7 @@
 export type TUserData = {
   id: string
   name: string
+  dni: string
   status: string
   createdAt: string
   itineraryName: string