forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-13 02:53:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added button to reset visits selection

Browse Source
This commit is contained in:
Alejandro Celaya
2020-04-10 13:27:01 +02:00
parent b863c2e19d
commit 3851342e1b
1 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/visits/ShortUrlVisits.js
View File

@@ -3,6 +3,7 @@ import React, { useState, useEffect, useMemo } from 'react';
import { Button, Card, Collapse } from 'reactstrap'; import { Button, Card, Collapse } from 'reactstrap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import qs from 'qs'; import qs from 'qs';
import classNames from 'classnames';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronDown as chevronDown } from '@fortawesome/free-solid-svg-icons'; import { faChevronDown as chevronDown } from '@fortawesome/free-solid-svg-icons';
import DateRangeRow from '../utils/DateRangeRow'; import DateRangeRow from '../utils/DateRangeRow';
@@ -61,6 +62,10 @@ const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModa
const [ highlightedVisits, setHighlightedVisits ] = useState([]); const [ highlightedVisits, setHighlightedVisits ] = useState([]);
const [ isMobileDevice, setIsMobileDevice ] = useState(false); const [ isMobileDevice, setIsMobileDevice ] = useState(false);
const determineIsMobileDevice = () => setIsMobileDevice(matchMedia('(max-width: 991px)').matches); const determineIsMobileDevice = () => setIsMobileDevice(matchMedia('(max-width: 991px)').matches);
const setSelectedVisits = (selectedVisits) => {
selectedBar = undefined;
setHighlightedVisits(selectedVisits);
};
const highlightVisitsForProp = (prop) => (value) => { const highlightVisitsForProp = (prop) => (value) => {
const newSelectedBar = `${prop}_${value}`; const newSelectedBar = `${prop}_${value}`;
@@ -182,7 +187,7 @@ const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModa
<section className="mt-4"> <section className="mt-4">
<div className="row flex-md-row-reverse"> <div className="row flex-md-row-reverse">
<div className="col-lg-8 col-xl-6"> <div className="col-lg-7 col-xl-6">
<DateRangeRow <DateRangeRow
disabled={loading} disabled={loading}
startDate={startDate} startDate={startDate}
@@ -191,12 +196,26 @@ const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModa
onEndDateChange={setEndDate} onEndDateChange={setEndDate}
/> />
</div> </div>
<div className="col-lg-4 col-xl-6 mt-4 mt-lg-0"> <div className="col-lg-5 col-xl-6 mt-4 mt-lg-0">
{showTableControls && ( {showTableControls && (
<Button outline block={isMobileDevice} onClick={toggleTable}> <span className={classNames({ 'row flex-row-reverse': isMobileDevice })}>
{showTable ? 'Hide' : 'Show'} table <span className={classNames({ 'col-6': isMobileDevice })}>
<FontAwesomeIcon icon={chevronDown} rotation={showTable ? 180 : undefined} className="ml-2" /> <Button outline color="primary" block={isMobileDevice} onClick={toggleTable}>
</Button> {showTable ? 'Hide' : 'Show'} table
<FontAwesomeIcon icon={chevronDown} rotation={showTable ? 180 : undefined} className="ml-2" />
</Button>
</span>
<span className={classNames({ 'col-6': isMobileDevice, 'ml-2': !isMobileDevice })}>
<Button
outline
disabled={highlightedVisits.length === 0}
block={isMobileDevice}
onClick={() => setSelectedVisits([])}
>
Reset selection
</Button>
</span>
</span>
)} )}
</div> </div>
</div> </div>
@@ -212,10 +231,7 @@ const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModa
<VisitsTable <VisitsTable
visits={normalizedVisits} visits={normalizedVisits}
selectedVisits={highlightedVisits} selectedVisits={highlightedVisits}
setSelectedVisits={(selectedVisits) => { setSelectedVisits={setSelectedVisits}
selectedBar = undefined;
setHighlightedVisits(selectedVisits);
}}
isSticky={tableIsSticky} isSticky={tableIsSticky}
/> />
</Collapse> </Collapse>