Tiny File Manager

Back Back Up Advanced Editor

import useDataBreachReportsData from "./DataBreachReportsData";
import {useState, useEffect} from "@wordpress/element";
import { __ } from '@wordpress/i18n';
import Icon from "../../utils/Icon";
import {memo} from "@wordpress/element";
import CheckboxGroup from '../Inputs/CheckboxGroup';

const [DataTable, setDataTable] = useState(null);
	useEffect( () => {
		import('react-data-table-component').then(({ default: DataTable }) => {
			setDataTable(() => DataTable);
		});
	}, []);

useEffect(() => {
		if (!documentsLoaded ) fetchData();
	}, [documentsLoaded])

const customStyles = {
		headCells: {
			style: {
				paddingLeft: '0',
				paddingRight: '0',
			},
		},
		cells: {
			style: {
				paddingLeft: '0',
				paddingRight: '0',
			},
		},
	};

const onDeleteDocuments  = async (ids) => {
		setSelectedDocuments([]);
		await deleteDocuments(ids);
	}

const downloadDocuments = async () => {
		let selectedDocumentsCopy = documents.filter(document => selectedDocuments.includes(document.id));
		setDownloading(true);
		setBtnDisabled(true);
		const downloadNext = async () => {
			if (selectedDocumentsCopy.length > 0) {
				const document = selectedDocumentsCopy.shift();
				const url = document.download_url;

try {
					let request = new XMLHttpRequest();
					request.responseType = 'blob';
					request.open('get', url, true);
					request.send();
					request.onreadystatechange = function() {
						if (this.readyState === 4 && this.status === 200) {
							let obj = window.URL.createObjectURL(this.response);
							let element = window.document.createElement('a');
							element.setAttribute('href',obj);
							element.setAttribute('download', document.title);
							window.document.body.appendChild(element);
							//onClick property
							element.click();
							setSelectedDocuments(selectedDocumentsCopy);
							setDownloading(false);
							setBtnDisabled(false);

setTimeout(function() {
								window.URL.revokeObjectURL(obj);
							}, 60 * 1000);
						}
					};

await downloadNext();
				} catch (error) {
					console.error(error);
					setBtnDisabled(false);
				}
			}
		};

await downloadNext();
	};

if (allSelected) {
			setEntirePageSelected(true);
			setIndeterminate(false);
		} else if (!hasOneSelected) {
			setIndeterminate(false);
		} else {
			setEntirePageSelected(false);
			setIndeterminate(true);
		}
	}

const handleFiltering = (documents) => {
		let newDocuments = [...documents];
		if ( regionFilter!=='') {
			newDocuments = newDocuments.filter(document => {
				return document.region===regionFilter;
			})
		}

//sort the plugins alphabetically by title
		newDocuments.sort((a, b) => {
			if (a.title < b.title) {
				return -1;
			}
			if (a.title > b.title) {
				return 1;
			}
			return 0;
		});

newDocuments.filter(document => {
			return document.title.toLowerCase().includes(searchValue.toLowerCase());
		})

return newDocuments;
	}

const columns = [
		{
			name: <CheckboxGroup options={{true: ''}} indeterminate={indeterminate} value={entirePageSelected} onChange={(value) => handleSelectEntirePage(value)} />,
			selector: row => row.selectControl,
			grow: 1,
			minWidth: '50px',
		},
		{
			name: __('Document',"complianz-gdpr"),
			selector: row => row.title,
			sortable: true,
			grow: 6,
		},
		{
			name: __('Region',"complianz-gdpr"),
			selector: row => <img alt="region" width="20px" height="20px" src={cmplz_settings.plugin_url+'assets/images/'+row.region+'.svg'} />,
			sortable: true,
			grow: 2,
			right: true,
		},
		{
			name: __('Date',"complianz-gdpr"),
			selector: row => row.date,
			sortable: true,
			grow: 4,
			right: true,
			minWidth: '200px',
		},
	];

//filter the plugins by search value
	let filteredDocuments = handleFiltering(documents);

//add the controls to the plugins
	let data = [];
	filteredDocuments.forEach(document => {
		let documentCopy = {...document};
		documentCopy.selectControl = <CheckboxGroup value={selectedDocuments.includes(documentCopy.id)} options={{true: ''}} onChange={(value) => onSelectDocument(value,documentCopy.id)} />
		data.push(documentCopy);
	});

{
				selectedDocuments.length>0 &&
				<div className="cmplz-selected-document">
					{selectedDocuments.length>1 && __("%s items selected", "complianz-gdpr").replace("%s", selectedDocuments.length)}
					{selectedDocuments.length===1 && __("1 item selected", "complianz-gdpr")}
					<div className="cmplz-selected-document-controls">
						<button disabled={btnDisabled || selectedDocuments.length>1} className="button button-default" onClick={() => editDocument(selectedDocuments[0])}>{__("Edit","complianz-gdpr")}</button>
						{showDownloadButton && <button disabled={btnDisabled} className="button button-default cmplz-btn-reset" onClick={() => downloadDocuments()}>
							{__("Download Data Breach Report", "complianz-gdpr")}
							{downloading && <Icon name = "loading" color = 'grey' />}
						</button> }
						{!showDownloadButton && <button disabled={true} className="button button-default cmplz-btn-reset" onClick={() => downloadDocuments()}>
							{__("Reporting not required", "complianz-gdpr")}
						</button> }
						<button className="button button-default cmplz-reset-button" onClick={() => onDeleteDocuments(selectedDocuments)}>{__("Delete", "complianz-gdpr")}</button>
					</div>
				</div>
			}

{ DataTable && <>
				<DataTable
					columns={columns}
					data={data}
					dense
					pagination
					paginationPerPage={paginationPerPage}
					onChangePage={handlePageChange}
					paginationState={pagination}
					noDataComponent={<div className="cmplz-no-documents">{__("No documents", "complianz-gdpr")}</div>}
					persistTableHead
					theme="really-simple-plugins"
					customStyles={customStyles}
				/></>
			}
		</>
	)
}
export default memo(DataBreachReportsControl);