lab5 folder create

labs/lab5/src/components/Filter.jsx

@@ -0,0 +1,83 @@
+/*
+   компонент, для фильтрации таблицы
+   пропсы:
+      fullData - полные данные, по которым формировалась таблица при загрузке страницы
+      data - данные для фильтрации
+      filtering - функция обновления данных для фильтрации
+*/
+
+const Filter = (props) => {
+
+    const handleSubmit = (event) => {
+        event.preventDefault();
+
+        // создаем словарь со значениями полей формы
+        const filterField = {
+            "Название": event.target["structure"].value.toLowerCase(),
+            "Тип": event.target["type"].value.toLowerCase(),
+            "Страна": event.target["country"].value.toLowerCase(),
+            "Город": event.target["city"].value.toLowerCase(),
+            "Год":[event.target["yearFrom"].value==""?null:Number(event.target["yearFrom"].value),event.target["yearTo"].value==""?null:Number(event.target["yearTo"].value)],
+            "Высота":[event.target["heightFrom"].value==""?null:Number(event.target["heightFrom"].value),event.target["heightTo"].value==""?null:Number(event.target["heightTo"].value)]
+        };
+
+        //фильтруем данные по значениям всех полей формы
+        let arr = props.fullData;
+        for (const key in filterField) {
+            arr = arr.filter(item =>
+                typeof(filterField[key])=="object"?
+            (filterField[key][0]==null? true:item[key]>=filterField[key][0] )&&(filterField[key][1]==null? true:item[key]<=filterField[key][1] ) :
+                item[key].toLowerCase().includes(filterField[key])
+            )
+        }
+
+        //передаем родительскому компоненту новое состояние - отфильтрованный массив
+        props.filtering(arr);
+    }
+        const doReset=(event)=>{
+        event.target.querySelectorAll("input[type=\"number\"],input[type=\"text\"]").forEach(element => {
+            element.value=null;
+        });
+        handleSubmit(event);
+
+    }    
+    return (
+        <form onSubmit={handleSubmit} onReset={doReset}>
+            <p>
+                <label>Название:</label>
+                <input name="structure" type="text" />
+            </p>
+            <p>
+                <label>Тип:</label>
+                <input name="type" type="text" />
+            </p>
+            <p>
+                <label>Страна:</label>
+                <input name="country" type="text" />
+            </p>
+            <p>
+                <label>Город:</label>
+                <input name="city" type="text" />
+            </p>
+             <p>
+                <label>Год от:</label>
+                <input name="yearFrom" type="number" />
+                <label>до:</label>
+                <input name="yearTo" type="number" />
+            </p>
+             <p>
+                <label>Высота от:</label>
+                <input name="heightFrom" type="number" />
+                <label>до:</label>
+                <input name="heightTo" type="number" />
+            </p>
+            
+            <p>
+                <button type="submit">Фильтровать</button>
+                <button type="reset">Очистить фильтр</button>
+            </p>
+        </form>
+            )
+}
+
+            export default Filter;

labs/lab5/src/components/Table.jsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import TableHead from './TableHead.jsx';
+import TableBody from './TableBody.jsx';
+import Filter from './Filter.jsx';
+
+/*
+   компонент, выводящий на страницу таблицу с пагинацией
+   пропсы:
+      data - данные для таблицы в виде массива объектов
+*/
+
+const Table = (props) => {
+    const [activePage, setActivePage] = useState("1");
+
+    const [dataTable, setDataTable] = useState(props.data);
+    const updateDataTable = (value) => setDataTable(value);
+
+    const changeActive = (event) => {
+        setActivePage(event.target.innerHTML);
+    };
+
+    //количество страниц разбиения таблицы
+    let n = Math.ceil(dataTable.length / props.amountRows);
+    let rowCount = props.amountRows;
+    if(props.disablePagination){
+        n=1;
+        rowCount=dataTable.length;
+    }
+
+    // массив с номерами страниц
+    const arr = Array.from({ length: n }, (v, i) => i + 1);
+
+    //формируем совокупность span с номерами страниц
+    const pages = arr.map((item, index) =>
+        <span className={index == (activePage - 1) ? "selected" : ""} key={index} onClick={changeActive}> {item} </span>
+    );
+
+    return (
+        <>
+            <h4>Фильтры</h4>
+            <Filter filtering={updateDataTable} data={dataTable} fullData={props.data} />
+
+            <table>
+                <TableHead head={Object.keys(props.data[0])} />
+                <TableBody body={dataTable} amountRows={rowCount} numPage={activePage} />
+            </table>
+
+            {n>1 &&
+                <div>
+                    {pages}
+                </div>
+            }
+        </>
+    )
+}
+
+export default Table;

labs/lab5/src/components/TableBody.jsx

@@ -0,0 +1,33 @@
+import TableRow from './TableRow.jsx';
+
+/*
+   компонент, для вывода tbody таблицы
+   пропсы:
+      body - данные для таблицы в виде массива объектов
+      numPage - номер текущей страницы
+      amountRows - количество строк таблицы на странице
+*/
+
+const TableBody = (props) => {
+    // номера строк, отображаемых на странице
+    const begRange = (props.numPage - 1) * props.amountRows;
+    const endRange = begRange + Number(props.amountRows);
+
+    //формируем строки на основе переданных данных
+    const tbody = props.body.map((item, index) =>
+       // оставляем видимыми только строки, индексы которых принадлежат интервалу
+        <tr key={index} className={
+           (index >= begRange && index < endRange) ? "show" : "hide"
+        }> 
+            <TableRow row={ Object.values(item) } isHead="0"/>
+        </tr>
+        ); 
+ 
+    return (
+        <tbody>
+            {tbody}
+        </tbody>
+    )
+}
+
+export default TableBody;

labs/lab5/src/components/TableHead.jsx

@@ -0,0 +1,18 @@
+import TableRow from './TableRow.jsx';
+
+/*
+   компонент, для вывода thead таблицы
+   пропсы:
+      head - данные для шапки таблицы в виде массива
+*/
+const TableHead = (props) => {
+    return (
+        <thead>
+            <tr>   
+                <TableRow row={ props.head } isHead="1"/>
+            </tr>
+        </thead>
+    )
+}
+
+export default TableHead;

labs/lab5/src/components/TableRow.jsx

@@ -0,0 +1,19 @@
+/*
+   компонент, для вывода строки таблицы
+   пропсы:
+      row - данные для формирования ячеек строки таблицы в виде массива
+      isHead - 0 - если формируются ячейки td, 1 - если формируются ячейки th
+*/
+
+const TableRow = (props) => {
+
+    const cells = (props.isHead == "0") 
+        ? props.row.map((item, index) => <td key={ index }> {item} </td>) 
+        : props.row.map((item, index) => <th key={ index }> {item} </th>);
+ 
+    return(
+        <> {cells} </>
+    )
+}
+
+export default TableRow;