Uniformize folder structure (#693)

* Uniformize folder structure * Fix icons * Fix icons * Fix tests * Fix tests
2023-07-16 14:29:28 -07:00
parent 900ec5572f
commit 6ced8434bd
462 changed files with 931 additions and 960 deletions
--- a/front/src/modules/ui/table/components/EntityTable.tsx
+++ b/front/src/modules/ui/table/components/EntityTable.tsx
@ -0,0 +1,113 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+
+import { TableColumn } from '@/people/table/components/peopleColumns';
+import { SelectedSortType, SortType } from '@/ui/filter-n-sort/types/interface';
+import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
+
+import { useLeaveTableFocus } from '../hooks/useLeaveTableFocus';
+import { TableHeader } from '../table-header/components/TableHeader';
+
+import { EntityTableBody } from './EntityTableBody';
+import { EntityTableHeader } from './EntityTableHeader';
+
+const StyledTable = styled.table`
+  border-collapse: collapse;
+
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  border-spacing: 0;
+  margin-left: ${({ theme }) => theme.table.horizontalCellMargin};
+  margin-right: ${({ theme }) => theme.table.horizontalCellMargin};
+  table-layout: fixed;
+  width: calc(100% - ${({ theme }) => theme.table.horizontalCellMargin} * 2);
+
+  th {
+    border: 1px solid ${({ theme }) => theme.background.tertiary};
+    border-collapse: collapse;
+    color: ${({ theme }) => theme.font.color.tertiary};
+    padding: 0;
+    text-align: left;
+
+    :last-child {
+      border-right-color: transparent;
+    }
+    :first-of-type {
+      border-left-color: transparent;
+      border-right-color: transparent;
+    }
+    :last-of-type {
+      min-width: 0;
+      width: 100%;
+    }
+  }
+
+  td {
+    border: 1px solid ${({ theme }) => theme.background.tertiary};
+    border-collapse: collapse;
+    color: ${({ theme }) => theme.font.color.primary};
+    padding: 0;
+
+    text-align: left;
+
+    :last-child {
+      border-right-color: transparent;
+    }
+    :first-of-type {
+      border-left-color: transparent;
+      border-right-color: transparent;
+    }
+    :last-of-type {
+      min-width: 0;
+      width: 100%;
+    }
+  }
+`;
+
+const StyledTableWithHeader = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+`;
+
+type OwnProps<SortField> = {
+  columns: Array<TableColumn>;
+  viewName: string;
+  viewIcon?: React.ReactNode;
+  availableSorts?: Array<SortType<SortField>>;
+  onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
+  onRowSelectionChange?: (rowSelection: string[]) => void;
+};
+
+export function EntityTable<SortField>({
+  columns,
+  viewName,
+  viewIcon,
+  availableSorts,
+  onSortsUpdate,
+}: OwnProps<SortField>) {
+  const tableBodyRef = React.useRef<HTMLDivElement>(null);
+
+  const leaveTableFocus = useLeaveTableFocus();
+
+  useListenClickOutsideArrayOfRef([tableBodyRef], () => {
+    leaveTableFocus();
+  });
+
+  return (
+    <StyledTableWithHeader>
+      <TableHeader
+        viewName={viewName}
+        viewIcon={viewIcon}
+        availableSorts={availableSorts}
+        onSortsUpdate={onSortsUpdate}
+      />
+      <div ref={tableBodyRef}>
+        <StyledTable>
+          <EntityTableHeader columns={columns} />
+          <EntityTableBody columns={columns} />
+        </StyledTable>
+      </div>
+    </StyledTableWithHeader>
+  );
+}