refactor(Groups): handle error messages and page reload on key press …

…in user modal (#177)
AxaFrance · Mar 10, 2022 · 57efc87 · 57efc87
1 parent f36574c
commit 57efc87
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 31 deletions.
diff --git a/docker/entrypoint.sh b/docker/entrypoint.sh
@@ -12,8 +12,8 @@ if [ "$1" = '/opt/mssql/bin/sqlservr' ]; then
       touch /tmp/app-initialized
     }
 
-    initialize_app_database & 
+    initialize_app_database &
   fi
 fi
 
-exec "$@"
+exec "$@"
diff --git a/src/Ml.Cli.WebApp/ClientApp/src/Server/Group/Home/Edit/Edit.js b/src/Ml.Cli.WebApp/ClientApp/src/Server/Group/Home/Edit/Edit.js
@@ -6,25 +6,25 @@ import Modal from '@axa-fr/react-toolkit-modal-default';
 import "./Edit.scss";
 
 const Users = ({ idGroup, users, eligibleUsers, setUsersToSubmit }) => (
-  <form className="af-form-multi-select-users">
-    <MultiSelectInput
-      label={''}
-      name={`group_${idGroup}`}
-      options={eligibleUsers}
-      onChange={data => setUsersToSubmit(data.values)}
-      values={users}
-      messageType={MessageTypes.error}
-      forceDisplayMessage={false}
-      readOnly={false}
-      disabled={false}
-      isVisible={true}
-      className={'multi-select-users'}
-      classModifier={'multi-select-users'}
-      placeholder={'Ajouter un utilisateur'}
-      classNameContainerLabel={'classNameContainerLabel'}
-      classNameContainerInput={'classNameContainerInput'}
-    />
-  </form>
+    <form className="af-form-multi-select-users" onSubmit={(event) => event.preventDefault()}>
+        <MultiSelectInput
+            label={''}
+            name={`group_${idGroup}`}
+            options={eligibleUsers}
+            onChange={data => setUsersToSubmit(data.values)}
+            values={users}
+            messageType={MessageTypes.error}
+            forceDisplayMessage={false}
+            readOnly={false}
+            disabled={false}
+            isVisible={true}
+            className={'multi-select-users'}
+            classModifier={'multi-select-users'}
+            placeholder={'Ajouter un utilisateur'}
+            classNameContainerLabel={'classNameContainerLabel'}
+            classNameContainerInput={'classNameContainerInput'}
+        />
+    </form>
 );
 
 const Edit = ({

diff --git a/src/Ml.Cli.WebApp/ClientApp/src/Server/Group/Home/Home.js b/src/Ml.Cli.WebApp/ClientApp/src/Server/Group/Home/Home.js
@@ -23,7 +23,7 @@ const Home = ({
       <>
         <Title subtitle="Gestion des groupes d'annotateurs" title="Page Groupes"  />
         <div className="af-home container">
-          <h1 className="af-title--content">Création de groupe</h1>
+          <h1 className="af-title--content">Création</h1>
           <New
               disabled={isSubmitable}
               fields={fields}
@@ -32,7 +32,7 @@ const Home = ({
               onSubmitCreateGroup={onSubmitCreateGroup}
           />
           <h1 className="af-title--content">
-            {`Affichage des groupes - il y a actuellement (${numberItemsTotal}) groupes`}
+            {`Affichage - il y a actuellement (${numberItemsTotal}) groupes`}
           </h1>
           <EmptyArrayManager items={items} emptyArrayMessage="Aucun élément">
             <ItemsTable

diff --git a/src/Ml.Cli.WebApp/ClientApp/src/Server/Group/Home/Home.reducer.js b/src/Ml.Cli.WebApp/ClientApp/src/Server/Group/Home/Home.reducer.js
@@ -1,6 +1,6 @@
 import { rules } from './New/New.validation.rules';
 import { computeInitialStateErrorMessage, genericHandleChange } from '../../validation.generic';
-import { NAME, MSG_REQUIRED } from './New/constants';
+import {NAME, MSG_REQUIRED, MSG_GROUP_NAME_ALREADY_EXIST} from './New/constants';
 import {resilienceStatus} from "../../shared/Resilience";
 
 export const initialState = {
@@ -47,7 +47,15 @@ export const reducer = (state, action) => {
       };
     }
     case 'onChangeCreateGroup': {
+      const newGroupName = action.event.value;
       const newField = genericHandleChange(rules, state.fields, action.event);
+      if(state.groups.find(group => group.name === newGroupName)){
+        newField[NAME].message = MSG_GROUP_NAME_ALREADY_EXIST
+        return {
+          ...state,
+          fields: newField
+        }
+      }
       return {
         ...state,
         fields: newField,

diff --git a/src/Ml.Cli.WebApp/ClientApp/src/Server/Group/Home/ItemsTable.js b/src/Ml.Cli.WebApp/ClientApp/src/Server/Group/Home/ItemsTable.js
@@ -39,7 +39,7 @@ const ItemsTable = ({items, filters, onChangePaging, onUpdateUser}) => {
                 <Table.Header>
                     <Table.Tr>
                         <Table.Th>
-                            <span className="af-table__th-content">Nom du groupe</span>
+                            <span className="af-table__th-content">Nom</span>
                         </Table.Th>
                         <Table.Th>
                             <span className="af-table__th-content">Utilisateurs</span>

diff --git a/src/Ml.Cli.WebApp/ClientApp/src/Server/Group/Home/New/New.validation.rules.js b/src/Ml.Cli.WebApp/ClientApp/src/Server/Group/Home/New/New.validation.rules.js
@@ -22,8 +22,9 @@ const rulesMaxLength = {
 
 const rulesRegex = {
   pattern: {
-    regex: /^[a-zA-Z-_]*$/
-  }
+    regex: /^[a-zA-Z-_]*$/,
+    message: "Veuillez respecter le bon format (Lettres, '-' ou '_' uniquement)"
+  },
 }
 
 export const rules = {

diff --git a/src/Ml.Cli.WebApp/ClientApp/src/Server/Group/Home/New/constants.js b/src/Ml.Cli.WebApp/ClientApp/src/Server/Group/Home/New/constants.js
@@ -5,3 +5,5 @@ export const MSG_REQUIRED = 'Le champ est obligatoire';
 export const MSG_MIN_LENGTH = 'Le champ ne contient pas assez de caractères (3 min)';
 
 export const MSG_MAX_LENGTH = 'Le champ contient trop de caractères (16 max)';
+
+export const MSG_GROUP_NAME_ALREADY_EXIST = 'Un groupe avec ce nom existe déjà';
diff --git a/src/Ml.Cli.WebApp/ClientApp/src/Server/Group/Home/__snapshots__/Home.container.spec.js.snap b/src/Ml.Cli.WebApp/ClientApp/src/Server/Group/Home/__snapshots__/Home.container.spec.js.snap
@@ -35,7 +35,7 @@ exports[`Home.container for groups HomeContainer render correctly the groups 1`]
     <h1
       class="af-title--content"
     >
-      Création de groupe
+      Création
     </h1>
     <form
       name="newGroup"
@@ -100,7 +100,7 @@ exports[`Home.container for groups HomeContainer render correctly the groups 1`]
     <h1
       class="af-title--content"
     >
-      Affichage des groupes - il y a actuellement (1) groupes
+      Affichage - il y a actuellement (1) groupes
     </h1>
     <table
       class="af-table"
@@ -117,7 +117,7 @@ exports[`Home.container for groups HomeContainer render correctly the groups 1`]
             <span
               class="af-table__th-content"
             >
-              Nom du groupe
+              Nom
             </span>
           </th>
           <th

diff --git a/src/Ml.Cli.WebApp/ClientApp/src/Server/Group/Home/__snapshots__/ItemsTable.spec.js.snap b/src/Ml.Cli.WebApp/ClientApp/src/Server/Group/Home/__snapshots__/ItemsTable.spec.js.snap
@@ -17,7 +17,7 @@ exports[`Check Group ItemsTable behaviour Should render correctly and display us
           <span
             class="af-table__th-content"
           >
-            Nom du groupe
+            Nom
           </span>
         </th>
         <th