project init
marcelolop
parent
d5415b7747
commit
2fc27fa500
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue