Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev 8153 Rev 11265
Línea 1... Línea 1...
1 
import React, { useCallback, useState } from 'react'
 1 
import React, { useCallback, useState } from 'react'
2 
import { Link } from 'react-router-dom';
 2 
import { Link } from 'react-router-dom'
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 
 
19 
 
 19 
 
Línea 20... Línea 20...
20 
    if (reverse) {
 20 
	if (reverse) {
21 
        return sortedData.reverse();
 21 
		return sortedData.reverse()
Línea 22... Línea 22...
22 
    }
 22 
	}
23 
 
 23 
 
24 
    return sortedData;
 24 
	return sortedData
25 
}
 25 
}
26 
 
 26 
 
27 
const SortButton = ({ sortOrder, columnKey, sortKey, onClick }) => {
 27 
const SortButton = ({ sortOrder, columnKey, sortKey, onClick }) => {
28 
    return (
 28 
	return (
29 
        <button onClick={onClick} className="btn">
 29 
		<button onClick={onClick} className="btn">
30 
            {
 30 
			{
31 
                (sortKey === columnKey) && (sortOrder === "desc")
 31 
				(sortKey === columnKey) && (sortOrder === 'desc')
32 
                    ? <i className='fa fa-angle-up' />
 32 
					? <i className='fa fa-angle-up' />
Línea 33... Línea 33...
33 
                    : <i className='fa fa-angle-down' />
 33 
					: <i className='fa fa-angle-down' />
Línea 34... Línea 34...
34 
            }
 34 
			}
35 
        </button>
 35 
		</button>
36 
    );
 36 
	)
37 
}
 37 
}
38 
 
 38 
 
