Merge pull request #53 from EmmanuelDemey/master

zenika

src/js/components/operations/document/edition/edition.js

@@ -267,7 +267,6 @@ class OperationsDocumentationEdition extends Component {
 										<div
 											{...getRootProps({
 												className: 'dropzone',
-												onDrop: event => event.stopPropagation(),
 											})}
 										>
 											<input

src/js/components/operations/document/edition/validation.js

@@ -1,8 +1,36 @@
 import D from 'js/i18n';
 import { LINK, DOCUMENT } from '../utils';
 
+/**
+ * Check if a list of document is correct.
+ * This list of document should respect the following criterias
+ * - Should have at least one item
+ * - The name of each files should respect a regexp
+ *
+ * @param {Array<{name}>} files
+ * @returns {{errorMessage: string, fields: { file:  boolean}}}
+ */
+function verifyFile(files = []) {
+	const regexp = /^[a-zA-Z1-9-_\.]*$/;
+	let errorMessage = '';
+
+	if (files.length === 0) {
+		errorMessage = D.requiredFile;
+	} else {
+		const wrongFile = files
+			.map(file => file.name)
+			.find(fileName => !regexp.test(fileName));
+		if (wrongFile) {
+			errorMessage = D.wrongFileName;
+		}
+	}
+	return {
+		errorMessage,
+		fields: { file: errorMessage !== '' },
+	};
+}
+
 export function validate(document, type, files) {
-	console.log(files);
 	const fields = {};
 	let errorMessage = '';
 	if (!document.labelLg1 || !document.labelLg2) {
@@ -15,12 +43,11 @@ export function validate(document, type, files) {
 	} else if (type === LINK && !/https*\:\/\//.test(document.url)) {
 		errorMessage = D.badUrl;
 		fields.url = true;
-	} else if (type === DOCUMENT && files.length === 0) {
-		errorMessage = D.requiredFile;
-		fields.file = true;
 	} else if (!document.lang) {
 		errorMessage = D.requiredLang;
 		fields.lang = true;
+	} else if (type === DOCUMENT) {
+		return verifyFile(files);
 	}
 	return {
 		fields,

src/js/components/operations/document/edition/validation.spec.js

@@ -0,0 +1,39 @@
+import { validate } from './validation';
+import { DOCUMENT } from '../utils';
+
+describe('validate', () => {
+	describe('documents', () => {
+		const type = DOCUMENT;
+		const document = {
+			labelLg1: '1',
+			labelLg2: '2',
+			lang: 'fr',
+		};
+		it('should return an error if the files is undefined', () => {
+			expect(validate(document, type)).toEqual({
+				errorMessage: 'The file is required',
+				fields: { file: true },
+			});
+		});
+		it('should return an error if the files is an empty array', () => {
+			expect(validate(document, type, [])).toEqual({
+				errorMessage: 'The file is required',
+				fields: { file: true },
+			});
+		});
+		it('should return an error if ta name is not valid', () => {
+			expect(validate(document, type, [{ name: 'name with space' }])).toEqual({
+				errorMessage: 'The name of the file incorrect',
+				fields: { file: true },
+			});
+		});
+		it('should not return any error', () => {
+			expect(
+				validate(document, type, [{ name: 'name_without_space' }])
+			).toEqual({
+				errorMessage: '',
+				fields: { file: false },
+			});
+		});
+	});
+});

src/js/components/shared/pagination/index.js

@@ -12,8 +12,20 @@ function checkInvalidPage(targetPage, listSize) {
  *	context: The context of the page. Used for theming
  */
 class Pagination extends Component {
-	constructor() {
-		super();
+	static propTypes = {
+		itemEls: PropTypes.arrayOf(PropTypes.element).isRequired,
+		itemsPerPage: PropTypes.string.isRequired,
+		context: PropTypes.oneOf([
+			'',
+			'concepts',
+			'collections',
+			'classifications',
+			'operations',
+		]),
+	};
+
+	constructor(props) {
+		super(props);
 		this.state = {
 			currentPage: 1,
 		};
@@ -46,20 +58,18 @@ class Pagination extends Component {
 			pageNumbers.push(i);
 		}
 
-		function activePage(page) {
-			return page === currentPage ? 'page-item active' : 'page-item';
+		function isActivePage(page) {
+			return page === currentPage;
 		}
 		function isDisabled(targetPage) {
-			return checkInvalidPage(targetPage, pageNumbers.length)
-				? 'page-item disabled'
-				: 'page-item';
+			return checkInvalidPage(targetPage, pageNumbers.length);
 		}
 
 		const renderPageNumbers = pageNumbers
 			.filter(number => number - 3 < currentPage && number + 3 > currentPage)
 			.map(number => {
 				return (
-					<li className={activePage(number)} key={number} id={number}>
+					<li className={isActivePage(number) && 'active'} key={number}>
 						<button
 							href="#"
 							onClick={e => this.goToPage(number, e)}
@@ -77,46 +87,53 @@ class Pagination extends Component {
 				<ul className="list-group">{currentItems}</ul>
 				{pageNumbers.length > 1 && (
 					<ul className={`pagination pg-rmes ${contextCSS}`}>
-						<li className="page-item">
-							<button onClick={e => this.goToPage(1, e)} aria-label="First">
+						<li className={isDisabled(currentPage - 1) && 'disabled'}>
+							<button
+								onClick={e => this.goToPage(1, e)}
+								aria-label="First"
+								disabled={isDisabled(currentPage - 1)}
+							>
 								<span aria-hidden="true">&laquo;</span>
 								<span className="sr-only">First</span>
 							</button>
 						</li>
-						<li className={isDisabled(currentPage - 1)}>
+						<li className={isDisabled(currentPage - 1) && 'disabled'}>
 							<button
 								href="#"
 								onClick={e =>
 									!checkInvalidPage(currentPage - 1) &&
 									this.goToPage(currentPage - 1, e)
 								}
 								aria-label="Previous"
+								disabled={isDisabled(currentPage - 1)}
 							>
 								<span aria-hidden="true">&lt;</span>
 								<span className="sr-only">Previous</span>
 							</button>
 						</li>
 						{renderPageNumbers}
-						<li className={isDisabled(currentPage + 1)}>
+						<li className={isDisabled(currentPage + 1) && 'disabled'}>
 							<button
 								href="#"
 								onClick={e =>
 									!checkInvalidPage(currentPage + 1) &&
 									this.goToPage(currentPage + 1, e)
 								}
 								aria-label="Next"
+								disabled={isDisabled(currentPage + 1)}
 							>
 								<span aria-hidden="true">&gt;</span>
 								<span className="sr-only">Next</span>
 							</button>
 						</li>
-						<li className="page-item">
+						<li className={isDisabled(currentPage + 1) && 'disabled'}>
 							<button
 								aria-label="Last"
 								href="#"
 								onClick={e =>
 									this.goToPage(pageNumbers[pageNumbers.length - 1], e)
 								}
+								disabled={isDisabled(currentPage + 1)}
 							>
 								<span aria-hidden="true">&raquo;</span>
 								<span className="sr-only">Last</span>
@@ -129,15 +146,4 @@ class Pagination extends Component {
 	}
 }
 
-Pagination.propTypes = {
-	itemEls: PropTypes.arrayOf(PropTypes.element).isRequired,
-	itemsPerPage: PropTypes.string.isRequired,
-	context: PropTypes.oneOf([
-		'',
-		'concepts',
-		'collections',
-		'classifications',
-		'operations',
-	]),
-};
 export default Pagination;

src/js/components/shared/pagination/pagination.scss

@@ -11,6 +11,10 @@
 		text-decoration: none;
 		border: 1px solid #ddd;
 
+		&.disabled {
+			color: lightgrey;
+		}
+
 		&:first-child {
 			border-top-left-radius: 5px;
 			border-bottom-left-radius: 5px;

src/js/components/shared/pagination/pagination.spec.js

@@ -61,8 +61,8 @@ describe('pagination', () => {
 		);
 		expect(wrapper.state(['currentPage'])).toBe(1);
 		wrapper
-			.find('.pagination')
-			.find('[id=2] button')
+			.findWhere(node => node.key() === '2')
+			.find('button')
 			.first()
 			.simulate('click', e);
 		expect(wrapper.state(['currentPage'])).toBe(2);
@@ -75,7 +75,6 @@ describe('pagination', () => {
 		wrapper.setState({ currentPage: 2 });
 
 		wrapper
-			.find('.pagination')
 			.find('button')
 			.at(1)
 			.simulate('click', e);
@@ -89,7 +88,6 @@ describe('pagination', () => {
 		wrapper.setState({ currentPage: 2 });
 
 		wrapper
-			.find('.pagination')
 			.find('button')
 			.at(6)
 			.simulate('click', e);
@@ -102,7 +100,6 @@ describe('pagination', () => {
 		);
 		expect(wrapper.state(['currentPage'])).toBe(1);
 		wrapper
-			.find('.pagination')
 			.find('button')
 			.first()
 			.simulate('click', e);
@@ -114,7 +111,6 @@ describe('pagination', () => {
 		);
 		expect(wrapper.state(['currentPage'])).toBe(1);
 		wrapper
-			.find('.pagination')
 			.find('button')
 			.last()
 			.simulate('click', e);
@@ -127,6 +123,7 @@ describe('pagination', () => {
 		);
 		wrapper.setState({ currentPage: 2 });
 		expect(wrapper.find('.disabled').length).toBe(0);
+		expect(wrapper.find('button[disabled=true]').length).toBe(0);
 	});
 	it('should disable the previous link if we are on the page 1', () => {
 		const wrapper = shallow(
@@ -135,11 +132,17 @@ describe('pagination', () => {
 		wrapper.setState({ currentPage: 1 });
 		expect(
 			wrapper
-				.find('.pagination')
 				.find('li')
 				.at(1)
 				.hasClass('disabled')
 		).toBeTruthy();
+
+		expect(
+			wrapper
+				.find('li')
+				.at(0)
+				.hasClass('disabled')
+		).toBeTruthy();
 	});
 
 	it('should disable the next link if we are on the last page', () => {
@@ -150,10 +153,15 @@ describe('pagination', () => {
 
 		expect(
 			wrapper
-				.find('.pagination')
 				.find('li')
 				.at(5)
 				.hasClass('disabled')
 		).toBeTruthy();
+		expect(
+			wrapper
+				.find('li')
+				.at(6)
+				.hasClass('disabled')
+		).toBeTruthy();
 	});
 });

src/js/i18n/dictionary/operations/validation.js

@@ -19,6 +19,10 @@ export default {
 		fr: 'Le fichier est obligatoire',
 		en: 'The file is required',
 	},
+	wrongFileName: {
+		fr: 'Le nom du fichier est incorrect',
+		en: 'The name of the file incorrect',
+	},
 	requiredFamily: {
 		fr: 'La famille est obligatoire',
 		en: 'The family is required',