Fakultas Ilmu Komputer UI

TableComponent.jsx 9.89 KB
Newer Older
Jeffrey's avatar
Jeffrey committed
1
import React, { useState } from "react";
2
3
4
5
6
7
8
9
10
11
12
13
import useFetchList from "../utils/useFetchList";
import { useForm } from "react-hook-form";
import { css } from "@emotion/core";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import Toolbar from "@material-ui/core/Toolbar";
import TableFooter from "@material-ui/core/TableFooter";
import TablePagination from "@material-ui/core/TablePagination";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
Jeffrey's avatar
Jeffrey committed
14
15
16
17
18
19
20
21
22
23
24
25
import FilterListIcon from "@material-ui/icons/FilterList";
import Collapse from "@material-ui/core/Collapse";
import {
  ButtonSearch,
  ErrorDiv,
  InputForm,
  InputSearch,
  InputSelectForm,
  InputSubmitForm,
  LabelInput,
  RowInput,
} from "./html/html";
Michael Wiryadinata Halim's avatar
Michael Wiryadinata Halim committed
26
import SearchIcon from "@material-ui/icons/Search";
27
28
29
import { Link } from "@reach/router";
import ArrowDropDownCircleIcon from "@material-ui/icons/ArrowDropDownCircle";
import TableHead from "@material-ui/core/TableHead";
Jeffrey's avatar
Jeffrey committed
30
31
32
import Tooltip from "@material-ui/core/Tooltip";
import IconButton from "@material-ui/core/IconButton";
import Button from "@material-ui/core/Button";
33

34

