@dashadmin/dash-components 1.3.24 → 1.3.26

package/src/components/dialog/InfoV2.tsx

@@ -0,0 +1,35 @@
+import Button from '@mui/material/Button';
+
+const DialogInfoV2 = () => {
+	return (
+		<>
+			<p>
+				<strong>Paquete egresado</strong>
+			</p>
+			<p>
+				<strong style={{ color: '#9A65E0' }}>
+					Fecha y hora: 12/02/2023 12:23:43
+				</strong>
+			</p>
+			<p>
+				<strong style={{ color: '#9A65E0' }}>Estado: En depósito</strong>
+			</p>
+			<br />
+			<Button className='btn-width-lg'>
+				Egresar nuevamente
+			</Button>
+			<br />
+			<br />
+			<Button className='btn-width-lg'>
+				Duplicado
+			</Button>
+			<br />
+			<br />
+			<Button className='btn-width-lg'>
+				Cerrar
+			</Button>
+		</>
+	);
+};
+
+export default DialogInfoV2;

package/src/components/dialog/NotFound.tsx

@@ -0,0 +1,18 @@
+import { Button } from '@mui/material';
+
+const DialogNotFound = () => {
+	return (
+		<>
+			<p>
+				<strong>Lo sentimos</strong>
+			</p>
+			<p>No se ha encontrado lo solicitado</p>
+			<br />
+			<Button className='btn-width-md'>
+				Aceptar
+			</Button>
+		</>
+	);
+};
+
+export default DialogNotFound;

package/src/components/dialog/QuickSearch.tsx

@@ -0,0 +1,115 @@
+import { useEffect, useState } from 'react';
+import Button from '@mui/material/Button';
+import { useNavigate } from 'react-router-dom';
+import * as React from 'react';
+
+import DASHModal from 'dash-modal';
+import { TextField } from '@mui/material';
+import useQuickSearch from '../../hooks/useQuickSearch';
+import setNativeValue from '../../utils/setNativeValue';
+
+export interface IQuickSearch {
+	searchUrl?: string;
+}
+const QuickSearch: React.FC<IQuickSearch> = (props) => {
+	const { searchUrl = '/admin/package' } = props;
+
+	const navigateTo = useNavigate();
+	const [options, setOptions] = useState<{ q: string }>({ q: '' });
+	const [open, setOpen] = React.useState(false);
+	const { sendQuickSearchEvent } = useQuickSearch();
+
+	const inputRef = React.useRef<HTMLInputElement>(null);
+
+	const toggleModal = (value?: boolean) => {
+		if (value === null || value === undefined) {
+			setOpen(true);
+			return;
+		}
+
+		setOpen(!open);
+	};
+	// TODO: [bug] somethomes when clicking fast between pages seems to be related to an infinite loop redirection issue because of the timeout;
+	const search = () => {
+		toggleModal(false);
+		//sendQuickSearchEvent(options.q);
+		// This timeout sends the event that triggers the filters change in the searchUrl target;
+	
+
+		//sendQuickSearchEvent(options.q);
+		//setNativeValue(document.getElementById("quickSearch"),options.q);
+
+		navigateTo({
+			pathname: searchUrl,
+			//search: `filter=${stringify({  quickSearch: options.q}, { arrayFormat: 'bracket', arrayFormatSeparator:":" })}`,
+			//search: `quickSearch=${options.q}`
+		});
+
+		setTimeout(() => {
+			sendQuickSearchEvent(options.q);
+			setNativeValue(document.getElementById("quickSearch"),options.q);
+		}, 2000);
+
+	};
+
+	useEffect(() => {
+		if (open === true) {
+			setTimeout(() => {
+				inputRef.current?.focus();
+			}, 10);
+		}
+	}, [open]);
+
+	return (
+		<>
+			<Button
+				//htmlType="button"
+				//variant="default"
+				className='dash-header-actions-btn'
+				onClick={() => toggleModal(true)}
+			>
+				Búsqueda rápida
+			</Button>
+
+			<DASHModal
+				onCancel={() => {
+					toggleModal(false);
+				}}
+				onConfirm={() => search()}
+				title='Búsqueda rápida'
+				variant={'info'}
+				open={open}
+				confirmText={'Buscar'}
+			>
+				<div
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						alignItems: 'stretch',
+						textAlign: 'left',
+					}}
+				>
+					<TextField
+						inputRef={inputRef}
+						// eslint-disable-next-line jsx-a11y/no-autofocus
+						autoFocus={true}
+						variant='outlined'
+						placeholder='Buscar por nombre, apellido, ID dash'
+						label='Buscar'
+						onChange={({ target: { value } }) =>
+							setOptions((prevState) => ({ ...prevState, q: value }))
+						}
+						onKeyDown={(ev) => {
+							//console.log(`Pressed keyCode ${ev.key}`);
+							if (ev.key === 'Enter') {
+								// Do code here
+								search();
+							}
+						}}
+					/>
+				</div>
+			</DASHModal>
+		</>
+	);
+};
+export default QuickSearch;