Merge pull request #44 from EmmanuelDemey/master

feat: add filter and spinner to the documents bloc

docs/en/getting-started.md

@@ -18,6 +18,8 @@ An other script, `yarn test:coverage` allows to generate a complete local report
 
 Some Integrations tests are also available thanks to _Cypress.io_. You should use the `yarn cypress:open` command if you want to launch these tests on dev mode. For your CI, you have to use the `yarn cypress:run` command.
 
+Unit tests are launched each time a `git push` is executed.
+
 ## Build
 
 To build the application, run `yarn build`. You can now serve the content of the `dist` folder with the HTTP server of your choice.
@@ -34,13 +36,13 @@ If you're new to JavaScript, you might need to first install [node](https://node
 
 ## Project Structure
 
-In this paragraph, we will try to explain the rules we defined and try to follow when talking about the structure of the project. 
+In this paragraph, we will try to explain the rules we defined and try to follow when talking about the structure of the project.
 
 ### SCSS Mixin
 
-If you have to define SCSS mixin, you have to define them in the `src/styles/mixin.scss` file, and import them in the stylesheet of the React component. 
+If you have to define SCSS mixin, you have to define them in the `src/styles/mixin.scss` file, and import them in the stylesheet of the React component.
 
 ### I18N
 
 In order to avoid big i18n file, we try to split this file in smaller files, based on `page` or `feature`. For example, we have a `src/js/i18n/dictionary/operations/documents.js` file for all messages dedicated to the documents feature.
-This files have to be imported directly or not in the main file `js/i18n/dictionary/app.js`.
+This files have to be imported directly or not in the main file `js/i18n/dictionary/app.js`.

docs/fr/getting-started.md

@@ -18,6 +18,8 @@ Un script supplémentaire, `yarn test:coverage` permet de générer un rapport l
 
 Des tests d'intégrations, utilisant _Cypress.io_ peuvent être également lancés. Pour cela, vous pouvez lancer la commande `yarn cypress:open` en développement, ou `yarn cypress:run` sur votre système d'intégration continue.
 
+Les tests unitaires sont exécutés lorsque nous faisons un `git push`
+
 ## Build
 
 Pour produire la version de production, lancez la commande `yarn build`. Vous pouvez désormais servir le contenu du dossier `dist` avec le serveur web de votre choix.
@@ -32,15 +34,15 @@ Si vous débutez avec ces technologies, vous aurez vraisemblablement besoin d'in
 
 `yarn build` lance la compilation du code avec des optimisations pour la mise en production. Elle copie toutes les ressources statiques et le fichier `JavaScript` compilé dans le dossier `dist`.
 
-## Structure du projet 
+## Structure du projet
 
-Dans ce paragraphe, nous allons définir les quelques règles que nous essayons de suivre concernant la structure du projet. 
+Dans ce paragraphe, nous allons définir les quelques règles que nous essayons de suivre concernant la structure du projet.
 
 ### Mixin SCSS
 
-Si vous devez définir des mixins SCSS, vous devez les implémenter dans le fichier `src/styles/mixin.scss` et ensuite importer ce fichier lorsque vous souhaitez l'utiliser. 
+Si vous devez définir des mixins SCSS, vous devez les implémenter dans le fichier `src/styles/mixin.scss` et ensuite importer ce fichier lorsque vous souhaitez l'utiliser.
 
 ### I18N
 
-Dans le but d'éviter d'avoir un fichier d'i18n trop gros, nous avons commencer à découper ce fichier par `page` ou `fontionnalité`. Il y a par exemple un fichier `src/js/i18n/dictionary/operations/documents.js` pour tous les messages utilisés dans la fonctionnalité de gestions des documents. 
-Ces fichiers doivent ensuite être importés directement ou indirectement dans le fichier principal `js/i18n/dictionary/app.js`
+Dans le but d'éviter d'avoir un fichier d'i18n trop gros, nous avons commencer à découper ce fichier par `page` ou `fontionnalité`. Il y a par exemple un fichier `src/js/i18n/dictionary/operations/documents.js` pour tous les messages utilisés dans la fonctionnalité de gestions des documents.
+Ces fichiers doivent ensuite être importés directement ou indirectement dans le fichier principal `js/i18n/dictionary/app.js`

src/js/components/operations/msd/documents/documents-bloc/index.js

@@ -5,11 +5,14 @@ import D from 'js/i18n';
 import loadDocuments from 'js/actions/operations/documents/list';
 import './style.scss';
 import { getLang } from 'js/i18n/build-dictionary';
-import { NOT_LOADED } from 'js/constants';
+import { NOT_LOADED, LOADING } from 'js/constants';
 import {
 	getOperationsDocumentsStatus,
 	getOperationsDocuments,
 } from 'js/reducers/operations/selector';
+
+import spinner from 'img/spinner.svg';
+
 /**
  * @typedef {Object} DocumentsBlocProps
  * @property {import('js/types').SimsDocuments[]=}  documents
@@ -18,6 +21,7 @@ import {
  * @property {(string) => void } deleteHandler
  * @property {(string) => void } addHandler
  * @property {import('js/types').SimsDocuments[]} documentStores
+ * @property {String} documentStoresStatus
  */
 
 /**
@@ -33,17 +37,25 @@ export function DocumentsBloc({
 	deleteHandler,
 	addHandler,
 	documentStores = [],
+	documentStoresStatus,
 }) {
+	const [panelStatus, setPanelStatus] = useState(false);
+	const [filter, setFilter] = useState('');
+
 	const currentDocuments = sortArray(`label${localPrefix}`)(documents);
 	const currentDocumentsIds = currentDocuments.map(doc => doc.uri);
 
 	const otherDocuments = sortArray(`label${localPrefix}`)(
-		documentStores.filter(
-			document => !currentDocumentsIds.includes(document.uri)
-		)
+		documentStores
+			.filter(document => !currentDocumentsIds.includes(document.uri))
+			.filter(document =>
+				['', document.labelLg1, document.labelLg2]
+					.join()
+					.toLowerCase()
+					.includes(filter.toLowerCase())
+			)
 	);
 	const isSecondLang = localPrefix === 'Lg2';
-	const [panelStatus, setPanelStatus] = useState(false);
 
 	function addAsideToTheDocument(document) {
 		let lastRefresh;
@@ -117,11 +129,28 @@ export function DocumentsBloc({
 								}`}
 								aria-hidden="true"
 							/>
-							{D.addDocument} ({otherDocuments.length})
+							{D.addDocument}{' '}
+							{documentStoresStatus === LOADING ? (
+								<img src={spinner} width="30px" alt="loading" />
+							) : (
+								<span class="badge">{otherDocuments.length}</span>
+							)}
 						</button>
 					</div>
 					{panelStatus && (
 						<div className="panel-body">
+							<div class="form-group">
+								<label className="sr-only" for="documentFilter">
+									Email address
+								</label>
+								<input
+									className="form-control"
+									id="documentFilter"
+									placeholder="Searcgh"
+									value={filter}
+									onChange={e => setFilter(e.target.value)}
+								/>
+							</div>
 							<ul className="documentsbloc__filepicker">
 								{otherDocuments.map(addAsideToTheDocument).map(document => {
 									return displayHTMLForDocument(document, document => (