39 
const Table = ({ data, headers, onDelete, allowEdit, allowDelete, onEdit, allowUsersWhoApplied }) => {
 39 
const Table = ({ data, headers, onDelete, allowEdit, allowDelete, onEdit, allowUsersWhoApplied }) => {
40 
 
 40 
 
41 
    const initialSortKey = Object.values(headers)[0]
 41 
	const initialSortKey = Object.values(headers)[0]
42 
    const [sortKey, setSortKey] = useState(initialSortKey);
 42 
	const [sortKey, setSortKey] = useState(initialSortKey)
43 
    const [sortOrder, setSortOrder] = useState("ascn");
 43 
	const [sortOrder, setSortOrder] = useState('ascn')
44 
 
 44 
 
45 
    const sortedData = useCallback(
 45 
	const sortedData = useCallback(
46 
        () => sortData({ tableData: data, sortKey, reverse: sortOrder === "desc" }),
 46 
		() => sortData({ tableData: data, sortKey, reverse: sortOrder === 'desc' }),
47 
        [data, sortKey, sortOrder]
 47 
		[data, sortKey, sortOrder]
48 
    );
 48 
	)
49 
 
 49 
 
50 
    const changeSort = (key) => {
 50 
	const changeSort = (key) => {
51 
        setSortOrder(sortOrder === "ascn" ? "desc" : "ascn");
 51 
		setSortOrder(sortOrder === 'ascn' ? 'desc' : 'ascn')
52 
 
 52 
 
53 
        setSortKey(key);
 53 
		setSortKey(key)
54 
    }
 54 
	}
55 
 
 55 
 
56 
    return (
 56 
	return (
57 
        <table className="table table-hover dataTable no-footer dtr-inline">
 57 
		<table className="table table-hover dataTable no-footer dtr-inline w-100">
58 
            <thead>
 58 
			<thead>
59 
                <tr>
 59 
				<tr>
60 
                    {headers.map((row) => {
 60 
					{headers.map((row) => {
61 
                        return (
 61 
						return (
62 
                            <th
 62 
							<th
63 
                                key={row.key}
 63 
								key={row.key}
64 
                                className="text-vertical-middle"
 64 
								className="text-vertical-middle"
65 
                            >
 65 
							>
66 
                                {row.label}
 66 
								{row.label}
67 
                                {
 67 
								{
68 
                                    row.isSorteable
 68 
									row.isSorteable
69 
                                    &&
 69 
                                    &&
70 
                                    <SortButton
 70 
                                    <SortButton
71 
                                        columnKey={row.key}
 71 
                                    	columnKey={row.key}
72 
                                        onClick={() => changeSort(row.key)}
 72 
                                    	onClick={() => changeSort(row.key)}
73 
                                        {...{
 73 
                                    	{...{
74 
                                            sortOrder,
 74 
                                    		sortOrder,
75 
                                            sortKey,
 75 
                                    		sortKey,
76 
                                        }}
 76 
                                    	}}
77 
                                    />
 77 
                                    />
78 
                                }
 78 
								}
79 
                            </th>
 79 
							</th>
80 
                        );
 80 
						)
81 
                    })}
 81 
					})}
82 
                </tr>
 82 
				</tr>
83 
            </thead>
 83 
			</thead>
84 
 
 84 
 
85 
            <tbody>
 85 
			<tbody>
86 
                {sortedData().map((item, index) => {
 86 
				{sortedData().map((item, index) => {
87 
                    const entries = Object.entries(item)
 87 
					const entries = Object.entries(item)
88 
 
 88 
 
89 
                    return (
 89 
					return (
90 
                        < tr key={item.id} >
 90 
						< tr key={item.id} >
91 
                            {
 91 
							{
92 
                                entries.map((element) => {
 92 
								entries.map((element) => {
93 
 
 93 
 
94 
                                    if (element[0] !== "id") {
 94 
									if (element[0] !== 'id') {
95 
 
 95 
 
96 
                                        if (element[0] === "details") {
 96 
										if (element[0] === 'details') {
97 
                                            return (
 97 
											return (
98 
                                                <td>
 98 
												<td>
99 
                                                    <ul style={{ listStyle: 'none' }}>
 99 
													<ul style={{ listStyle: 'none' }}>
100 
                                                        <li>Estatus: {element[1]["status"]}</li>
 100 
														<li>Estatus: {element[1]['status']}</li>
101 
                                                        <li>Tipo de empleo: {element[1]["employment_type"]}</li>
 101 
														<li>Tipo de empleo: {element[1]['employment_type']}</li>
102 
                                                        <li>Aplicantes: {element[1]["users_who_applied"]}</li>
 102 
														<li>Aplicantes: {element[1]['users_who_applied']}</li>
103 
                                                    </ul>
 103 
													</ul>
104 
                                                </td>
 104 
												</td>
105 
                                            )
 105 
											)
106 
                                        }
 106 
										}
107 
 
 107 
 
108 
                                        if (element[0] === "actions") {
 108 
										if (element[0] === 'actions') {
109 
                                            return (
 109 
											return (
110 
                                                <td
 110 
												<td
111 
                                                    className='d-flex flex-column py-2 px-15'
 111 
													className='d-flex flex-column py-2 px-15'
112 
                                                    style={{ gap: '5px' }}>
 112 
													style={{ gap: '5px' }}>
113 
                                                    {
 113 
													{
114 
                                                        (allowEdit === "1")
 114 
														(allowEdit === '1')
115 
                                                        &&
 115 
                                                        &&
116 
                                                        <Link
 116 
                                                        <Link
117 
                                                            to="/jobs/edit"
 117 
                                                        	to="/jobs/edit"
118 
                                                            style={{ textDecoration: 'none' }}
 118 
                                                        	style={{ textDecoration: 'none' }}
119 
                                                            onClick={() => onEdit(element[1]['link_edit'])}
 119 
                                                        	onClick={() => onEdit(element[1]['link_edit'])}
120 
                                                        >
 120 
                                                        >
121 
                                                            <button
 121 
                                                        	<button
122 
                                                                className="btn btn-sm btn-block btn-primary btn-edit"
 122 
                                                        		className="btn btn-sm btn-block btn-primary btn-edit"
123 
                                                            >
 123 
                                                        	>
124 
                                                                <i className="fa fa-pencil" />
 124 
                                                        		<i className="fa fa-pencil" />
125 
                                                                Editar
 125 
                                                                Editar
126 
                                                            </button>
 126 
                                                        	</button>
127 
                                                        </Link>
 127 
                                                        </Link>
128 
                                                    }
 128 
													}
129 
                                                    {
 129 
													{
130 
                                                        (allowDelete === "1")
 130 
														(allowDelete === '1')
131 
                                                        &&
 131 
                                                        &&
132 
                                                        <button
 132 
                                                        <button
133 
                                                            className="btn btn-sm btn-danger btn-delete"
 133 
                                                        	className="btn btn-sm btn-danger btn-delete"
134 
                                                            onClick={() => onDelete(item)}
 134 
                                                        	onClick={() => onDelete(item)}
135 
                                                        >
 135 
                                                        >
136 
                                                            <i className="fa fa-trash" />
 136 
                                                        	<i className="fa fa-trash" />
137 
                                                            Borrar
 137 
                                                            Borrar
138 
                                                        </button>
 138 
                                                        </button>
139 
                                                    }
 139 
													}
140 
                                                    {/* {
 140 
													{/* {
141 
                                                        (allowUsersWhoApplied === "1")
 141 
                                                        (allowUsersWhoApplied === "1")
142 
                                                        &&
 142 
                                                        &&
143 
                                                        <button className="btn btn-sm btn-primary btn-users-who-applied">
 143 
                                                        <button className="btn btn-sm btn-primary btn-users-who-applied">
144 
                                                            <i className="fa fa-users" />
 144 
                                                            <i className="fa fa-users" />
145 
                                                            Quien aplicó
 145 
                                                            Quien aplicó
146 
                                                        </button>
 146 
                                                        </button>
147 
                                                    } */}
 147 
                                                    } */}
148 
                                                </td>
 148 
												</td>
149 
                                            )
 149 
											)
150 
                                        }
 150 
										}
151 
 
 151 
 
152 
                                        return (
 152 
										return (
153 
                                            <td
 153 
											<td
154 
                                                className="text-vertical-middle sorting_1 dtr-control">
 154 
												className="text-vertical-middle sorting_1 dtr-control">
155 
                                                {element[1]}
 155 
												{element[1]}
156 
                                            </td>
 156 
											</td>
157 
                                        )
 157 
										)
158 
                                    }
 158 
									}
159 
                                })
 159 
								})
160 
                            }
 160 
							}
Línea 161... Línea -...
161 
                        </tr>
 - 
 
162 
                    );
 161 
						</tr>
- 
 
 162 
					)
163 
                })}
 163 
				})}