39 lines
1.9 KiB
JavaScript
39 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
import {useTranslation} from "react-i18next";
|
|
import {Modal} from "react-bootstrap";
|
|
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
|
|
import {faArrowRight, faSearch} from "@fortawesome/free-solid-svg-icons";
|
|
import {getViewTitle} from "../../views/query/QueryResultView";
|
|
import {ChartLoader} from "../navigation/Loader";
|
|
import {Link} from "react-router-dom";
|
|
import {useAuth} from "../../hooks/authenticationHook";
|
|
import PlayerTable from "../table/PlayerTable.jsx";
|
|
|
|
const QueryPlayerListModal = ({open, toggle, queryData, title}) => {
|
|
const {t} = useTranslation();
|
|
const {hasPermission} = useAuth();
|
|
return (
|
|
<Modal id="queryModal" aria-labelledby="queryModalLabel" show={open} onHide={toggle} size="xl">
|
|
<Modal.Header>
|
|
<Modal.Title id="queryModalLabel">
|
|
<Fa icon={faSearch}/> {queryData ? title || getViewTitle(queryData, t, true) : t('html.query.title.text').replace('<', '')}
|
|
</Modal.Title>
|
|
<button aria-label="Close" className="btn-close" type="button" onClick={toggle}/>
|
|
</Modal.Header>
|
|
{!queryData && <ChartLoader/>}
|
|
{queryData &&
|
|
<PlayerTable data={queryData?.data?.players || {players: [], extensionDescriptors: []}}
|
|
orderBy={2}/>}
|
|
<Modal.Footer>
|
|
{hasPermission('access.query') && Boolean(queryData?.data?.players.players.length) &&
|
|
<Link className="btn bg-theme"
|
|
to={"/query/result?timestamp=" + queryData?.timestamp}>
|
|
{t('html.query.label.showFullQuery')} <Fa icon={faArrowRight}/>
|
|
</Link>}
|
|
<button className="btn bg-theme" onClick={toggle}>OK</button>
|
|
</Modal.Footer>
|
|
</Modal>
|
|
)
|
|
};
|
|
|
|
export default QueryPlayerListModal |