From 2fc27fa500457256a587eed70e04b80a76cb9caf Mon Sep 17 00:00:00 2001
From: marcelolop <marcelolopfern@hotmail.com>
Date: Tue, 25 Jun 2024 10:15:38 -0500
Subject: [PATCH] project init

---
 web/src/components/psc/checklist-table.tsx | 330 ++++++++++-----------
 1 file changed, 158 insertions(+), 172 deletions(-)

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 (
     <>
-
-    <div class="flex flex-wrap justify-between items-center">
-      <div>
-        <progress class="progress w-64" value={percent} max="100"></progress>
-        <p class="text-xs text-center">
-          {done} out of {total} ({percent}%)
-          complete, {disabled} ignored</p>
-      </div>
-
-      <div class="flex flex-wrap gap-2 justify-end my-4">
-        {(sortState.column || JSON.stringify(filterState) !== JSON.stringify(originalFilters)) && (
-          <button class="btn btn-sm hover:btn-primary" onClick$={resetFilters}>
-            <Icon width={18} height={16} icon="clear"/>
-            Reset Filters
-          </button>
-        )}
-        <button class="btn btn-sm hover:btn-primary" onClick$={() => { showFilters.value = !showFilters.value; }}>
-          <Icon width={18} height={16} icon="filters"/>
-          {showFilters.value ? 'Hide' : 'Show'} Filters
-        </button>
-      </div>
-    </div>
-
-    {showFilters.value && (
-      <div class="flex flex-wrap justify-between bg-base-100 rounded px-4 py-1 transition-all"
-        style={{ opacity: stage.value === "enterTo" ? 1 : 0, height: stage.value === "enterTo" ? 'auto' : 0 }}> 
-        {/* Filter by completion */}
-        <div class="flex justify-end items-center gap-1">
-          <p class="font-bold text-sm">Show</p>
-          <label onClick$={() => (filterState.show = 'all')}
-            class="p-2 rounded hover:bg-front transition-all cursor-pointer flex gap-2">
-            <span class="text-sm">All</span> 
-            <input type="radio" name="show" class="radio radio-sm checked:radio-info" checked />
-          </label>
-          <label onClick$={() => (filterState.show = 'remaining')}
-            class="p-2 rounded hover:bg-front transition-all cursor-pointer flex gap-2">
-            <span class="text-sm">Remaining</span> 
-            <input type="radio" name="show" class="radio radio-sm checked:radio-error" />
-          </label>
-          <label onClick$={() => (filterState.show = 'completed')}
-            class="p-2 rounded hover:bg-front transition-all cursor-pointer flex gap-2">
-            <span class="text-sm">Completed</span> 
-            <input type="radio" name="show" class="radio radio-sm checked:radio-success" />
-          </label>
+      <div class="flex flex-wrap justify-between items-center">
+        <div>
+          <progress class="progress w-64" value={percent} max="100"></progress>
+          <p class="text-xs text-center">
+            {done} out of {total} ({percent}%)
+            complete, {disabled} ignored</p>
         </div>
-        {/* Filter by level */}
-        <div class="flex justify-end items-center gap-1">
-          <p class="font-bold text-sm">Filter</p>
-          <label class="p-2 rounded hover:bg-front transition-all cursor-pointer flex gap-2">
-            <span class="text-sm">Basic</span> 
-            <input
-              type="checkbox"
-              checked={filterState.levels.essential}
-              onChange$={() => (filterState.levels.essential = !filterState.levels.essential)}
-              class="checkbox checkbox-sm checked:checkbox-success"
-            />
-          </label>
-          <label class="p-2 rounded hover:bg-front transition-all cursor-pointer flex gap-2">
-            <span class="text-sm">Optional</span> 
-            <input
-              type="checkbox"
-              checked={filterState.levels.optional}
-              onChange$={() => (filterState.levels.optional = !filterState.levels.optional)}
-              class="checkbox checkbox-sm checked:checkbox-warning"
-            />
-          </label>
-          <label
-            class="p-2 rounded hover:bg-front transition-all cursor-pointer flex gap-2">
-            <span class="text-sm">Advanced</span> 
-            <input
-              type="checkbox"
-              checked={filterState.levels.advanced}
-              class="checkbox checkbox-sm checked:checkbox-error"
-              onChange$={() => (filterState.levels.advanced = !filterState.levels.advanced)}
-            />
-          </label>
-        </div>
-      </div>
-    )}
 
-    <table class="table">
-      <thead>
-        <tr>
-          { [
-            { id: 'done', text: 'Done?'},
-            { id: 'advice', text: 'Advice' },
-            { id: 'level', text: 'Level' }
-          ].map((item) => (
-            <th
-              key={item.id}
-              class="cursor-pointer"
-              onClick$={() => handleSort(item.id)}
-            >
-              <span class="flex items-center gap-0.5 hover:text-primary transition">
-                <Icon width={12} height={14} icon="sort" />
-                {item.text}
-              </span>
-            </th>
-          ))}
-          <th>Details</th>
-        </tr>
-      </thead>
-      <tbody>
-        {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 (
-            <tr key={index} class={[
-              'rounded-sm transition-all',
-              isItemCompleted ? `bg-${badgeColor} bg-opacity-10` : '',
-              isItemIgnored? 'bg-neutral bg-opacity-15' : '',
-              !isItemIgnored && !isItemCompleted ? `hover:bg-opacity-5 hover:bg-${badgeColor}` : '',
-              ]}>
-              <td class="text-center">
-                <input
-                  type="checkbox"
-                  class={`checkbox checked:checkbox-${badgeColor} hover:checkbox-${badgeColor}`}
-                  id={`done-${itemId}`}
-                  checked={isChecked(itemId)}
-                  disabled={isIgnored(itemId)}
-                  onClick$={() => {
-                    const data = completed.value;
-                    data[itemId] = !data[itemId];
-                    setCompleted(data);
-                  }}
-                />
-                <label for={`ignore-${itemId}`} class="text-small block opacity-50 mt-2">Ignore</label>
-                <input
-                  type="checkbox"
-                  id={`ignore-${itemId}`}
-                  class={`toggle toggle-xs toggle-${badgeColor}`}
-                  checked={isIgnored(itemId)}
-                  onClick$={() => {
-                    const ignoredData = ignored.value;
-                    ignoredData[itemId] = !ignoredData[itemId];
-                    setIgnored(ignoredData);
-
-                    const completedData = completed.value;
-                    completedData[itemId] = false;
-                    setCompleted(completedData);
-                  }}
-                />
-              </td>
-              <td>
-                <label
-                  for={`done-${itemId}`}
-                  class={`text-base font-bold ${isIgnored(itemId) ? 'line-through' : 'cursor-pointer'}`}>
-                  {item.point}
-                </label>
-              </td>
-              <td>
-                <div class={`badge gap-2 badge-${badgeColor}`}>
-                  {item.priority}
-                </div>
-              </td>
-              <td class={styles.checklistItemDescription} dangerouslySetInnerHTML={parseMarkdown(item.details)}></td>
-            </tr>
+        <div class="flex flex-wrap gap-2 justify-end my-4">
+          {(sortState.column || JSON.stringify(filterState) !== JSON.stringify(originalFilters)) && (
+            <button class="btn btn-sm hover:btn-primary" onClick$={resetFilters}>
+              <Icon width={18} height={16} icon="clear" />
+              Reset Filters
+            </button>
           )}
-        )}
-      </tbody>
-    </table>
+          <button class="btn btn-sm hover:btn-primary" onClick$={() => { showFilters.value = !showFilters.value; }}>
+            <Icon width={18} height={16} icon="filters" />
+            {showFilters.value ? 'Hide' : 'Show'} Filters
+          </button>
+        </div>
+      </div>
+
+      {showFilters.value && (
+        <div class="flex flex-wrap justify-between bg-base-100 rounded px-4 py-1 transition-all"
+          style={{ opacity: stage.value === "enterTo" ? 1 : 0, height: stage.value === "enterTo" ? 'auto' : 0 }}>
+          {/* Filter by completion */}
+          <div class="flex justify-end items-center gap-1">
+            <p class="font-bold text-sm">Show</p>
+            <label onClick$={() => (filterState.show = 'all')}
+              class="p-2 rounded hover:bg-front transition-all cursor-pointer flex gap-2">
+              <span class="text-sm">All</span>
+              <input type="radio" name="show" class="radio radio-sm checked:radio-info" checked={filterState.show === 'all'} />
+            </label>
+            <label onClick$={() => (filterState.show = 'remaining')}
+              class="p-2 rounded hover:bg-front transition-all cursor-pointer flex gap-2">
+              <span class="text-sm">Remaining</span>
+              <input type="radio" name="show" class="radio radio-sm checked:radio-error" checked={filterState.show === 'remaining'} />
+            </label>
+            <label onClick$={() => (filterState.show = 'completed')}
+              class="p-2 rounded hover:bg-front transition-all cursor-pointer flex gap-2">
+              <span class="text-sm">Completed</span>
+              <input type="radio" name="show" class="radio radio-sm checked:radio-success" checked={filterState.show === 'completed'} />
+            </label>
+          </div>
+          {/* Filter by level */}
+          <div class="flex justify-end items-center gap-1">
+            <p class="font-bold text-sm">Filter</p>
+            <label class="p-2 rounded hover:bg-front transition-all cursor-pointer flex gap-2">
+              <span class="text-sm">Essential</span>
+              <input
+                type="checkbox"
+                checked={filterState.levels.essential}
+                onChange$={() => (filterState.levels.essential = !filterState.levels.essential)}
+                class="checkbox checkbox-sm checked:checkbox-success"
+              />
+            </label>
+            <label class="p-2 rounded hover:bg-front transition-all cursor-pointer flex gap-2">
+              <span class="text-sm">Optional</span>
+              <input
+                type="checkbox"
+                checked={filterState.levels.optional}
+                onChange$={() => (filterState.levels.optional = !filterState.levels.optional)}
+                class="checkbox checkbox-sm checked:checkbox-warning"
+              />
+            </label>
+            <label
+              class="p-2 rounded hover:bg-front transition-all cursor-pointer flex gap-2">
+              <span class="text-sm">Advanced</span>
+              <input
+                type="checkbox"
+                checked={filterState.levels.advanced}
+                class="checkbox checkbox-sm checked:checkbox-error"
+                onChange$={() => (filterState.levels.advanced = !filterState.levels.advanced)}
+              />
+            </label>
+          </div>
+        </div>
+      )}
+
+      <div class="grid grid-cols-1 gap-4">
+      {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 (
+    <details
+      key={index}
+      class={[
+        'rounded-lg p-4 shadow transition-all',
+        isItemCompleted ? `bg-${badgeColor} bg-opacity-10` : 'bg-base-100',
+        isItemIgnored ? 'opacity-50' : '',
+        !isItemIgnored && !isItemCompleted ? `hover:bg-opacity-5 hover:bg-${badgeColor}` : '',
+      ].join(' ')}
+    >
+      <summary class="flex justify-between items-center cursor-pointer">
+        <div class="flex-1 flex items-center gap-2">
+          <div class="flex flex-col gap-2">
+          <div class={`badge font-[600] gap-2 badge-${badgeColor}`}>
+            {item.priority}
+          </div>
+          <label for={`done-${itemId}`} class={`text-base font-bold ${isIgnored(itemId) ? 'line-through' : ''}`}>
+            {item.point}
+          </label>
+          </div>
+          <Icon width={18} height={16} icon="chevron-down" class={`${styles.arrow} ${styles.summaryIcon}`} />
+        </div>
+        <div class="flex gap-2 items-center">
+          <div class="flex items-center gap-1">
+            <label for={`done-${itemId}`} class="text-xs">Done</label>
+            <input
+              type="radio"
+              name={`status-${itemId}`}
+              class={`radio radio-${badgeColor}`}
+              id={`done-${itemId}`}
+              checked={isChecked(itemId)}
+              disabled={isIgnored(itemId)}
+              onClick$={() => {
+                const data = completed.value;
+                data[itemId] = !data[itemId];
+                setCompleted(data);
+              }}
+            />
+          </div>
+          <div class="flex items-center gap-1">
+            <label for={`ignore-${itemId}`} class="text-xs">Ignore</label>
+            <input
+              type="radio"
+              name={`status-${itemId}`}
+              class={`radio radio-${badgeColor}`}
+              id={`ignore-${itemId}`}
+              checked={isIgnored(itemId)}
+              onClick$={() => {
+                const ignoredData = ignored.value;
+                ignoredData[itemId] = !ignoredData[itemId];
+                setIgnored(ignoredData);
+
+                const completedData = completed.value;
+                completedData[itemId] = false;
+                setCompleted(completedData);
+              }}
+            />
+          </div>
+        </div>
+      </summary>
+      <div class={styles.checklistItemDescription} dangerouslySetInnerHTML={parseMarkdown(item.details)}></div>
+    </details>
+          )
+        })}
+      </div>
     </>
   );
 });