feat(webapp, users): adds delete action (#968)

* feat(webapp, users): adds delete action * fix(webapp): stylelint
kronostechnologies · Aug 19, 2024 · 9566b3f · 9566b3f
1 parent b409142
commit 9566b3f
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 9 deletions.
diff --git a/packages/webapp/src/browser/core/i18n/translations.ts b/packages/webapp/src/browser/core/i18n/translations.ts
@@ -14,9 +14,14 @@ export const translations = {
             name: 'Name',
             email: 'Email',
             phone: 'Phone',
+            delete: 'Delete',
+            cancel: 'Cancel',
+            deleteUser: 'Delete {{user}}',
+            deleteUserMessage: 'Are you sure you want to delete this user?',
+            deleteUserSuccess: 'User {{user}} has been deleted!',
         },
         user: {
-            title: 'User information',
+            viewTitle: 'User information',
         },
     },
     fr: {
@@ -34,9 +39,14 @@ export const translations = {
             name: 'Nom',
             email: 'Courriel',
             phone: 'Téléphone',
+            delete: 'Supprimer',
+            cancel: 'Annuler',
+            deleteUser: 'Supprimer {{user}}',
+            deleteUserMessage: 'Êtes-vous sûr de vouloir supprimer cet utilisateur?',
+            deleteUserSuccess: 'L\'utilisateur {{user}} a été supprimé!',
         },
         user: {
-            title: 'Information sur l\'utilisateur',
+            viewTitle: 'Information sur l\'utilisateur',
         },
     },
 };
diff --git a/packages/webapp/src/browser/modules/users/User.component.tsx b/packages/webapp/src/browser/modules/users/User.component.tsx
@@ -6,6 +6,6 @@ export const UserPage: FunctionComponent = () => {
     const { t } = useTranslation('user');
 
     return (
-        <Heading bold noMargin type='xlarge' tag="h1">{t('title')}</Heading>
+        <Heading bold noMargin type='xlarge' tag="h1">{t('viewTitle')}</Heading>
     );
 };
diff --git a/packages/webapp/src/browser/modules/users/components/table/Table.component.tsx b/packages/webapp/src/browser/modules/users/components/table/Table.component.tsx
@@ -7,8 +7,11 @@ import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import { useUsersActions, useUsersContext } from '../../state';
 import { User, UserKeys, UsersAction } from '../../types';
+import {
+    Name as NameCell,
+    Delete as DeleteCell,
+} from './cells';
 import { Footer as TableFooter } from './Footer.component';
-import { Name as NameCell } from './cells/Name.component';
 
 const TableContainer = styled.div`
     align-items: flex-start;
@@ -22,10 +25,15 @@ const TableContainer = styled.div`
     flex-shrink: 0;
     gap: 8px;
     padding: 16px 32px;
+    
+    td:nth-child(4) {
+        padding-left: 0;
+        padding-right: 0;
+    }
 
     .action-column {
         box-sizing: border-box;
-        width: auto;
+        width: 50px;
     }
 
     .data-column {
@@ -68,11 +76,16 @@ export const Table: FunctionComponent = () => {
             sortable: true,
         },
         {
-            id: 'actions',
-            headerAriaLabel: 'actions',
+            id: 'action-delete',
+            headerAriaLabel: 'delete',
+            accessorKey: 'id',
             header: '',
             className: 'action-column',
             sortable: false,
+            // eslint-disable-next-line react/no-unstable-nested-components
+            cell: (props) => (
+                <DeleteCell id={props.cell.getValue() as User['id']} />
+            ),
         },
     ], [t]);
 