35
36
37
38
39
40
41
const TableComponent = ({
  url,
  pageDefault,
  searchDefault,
  title,
  keyValuePairs,
  link,
Jeffrey's avatar
Jeffrey committed
42
43
  argument,
  filter,
44
45
46
47
48
49
50
51
52
53
}) => {
  const [
    results,
    errorState,
    count,
    statePage,
    stateSize,
    setPage,
    setStateSearch,
    setPageSize,
Jeffrey's avatar
Jeffrey committed
54
55
    setFilter,
  ] = useFetchList([url, pageDefault, searchDefault, 5, argument, null]);
56
  const { register, handleSubmit } = useForm();
Jeffrey's avatar
Jeffrey committed
57
58
59
60
61
62
  const {
    register: registerFilter,
    handleSubmit: handleSubmitFilter,
    reset: resetFilter,
  } = useForm();
  const [filterTab, setFilterTab] = useState(false);
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
  return (
    <div
      css={css`
        display: flex;
        margin: 0 3rem 3rem 3rem;
        flex-direction: column;
      `}
    >
      {errorState && <ErrorDiv>ERROR !! Please relogin.</ErrorDiv>}
      <div
        data-testid="table"
        css={css`
          margin-top: 1.5rem;
        `}
      >
        <Paper>
          <Toolbar>
            <div
              data-testid="page"
              css={css`
                font-style: normal;
                font-weight: normal;
                font-size: 36px;
                line-height: 44px;
                color: #292929;
              `}
            >
              {title}
            </div>
            <div
              css={css`
                width: 100%;
                display: flex;
                justify-content: flex-end;
              `}
            >
              <form
                css={css`
                  display: flex;
                `}
                onSubmit={handleSubmit((data) => {
                  setStateSearch(data["search"]);
                })}
              >
                <InputSearch
                  name="search"
                  ref={register}
                  placeholder="Search..."
                />
                <ButtonSearch className="border-0">
Michael Wiryadinata Halim's avatar
Michael Wiryadinata Halim committed
113
                  <SearchIcon />
114
115
                </ButtonSearch>
              </form>
Jeffrey's avatar
Jeffrey committed
116
117
118
119
120
121
122
123
124
125
126
              {filter !== null && filter !== undefined && (
                <Tooltip title="Filter list">
                  <IconButton
                    data-testid="filter-button"
                    aria-label="filter list"
                    onClick={() => setFilterTab(!filterTab)}
                  >
                    <FilterListIcon />
                  </IconButton>
                </Tooltip>
              )}
127
128
            </div>
          </Toolbar>
Jeffrey's avatar
Jeffrey committed
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
          {filter !== null && filter !== undefined && (
            <Collapse in={filterTab} addEndListener={() => {}}>
              <Toolbar>
                <form
                  data-testid="filter-form"
                  onSubmit={handleSubmitFilter((data) => {
                    const filter = Object.entries(data)
                      .filter(([, val]) => val !== "")
                      .map(([key, val]) => `${key}=${val}`)
                      .join("&");
                    setFilter(filter);
                  })}
                  css={css`
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                  `}
                >
                  {filter.map((field) => {
                    if (Array.isArray(field)) {
149
                     
150
151
152
153
154
155
156
157
158
159
160
                        return (
                          <RowInput key={field[0]}>
                            <LabelInput htmlFor={field[0]}>{field[1]}</LabelInput>
                            <InputForm
                              id={field[0]}
                              type="date"
                              name={field[0]}
                              ref={registerFilter}
                            />
                          </RowInput>
                        );
Jeffrey's avatar
Jeffrey committed
161
162
163
164
165
                    } else if (typeof field === "object") {
                      const k = Object.keys(field);
                      return (
                        <RowInput key={k[0]}>
                          <LabelInput htmlFor={k[0]}>
Jeffrey's avatar
Jeffrey committed
166
                            {field[k].label}
Jeffrey's avatar
Jeffrey committed
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
                          </LabelInput>
                          <InputSelectForm
                            id={k[0]}
                            name={k[0]}
                            ref={registerFilter}
                          >
                            <option value="" />
                            {field[k].choices.map((c) => {
                              const choice = Object.keys(c);
                              return (
                                <option key={choice} value={choice}>
                                  {c[choice]}
                                </option>
                              );
                            })}
                          </InputSelectForm>
                        </RowInput>
                      );
                    }
                  })}
                  <div
                    css={css`
                      display: flex;
                      width: 100%;
                      align-items: center;
                      align-content: space-between;
                    `}
                  >
                    <InputSubmitForm
                      css={css`
                        width: 50%;
                        margin-right: 2rem;
                      `}
                      data-testid="submit-filter"
                      type="submit"
Jeffrey's avatar
Jeffrey committed
202
                      value="FILTER"
Jeffrey's avatar
Jeffrey committed
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
                    />
                    <Button
                      variant="outlined"
                      color="secondary"
                      onClick={() => {
                        resetFilter();
                        setFilter(null);
                      }}
                    >
                      Hapus Filter
                    </Button>
                  </div>
                </form>
              </Toolbar>
            </Collapse>
          )}
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
          <TableContainer>
            <Table>
              <TableHead>
                <TableRow>
                  {keyValuePairs.slice(1).map((pairs, index) => {
                    return (
                      <TableCell
                        key={`${pairs[0]}${index}`}
                        css={css`
                          font-weight: bold;
                        `}
                      >
                        {pairs[1]}
                      </TableCell>
                    );
                  })}
                  {link !== undefined ? (
                    <TableCell
                      css={css`
                        font-weight: bold;
                      `}
                    >
                      Action
                    </TableCell>
                  ) : null}
                </TableRow>
              </TableHead>
              <TableBody data-testid="tableList">
                {results.map((u, indexR) => {
                  return (
                    <TableRow key={`row${indexR}-${u[keyValuePairs[0][0]]}`}>
                      {keyValuePairs.slice(1).map((pairs, indexC) => {
                        return (
                          <TableCell key={`${pairs[0]}r${indexR}c${indexC}`}>
Jeffrey's avatar
Jeffrey committed
253
                            {pairs[2] !== undefined && pairs[2] !== null
254
255
256
                              ? pairs[0] !== ""
                                ? pairs[2](u[pairs[0]])
                                : pairs[2](u)
Jeffrey's avatar
Jeffrey committed
257
                              : u[pairs[0]]}
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
                          </TableCell>
                        );
                      })}
                      {link !== undefined ? (
                        <TableCell key={`link_r${indexR}`}>
                          <Link to={`${link}${u.id}`}>
                            <ArrowDropDownCircleIcon color="action" />
                          </Link>
                        </TableCell>
                      ) : null}
                    </TableRow>
                  );
                })}
              </TableBody>
              <TableFooter>
                <TableRow>
                  <TablePagination
                    rowsPerPageOptions={[5, 7, 10]}
                    count={count || 0}
                    rowsPerPage={stateSize}
                    page={statePage - 1}
                    SelectProps={{
                      inputProps: { "aria-label": "rows per page" },
                      native: true,
                    }}
                    onChangePage={(event, newPage) => {
                      setPage(newPage + 1);
                    }}
                    onChangeRowsPerPage={(event) => {
                      setPageSize(parseInt(event.target.value, 10));
                      setPage(1);
                    }}
                  />
                </TableRow>
              </TableFooter>
            </Table>
          </TableContainer>
        </Paper>
      </div>
    </div>
  );
};

export default TableComponent;