Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 10425 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 10425 Rev 11265
Línea 1... Línea 1...
1 
import React, { useCallback, useState } from 'react'
 1 
import React, { useCallback, useState } from 'react'
2 
import { useEffect } from 'react';
 2 
import { useEffect } from 'react'
Línea 3... Línea 3...
3 
 
 3 
 
4 
const sortData = ({ tableData, sortKey, reverse }) => {
 4 
const sortData = ({ tableData, sortKey, reverse }) => {
Línea 5... Línea 5...
5 
    let sortedData
 5 
	let sortedData
Línea 6... Línea 6...
6 
 
 6 
 
7 
    if (!sortKey) return tableData;
 7 
	if (!sortKey) return tableData
8 
 
 8 
 
9 
    if (sortKey !== "name") {
 9 
	if (sortKey !== 'name') {
10 
        sortedData = tableData.sort((a, b) => {
 10 
		sortedData = tableData.sort((a, b) => {
11 
            return a[sortKey] - b[sortKey];
 11 
			return a[sortKey] - b[sortKey]
12 
        });
 12 
		})
13 
    } else {
 13 
	} else {
14 
        sortedData = tableData.sort((a, b) => {
 14 
		sortedData = tableData.sort((a, b) => {
15 
            return a[sortKey] > b[sortKey] ? 1 : -1;
 15 
			return a[sortKey] > b[sortKey] ? 1 : -1
16 
        });
 16 
		})
17 
    }
 17 
	}
18 
 
 18 
 
Línea 19... Línea 19...
19 
    if (reverse) {
 19 
	if (reverse) {
20 
        return sortedData.reverse();
 20 
		return sortedData.reverse()
Línea 21... Línea 21...
21 
    }
 21 
	}
22 
 
 22 
 
23 
    return sortedData;
 23 
	return sortedData
24 
}
 24 
}
25 
 
 25 
 
26 
const SortButton = ({ sortOrder, columnKey, sortKey, onClick }) => {
 26 
const SortButton = ({ sortOrder, columnKey, sortKey, onClick }) => {
27 
    return (
 27 
	return (
28 
        <button onClick={onClick} className="btn">
 28 
		<button onClick={onClick} className="btn">
29 
            {
 29 
			{
30 
                (sortKey === columnKey) && (sortOrder === "desc")
 30 
				(sortKey === columnKey) && (sortOrder === 'desc')
31 
                    ? <i className='fa fa-angle-up' />
 31 
					? <i className='fa fa-angle-up' />
Línea 32... Línea 32...
32 
                    : <i className='fa fa-angle-down' />
 32 
					: <i className='fa fa-angle-down' />
Línea 33... Línea 33...
33 
            }
 33 
			}
34 
        </button>
 34 
		</button>
Línea 35... Línea 35...
35 
    );
 35 
	)
36 
}
 36 
}
37 
 
 37 
 
38 
export const Table = ({ data = [], headers, setData, children }) => {
 38 
export const Table = ({ data = [], headers, setData, children }) => {
39 
 
 39 
 
40 
    const [sortKey, setSortKey] = useState("name");
 40 
	const [sortKey, setSortKey] = useState('name')
41 
    const [sortOrder, setSortOrder] = useState("ascn");
 41 
	const [sortOrder, setSortOrder] = useState('ascn')
42 
 
 42 
 
43 
    const sortedData = useCallback(
 43 
	const sortedData = useCallback(
44 
        () => sortData({ tableData: data, sortKey, reverse: sortOrder === "desc" }),
 44 
		() => sortData({ tableData: data, sortKey, reverse: sortOrder === 'desc' }),
45 
        [data, sortKey, sortOrder]
 45 
		[data, sortKey, sortOrder]
46 
    );
 46 
	)
47 
 
 47 
 
48 
    const changeSort = (key) => {
 48 
	const changeSort = (key) => {
49 
        setSortOrder(sortOrder === "ascn" ? "desc" : "ascn");
 49 
		setSortOrder(sortOrder === 'ascn' ? 'desc' : 'ascn')
50 
 
 50 
 
51 
        setSortKey(key);
 51 
		setSortKey(key)
52 
    }
 52 
	}
53 
 
 53 
 
54 
    useEffect(() => {
 54 
	useEffect(() => {
55 
        setData(prev => ({ ...prev, items: sortedData() }))
 55 
		setData(prev => ({ ...prev, items: sortedData() }))
56 
    }, [sortKey, sortOrder])
 56 
	}, [sortKey, sortOrder])
57 
 
 57 
 
58 
    return (
 58 
	return (
59 
        <table className="table table-hover dataTable no-footer dtr-inline">
 59 
		<table className="table table-hover dataTable no-footer dtr-inline w-100">
60 
            <thead>
 60 
			<thead>
61 
                <tr>
 61 
				<tr>
62 
                    {
 62 
					{
63 
                        headers.map((row) => (
 63 
						headers.map((row) => (
64 
                            <th key={row.key} className="text-vertical-middle">
 64 
							<th key={row.key} className="text-vertical-middle">
65 
                                {row.label}
 65 
								{row.label}
66 
                                {
 66 
								{
67 
                                    row.isSorteable
 67 
									row.isSorteable
68 
                                    &&
 68 
                                    &&
69 
                                    <SortButton
 69 
                                    <SortButton
70 
                                        columnKey={row.key}
 70 
                                    	columnKey={row.key}
71 
                                        onClick={() => changeSort(row.key)}
 71 
                                    	onClick={() => changeSort(row.key)}
72 
                                        {...{
 72 
                                    	{...{
73 
                                            sortOrder,
 73 
                                    		sortOrder,
74 
                                            sortKey,
 74 
                                    		sortKey,
75 
                                        }}
 75 
                                    	}}
76 
                                    />
 76 
                                    />
77 
                                }
 77 
								}
78 
                            </th>
 78 
							</th>
79 
                        ))
 79 
						))
80 
                    }
 80 
					}
Línea 81... Línea 81...
81 
                </tr>
 81 
				</tr>
82 
            </thead>
 82 
			</thead>
83 
            <tbody>
 83 
			<tbody>
84 
                {children}
 84 
				{children}
85 
            </tbody>
 85 
			</tbody>
86 
        </table >
 86 
		</table >
87 
    );
 87 
	)
88 
}
 88 
}
89 
 
 89 
 
