github.com/freiheit-com/kuberpult@v1.24.2-0.20240328135542-315d5630abe6/services/frontend-service/src/ui/components/LocksTable/LocksTable.tsx (about)

     1  /*This file is part of kuberpult.
     2  
     3  Kuberpult is free software: you can redistribute it and/or modify
     4  it under the terms of the Expat(MIT) License as published by
     5  the Free Software Foundation.
     6  
     7  Kuberpult is distributed in the hope that it will be useful,
     8  but WITHOUT ANY WARRANTY; without even the implied warranty of
     9  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    10  MIT License for more details.
    11  
    12  You should have received a copy of the MIT License
    13  along with kuberpult. If not, see <https://directory.fsf.org/wiki/License:Expat>.
    14  
    15  Copyright 2023 freiheit.com*/
    16  import { DisplayLock, displayLockUniqueId, sortLocks } from '../../utils/store';
    17  import { LockDisplay } from '../LockDisplay/LockDisplay';
    18  import * as React from 'react';
    19  import { Button } from '../button';
    20  import { SortAscending, SortDescending } from '../../../images';
    21  import { useCallback } from 'react';
    22  
    23  export const LocksTable: React.FC<{
    24      headerTitle: string;
    25      columnHeaders: string[];
    26      locks: DisplayLock[];
    27  }> = (props) => {
    28      const { headerTitle, columnHeaders, locks } = props;
    29  
    30      const [sort, setSort] = React.useState<'newestToOldest' | 'oldestToNewest'>('newestToOldest');
    31  
    32      const sortOnClick = useCallback(() => {
    33          if (sort === 'oldestToNewest') {
    34              setSort('newestToOldest');
    35          } else {
    36              setSort('oldestToNewest');
    37          }
    38          sortLocks(locks, sort);
    39      }, [locks, sort]);
    40      return (
    41          <div className="mdc-data-table">
    42              <div className="mdc-data-table__table-container">
    43                  <table className="mdc-data-table__table" aria-label="Dessert calories">
    44                      <thead>
    45                          <tr className="mdc-data-table__header-row">
    46                              <th className="mdc-data-indicator" role="columnheader" scope="col">
    47                                  <div className="mdc-data-header-title">{headerTitle}</div>
    48                              </th>
    49                          </tr>
    50                          <tr className="mdc-data-table__header-row">
    51                              <th
    52                                  className="mdc-data-indicator mdc-data-indicator--subheader"
    53                                  role="columnheader"
    54                                  scope="col">
    55                                  <div className="mdc-data-indicator-header">
    56                                      {columnHeaders.map((columnHeader) => (
    57                                          <div key={columnHeader} className="mdc-data-indicator-field">
    58                                              {columnHeader}
    59                                              {columnHeader === 'Date' && sort === 'oldestToNewest' && (
    60                                                  <Button
    61                                                      className={'mdc-data-indicator-sort-button'}
    62                                                      onClick={sortOnClick}
    63                                                      icon={<SortAscending />}
    64                                                  />
    65                                              )}
    66                                              {columnHeader === 'Date' && sort === 'newestToOldest' && (
    67                                                  <Button
    68                                                      className={'mdc-data-indicator-sort-button'}
    69                                                      onClick={sortOnClick}
    70                                                      icon={<SortDescending />}
    71                                                  />
    72                                              )}
    73                                          </div>
    74                                      ))}
    75                                  </div>
    76                              </th>
    77                          </tr>
    78                      </thead>
    79                      <tbody className="mdc-data-table__content">
    80                          <tr>
    81                              <td>
    82                                  {locks.map((lock) => (
    83                                      <LockDisplay key={displayLockUniqueId(lock)} lock={lock} />
    84                                  ))}
    85                              </td>
    86                          </tr>
    87                      </tbody>
    88                  </table>
    89              </div>
    90          </div>
    91      );
    92  };