Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev 10061 Rev 10545
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">
60
            <thead>
60
			<thead>
61
                <tr>
-
 
62
                    {
-
 
63
                        headers.map((row) => (
61
				<tr>
64
                            <th key={row.key} className="text-vertical-middle">
-
 
65
                                {row.label}
-
 
66
                                {
-
 
67
                                    row.isSorteable
-
 
68
                                    &&
-
 
69
                                    <SortButton
62
					{
70
                                        columnKey={row.key}
63
						headers.map((row) => (
71
                                        onClick={() => changeSort(row.key)}
64
							<th key={row.key} className="text-vertical-middle">
72
                                        {...{
65
								{row.label}
73
                                            sortOrder,
66
								{
74
                                            sortKey,
67
									row.isSorteable
75
                                        }}
68
                                    &&
76
                                    />
69
                                    <SortButton columnKey={row.key} onClick={() => changeSort(row.key)} {...{ sortOrder, sortKey, }} />
77
                                }
70
								}
78
                            </th>
71
							</th>
79
                        ))
72
						))
80
                    }
73
					}
Línea 81... Línea 74...
81
                </tr>
74
				</tr>
82
            </thead>
75
			</thead>
83
            <tbody>
76
			<tbody>
84
                {children}
77
				{children}
85
            </tbody>
78
			</tbody>
86
        </table >
79
		</table >
87
    );
80
	)
88
}
81
}
89
 
82
 
90
export const TablePagination = ({ onDecrement, onIncrement, currentPage, totalPages }) => {
83
export const TablePagination = ({ onDecrement, onIncrement, currentPage, totalPages }) => {
91
    return (
84
	return (
92
        <ul className="pagination mb-0">
85
		<ul className="pagination mb-0">
93
            <li className="paginate_button page-item previous">
86
			<li className="paginate_button page-item previous">
94
                <button
87
				<button
95
                    type='button'
88
					type='button'
96
                    className="page-link"
89
					className="page-link"
97
                    disabled={currentPage === 1}
90
					disabled={currentPage === 1}
98
                    onClick={onDecrement}
91
					onClick={onDecrement}
99
                >
92
				>
100
                    <i className='fa fa-angle-left' />
93
					<i className='fa fa-angle-left' />
101
                </button>
94
				</button>
102
            </li>
95
			</li>
103
            <li className="paginate_button page-item">
96
			<li className="paginate_button page-item">
104
                <button className="page-link">
97
				<button className="page-link">
105
                    {currentPage}
98
					{currentPage}
106
                </button>
99
				</button>
107
            </li>
100
			</li>
108
            <li className="paginate_button page-item next">
101
			<li className="paginate_button page-item next">
109
                <button
102
				<button
110
                    type='button'
103
					type='button'
111
                    className="page-link"
104
					className="page-link"
Línea 112... Línea 105...
112
                    disabled={currentPage === totalPages}
105
					disabled={currentPage === totalPages}
113
                    onClick={onIncrement}
106
					onClick={onIncrement}
114
                >
107
				>
115
                    <i className='fa fa-angle-right' />
108
					<i className='fa fa-angle-right' />
116
                </button>
109
				</button>
117
            </li>
110
			</li>
118
        </ul>
111
		</ul>
119
    )
112
	)
120
}
113
}
121
 
114
 
122
Table.Footer = function TableFooter({ children, startItem, lastItem, total }) {
115
Table.Footer = function TableFooter({ children, startItem, lastItem, total }) {
123
    return (
116
	return (
124
        <div className="row">
117
		<div className="row">
125
            <div className="col-sm-12 col-md-5">
118
			<div className="col-sm-12 col-md-5">
126
                <div className="dataTables_info" >
119
				<div className="dataTables_info" >
127
                    {`Mostrando registros del ${startItem || 0} al ${lastItem || 0} de un total de ${total || 0} registros`}
120
					{`Mostrando registros del ${startItem || 0} al ${lastItem || 0} de un total de ${total || 0} registros`}
Línea 128... Línea 121...
128
                </div>
121
				</div>
Línea 129... Línea 122...
129
            </div>
122
			</div>
Línea 130... Línea 123...
130
            <div className="col-sm-12 col-md-7">
123
			<div className="col-sm-12 col-md-7">
131
                <div className="d-flex justify-content-end">
124
				<div className="d-flex justify-content-end">
132
                    {children}
125
					{children}
133
                </div>
126
				</div>
134
            </div>
127
			</div>
135
        </div>
128
		</div>
136
    )
129
	)
137
}
130
}
138
 
131
 
139
export function LengthFilter({ onChange }) {
132
export function LengthFilter({ onChange }) {
140
 
133
 
141
    const lengthValues = ["10", "25", "50", "100"]
134
	const lengthValues = ['10', '25', '50', '100']
142
 
135
 
143
    return (
136
	return (
144
        <label className='d-inline-flex'>
137
		<label className='d-inline-flex'>
145
            Mostrar
138
            Mostrar
146
            <select
139
			<select
Línea 147... Línea 140...
147
                className="custom-select custom-select-sm form-control form-control-sm"
140
				className="custom-select custom-select-sm form-control form-control-sm"
Línea 148... Línea 141...
148
                onChange={onChange}
141
				onChange={onChange}
149
            >
142
			>
150
                {
143
				{
151
                    lengthValues.map((value, index) => (
144
					lengthValues.map((value, index) => (
152
                        <option key={index} value={value}>{value}</option>
145
						<option key={index} value={value}>{value}</option>
153
                    ))
146
					))
154
                }
147
				}
155
            </select>
148
			</select>
156
            registros
149
            registros
157
        </label>
150
		</label>
158
    )
151
	)
159
}
152
}