From 03e8d992e989f0ff062900a0966633bae9fd4882 Mon Sep 17 00:00:00 2001 From: Lea Renaux Date: Thu, 21 Dec 2023 12:05:04 +0100 Subject: [PATCH] rework SUTable --- src/components/Close/Close.jsx | 5 +- src/components/Close/CloseSUTable.jsx | 369 --------------- src/components/Review/Review.jsx | 5 +- src/components/Review/ReviewTable.jsx | 376 --------------- src/components/SUTable/SUTable.jsx | 632 ++++++++++++++++++++++++++ 5 files changed, 638 insertions(+), 749 deletions(-) delete mode 100644 src/components/Close/CloseSUTable.jsx delete mode 100644 src/components/Review/ReviewTable.jsx create mode 100644 src/components/SUTable/SUTable.jsx diff --git a/src/components/Close/Close.jsx b/src/components/Close/Close.jsx index e5ac858..64b77af 100644 --- a/src/components/Close/Close.jsx +++ b/src/components/Close/Close.jsx @@ -3,10 +3,10 @@ import Button from 'react-bootstrap/Button'; import { Col, Row } from 'react-bootstrap'; import { Link } from 'react-router-dom'; import { NotificationManager } from 'react-notifications'; -import CloseSUTable from './CloseSUTable'; import Utils from '../../utils/Utils'; import D from '../../i18n'; import './Close.css'; +import SUTable from '../SUTable/SUTable'; function Close({ location, dataRetreiver, @@ -78,7 +78,7 @@ function Close({ - validateChangingState(lstSUChangingState, stateModified) } + type={"close"} /> ); diff --git a/src/components/Close/CloseSUTable.jsx b/src/components/Close/CloseSUTable.jsx deleted file mode 100644 index 937a44e..0000000 --- a/src/components/Close/CloseSUTable.jsx +++ /dev/null @@ -1,369 +0,0 @@ -import React from 'react'; -import Button from 'react-bootstrap/Button'; -import { Col, Row } from 'react-bootstrap'; -import Table from 'react-bootstrap/Table'; -import Spinner from 'react-bootstrap/Spinner'; -import Card from 'react-bootstrap/Card'; -import Modal from 'react-bootstrap/Modal'; -import Form from 'react-bootstrap/Form'; -import SortIcon from '../SortIcon/SortIcon'; -import SearchField from '../SearchField/SearchField'; -import PaginationNav from '../PaginationNav/PaginationNav'; -import CloseSurveyUnitLine from './CloseSurveyUnitLine'; -import D from '../../i18n'; - -function makeTableForExport(data) { - const header = [[ - D.survey, - D.identifier, - D.interviewer, - D.ssech, - D.department, - D.town, - D.state, - ]]; - - return header.concat(data.map((line) => ([ - line.campaign, - line.id, - `${line.interviewer.interviewerLastName} ${line.interviewer.interviewerFirstName}`, - line.ssech, - line.location ? line.location.substring(0, 2) : null, - line.city, - line.state, - ]))); -} - -class CloseSUTable extends React.Component { - constructor(props) { - super(props); - this.state = { - pagination: { size: 10, page: 1 }, - displayedLines: props.data, - checkboxArray: props.data ? props.data.map((element) => {return {id: element.id, isChecked: false}}) : [], - checkAll: false, - show: false, - stateModified: '', - }; - } - - componentDidUpdate(prevProps) { - const { data } = this.props; - if (prevProps.data !== data) { - this.setState({ displayedLines: data }); - const newCheckboxArray = data !== undefined ? data.map((element) => {return {id: element.id, isChecked: false}}) : [] - this.setState({ checkboxArray: newCheckboxArray, checkAll: false }); - } - } - - getCheckAllValue(checkboxArray, pagination){ - const lastIndexOnPage = pagination.size * pagination.page > checkboxArray.length ? - checkboxArray.length : - pagination.size * pagination.page; - - for (let i = pagination.size * (pagination.page - 1); i < lastIndexOnPage; i++ ){ - if(checkboxArray[i].isChecked === false){ - return false; - } - } - - return true; - } - - handlePageChange(pagination) { - const checkAll = this.getCheckAllValue(this.state.checkboxArray, pagination); - this.setState({ pagination, checkAll }); - } - - handleCheckAll(e) { - const { checkboxArray, displayedLines} = this.state; - let newCheckboxArray = [] - displayedLines.map((data, index) => { - if(index >= this.state.pagination.size * (this.state.pagination.page - 1) && index < this.state.pagination.size * this.state.pagination.page) { - return newCheckboxArray.push({id : data.id, isChecked: e.target.checked}); - } - else { - const checkboxData = checkboxArray.find((element) => element.id === data.id); - return newCheckboxArray.push({id : data.id, isChecked: checkboxData ? checkboxData.isChecked : false}); - } - }) - - checkboxArray.map((element) => { - if(displayedLines.find((line) => line.id === element.id) === undefined){ - return newCheckboxArray.push(element); - } - }) - this.setState({ - checkboxArray: newCheckboxArray, - checkAll: e.target.checked, - }); - } - - toggleCheckBox(id) { - const { checkboxArray, displayedLines, pagination } = this.state; - let newCheckboxArray = []; - - displayedLines.map((element) =>{ - const checkboxArrayData = checkboxArray.find((data) => data.id === element.id); - if(element.id !== id) { - return newCheckboxArray.push(checkboxArrayData); - } - else { - return newCheckboxArray.push({id: element.id, isChecked: !checkboxArrayData.isChecked}); - } - }) - - const newCheckAll = this.getCheckAllValue(newCheckboxArray, pagination); - checkboxArray.map((element) => { - if(displayedLines.find((line) => line.id === element.id) === undefined){ - return newCheckboxArray.push(element); - } - }) - - this.setState({ - checkboxArray: newCheckboxArray, - checkAll: newCheckAll, - }); - } - - handleClose() { - this.setState({ show: false }); - } - - handleShow() { - this.setState({ show: true }); - } - - isDisabled() { - const { checkboxArray } = this.state; - return !checkboxArray.filter((element) => element.isChecked === true).length > 0; - } - - validate() { - const { validateChangingState } = this.props; - const { checkboxArray, stateModified } = this.state; - const lstSUChangingState = checkboxArray - .filter((su) => (su.isChecked)) - .map((su) => (su.id)); - validateChangingState(lstSUChangingState, stateModified); - } - - handleExport() { - const { data } = this.props; - const fileLabel = 'UE_à_clore'; - const title = `${fileLabel}_${new Date().toLocaleDateString().replace(/\//g, '')}.csv`.replace(/ /g, '_'); - const table = makeTableForExport(data); - const csvContent = `data:text/csv;charset=utf-8,\ufeff${table.map((e) => e.join(';')).join('\n')}`; - const encodedUri = encodeURI(csvContent); - const link = document.createElement('a'); - link.setAttribute('href', encodedUri); - link.setAttribute('download', title); - document.body.appendChild(link); - link.click(); - link.remove(); - } - - updateLines(matchingLines) { - const { pagination, checkboxArray } = this.state; - const newCheckboxArray = checkboxArray.map((element) => {return {id :element.id, isChecked: false}}) - this.setState({ - checkboxArray: newCheckboxArray, - checkAll: false, - pagination: { size: pagination.size, page: 1 }, - displayedLines: matchingLines, - }); - } - - render() { - const { - data, sort, handleSort, isLoading, - } = this.props; - const fieldsToSearch = ['campaign', 'id', 'city', 'state', 'interviewer']; - const { - pagination, displayedLines, checkboxArray, checkAll, show, stateModified, - } = this.state; - const toggleCheckBox = (i) => { this.toggleCheckBox(i); }; - function handleSortFunct(property) { return () => { handleSort(property); }; } - return ( - - - {D.unprocessedSurveyUnitsToClose} - {isLoading ? '' : data.length} - {!data.length - || ( - - )} - - { - isLoading - ? - : ( - <> - { - data.length > 0 - ? ( -
- - - this.updateLines(matchinglines)} - /> - - - this.handlePageChange(newPagination)} - /> - - - - {D.result} - {displayedLines.length} - / - {data.length} -   - {D.units} - - - - - - - - - - - - - - - - - - - {displayedLines - .slice( - (pagination.page - 1) * pagination.size, - Math.min(pagination.page * pagination.size, displayedLines.length), - ) - .map((line) => { - const element = checkboxArray.filter((element) => element.id === line.id)[0] - return ( - toggleCheckBox(line.id)} - /> - )})} - -
- this.handleCheckAll(e)} /> - - {D.survey} - - - {D.identifier} - - - {D.interviewer} - - - {D.ssech} - - - {D.identificationState} - - - {D.contactOutcome} - - - {D.questionnaireState} - - - {D.state} - -
-
- - { this.handlePageChange(newPagination); }} - numberOfItems={displayedLines.length} - /> -
- this.handleClose()}> - - {D.modaleModifiedText} - - - - {D.state} - this.setState({ stateModified: e.target.value })} - > - - - - - - - - - - - - - -
- ) - : {D.noListSuToDisplay} - } - - )} - - ); - } -} - -export default CloseSUTable; diff --git a/src/components/Review/Review.jsx b/src/components/Review/Review.jsx index e31f164..d33b646 100644 --- a/src/components/Review/Review.jsx +++ b/src/components/Review/Review.jsx @@ -8,7 +8,7 @@ import Col from "react-bootstrap/Col"; import { Link, Redirect } from "react-router-dom"; import { NotificationManager } from "react-notifications"; import SurveySelector from "../SurveySelector/SurveySelector"; -import ReviewTable from "./ReviewTable"; +import SUTable from "../SUTable/SUTable"; import Utils from "../../utils/Utils"; import D from "../../i18n"; import "./Review.css"; @@ -149,7 +149,7 @@ function Review({ location, dataRetreiver, match }) { ) : ( <> {data.length > 0 ? ( - ) : ( {D.noSuToReview} diff --git a/src/components/Review/ReviewTable.jsx b/src/components/Review/ReviewTable.jsx deleted file mode 100644 index 9b1d377..0000000 --- a/src/components/Review/ReviewTable.jsx +++ /dev/null @@ -1,376 +0,0 @@ -import React from "react"; -import Button from "react-bootstrap/Button"; -import Row from "react-bootstrap/Row"; -import Col from "react-bootstrap/Col"; -import Modal from "react-bootstrap/Modal"; -import Table from "react-bootstrap/Table"; -import Form from "react-bootstrap/Form"; -import SortIcon from "../SortIcon/SortIcon"; -import SearchField from "../SearchField/SearchField"; -import SurveyUnitLine from "./SurveyUnitLine"; -import PaginationNav from "../PaginationNav/PaginationNav"; -import D from "../../i18n"; - -class ReviewTable extends React.Component { - constructor(props) { - super(props); - this.state = { - pagination: { size: 10, page: 1 }, - checkboxArray: props.data ? props.data.map((element) => {return {id: element.id, isChecked: false}}) : [], - checkAll: false, - show: false, - displayedLines: props.data, - showComment: false, - suToModifySelected: "", - oldComment: "", - newComment: "", - }; - } - - getCheckAllValue(checkboxArray, pagination){ - const lastIndexOnPage = pagination.size * pagination.page > checkboxArray.length ? - checkboxArray.length : - pagination.size * pagination.page; - - for (let i = pagination.size * (pagination.page - 1); i < lastIndexOnPage; i++ ){ - if(checkboxArray[i].isChecked === false){ - return false; - } - } - - return true; - } - - handlePageChange(pagination) { - const checkAll = this.getCheckAllValue(this.state.checkboxArray, pagination) - this.setState({ pagination , checkAll}); - } - - updateLines(matchingLines) { - const { pagination, checkboxArray } = this.state; - const newCheckboxArray = checkboxArray.map((element) => {return {id :element.id, isChecked: false}}) - this.setState({ - checkboxArray: newCheckboxArray, - checkAll: false, - pagination: { size: pagination.size, page: 1 }, - displayedLines: matchingLines, - }); - } - - handleClose() { - this.setState({ show: false }); - } - - handleShow() { - this.setState({ show: true }); - } - - handleCloseComment() { - this.setState({ showComment: false }); - } - - handleShowComment(line) { - this.setState({ showComment: true, suToModifySelected: line.id }); - if (line.comments != null) { - let comToSet = ""; - const comment = line.comments.find((c) => c.type === "MANAGEMENT"); - if (comment) { - comToSet = comment.value; - } - this.setState({ oldComment: comToSet }); - } else { - this.setState({ oldComment: "" }); - } - } - - view(line) { - const { viewSU } = this.props; - if (!line.viewed) { - viewSU(line.id); - } - } - - validateComment() { - const { validateUpdateComment } = this.props; - const { suToModifySelected, newComment } = this.state; - validateUpdateComment(suToModifySelected, newComment); - } - - validateSU() { - const { validateSU } = this.props; - const { checkboxArray } = this.state; - const ids = checkboxArray - .filter((su) => su.isChecked) - .map((su) => su.id); - validateSU(ids); - } - - handleCheckAll() { - const { checkboxArray, checkAll, displayedLines} = this.state; - let newCheckboxArray = [] - displayedLines.map((data, index) => { - if(index >= this.state.pagination.size * (this.state.pagination.page - 1) && index < this.state.pagination.size * this.state.pagination.page) { - if(!checkAll ){ - return newCheckboxArray.push({id : data.id, isChecked: true}) - } - if (checkAll ) { - return newCheckboxArray.push({id : data.id, isChecked: false}) - } - } - else { - const checkboxData = checkboxArray.find((element) => element.id === data.id) - return newCheckboxArray.push({id : data.id, isChecked: checkboxData ? checkboxData.isChecked : false}) - } - }) - - checkboxArray.map((element) => { - if(displayedLines.find((line) => line.id === element.id) === undefined){ - return newCheckboxArray.push(element) - } - }) - - this.setState({ - checkboxArray: newCheckboxArray, - checkAll: !checkAll, - }); - } - - isDisabled() { - const { checkboxArray } = this.state; - return !checkboxArray.filter((element) => element.isChecked === true).length > 0; - } - - toggleCheckBox(id) { - const { checkboxArray, pagination, displayedLines } = this.state; - let newCheckboxArray = []; - - displayedLines.map((element) =>{ - const checkboxArrayData = checkboxArray.find((data) => data.id === element.id); - if(element.id !== id) { - return newCheckboxArray.push(checkboxArrayData); - } - else { - return newCheckboxArray.push({id: element.id, isChecked: !checkboxArrayData.isChecked}); - } - }) - - const newCheckAll = this.getCheckAllValue(newCheckboxArray, pagination); - checkboxArray.map((element) => { - if(displayedLines.find((line) => line.id === element.id) === undefined){ - return newCheckboxArray.push(element); - } - }) - - this.setState({ - checkboxArray: newCheckboxArray, - checkAll: newCheckAll, - }); - } - - render() { - const { sort, data, handleSort, dataRetreiver } = this.props; - const { - displayedLines, - pagination, - checkboxArray, - checkAll, - show, - showComment, - suToModifySelected, - oldComment, - } = this.state; - const fieldsToSearch = ["campaignLabel", "interviewer", "id"]; - const toggleCheckBox = (i) => { - this.toggleCheckBox(i); - }; - const view = (line) => { - this.view(line); - }; - const handleCloseComment = () => { - this.handleCloseComment(); - }; - const handleShowComment = (line) => { - this.handleShowComment(line); - }; - function handleSortFunct(property) { - return () => { - handleSort(property); - }; - } - return ( -
- - - - this.handlePageChange(newPagination) - } - /> - - - this.updateLines(matchinglines)} - /> - - - - - - - - - - - - - - {displayedLines - .slice( - (pagination.page - 1) * pagination.size, - Math.min( - pagination.page * pagination.size, - displayedLines.length - ) - ) - .map((line) => { - const element = checkboxArray.filter((element) => element.id === line.id)[0] - return view(line)} - updateFunc={() => toggleCheckBox(line.id)} - handleShow={() => handleShowComment(line)} - /> - })} - handleCloseComment()}> - - - {D.modifiedCommentSu + suToModifySelected} - - - - - {D.modifiedCommentSuLastComment} - - this.setState({ newComment: e.target.value }) - } - /> - - {D.modifyCommentSuHelpText} - - - - - - - - - -
this.handleCheckAll()}> - - - - {D.survey} - - - {D.identifier} - - - {D.interviewer} - {D.listSuActions}
-
- - { - this.handlePageChange(newPagination); - }} - numberOfItems={displayedLines.length} - /> -
- - this.handleClose()}> - - - {D.reviewValidatePopupBodyPart1} - {checkboxArray.filter((element) => element.isChecked).length} - {D.reviewValidatePopupBodyPart2} - - - - - - -
- ); - } -} - -export default ReviewTable; diff --git a/src/components/SUTable/SUTable.jsx b/src/components/SUTable/SUTable.jsx new file mode 100644 index 0000000..3c99465 --- /dev/null +++ b/src/components/SUTable/SUTable.jsx @@ -0,0 +1,632 @@ +import React from "react"; +import Button from "react-bootstrap/Button"; +import Row from "react-bootstrap/Row"; +import Col from "react-bootstrap/Col"; +import Modal from "react-bootstrap/Modal"; +import Spinner from 'react-bootstrap/Spinner'; +import Card from 'react-bootstrap/Card'; +import Table from "react-bootstrap/Table"; +import Form from "react-bootstrap/Form"; +import SortIcon from "../SortIcon/SortIcon"; +import SearchField from "../SearchField/SearchField"; +import SurveyUnitLine from "../Review/SurveyUnitLine"; +import PaginationNav from "../PaginationNav/PaginationNav"; +import CloseSurveyUnitLine from '../Close/CloseSurveyUnitLine'; +import D from "../../i18n"; + +function makeTableForExport(data) { + const header = [[ + D.survey, + D.identifier, + D.interviewer, + D.ssech, + D.department, + D.town, + D.state, + ]]; + + return header.concat(data.map((line) => ([ + line.campaign, + line.id, + `${line.interviewer.interviewerLastName} ${line.interviewer.interviewerFirstName}`, + line.ssech, + line.location ? line.location.substring(0, 2) : null, + line.city, + line.state, + ]))); +} + +class SUTable extends React.Component { + constructor(props) { + super(props); + this.state = { + pagination: { size: 10, page: 1 }, + displayedLines: props.data, + checkboxArray: props.data ? props.data.map((element) => {return {id: element.id, isChecked: false}}) : [], + checkAll: false, + show: false, + } + if(this.props.type === "review"){ + this.state = { + ...this.state, + showComment: false, + suToModifySelected: "", + oldComment: "", + newComment: "", + }; + } + else { + this.state = { + ...this.state, + stateModified: '', + }; + } + } + + componentDidUpdate(prevProps) { + if(this.props.type === "close"){ + const { data } = this.props; + if (prevProps.data !== data) { + this.setState({ displayedLines: data }); + const newCheckboxArray = data !== undefined ? data.map((element) => {return {id: element.id, isChecked: false}}) : [] + this.setState({ checkboxArray: newCheckboxArray, checkAll: false }); + } + } + } + + getCheckAllValue(checkboxArray, pagination){ + const lastIndexOnPage = pagination.size * pagination.page > checkboxArray.length ? + checkboxArray.length : + pagination.size * pagination.page; + + for (let i = pagination.size * (pagination.page - 1); i < lastIndexOnPage; i++ ){ + if(checkboxArray[i].isChecked === false){ + return false; + } + } + return true; + } + + handlePageChange(pagination) { + const checkAll = this.getCheckAllValue(this.state.checkboxArray, pagination) + this.setState({ pagination , checkAll}); + } + + updateLines(matchingLines) { + const { pagination, checkboxArray } = this.state; + const newCheckboxArray = checkboxArray.map((element) => {return {id :element.id, isChecked: false}}) + this.setState({ + checkboxArray: newCheckboxArray, + checkAll: false, + pagination: { size: pagination.size, page: 1 }, + displayedLines: matchingLines, + }); + } + + handleClose() { + this.setState({ show: false }); + } + + handleShow() { + this.setState({ show: true }); + } + + handleCloseComment() { + this.setState({ showComment: false }); + } + + handleShowComment(line) { + this.setState({ showComment: true, suToModifySelected: line.id }); + if (line.comments != null) { + let comToSet = ""; + const comment = line.comments.find((c) => c.type === "MANAGEMENT"); + if (comment) { + comToSet = comment.value; + } + this.setState({ oldComment: comToSet }); + } else { + this.setState({ oldComment: "" }); + } + } + + view(line) { + const { viewSU } = this.props; + if (!line.viewed) { + viewSU(line.id); + } + } + + validateComment() { + const { validateUpdateComment } = this.props; + const { suToModifySelected, newComment } = this.state; + validateUpdateComment(suToModifySelected, newComment); + } + + validateSU() { + const { validateSU } = this.props; + const { checkboxArray } = this.state; + const ids = checkboxArray + .filter((su) => su.isChecked) + .map((su) => su.id); + validateSU(ids); + } + + handleExport() { + const { data } = this.props; + const fileLabel = 'UE_à_clore'; + const title = `${fileLabel}_${new Date().toLocaleDateString().replace(/\//g, '')}.csv`.replace(/ /g, '_'); + const table = makeTableForExport(data); + const csvContent = `data:text/csv;charset=utf-8,\ufeff${table.map((e) => e.join(';')).join('\n')}`; + const encodedUri = encodeURI(csvContent); + const link = document.createElement('a'); + link.setAttribute('href', encodedUri); + link.setAttribute('download', title); + document.body.appendChild(link); + link.click(); + link.remove(); + } + + validate() { + const { validateChangingState } = this.props; + const { checkboxArray, stateModified } = this.state; + const lstSUChangingState = checkboxArray + .filter((su) => (su.isChecked)) + .map((su) => (su.id)); + validateChangingState(lstSUChangingState, stateModified); + } + + handleCheckAll() { + const { checkboxArray, checkAll, displayedLines} = this.state; + let newCheckboxArray = [] + displayedLines.map((data, index) => { + if(index >= this.state.pagination.size * (this.state.pagination.page - 1) && index < this.state.pagination.size * this.state.pagination.page) { + if(!checkAll ){ + return newCheckboxArray.push({id : data.id, isChecked: true}) + } + if (checkAll ) { + return newCheckboxArray.push({id : data.id, isChecked: false}) + } + } + else { + const checkboxData = checkboxArray.find((element) => element.id === data.id) + return newCheckboxArray.push({id : data.id, isChecked: checkboxData ? checkboxData.isChecked : false}) + } + }) + + checkboxArray.map((element) => { + if(displayedLines.find((line) => line.id === element.id) === undefined){ + return newCheckboxArray.push(element) + } + }) + + this.setState({ + checkboxArray: newCheckboxArray, + checkAll: !checkAll, + }); + } + + isDisabled() { + const { checkboxArray } = this.state; + return !checkboxArray.filter((element) => element.isChecked === true).length > 0; + } + + toggleCheckBox(id) { + const { checkboxArray, pagination, displayedLines } = this.state; + let newCheckboxArray = []; + + displayedLines.map((element) =>{ + const checkboxArrayData = checkboxArray.find((data) => data.id === element.id); + if(element.id !== id) { + return newCheckboxArray.push(checkboxArrayData); + } + else { + return newCheckboxArray.push({id: element.id, isChecked: !checkboxArrayData.isChecked}); + } + }) + + const newCheckAll = this.getCheckAllValue(newCheckboxArray, pagination); + checkboxArray.map((element) => { + if(displayedLines.find((line) => line.id === element.id) === undefined){ + return newCheckboxArray.push(element); + } + }) + + this.setState({ + checkboxArray: newCheckboxArray, + checkAll: newCheckAll, + }); + } + + render() { + const {sort, data, handleSort } = this.props + const {displayedLines, pagination, checkboxArray, checkAll, show } = this.state; + const toggleCheckBox = (i) => { + this.toggleCheckBox(i); + }; + function handleSortFunct(property) { + return () => { + handleSort(property); + }; + } + + if(this.props.type === "review"){ + const { dataRetreiver } = this.props; + const { + showComment, + suToModifySelected, + oldComment, + } = this.state; + const fieldsToSearch = ["campaignLabel", "interviewer", "id"]; + const view = (line) => { + this.view(line); + }; + const handleCloseComment = () => { + this.handleCloseComment(); + }; + const handleShowComment = (line) => { + this.handleShowComment(line); + }; + return ( +
+ + + + this.handlePageChange(newPagination) + } + /> + + + this.updateLines(matchinglines)} + /> + + + + + + + + + + + + + + {displayedLines + .slice( + (pagination.page - 1) * pagination.size, + Math.min( + pagination.page * pagination.size, + displayedLines.length + ) + ) + .map((line) => { + const element = checkboxArray.filter((element) => element.id === line.id)[0] + return view(line)} + updateFunc={() => toggleCheckBox(line.id)} + handleShow={() => handleShowComment(line)} + /> + })} + handleCloseComment()}> + + + {D.modifiedCommentSu + suToModifySelected} + + + + + {D.modifiedCommentSuLastComment} + + this.setState({ newComment: e.target.value }) + } + /> + + {D.modifyCommentSuHelpText} + + + + + + + + + +
this.handleCheckAll()}> + + + + {D.survey} + + + {D.identifier} + + + {D.interviewer} + {D.listSuActions}
+
+ + { + this.handlePageChange(newPagination); + }} + numberOfItems={displayedLines.length} + /> +
+ + this.handleClose()}> + + + {D.reviewValidatePopupBodyPart1} + {checkboxArray.filter((element) => element.isChecked).length} + {D.reviewValidatePopupBodyPart2} + + + + + + +
+ ); + } + else { + const { isLoading } = this.props; + const fieldsToSearch = ['campaign', 'id', 'city', 'state', 'interviewer']; + const { stateModified } = this.state; + + return ( + + + {D.unprocessedSurveyUnitsToClose} + {isLoading ? '' : data.length} + {!data.length + || ( + + )} + + { + isLoading + ? + : ( + <> + { + data.length > 0 + ? ( +
+ + + this.updateLines(matchinglines)} + /> + + + this.handlePageChange(newPagination)} + /> + + + + {D.result} + {displayedLines.length} + / + {data.length} +   + {D.units} + + + + + + + + + + + + + + + + + + + {displayedLines + .slice( + (pagination.page - 1) * pagination.size, + Math.min(pagination.page * pagination.size, displayedLines.length), + ) + .map((line) => { + const element = checkboxArray.filter((element) => element.id === line.id)[0] + return ( + toggleCheckBox(line.id)} + /> + )})} + +
+ this.handleCheckAll(e)} /> + + {D.survey} + + + {D.identifier} + + + {D.interviewer} + + + {D.ssech} + + + {D.identificationState} + + + {D.contactOutcome} + + + {D.questionnaireState} + + + {D.state} + +
+
+ + { this.handlePageChange(newPagination); }} + numberOfItems={displayedLines.length} + /> +
+ this.handleClose()}> + + {D.modaleModifiedText} + + + + {D.state} + this.setState({ stateModified: e.target.value })} + > + + + + + + + + + + + + + +
+ ) + : {D.noListSuToDisplay} + } + + )} + + ); + } + + } +} + +export default SUTable;