project setup

components/features/todos/AdminTodosTableControls.tsx

@@ -0,0 +1,166 @@
+import { View } from "react-native";
+
+import { TableControls } from "@/components/shared/TableControls";
+import { AddTodoControls } from "@/components/features/todos/AddTodoControls";
+import {
+  CombinedFilterMenu,
+  CombinedFilterSection,
+} from "@/components/shared/filters/CombinedFilterMenu";
+import {
+  SelectedFilterChips,
+  SelectedChip,
+} from "@/components/shared/filters/SelectedFilterChips";
+import {
+  TodoStatus,
+  TodoStatusLabels,
+  TodoStatusColors,
+} from "@/constants/todoStatusEnum";
+import {
+  PriorityStatus,
+  PriorityStatusLabels,
+} from "@/constants/priorityStatusEnum";
+import { PriorityIndicator } from "@/components/ui/PriorityIndicator";
+
+interface AdminTodoTableControlsProps {
+  searchQuery: string;
+  menuVisible: boolean;
+  menuAnchor: { x: number; y: number };
+  selectedStatuses: TodoStatus[];
+  selectedPriorities: PriorityStatus[];
+  onSearch: (query: string) => void;
+  onMenuDismiss: () => void;
+  onItemsPerPageChange: (value: number) => void;
+  onSelectStatuses: (statuses: TodoStatus[]) => void;
+  onSelectPriorities: (priorities: PriorityStatus[]) => void;
+  onAddTodo: () => void;
+  itemsPerPage: number;
+}
+
+export const AdminTodosTableControls = ({
+  searchQuery,
+  menuVisible,
+  menuAnchor,
+  selectedStatuses = [],
+  selectedPriorities = [],
+  onSearch,
+  onMenuDismiss,
+  onItemsPerPageChange,
+  onSelectStatuses,
+  onSelectPriorities,
+  onAddTodo,
+  itemsPerPage = 25,
+}: AdminTodoTableControlsProps) => {
+  const renderFilterComponent = () => {
+    const sections: CombinedFilterSection[] = [];
+
+    const statusOptions = Object.values(TodoStatus).map((status) => ({
+      value: status,
+      label: TodoStatusLabels[status],
+      icon: (
+        <View
+          style={{
+            width: 10,
+            height: 10,
+            borderRadius: 5,
+            backgroundColor: TodoStatusColors[status],
+          }}
+        />
+      ),
+    }));
+
+    sections.push({
+      key: "status",
+      title: "Status",
+      options: statusOptions,
+      selected: selectedStatuses,
+      onChange: (values) => onSelectStatuses(values as TodoStatus[]),
+    });
+
+    const priorityOptions = Object.values(PriorityStatus).map((priority) => ({
+      value: priority,
+      label: PriorityStatusLabels[priority],
+      icon: <PriorityIndicator priority={priority} />,
+    }));
+
+    sections.push({
+      key: "priority",
+      title: "Priority",
+      options: priorityOptions,
+      selected: selectedPriorities,
+      onChange: (values) => onSelectPriorities(values as PriorityStatus[]),
+    });
+
+    const chips: SelectedChip[] = [];
+
+    selectedStatuses.forEach((status) =>
+      chips.push({
+        key: `status-${status}`,
+        label: TodoStatusLabels[status],
+        onRemove: () =>
+          onSelectStatuses(selectedStatuses.filter((s) => s !== status)),
+      })
+    );
+
+    selectedPriorities.forEach((priority) =>
+      chips.push({
+        key: `priority-${priority}`,
+        label: PriorityStatusLabels[priority],
+        onRemove: () =>
+          onSelectPriorities(selectedPriorities.filter((p) => p !== priority)),
+      })
+    );
+
+    return (
+      <CombinedFilterMenu 
+        sections={sections} 
+        showResetButton={true}
+        onResetAll={() => {
+          onSelectStatuses([]);
+          onSelectPriorities([]);
+        }}
+      />
+    );
+  };
+
+  const renderFilterChips = () => {
+    const chips: SelectedChip[] = [];
+
+    selectedStatuses.forEach((status) =>
+      chips.push({
+        key: `status-${status}`,
+        label: TodoStatusLabels[status],
+        onRemove: () =>
+          onSelectStatuses(selectedStatuses.filter((s) => s !== status)),
+      })
+    );
+
+    selectedPriorities.forEach((priority) =>
+      chips.push({
+        key: `priority-${priority}`,
+        label: PriorityStatusLabels[priority],
+        onRemove: () =>
+          onSelectPriorities(selectedPriorities.filter((p) => p !== priority)),
+      })
+    );
+
+    return chips.length > 0 ? <SelectedFilterChips chips={chips} /> : null;
+  };
+
+  const renderActionButtons = () => <AddTodoControls onAddTodo={onAddTodo} />;
+
+  return (
+    <TableControls
+      searchQuery={searchQuery}
+      menuVisible={menuVisible}
+      menuAnchor={menuAnchor}
+      searchPlaceholder="Search todos"
+      onSearch={onSearch}
+      onMenuDismiss={onMenuDismiss}
+      onItemsPerPageChange={onItemsPerPageChange}
+      itemsPerPage={itemsPerPage}
+      renderFilterComponent={renderFilterComponent}
+      renderFilterChips={renderFilterChips}
+      renderActionButtons={renderActionButtons}
+    />
+  );
+};