diff --git a/web/src/components/psc/checklist-table.tsx b/web/src/components/psc/checklist-table.tsx index a69729a..6c41a4a 100644 --- a/web/src/components/psc/checklist-table.tsx +++ b/web/src/components/psc/checklist-table.tsx @@ -1,13 +1,12 @@ import { $, component$, useStore, useSignal } from "@builder.io/qwik"; import { useCSSTransition } from "qwik-transition"; -import Icon from "~/components/core/icon"; +import Icon from "~/components/core/icon"; // Verifique se o caminho está correto import type { Priority, Section, Checklist } from '../../types/PSC'; import { marked } from "marked"; import { useLocalStorage } from "~/hooks/useLocalStorage"; import styles from './psc.module.css'; - export default component$((props: { section: Section }) => { const [completed, setCompleted] = useLocalStorage('PSC_PROGRESS', {}); @@ -55,7 +54,6 @@ export default component$((props: { section: Section }) => { const isIgnored = (pointId: string) => { return ignored.value[pointId] || false; }; - const isChecked = (pointId: string) => { if (isIgnored(pointId)) return false; @@ -104,14 +102,14 @@ export default component$((props: { section: Section }) => { } }; - const handleSort = $((column: string) => { - if (sortState.column === column) { // Reverse direction if same column - sortState.ascending = !sortState.ascending; - } else { // Sort table by column - sortState.column = column; - sortState.ascending = true; // Default to ascending - } - }); + // const handleSort = $((column: string) => { + // if (sortState.column === column) { // Reverse direction if same column + // sortState.ascending = !sortState.ascending; + // } else { // Sort table by column + // sortState.column = column; + // sortState.ascending = true; // Default to ascending + // } + // }); const resetFilters = $(() => { checklist.value = props.section.checklist; @@ -121,7 +119,7 @@ export default component$((props: { section: Section }) => { filterState.show = originalFilters.show; }); - const calculateProgress = (): { done: number, total: number, percent: number, disabled: number} => { + const calculateProgress = (): { done: number, total: number, percent: number, disabled: number } => { let done = 0; let disabled = 0; let total = 0; @@ -146,169 +144,157 @@ export default component$((props: { section: Section }) => { return ( <> - -
-
- -

- {done} out of {total} ({percent}%) - complete, {disabled} ignored

-
- -
- {(sortState.column || JSON.stringify(filterState) !== JSON.stringify(originalFilters)) && ( - - )} - -
-
- - {showFilters.value && ( -
- {/* Filter by completion */} -
-

Show

- - - +
+
+ +

+ {done} out of {total} ({percent}%) + complete, {disabled} ignored

- {/* Filter by level */} -
-

Filter

- - - -
-
- )} - - - - { [ - { id: 'done', text: 'Done?'}, - { id: 'advice', text: 'Advice' }, - { id: 'level', text: 'Level' } - ].map((item) => ( - - ))} - - - - - {filteredChecklist.sort(sortChecklist).map((item, index) => { - const badgeColor = getBadgeClass(item.priority); - const itemId = generateId(item.point); - const isItemCompleted = isChecked(itemId); - const isItemIgnored = isIgnored(itemId); - return ( - - - - - - +
+ {(sortState.column || JSON.stringify(filterState) !== JSON.stringify(originalFilters)) && ( + )} - )} -
-
handleSort(item.id)} - > - - - {item.text} - - Details
- { - const data = completed.value; - data[itemId] = !data[itemId]; - setCompleted(data); - }} - /> - - { - const ignoredData = ignored.value; - ignoredData[itemId] = !ignoredData[itemId]; - setIgnored(ignoredData); - - const completedData = completed.value; - completedData[itemId] = false; - setCompleted(completedData); - }} - /> - - - -
- {item.priority} -
-
+ +
+
+ + {showFilters.value && ( +
+ {/* Filter by completion */} +
+

Show

+ + + +
+ {/* Filter by level */} +
+

Filter

+ + + +
+
+ )} + +
+ {filteredChecklist.sort(sortChecklist).map((item, index) => { + const badgeColor = getBadgeClass(item.priority); + const itemId = generateId(item.point); + const isItemCompleted = isChecked(itemId); + const isItemIgnored = isIgnored(itemId); + + return ( +
+ +
+
+
+ {item.priority} +
+ +
+ +
+
+
+ + { + const data = completed.value; + data[itemId] = !data[itemId]; + setCompleted(data); + }} + /> +
+
+ + { + const ignoredData = ignored.value; + ignoredData[itemId] = !ignoredData[itemId]; + setIgnored(ignoredData); + + const completedData = completed.value; + completedData[itemId] = false; + setCompleted(completedData); + }} + /> +
+
+
+
+
+ ) + })} +
); });