hw 4 done

labs/lab4/src/App.jsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import Table from './components/Table.jsx';
 import buildings from './data.js';
 import './CSS/App.css'
+import  Task from './Task.jsx'
 function App() {
   const [count, setCount] = useState(0)
 
@@ -9,6 +10,7 @@ function App() {
     <div className="App">
        <h3>Самые высокие здания и сооружения</h3>
         <Table data={ buildings } amountRows="15" />
+        <Task/>
     </div>
   )
 }

labs/lab4/src/Task.jsx

@@ -0,0 +1,38 @@
+import { useState } from "react";
+const ClickableEntry = (props)=>{
+    const [clickCount,updateClickCount] = useState(0)
+
+    const clickHandler = (event)=>{
+        updateClickCount(clickCount+1);
+        props.updateTotoal();
+    }
+
+    return(
+        <li onClick={clickHandler}>{props.text}{clickCount>0 && `(${clickCount})`}</li>
+    )
+
+}
+
+const Task = (props)=>{
+    const [totalClickCount,updateTotalClickCount] = useState(0)
+    const addOne =()=>{
+        updateTotalClickCount(totalClickCount+1);
+    } 
+    const books = ['Мастер и Маргарита',
+        'Белая гвардия',
+        'Война и мир',
+        'Анна карненина',
+        'Игрок',
+    ]
+    return(
+        <>
+        <ul>
+        {books.map((x,i)=><ClickableEntry text={x} key={i} updateTotoal={addOne}/>)}
+        </ul>
+        <p>Totoal:{totalClickCount}</p>
+        </>
+    )
+}
+
+
+export default Task;

labs/lab4/src/components/Filter.jsx

