Живой поиск по таблице, Material Design
Всем привет! Впервые работаю с материал дизайн, да и опыта на реакте очень мало. Нарисовал таблицу, таблица принимает инфу с бэка. Над таблицей у меня есть строка поиска. Как сделвть так чтоб эта строка поиска у меня искала инфу/стринги по таблице. Спасибо вам огромное :D P/S: не обращайте внимание на чекбоксы и на функции который убирает столбики с таблицы.
import React, { useState, useEffect } from "react";
import { Select } from "../../components/Select";
import { Grid, GridCell, GridRow } from "../../components/Grid";
import { IconButton } from "../../components/IconButton";
import { MenuSurface } from "../../components/MenuSurface";
import { TextField } from "../TextField";
import { Option } from "../../models/Option";
import { APIDataTable, Column } from "../APIDataTable";
import { Mail } from "../../models/Mail";
import { DatePicker } from "../DatePicker";
import { Organization } from "../../models/Organization";
import { Button } from "../Button";
import { Dialog } from "../../components/Dialog";
import "./index.css";
import { Checkbox } from "../Checkbox";
import { useHistory } from "react-router-dom";
export default () => {
const [isOpen, setIsOpen] = useState(false);
const [onFocus, setOnFocus] = useState(false);
const [onCancelClick, setOnCancelClick] = useState(false);
const [onOkClick, setOnOkClick] = useState(false);
const [isDialogOpen, setDialogOpen] = useState(false);
const [isDataTable, setDataTable] = useState(true);
const [isDefaultChecked, setDefaultChecked] = useState(true);
const [isChecked, setChecked] = useState();
const [isColumn, setColumn] = useState(true);
const localHiddentColumns = JSON.parse(localStorage.getItem("hiddenColumns"));
const [hiddenColumns, setHiddenColumns] = useState<string[]>([]);
const [Checked, setIsChecked] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const localHiddentColumns = JSON.parse(
localStorage.getItem("hiddenColumns")
);
if (!!localHiddentColumns) {
setHiddenColumns(localHiddentColumns);
setLoading(false);
}
}, []);
const onCheckboxChange = (key: string, value: boolean) => {
console.log(key, value);
if (!value) {
setHiddenColumns((hiddenColumns) => [...hiddenColumns, key]);
} else {
setHiddenColumns((hiddenColumns) => {
const array = [...hiddenColumns];
array.splice(array.indexOf(key), 1);
return array;
});
}
};
const history = useHistory();
const onRowClick = (mail: Mail) => {
history.push({
pathname: "/edm/external/incoming",
search: `?id=${mail.id}`,
});
};
const columns: Column<Mail>[] = [];
if (!hiddenColumns.includes("incomigNumber")) {
columns.push(
new Column<Mail>({
label: "Входящий номер",
render: (row) => {
return row.incomingNumberText;
},
width: 149,
})
);
}
if (!hiddenColumns.includes("RegDate")) {
columns.push(
new Column<Mail>({
label: "Дата регистрации",
render: (row) => {
return row.incomingDateText;
},
width: 155,
})
);
}
if (!hiddenColumns.includes("organization")) {
columns.push(
new Column<Mail>({
label: "Наименование организации/ФИО",
render: (row) => {
return row.organizationNameOrFullName;
},
width: 300,
})
);
}
if (!hiddenColumns.includes("outgoingNumber")) {
columns.push(
new Column<Mail>({
label: "Исходящий номер",
render: (row) => {
return row.outgoingNumberText;
},
width: 160,
})
);
}
if (!hiddenColumns.includes("outgoingDate")) {
columns.push(
new Column<Mail>({
label: "Исходящая дата",
render: (row) => {
return row.outgoingDateText;
},
width: 150,
})
);
}
if (!hiddenColumns.includes("documentType")) {
columns.push(
new Column<Mail>({
label: "Вид документа",
render: (row) => {
return row.documentTypeText;
},
})
);
}
if (!hiddenColumns.includes("description")) {
columns.push(
new Column<Mail>({
label: "Краткое содержание",
render: (row) => {
return row.descriptionText;
},
width: 400,
})
);
}
if (!hiddenColumns.includes("documentStatus")) {
columns.push(
new Column<Mail>({
label: "Статус документа",
render: (row) => {
return row.statusText;
},
width: 160,
})
);
}
if (!hiddenColumns.includes("executionDate")) {
columns.push(
new Column<Mail>({
label: "Дата исполнения",
render: (row) => {
return row.executionDateText;
},
width: 150,
})
);
}
if (loading) return null;
return (
<>
<h2 className="head">Журнал регистрации документов</h2>
<div className="search-test" id="element">
<label
className="mdc-text-field mdc-text-field--filled mdc-text-field--no-label mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon"
htmlFor="input"
id="search-menu-surface"
>
<IconButton density={-1} icon="search" />
<input
className="mdc-text-field__input "
type="text"
placeholder="Поиск"
id="searchinput"
/>
<IconButton
density={-1}
icon="arrow_drop_down"
onClick={() => {
setIsOpen(true);
}}
/>
</label>
<IconButton
onClick={() => {
setDialogOpen(true);
}}
density={-1}
icon="settings"
/>
<Dialog
isOpen={isDialogOpen}
onOkClick={() => {
localStorage.setItem(
"hiddenColumns",
JSON.stringify(hiddenColumns)
);
console.log(hiddenColumns);
setDialogOpen(false);
}}
onCloseClick={() => setDialogOpen(false)}
>
<div>
<Checkbox
defaultChecked={!hiddenColumns.includes("incomigNumber")}
label="Входящий номер"
onChange={(value) => onCheckboxChange("incomigNumber", value)}
/>
</div>
<div>
<Checkbox
defaultChecked={!hiddenColumns.includes("RegDate")}
label="Дата регистрации"
onChange={(value) => onCheckboxChange("RegDate", value)}
/>
</div>
<div>
<Checkbox
defaultChecked={!hiddenColumns.includes("organization")}
label="Наименование организации/ФИО"
onChange={(value) => onCheckboxChange("organization", value)}
/>
</div>
<div>
<Checkbox
defaultChecked={!hiddenColumns.includes("outgoingNumber")}
label="Исходящий номер"
onChange={(value) => onCheckboxChange("outgoingNumber", value)}
/>
</div>
<div>
<Checkbox
defaultChecked={!hiddenColumns.includes("outgoingDate")}
label="Исходящая дата"
onChange={(value) => onCheckboxChange("outgoingDate", value)}
/>
</div>
<div>
<Checkbox
defaultChecked={!hiddenColumns.includes("documentType")}
label="Вид документа"
onChange={(value) => onCheckboxChange("documentType", value)}
/>
</div>
<div>
<Checkbox
defaultChecked={!hiddenColumns.includes("description")}
label="Краткое содержание"
onChange={(value) => onCheckboxChange("description", value)}
/>
</div>
<div>
<Checkbox
defaultChecked={!hiddenColumns.includes("documentStatus")}
label="Статус документа"
onChange={(value) => onCheckboxChange("documentStatus", value)}
/>
</div>
<div>
<Checkbox
defaultChecked={!hiddenColumns.includes("executionDate")}
label="Дата исполнения"
onChange={(value) => onCheckboxChange("executionDate", value)}
/>
</div>
</Dialog>
<div className="filters-menu-surface">
<MenuSurface
anchorElementId="search-menu-surface"
isOpen={isOpen}
onClose={() => setIsOpen(false)}
>
<Grid>
<GridRow>
<GridCell span={3}>
<Select<Option>
type={Option}
label="Входящий номер"
api="/dicts/edo/incomingNumber"
required
/>
</GridCell>
<GridCell span={3}>
<DatePicker label="Дата регистрации" required />
</GridCell>
<GridCell span={6}>
<Select<Organization>
label="Наименование организации"
api="/organization/correspondents"
required
search
type={Organization}
/>
</GridCell>
</GridRow>
<GridRow>
<GridCell span={3}>
<TextField label="Исходящий номер" required />
</GridCell>
<GridCell span={3}>
<DatePicker label="Исходящая дата" required />
</GridCell>
<GridCell span={3}>
<Select<Option>
type={Option}
label="Вид документа"
api="/dicts/edo/document-kinds"
required
search
/>
</GridCell>
</GridRow>
<GridRow>
<GridCell span={12}>
<TextField
textarea
label="Краткое содержание"
maxLength={512}
required
/>
</GridCell>
<GridCell span={3}>
<Select<Option>
type={Option}
label="Статус документа"
//api="/dicts/edo/document-kinds"
required
search
/>
</GridCell>
<GridCell span={3}>
<DatePicker label="Дата исполнения" required />
</GridCell>
</GridRow>
<GridRow>
<GridCell span={2}>
<Button label="Поиск" raised />
<Button
label="Отмена"
raised
onClick={() => {
setIsOpen(false);
}}
/>
</GridCell>
</GridRow>
</Grid>
</MenuSurface>
</div>
</div>
<div>
<APIDataTable<Mail>
apiPath="/edo/chancellery/maildoc_extinc"
params="?registered=true"
type={Mail}
onRowClick={onRowClick}
columns={columns}
/>
</div>
</>
);
};