diff --git a/packages/webapp/src/browser/modules/users/components/table/cells/Delete.component.tsx b/packages/webapp/src/browser/modules/users/components/table/cells/Delete.component.tsx
@@ -0,0 +1,62 @@
+import { IconButton, ModalDialog, Tooltip, useModal, useToast } from '@equisoft/design-elements-react';
+import { FunctionComponent, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useUserContext, useUsersActions } from '../../../state';
+import { User, UsersAction } from '../../../types';
+
+export interface DeleteCellProps {
+    id: User['id'];
+}
+
+export const Delete: FunctionComponent<DeleteCellProps> = (
+    { id },
+) => {
+    const { t } = useTranslation('users');
+    const user = useUserContext(id);
+    const dispatch = useUsersActions();
+    const { openModal, closeModal, isModalOpen } = useModal();
+    const { showToast } = useToast();
+
+    const onDeleteUserConfirm = useCallback(() => {
+        dispatch({
+            type: UsersAction.DELETE,
+            id,
+        });
+        closeModal();
+        showToast('success', t('deleteUserSuccess', { user: user?.name }));
+    }, [closeModal, dispatch, id, showToast, t, user?.name]);
+
+    const deleteUser = useCallback(() => {
+        openModal();
+    }, [openModal]);
+
+    return (
+        <>
+            <Tooltip label={t('deleteUser', { user: user?.name })}>
+                <IconButton
+                    buttonType="tertiary"
+                    iconName="trash"
+                    aria-label={t('deleteUser', { user: user?.name })}
+                    onClick={() => deleteUser()}
+                />
+            </Tooltip>
+            <ModalDialog
+                title={t('deleteUser', { user: `${user?.name}` })}
+                appElement="#root"
+                isOpen={isModalOpen}
+                onRequestClose={closeModal}
+                confirmButton={{
+                    label: t('delete'),
+                    onConfirm: onDeleteUserConfirm,
+
+                }}
+                cancelButton={{
+                    label: t('cancel'),
+                }}
+                dialogType='alert'
+            >
+                <span id="modal-description">{t('deleteUserMessage')}</span>
+            </ModalDialog>
+        </>
+    );
+};
diff --git a/packages/webapp/src/browser/modules/users/components/table/cells/index.ts b/packages/webapp/src/browser/modules/users/components/table/cells/index.ts
@@ -0,0 +1,2 @@
+export { Delete } from './Delete.component';
+export { Name } from './Name.component';
diff --git a/packages/webapp/src/browser/modules/users/state/reducer.ts b/packages/webapp/src/browser/modules/users/state/reducer.ts
@@ -18,6 +18,11 @@ export const usersReducer = (state: UsersContextProps, action: UsersActionProps)
                 };
             }
             break;
+        case UsersAction.DELETE:
+            if (action.id) {
+                updatedState.users = state.users.filter((user) => user.id !== action.id);
+            }
+            break;
         default:
             return state;
     }

diff --git a/packages/webapp/src/browser/modules/users/types/user.ts b/packages/webapp/src/browser/modules/users/types/user.ts
@@ -5,7 +5,7 @@ export interface User {
     name: string;
     title?: string;
     email?: string;
-    birthDate?: string;
+    birthDate?: Date;
     time?: string;
     gender?: string;
     numberDependents?: number;

diff --git a/packages/webapp/src/browser/modules/users/types/users-action.ts b/packages/webapp/src/browser/modules/users/types/users-action.ts
@@ -4,10 +4,12 @@ import { TableContextKeys, TableContextProps } from './users-context';
 export enum UsersAction {
     LOAD_USERS = 'LOAD_USERS',
     UPDATE_TABLE = 'UPDATE_TABLE',
+    DELETE = 'DELETE',
 }
 
 export interface UsersActionProps {
     type: string,
+    id?: User['id'],
     users?: User[],
     key?: TableContextKeys,
     value?: TableContextProps[TableContextKeys],

diff --git a/packages/webapp/src/browser/modules/users/utils/load-users.ts b/packages/webapp/src/browser/modules/users/utils/load-users.ts
@@ -9,7 +9,7 @@ export function loadUsers(): User[] {
         name: `${userData['first name']} ${userData['last name']}`,
         title: userData.title,
         email: userData.email,
-        birthDate: userData['birth date'],
+        birthDate: new Date(userData['birth date']),
         time: userData.time,
         gender: userData.gender,
         numberDependents: userData['number dependents'],
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { Delete } from './Delete.component';
		export { Name } from './Name.component';