@@ -33,9 +33,16 @@ const Filter = (props) => {
 
         //передаем родительскому компоненту новое состояние - отфильтрованный массив
         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={handleSubmit}>
+        <form onSubmit={handleSubmit} onReset={doReset}>
             <p>
                 <label>Название:</label>
                 <input name="structure" type="text" />

labs/lab4/src/components/Table.jsx

@@ -20,7 +20,12 @@ const Table = (props) => {
     };
 
     //количество страниц разбиения таблицы
-    const n = Math.ceil(dataTable.length / props.amountRows);
+    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);
@@ -37,7 +42,7 @@ const Table = (props) => {
 
             <table>
                 <TableHead head={Object.keys(props.data[0])} />
-                <TableBody body={dataTable} amountRows={props.amountRows} numPage={activePage} />
+                <TableBody body={dataTable} amountRows={rowCount} numPage={activePage} />
             </table>
 
             {n>1 &&

site/src/components/Filter.jsx

@@ -36,8 +36,16 @@ const Filter = (props) => {
         //передаем родительскому компоненту новое состояние - отфильтрованный массив
         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={handleSubmit}>
+        <form onSubmit={handleSubmit} onReset={doReset}>
             <p>
                 <label>Type:</label>
                 <input name="type" type="text" />

site/src/components/Sorting.jsx

@@ -19,22 +19,24 @@ const SortLevel = (props) => {
 const Sorting = (props) => {
     const [selections, updateSelections] = useState([-1]);
     const [checkboxes, updateCheckboxes] = useState([0]);
+
     const updateOption = (x, id) => {
 
         selections[id] = x;
-        console.log("fixup function called")
+        // console.log("fixup function called")
         let checkboxesCopy = [...checkboxes];
         let selectionsCopy = selections.map((x, i, arr) => {
             if (i < id) {
-                console.log("a", i, x)
+                // console.log("a", i, x)
                 return x;
             }
             if (x != -1 && arr.indexOf(x) != i) {
-                let unusedoption =  
+                let unusedOption = Array.from({ length: props.keys.length }, (_, i) => i).filter((x) => !selections.slice(0, i).includes(x));
-                console.log("b", i, [0])
+                // console.log(unusedOption)
-                return unusedOption;
+                // console.log("b", i, [0])
+                return unusedOption[0];
             }
-            console.log("c", i,x)
+            // console.log("c", i,x)
 
             return x
         })
@@ -57,15 +59,54 @@ const Sorting = (props) => {
     const array = props.array;
     const keys = props.keys;
 
+    const clearSort = (event) => {
+        updateSelections([-1]);
+        updateCheckboxes([0]);
+        applySort();
+    }
 
+    const applySort = (event) => {
+        console.log("calling sort")
+
+        let inverse = [...checkboxes];
+        let selectionsCopy = [...selections];
+        inverse = inverse.filter((x, i) => selectionsCopy[i] != -1);
+        selectionsCopy = selectionsCopy.filter((x, i) => x != -1);
+        let keys = selectionsCopy.map((x) => props.keys[x]);
+        let sortArr = inverse.map((x, i) => {return { "column": keys[i], "direction":x }})
+        // console.log(sortArr)
+        let tempArr = [...props.data];
+        tempArr.sort((first, second) => {
+            for (let { column, direction } of sortArr) {
+                const firstCell = first[column];
+                const secondCell = second[column];
+                let comparison = null;
+                if (typeof (firstCell) != "string") {
+                    comparison = Number(firstCell) - Number(secondCell);
+                }
+                else {
+                    comparison = firstCell.localeCompare(secondCell);
+                }
+                // учитываем направление сортировки
+                if (comparison !== 0) {
+                    return (direction ? -comparison : comparison);
+                }
+            }
+            return 0;
+        });
+        props.returnDataCallback(tempArr);
+        // return tempArr;
+        // console.log(tempArr)
+
+    }
+    props.setApplySort({f:clearSort});
 
 
     return (
         <>
             {
-
                 selections.map((x, i, arr) => {
-                    let curenSelectiontArr = keys.filter((selection) => !arr.slice(0, i).includes(keys.indexOf(selection)))
+                    let curentSelectiontArr = keys.filter((selection) => !arr.slice(0, i).includes(keys.indexOf(selection)))
                     const upadteOptionWrap = (event) => {
                         // console.log(event);
                         updateOption(Number(event.target.value) - 1, i);
@@ -76,12 +117,14 @@ const Sorting = (props) => {
                         checkboxesCopy[i] = Number(event.target.checked);
                         updateCheckboxes(checkboxesCopy);
                     };
-                    if (curenSelectiontArr.length > 0) {
+                    if (curentSelectiontArr.length > 0) {
-                        return <SortLevel key={i} id={"SortLevel" + i} keys={keys} visible={curenSelectiontArr} updateCallback={upadteOptionWrap} checkboxUpdate={updateCheckBoxesWrap} selected={x + 1} reverse={checkboxes[i]} />
+                        return <SortLevel key={i} id={"SortLevel" + i} keys={keys} visible={curentSelectiontArr} updateCallback={upadteOptionWrap} checkboxUpdate={updateCheckBoxesWrap} selected={x + 1} reverse={checkboxes[i]} />
                     }
                 })
 
             }
+            <button onClick={applySort}>Apply Sort</button>
+            <button onClick={clearSort}>Clear Sort</button>
         </>
     )
 }

site/src/components/Table.jsx

@@ -14,8 +14,14 @@ const Table = (props) => {
     const [activePage, setActivePage] = useState("1");
 
     const [dataTable, setDataTable] = useState(props.data);
-    const updateDataTable = (value) => setDataTable(value);
+    const [applySort, setApplySort] = useState({f:(x)=>{x}});
 
+
+
+    const updateDataTable = (value) => {
+        applySort.f();
+        setDataTable(value);
+    }
     const changeActive = (event) => {
         setActivePage(event.target.innerHTML);
     };
@@ -38,7 +44,7 @@ const Table = (props) => {
 
 
             <h4>Sort by</h4>
-            <Sorting data = {dataTable} keys = {Object.keys(props.data[0])}/>
+            <Sorting data = {dataTable} keys = {Object.keys(props.data[0])} returnDataCallback={setDataTable} setApplySort={setApplySort}/>
 
             <table>
                 <TableHead head={Object.keys(props.data[0])} />