Feature/filter and sort board (#725)

* Get pipeline progress from stage IDs * Rename hooks file * Addd first amount filter * Add remaining filters * Design fixes * Add filtering on creation date or amount * Fix card updates and creations with the new state management * Keep ordering when dropping a card * Add remainint sorts * Make board header more generic * Move available filters and sorts to board options * Fix decorators for test * Add pipeline stage ids to mock data * Adapt mock data * Linter
2023-07-17 19:32:47 -07:00
parent 9895c1d5d6
commit 6301bc2fbf
19 changed files with 784 additions and 413 deletions
--- a/front/src/modules/ui/board/components/BoardHeader.tsx
+++ b/front/src/modules/ui/board/components/BoardHeader.tsx
@ -0,0 +1,131 @@
+import { Context, ReactNode, useCallback, useState } from 'react';
+import styled from '@emotion/styled';
+
+import { FilterDropdownButton } from '@/ui/filter-n-sort/components/FilterDropdownButton';
+import SortAndFilterBar from '@/ui/filter-n-sort/components/SortAndFilterBar';
+import { SortDropdownButton } from '@/ui/filter-n-sort/components/SortDropdownButton';
+import { FiltersHotkeyScope } from '@/ui/filter-n-sort/types/FiltersHotkeyScope';
+import { SelectedSortType, SortType } from '@/ui/filter-n-sort/types/interface';
+
+type OwnProps<SortField> = {
+  viewName: string;
+  viewIcon?: ReactNode;
+  availableSorts?: Array<SortType<SortField>>;
+  onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
+  context: Context<string | null>;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledTableHeader = styled.div`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.secondary};
+  display: flex;
+  flex-direction: row;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  height: 40px;
+  justify-content: space-between;
+  padding-left: ${({ theme }) => theme.spacing(3)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledIcon = styled.div`
+  display: flex;
+  margin-left: ${({ theme }) => theme.spacing(1)};
+  margin-right: ${({ theme }) => theme.spacing(2)};
+
+  & > svg {
+    font-size: ${({ theme }) => theme.icon.size.sm};
+  }
+`;
+
+const StyledViewSection = styled.div`
+  display: flex;
+`;
+
+const StyledFilters = styled.div`
+  display: flex;
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  gap: 2px;
+`;
+
+export function BoardHeader<SortField>({
+  viewName,
+  viewIcon,
+  availableSorts,
+  onSortsUpdate,
+  context,
+}: OwnProps<SortField>) {
+  const [sorts, innerSetSorts] = useState<Array<SelectedSortType<SortField>>>(
+    [],
+  );
+
+  const sortSelect = useCallback(
+    (newSort: SelectedSortType<SortField>) => {
+      const newSorts = updateSortOrFilterByKey(sorts, newSort);
+      innerSetSorts(newSorts);
+      onSortsUpdate && onSortsUpdate(newSorts);
+    },
+    [onSortsUpdate, sorts],
+  );
+
+  const sortUnselect = useCallback(
+    (sortKey: string) => {
+      const newSorts = sorts.filter((sort) => sort.key !== sortKey);
+      innerSetSorts(newSorts);
+      onSortsUpdate && onSortsUpdate(newSorts);
+    },
+    [onSortsUpdate, sorts],
+  );
+
+  return (
+    <StyledContainer>
+      <StyledTableHeader>
+        <StyledViewSection>
+          <StyledIcon>{viewIcon}</StyledIcon>
+          {viewName}
+        </StyledViewSection>
+        <StyledFilters>
+          <FilterDropdownButton
+            context={context}
+            HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
+          />
+          <SortDropdownButton<SortField>
+            isSortSelected={sorts.length > 0}
+            availableSorts={availableSorts || []}
+            onSortSelect={sortSelect}
+            HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
+          />
+        </StyledFilters>
+      </StyledTableHeader>
+      <SortAndFilterBar
+        context={context}
+        sorts={sorts}
+        onRemoveSort={sortUnselect}
+        onCancelClick={() => {
+          innerSetSorts([]);
+          onSortsUpdate && onSortsUpdate([]);
+        }}
+      />
+    </StyledContainer>
+  );
+}
+
+function updateSortOrFilterByKey<SortOrFilter extends { key: string }>(
+  sorts: Readonly<SortOrFilter[]>,
+  newSort: SortOrFilter,
+): SortOrFilter[] {
+  const newSorts = [...sorts];
+  const existingSortIndex = sorts.findIndex((sort) => sort.key === newSort.key);
+
+  if (existingSortIndex !== -1) {
+    newSorts[existingSortIndex] = newSort;
+  } else {
+    newSorts.push(newSort);
+  }
+
+  return newSorts;
+}