mirror of
https://github.com/Lissy93/personal-security-checklist.git
synced 2024-12-25 15:29:23 -05:00
Adds filters, sorting and more to checklist page
This commit is contained in:
Alicia Sykes
parent
5d665df3d4
commit
d29d5e2664
@ -38,6 +38,7 @@
|
||||
"chart.js": "^4.4.1",
|
||||
"marked": "^12.0.0",
|
||||
"progressbar.js": "^1.1.1",
|
||||
"qwik-transition": "^0.0.7",
|
||||
"sharp": "^0.33.2"
|
||||
},
|
||||
"resolutions": {
|
||||
|
||||
@ -114,6 +114,16 @@ const getSvgPath = (icon: string) => {
|
||||
vb: "0 0 512 512",
|
||||
path: "M3.9 54.9C10.5 40.9 24.5 32 40 32H472c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9V448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6V320.9L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z",
|
||||
};
|
||||
case 'sort':
|
||||
return {
|
||||
vb: "0 0 512 512",
|
||||
path: "M137.4 41.4c12.5-12.5 32.8-12.5 45.3 0l128 128c9.2 9.2 11.9 22.9 6.9 34.9s-16.6 19.8-29.6 19.8H32c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9l128-128zm0 429.3l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8H288c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128c-12.5 12.5-32.8 12.5-45.3 0z",
|
||||
};
|
||||
case 'clear':
|
||||
return {
|
||||
vb: "0 0 512 512",
|
||||
path: "M0 128C0 92.7 28.7 64 64 64H370.7c17 0 33.3 6.7 45.3 18.7L566.6 233.4c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6L416 429.3c-12 12-28.3 18.7-45.3 18.7H64c-35.3 0-64-28.7-64-64V128zm143 47c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z",
|
||||
};
|
||||
default:
|
||||
return { vb: "", path: "" }; // Default path or a placeholder icon
|
||||
}
|
||||
@ -150,7 +160,7 @@ const IconComponent = component$((props: IconProps) => {
|
||||
const { vb, path } = getSvgPath(props.icon);
|
||||
const svgClass = props.class || '';
|
||||
const width = props.width || 80;
|
||||
const height = props.height || 50;
|
||||
const height = props.height || props.width || 50;
|
||||
|
||||
return (
|
||||
<svg class={svgClass} style={svgStyle} xmlns="http://www.w3.org/2000/svg" viewBox={vb} width={width} height={height}>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { component$ } from "@builder.io/qwik";
|
||||
import { $, component$, useStore, useSignal } from "@builder.io/qwik";
|
||||
import { useCSSTransition } from "qwik-transition";
|
||||
|
||||
import Icon from "~/components/core/icon";
|
||||
import type { Priority, Section } from '../../types/PSC';
|
||||
import type { Priority, Section, Checklist } from '../../types/PSC';
|
||||
import { marked } from "marked";
|
||||
import { useLocalStorage } from "~/hooks/useLocalStorage";
|
||||
|
||||
@ -10,6 +11,24 @@ export default component$((props: { section: Section }) => {
|
||||
const [completed, setCompleted] = useLocalStorage('PSC_PROGRESS', {});
|
||||
const [ignored, setIgnored] = useLocalStorage('PSC_IGNORED', {});
|
||||
|
||||
const showFilters = useSignal(false);
|
||||
const { stage } = useCSSTransition(showFilters, { timeout: 300 });
|
||||
|
||||
const sortState = useStore({ column: '', ascending: true });
|
||||
|
||||
const checklist = useSignal<Checklist[]>(props.section.checklist);
|
||||
|
||||
const originalFilters = {
|
||||
show: 'all', // 'all', 'remaining', 'completed'
|
||||
levels: {
|
||||
recommended: true,
|
||||
optional: true,
|
||||
advanced: true,
|
||||
},
|
||||
};
|
||||
|
||||
const filterState = useStore(originalFilters);
|
||||
|
||||
const getBadgeClass = (priority: Priority, precedeClass: string = '') => {
|
||||
switch (priority.toLocaleLowerCase()) {
|
||||
case 'recommended':
|
||||
@ -41,29 +60,102 @@ export default component$((props: { section: Section }) => {
|
||||
return completed.value[pointId] || false;
|
||||
};
|
||||
|
||||
const filteredChecklist = checklist.value.filter((item) => {
|
||||
const itemId = generateId(item.point);
|
||||
const itemCompleted = isChecked(itemId);
|
||||
const itemIgnored = isIgnored(itemId);
|
||||
const itemLevel = item.priority;
|
||||
|
||||
// Filter by completion status
|
||||
if (filterState.show === 'remaining' && (itemCompleted || itemIgnored)) return false;
|
||||
if (filterState.show === 'completed' && !itemCompleted) return false;
|
||||
|
||||
// Filter by level
|
||||
return filterState.levels[itemLevel.toLocaleLowerCase() as Priority];
|
||||
});
|
||||
|
||||
const sortChecklist = (a: Checklist, b: Checklist) => {
|
||||
const getValue = (item: Checklist) => {
|
||||
switch (sortState.column) {
|
||||
case 'done':
|
||||
if (isIgnored(generateId(item.point))) {
|
||||
return 2;
|
||||
}
|
||||
return isChecked(generateId(item.point)) ? 0 : 1;
|
||||
case 'advice':
|
||||
return item.point;
|
||||
case 'level':
|
||||
return ['recommended', 'optional', 'advanced'].indexOf(item.priority.toLowerCase());
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
};
|
||||
const valueA = getValue(a);
|
||||
const valueB = getValue(b);
|
||||
|
||||
if (valueA === valueB) {
|
||||
return 0;
|
||||
} else if (sortState.ascending) {
|
||||
return valueA < valueB ? -1 : 1;
|
||||
} else {
|
||||
return valueA > valueB ? -1 : 1;
|
||||
}
|
||||
};
|
||||
|
||||
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;
|
||||
sortState.column = '';
|
||||
sortState.ascending = true;
|
||||
filterState.levels = originalFilters.levels;
|
||||
filterState.show = originalFilters.show;
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<div class="collapse rounded-none">
|
||||
<input type="checkbox" />
|
||||
<div class="collapse-title flex justify-end font-bold">
|
||||
<button class="btn btn-sm hover:bg-primary"><Icon width={16} height={16} icon="filters"/>Filters</button>
|
||||
</div>
|
||||
<div class="collapse-content flex flex-wrap justify-between bg-base-100 rounded px-4 pt-1 !pb-1">
|
||||
|
||||
<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>
|
||||
|
||||
{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 class="p-2 rounded hover:bg-front transition-all cursor-pointer flex gap-2">
|
||||
<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-all" class="radio radio-sm checked:radio-info" checked />
|
||||
<input type="radio" name="show" class="radio radio-sm checked:radio-info" checked />
|
||||
</label>
|
||||
<label class="p-2 rounded hover:bg-front transition-all cursor-pointer flex gap-2">
|
||||
<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-remaining" class="radio radio-sm checked:radio-error" />
|
||||
<input type="radio" name="show" class="radio radio-sm checked:radio-error" />
|
||||
</label>
|
||||
<label class="p-2 rounded hover:bg-front transition-all cursor-pointer flex gap-2">
|
||||
<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-completed" class="radio radio-sm checked:radio-success" />
|
||||
<input type="radio" name="show" class="radio radio-sm checked:radio-success" />
|
||||
</label>
|
||||
</div>
|
||||
{/* Filter by level */}
|
||||
@ -71,33 +163,60 @@ export default component$((props: { section: Section }) => {
|
||||
<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 class="checkbox checkbox-sm checked:checkbox-success" />
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={filterState.levels.recommended}
|
||||
onChange$={() => (filterState.levels.recommended = !filterState.levels.recommended)}
|
||||
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 class="checkbox checkbox-sm checked:checkbox-warning" />
|
||||
<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">
|
||||
<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 class="checkbox checkbox-sm checked:checkbox-error" />
|
||||
<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>
|
||||
|
||||
|
||||
)}
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Done?</th>
|
||||
<th>Advice</th>
|
||||
<th>Level</th>
|
||||
{ [
|
||||
{ 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>
|
||||
{props.section.checklist.map((item, index) => {
|
||||
{filteredChecklist.sort(sortChecklist).map((item, index) => {
|
||||
const badgeColor = getBadgeClass(item.priority);
|
||||
const itemId = generateId(item.point);
|
||||
const isItemCompleted = isChecked(itemId);
|
||||
|
||||
@ -39,7 +39,7 @@ module.exports = {
|
||||
],
|
||||
},
|
||||
safelist: [
|
||||
{
|
||||
{ // TODO: This adds a lot of overhead. Go through code, and remove any un-needed variants.
|
||||
pattern: /(bg|outline|text|tw-color|border)-(yellow|lime|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|red)-(200|300|400|500|600)/,
|
||||
variants: ['light', 'dark', 'hover', 'focus'],
|
||||
},
|
||||
|
||||
@ -3010,6 +3010,11 @@ queue-microtask@^1.2.2:
|
||||
resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
|
||||
integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
|
||||
|
||||
qwik-transition@^0.0.7:
|
||||
version "0.0.7"
|
||||
resolved "https://registry.yarnpkg.com/qwik-transition/-/qwik-transition-0.0.7.tgz#57c3d6db5fd0d0bca47a6ddef76a77b39a0b3c8a"
|
||||
integrity sha512-U1wEJ/RWYuwfuWl8cWToTJASkRogoBGlBKbr/lKhzQYGeLNXk2K7IUXCMtELcUNHEI7J1MyNbjYc5lA6fMbQ8w==
|
||||
|
||||
read-cache@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user