90 
export const TablePagination = ({ onDecrement, onIncrement, currentPage, totalPages }) => {
 90 
export const TablePagination = ({ onDecrement, onIncrement, currentPage, totalPages }) => {
91 
    return (
 91 
	return (
92 
        <ul className="pagination mb-0">
 92 
		<ul className="pagination mb-0">
93 
            <li className="paginate_button page-item previous">
 93 
			<li className="paginate_button page-item previous">
94 
                <button
 94 
				<button
95 
                    type='button'
 95 
					type='button'
96 
                    className="page-link"
 96 
					className="page-link"
97 
                    disabled={currentPage === 1}
 97 
					disabled={currentPage === 1}
98 
                    onClick={onDecrement}
 98 
					onClick={onDecrement}
99 
                >
 99 
				>
100 
                    <i className='fa fa-angle-left' />
 100 
					<i className='fa fa-angle-left' />
101 
                </button>
 101 
				</button>
102 
            </li>
 102 
			</li>
103 
            <li className="paginate_button page-item">
 103 
			<li className="paginate_button page-item">
104 
                <button className="page-link">
 104 
				<button className="page-link">
105 
                    {currentPage}
 105 
					{currentPage}
106 
                </button>
 106 
				</button>
107 
            </li>
 107 
			</li>
108 
            <li className="paginate_button page-item next">
 108 
			<li className="paginate_button page-item next">
109 
                <button
 109 
				<button
110 
                    type='button'
 110 
					type='button'
111 
                    className="page-link"
 111 
					className="page-link"
Línea 112... Línea 112...
112 
                    disabled={currentPage === totalPages}
 112 
					disabled={currentPage === totalPages}
113 
                    onClick={onIncrement}
 113 
					onClick={onIncrement}
114 
                >
 114 
				>
115 
                    <i className='fa fa-angle-right' />
 115 
					<i className='fa fa-angle-right' />
116 
                </button>
 116 
				</button>
117 
            </li>
 117 
			</li>
118 
        </ul>
 118 
		</ul>
119 
    )
 119 
	)
120 
}
 120 
}
121 
 
 121 
 
122 
Table.Footer = function TableFooter({ children, startItem, lastItem, total }) {
 122 
Table.Footer = function TableFooter({ children, startItem, lastItem, total }) {
123 
    return (
 123 
	return (
124 
        <div className="row">
 124 
		<div className="row">
125 
            <div className="col-sm-12 col-md-5">
 125 
			<div className="col-sm-12 col-md-5">
126 
                <div className="dataTables_info" >
 126 
				<div className="dataTables_info" >
127 
                    {`Mostrando registros del ${startItem || 0} al ${lastItem || 0} de un total de ${total || 0} registros`}
 127 
					{`Mostrando registros del ${startItem || 0} al ${lastItem || 0} de un total de ${total || 0} registros`}
Línea 128... Línea 128...
128 
                </div>
 128 
				</div>
Línea 129... Línea 129...
129 
            </div>
 129 
			</div>
Línea 130... Línea 130...
130 
            <div className="col-sm-12 col-md-7">
 130 
			<div className="col-sm-12 col-md-7">
131 
                <div className="d-flex justify-content-end">
 131 
				<div className="d-flex justify-content-end">
132 
                    {children}
 132 
					{children}
133 
                </div>
 133 
				</div>
134 
            </div>
 134 
			</div>
135 
        </div>
 135 
		</div>
136 
    )
 136 
	)
137 
}
 137 
}
138 
 
 138 
 
139 
export function LengthFilter({ onChange }) {
 139 
export function LengthFilter({ onChange }) {
140 
 
 140 
 
141 
    const lengthValues = ["10", "25", "50", "100"]
 141 
	const lengthValues = ['10', '25', '50', '100']
142 
 
 142 
 
143 
    return (
 143 
	return (
144 
        <label className='d-inline-flex'>
 144 
		<label className='d-inline-flex'>
145 
            Mostrar
 145 
            Mostrar
146 
            <select
 146 
			<select
Línea 147... Línea 147...
147 
                className="custom-select custom-select-sm form-control form-control-sm"
 147 
				className="custom-select custom-select-sm form-control form-control-sm"
Línea 148... Línea 148...
148 
                onChange={onChange}
 148 
				onChange={onChange}
149 
            >
 149 
			>
150 
                {
 150 
				{
151 
                    lengthValues.map((value, index) => (
 151 
					lengthValues.map((value, index) => (
152 
                        <option key={index} value={value}>{value}</option>
 152 
						<option key={index} value={value}>{value}</option>
153 
                    ))
 153 
					))
154 
                }
 154 
				}
155 
            </select>
 155 
			</select>
156 
            registros
 156 
            registros
157 
        </label>
 157 
		</label>
158 
    )
 158 
	)
159 
}
 159 
}