smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Table fixes

Browse Source
This commit is contained in:
Sean Edmunds
2025-11-07 14:15:54 -06:00
parent 1b23933875
commit f37cf84a61
10 changed files with 238 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
package-lock.json generated
View File

@@ -32,13 +32,13 @@
"@types/react": "^19.2.2",
"@types/react-dom": "^19.2.2",
"@vitejs/plugin-react": "^5.1.0",
"@vitest/coverage-v8": "^4.0.7",
"@vitest/ui": "^4.0.7",
"@vitest/coverage-v8": "^4.0.8",
"@vitest/ui": "^4.0.8",
"typescript": "^5.9.3",
"vite": "^7.2.1",
"vite": "^7.2.2",
"vite-plugin-dts": "~4.5.4",
"vite-tsconfig-paths": "^5.1.4",
"vitest": "^4.0.7"
"vitest": "^4.0.8"
}
},
"node_modules/@babel/code-frame": {
@@ -215,9 +215,9 @@
}
},
"node_modules/@babel/helper-validator-identifier": {
"version": "7.27.1",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
"integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
"version": "7.28.5",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
"integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
"devOptional": true,
"license": "MIT",
"engines": {
@@ -249,13 +249,13 @@
}
},
"node_modules/@babel/parser": {
"version": "7.28.4",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz",
"integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==",
"version": "7.28.5",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
"integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
"devOptional": true,
"license": "MIT",
"dependencies": {
"@babel/types": "^7.28.4"
"@babel/types": "^7.28.5"
},
"bin": {
"parser": "bin/babel-parser.js"
@@ -344,14 +344,14 @@
}
},
"node_modules/@babel/types": {
"version": "7.28.4",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz",
"integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==",
"version": "7.28.5",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
"integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
"devOptional": true,
"license": "MIT",
"dependencies": {
"@babel/helper-string-parser": "^7.27.1",
"@babel/helper-validator-identifier": "^7.27.1"
"@babel/helper-validator-identifier": "^7.28.5"
},
"engines": {
"node": ">=6.9.0"
@@ -1916,30 +1916,30 @@
}
},
"node_modules/@vitest/coverage-v8": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-4.0.7.tgz",
"integrity": "sha512-MXc+kEA5EUwMMGmNt1S6CIOEl/iCmAhGZQq1QgMNC3/QpYSOxkysEi6pxWhkqJ7YT/RduoVEV5rxFxHG18V3LA==",
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-4.0.8.tgz",
"integrity": "sha512-wQgmtW6FtPNn4lWUXi8ZSYLpOIb92j3QCujxX3sQ81NTfQ/ORnE0HtK7Kqf2+7J9jeveMGyGyc4NWc5qy3rC4A==",
"dev": true,
"license": "MIT",
"dependencies": {
"@bcoe/v8-coverage": "^1.0.2",
"@vitest/utils": "4.0.7",
"ast-v8-to-istanbul": "^0.3.5",
"@vitest/utils": "4.0.8",
"ast-v8-to-istanbul": "^0.3.8",
"debug": "^4.4.3",
"istanbul-lib-coverage": "^3.2.2",
"istanbul-lib-report": "^3.0.1",
"istanbul-lib-source-maps": "^5.0.6",
"istanbul-reports": "^3.2.0",
"magicast": "^0.3.5",
"std-env": "^3.9.0",
"magicast": "^0.5.1",
"std-env": "^3.10.0",
"tinyrainbow": "^3.0.3"
},
"funding": {
"url": "https://opencollective.com/vitest"
},
"peerDependencies": {
"@vitest/browser": "4.0.7",
"vitest": "4.0.7"
"@vitest/browser": "4.0.8",
"vitest": "4.0.8"
},
"peerDependenciesMeta": {
"@vitest/browser": {
@@ -1948,17 +1948,17 @@
}
},
"node_modules/@vitest/expect": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.7.tgz",
"integrity": "sha512-jGRG6HghnJDjljdjYIoVzX17S6uCVCBRFnsgdLGJ6CaxfPh8kzUKe/2n533y4O/aeZ/sIr7q7GbuEbeGDsWv4Q==",
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.8.tgz",
"integrity": "sha512-Rv0eabdP/xjAHQGr8cjBm+NnLHNoL268lMDK85w2aAGLFoVKLd8QGnVon5lLtkXQCoYaNL0wg04EGnyKkkKhPA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@standard-schema/spec": "^1.0.0",
"@types/chai": "^5.2.2",
"@vitest/spy": "4.0.7",
"@vitest/utils": "4.0.7",
"chai": "^6.0.1",
"@vitest/spy": "4.0.8",
"@vitest/utils": "4.0.8",
"chai": "^6.2.0",
"tinyrainbow": "^3.0.3"
},
"funding": {
@@ -1966,15 +1966,15 @@
}
},
"node_modules/@vitest/mocker": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.7.tgz",
"integrity": "sha512-OsDwLS7WnpuNslOV6bJkXVYVV/6RSc4eeVxV7h9wxQPNxnjRvTTrIikfwCbMyl8XJmW6oOccBj2Q07YwZtQcCw==",
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.8.tgz",
"integrity": "sha512-9FRM3MZCedXH3+pIh+ME5Up2NBBHDq0wqwhOKkN4VnvCiKbVxddqH9mSGPZeawjd12pCOGnl+lo/ZGHt0/dQSg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@vitest/spy": "4.0.7",
"@vitest/spy": "4.0.8",
"estree-walker": "^3.0.3",
"magic-string": "^0.30.19"
"magic-string": "^0.30.21"
},
"funding": {
"url": "https://opencollective.com/vitest"
@@ -2003,9 +2003,9 @@
}
},
"node_modules/@vitest/pretty-format": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.7.tgz",
"integrity": "sha512-YY//yxqTmk29+/pK+Wi1UB4DUH3lSVgIm+M10rAJ74pOSMgT7rydMSc+vFuq9LjZLhFvVEXir8EcqMke3SVM6Q==",
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.8.tgz",
"integrity": "sha512-qRrjdRkINi9DaZHAimV+8ia9Gq6LeGz2CgIEmMLz3sBDYV53EsnLZbJMR1q84z1HZCMsf7s0orDgZn7ScXsZKg==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -2016,13 +2016,13 @@
}
},
"node_modules/@vitest/runner": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.7.tgz",
"integrity": "sha512-orU1lsu4PxLEcDWfjVCNGIedOSF/YtZ+XMrd1PZb90E68khWCNzD8y1dtxtgd0hyBIQk8XggteKN/38VQLvzuw==",
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.8.tgz",
"integrity": "sha512-mdY8Sf1gsM8hKJUQfiPT3pn1n8RF4QBcJYFslgWh41JTfrK1cbqY8whpGCFzBl45LN028g0njLCYm0d7XxSaQQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@vitest/utils": "4.0.7",
"@vitest/utils": "4.0.8",
"pathe": "^2.0.3"
},
"funding": {
@@ -2030,14 +2030,14 @@
}
},
"node_modules/@vitest/snapshot": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.7.tgz",
"integrity": "sha512-xJL+Nkw0OjaUXXQf13B8iKK5pI9QVtN9uOtzNHYuG/o/B7fIEg0DQ+xOe0/RcqwDEI15rud1k7y5xznBKGUXAA==",
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.8.tgz",
"integrity": "sha512-Nar9OTU03KGiubrIOFhcfHg8FYaRaNT+bh5VUlNz8stFhCZPNrJvmZkhsr1jtaYvuefYFwK2Hwrq026u4uPWCw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@vitest/pretty-format": "4.0.7",
"magic-string": "^0.30.19",
"@vitest/pretty-format": "4.0.8",
"magic-string": "^0.30.21",
"pathe": "^2.0.3"
},
"funding": {
@@ -2045,9 +2045,9 @@
}
},
"node_modules/@vitest/spy": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.7.tgz",
"integrity": "sha512-FW4X8hzIEn4z+HublB4hBF/FhCVaXfIHm8sUfvlznrcy1MQG7VooBgZPMtVCGZtHi0yl3KESaXTqsKh16d8cFg==",
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.8.tgz",
"integrity": "sha512-nvGVqUunyCgZH7kmo+Ord4WgZ7lN0sOULYXUOYuHr55dvg9YvMz3izfB189Pgp28w0vWFbEEfNc/c3VTrqrXeA==",
"dev": true,
"license": "MIT",
"funding": {
@@ -2055,14 +2055,14 @@
}
},
"node_modules/@vitest/ui": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-4.0.7.tgz",
"integrity": "sha512-aIFPci9xoTmVkxpqsSKcRG/Hn0lTy421jsCehHydYeIMd+getn0Pue0JqY5cW8yZglZjMeX0YfIy5wDtQDHEcA==",
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-4.0.8.tgz",
"integrity": "sha512-F9jI5rSstNknPlTlPN2gcc4gpbaagowuRzw/OJzl368dvPun668Q182S8Q8P9PITgGCl5LAKXpzuue106eM4wA==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@vitest/utils": "4.0.7",
"@vitest/utils": "4.0.8",
"fflate": "^0.8.2",
"flatted": "^3.3.3",
"pathe": "^2.0.3",
@@ -2074,17 +2074,17 @@
"url": "https://opencollective.com/vitest"
},
"peerDependencies": {
"vitest": "4.0.7"
"vitest": "4.0.8"
}
},
"node_modules/@vitest/utils": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.7.tgz",
"integrity": "sha512-HNrg9CM/Z4ZWB6RuExhuC6FPmLipiShKVMnT9JlQvfhwR47JatWLChA6mtZqVHqypE6p/z6ofcjbyWpM7YLxPQ==",
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.8.tgz",
"integrity": "sha512-pdk2phO5NDvEFfUTxcTP8RFYjVj/kfLSPIN5ebP2Mu9kcIMeAQTbknqcFEyBcC4z2pJlJI9aS5UQjcYfhmKAow==",
"dev": true,
"license": "MIT",
"dependencies": {
"@vitest/pretty-format": "4.0.7",
"@vitest/pretty-format": "4.0.8",
"tinyrainbow": "^3.0.3"
},
"funding": {
@@ -3136,14 +3136,15 @@
}
},
"node_modules/magicast": {
"version": "0.3.5",
"resolved": "https://registry.npmjs.org/magicast/-/magicast-0.3.5.tgz",
"integrity": "sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==",
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/magicast/-/magicast-0.5.1.tgz",
"integrity": "sha512-xrHS24IxaLrvuo613F719wvOIv9xPHFWQHuvGUBmPnCA/3MQxKI3b+r7n1jAoDHmsbC5bRhTZYR77invLAxVnw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/parser": "^7.25.4",
"@babel/types": "^7.25.4",
"source-map-js": "^1.2.0"
"@babel/parser": "^7.28.5",
"@babel/types": "^7.28.5",
"source-map-js": "^1.2.1"
}
},
"node_modules/make-dir": {
@@ -4144,9 +4145,9 @@
}
},
"node_modules/vite": {
"version": "7.2.1",
"resolved": "https://registry.npmjs.org/vite/-/vite-7.2.1.tgz",
"integrity": "sha512-qTl3VF7BvOupTR85Zc561sPEgxyUSNSvTQ9fit7DEMP7yPgvvIGm5Zfa1dOM+kOwWGNviK9uFM9ra77+OjK7lQ==",
"version": "7.2.2",
"resolved": "https://registry.npmjs.org/vite/-/vite-7.2.2.tgz",
"integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
"dev": true,
"license": "MIT",
"peer": true,
@@ -4266,27 +4267,27 @@
}
},
"node_modules/vitest": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.7.tgz",
"integrity": "sha512-xQroKAadK503CrmbzCISvQUjeuvEZzv6U0wlnlVFOi5i3gnzfH4onyQ29f3lzpe0FresAiTAd3aqK0Bi/jLI8w==",
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.8.tgz",
"integrity": "sha512-urzu3NCEV0Qa0Y2PwvBtRgmNtxhj5t5ULw7cuKhIHh3OrkKTLlut0lnBOv9qe5OvbkMH2g38G7KPDCTpIytBVg==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@vitest/expect": "4.0.7",
"@vitest/mocker": "4.0.7",
"@vitest/pretty-format": "4.0.7",
"@vitest/runner": "4.0.7",
"@vitest/snapshot": "4.0.7",
"@vitest/spy": "4.0.7",
"@vitest/utils": "4.0.7",
"@vitest/expect": "4.0.8",
"@vitest/mocker": "4.0.8",
"@vitest/pretty-format": "4.0.8",
"@vitest/runner": "4.0.8",
"@vitest/snapshot": "4.0.8",
"@vitest/spy": "4.0.8",
"@vitest/utils": "4.0.8",
"debug": "^4.4.3",
"es-module-lexer": "^1.7.0",
"expect-type": "^1.2.2",
"magic-string": "^0.30.19",
"magic-string": "^0.30.21",
"pathe": "^2.0.3",
"picomatch": "^4.0.3",
"std-env": "^3.9.0",
"std-env": "^3.10.0",
"tinybench": "^2.9.0",
"tinyexec": "^0.3.2",
"tinyglobby": "^0.2.15",
@@ -4307,10 +4308,10 @@
"@edge-runtime/vm": "*",
"@types/debug": "^4.1.12",
"@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
"@vitest/browser-playwright": "4.0.7",
"@vitest/browser-preview": "4.0.7",
"@vitest/browser-webdriverio": "4.0.7",
"@vitest/ui": "4.0.7",
"@vitest/browser-playwright": "4.0.8",
"@vitest/browser-preview": "4.0.8",
"@vitest/browser-webdriverio": "4.0.8",
"@vitest/ui": "4.0.8",
"happy-dom": "*",
"jsdom": "*"
},

8
package.json
View File

@@ -34,12 +34,12 @@
"@types/react": "^19.2.2",
"@types/react-dom": "^19.2.2",
"@vitejs/plugin-react": "^5.1.0",
"@vitest/coverage-v8": "^4.0.7",
"@vitest/ui": "^4.0.7",
"@vitest/coverage-v8": "^4.0.8",
"@vitest/ui": "^4.0.8",
"typescript": "^5.9.3",
"vite": "^7.2.1",
"vite": "^7.2.2",
"vite-plugin-dts": "~4.5.4",
"vite-tsconfig-paths": "^5.1.4",
"vitest": "^4.0.7"
"vitest": "^4.0.8"
}
}

6
src/App.tsx
View File

@@ -80,11 +80,11 @@ function App() {
useEffect(() => {
if (allThemes && themeName) {
if (currentThemePlaylist === 'All') {
if (themeName !== 'random') {
if (themeName === 'random') {
handleThemeChange(allThemes, false);
} else {
const temp = allThemes.find((t: Theme) => t.name === themeName);
setTheme(temp);
} else {
handleThemeChange(allThemes, false);
}
} else if (currentThemePlaylist === 'Time of Day') {
const themeList = JSON.parse(

28
src/components/Columns/SearchHistoryColumns.tsx
View File

@@ -45,8 +45,11 @@ export const SearchHistoryColumns = (
</Box>
</Group>
),
size: 64,
maxSize: 64,
meta: {
filterVariant: 'counter',
},
size: 32,
maxSize: 32,
enableSorting: false,
}),
columnHelper.accessor('prefix', {
@@ -64,26 +67,43 @@ export const SearchHistoryColumns = (
if (value === null) return true;
return row.getValue(id) === value;
},
size: 32,
maxSize: 32,
}),
columnHelper.accessor('provider', {
id: 'provider',
cell: ({ cell }: any) => <Text mx={8}>{cell.getValue()}</Text>,
cell: ({ cell }: any) => (
<Text mx={8} style={{ textAlign: 'center' }}>
{cell.getValue()}
</Text>
),
header: () => <Text fw={600}>Provider</Text>,
meta: {
filterVariant: 'mantineSelect',
},
size: 128,
maxSize: 128,
}),
columnHelper.accessor('searchTerm', {
id: 'searchTerm',
cell: ({ cell }: any) => (
<Group
style={{
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
}}
>
<Text w={'100%'} mx={8} style={{ justifySelf: 'center' }}>
{cell.getValue()}
</Text>
</Group>
),
header: () => <Text fw={600}>Search String</Text>,
meta: {
filterVariant: 'text',
},
maxSize: 1920,
}),
columnHelper.accessor('dateTimeStamp', {
id: 'dateTimeStamp',
@@ -115,5 +135,7 @@ export const SearchHistoryColumns = (
}
return true;
},
size: 132,
maxSize: 132,
}),
];

57
src/components/DataTable/DataTable.tsx
View File

@@ -1,4 +1,4 @@
import { Button, Group } from '@mantine/core';
import { Button, Group, Text } from '@mantine/core';
import {
type ColumnFiltersState,
flexRender,
@@ -10,7 +10,7 @@ import {
type SortingState,
useReactTable,
} from '@tanstack/react-table';
import { type Dispatch, type SetStateAction, useState } from 'react';
import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
import { Filter } from './components';
export function DataTable({
@@ -55,32 +55,47 @@ export function DataTable({
globalFilterFn: 'includesString',
onGlobalFilterChange: setGlobalFilter,
});
useEffect(() => {
if (!filtersEnabled) {
setColumnFilters([]);
}
}, [filtersEnabled]);
return (
<table style={{ width: '100%', backgroundColor: 'var(--mantine-color-primary-0)' }}>
<table
style={{
borderSpacing: '2px 0px',
backgroundColor: 'var(--mantine-color-accent-0)',
}}
>
<thead
style={{
position: 'sticky',
top: 0,
zIndex: 1,
backgroundColor: 'var(--mantine-color-primary-0)',
borderTopLeftRadius: '1rem',
borderTopRightRadius: '1rem',
}}
>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id}>
<th
key={header.id}
style={{
width: header.getSize(),
padding: 0,
}}
>
{header.isPlaceholder ? null : (
<>
<Button
{...{
style: {
cursor: 'pointer',
width: '100%',
borderRadius: '0px',
backgroundColor: 'transparent',
},
px: 0,
onClick: () => {
if (header.column.getCanSort()) {
if (sorting[0].id === header.id) {
@@ -114,6 +129,7 @@ export function DataTable({
<Filter
column={header.column}
options={[...new Set(data.map((item: any) => item[header.id]))]}
resultCount={table.getFilteredRowModel().rows.length}
/>
) : null}
</>
@@ -139,7 +155,12 @@ export function DataTable({
}}
>
{row.getVisibleCells().map((cell) => (
<td key={cell.id}>
<td
key={cell.id}
style={{
width: cell.column.getSize(),
}}
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
@@ -158,6 +179,26 @@ export function DataTable({
))}
</tr>
))}
<tr
style={{
width: '100%',
backgroundColor: 'var(--mantine-color-primary-0)',
position: 'sticky',
bottom: 0,
}}
>
<td colSpan={5}>
<Text
style={{
color: 'var(--mantine-color-background-0)',
fontWeight: 'bold',
textAlign: 'center',
}}
>
Total Entries: {table.getRowCount()}
</Text>
</td>
</tr>
</tfoot>
</table>
);

28
src/components/DataTable/components/Filter.tsx
View File

@@ -8,6 +8,7 @@ import {
RangeSlider,
Select,
Stack,
Text,
} from '@mantine/core';
import { DatePickerInput } from '@mantine/dates';
import type { Column, RowData } from '@tanstack/react-table';
@@ -26,11 +27,20 @@ declare module '@tanstack/react-table' {
| 'multiSelect'
| 'slider'
| 'checkbox'
| 'counter'
| 'none';
}
}
export function Filter({ column, options }: { column: Column<unknown>; options: any }) {
export function Filter({
column,
options,
resultCount,
}: {
column: Column<unknown>;
options: any;
resultCount?: number;
}) {
const columnFilterValue = column.getFilterValue();
const { filterVariant } = column.columnDef.meta ?? {};
const optionsFilter: OptionsFilter = ({ options, search }) => {
@@ -88,12 +98,15 @@ export function Filter({ column, options }: { column: Column<unknown>; options:
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
dropdown: selectClasses.dropdown,
}}
data={options.map((option: ComboboxItem) => {
data={options
.map((option: ComboboxItem) => {
return { value: option, label: option };
})}
})
.sort((a: ComboboxItem, b: ComboboxItem) => a.label.localeCompare(b.label))}
onChange={(e: any) => column.setFilterValue(e)}
w={'auto'}
clearable
/>
) : filterVariant === 'multiSelect' ? (
<MultiSelect
@@ -149,6 +162,13 @@ export function Filter({ column, options }: { column: Column<unknown>; options:
<Checkbox onChange={(value) => column.setFilterValue(value.target.checked)} />
</Group>
// See faceted column filters example for datalist search suggestions
) : filterVariant === 'counter' ? (
<Group h={36} align='center' justify='center'>
<Text c={'var(--mantine-color-background-0)'}>
{resultCount}/{options.length}
</Text>
</Group>
// See faceted column filters example for datalist search suggestions
) : (
<Box
style={{

1
src/pages/homepage/components/SettingsButton/SettingsCard.tsx
View File

@@ -132,6 +132,7 @@ function SettingsCard({
placeholder={`Sort ${sectionTitle}...`}
value={sort}
data={['Custom', 'A>Z', 'Z>A', 'Newest', 'Oldest']}
className={selectClasses.settingsItem}
classNames={{
wrapper: selectClasses.menuSelectWrapper,
root: selectClasses.menuSelectRoot,

17
src/pages/settings/components/Search/SearchHistory.tsx
View File

@@ -108,23 +108,6 @@ const SearchHistory = () => {
setGlobalFilter={setGlobalFilter}
/>
</Stack>
<Group
w={'100%'}
style={{
backgroundColor: 'var(--mantine-color-primary-0)',
}}
align='center'
justify='center'
>
<Text
style={{
color: 'var(--mantine-color-background-0)',
fontWeight: 'bold',
}}
>
Results: {searchHistory.length}
</Text>
</Group>
</Stack>
</Stack>
</Stack>

8
src/pages/settings/components/Theming/ThemePlaylists/ThemePlaylists.tsx
View File

@@ -221,15 +221,15 @@ export function ThemePlaylists() {
<ThemePlaylistCard
cardPlaylist={{
id:
themePlaylists?.filter(
themePlaylists?.find(
(a: ThemePlaylist) => a.name === 'Time of Day',
)[0]?.id ?? undefined,
)?.id ?? undefined,
name: 'Time of Day',
default: 1,
themeList:
themePlaylists?.filter(
themePlaylists?.find(
(a: ThemePlaylist) => a.name === 'Time of Day',
)[0]?.themeList ?? '[]',
)?.themeList ?? '[]',
}}
handleOpen={handleOpen}
allThemes={allThemeData}

78
src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistCard.tsx
View File

@@ -67,7 +67,7 @@ export function ThemePlaylistCard({
paddingLeft: '.25rem',
backgroundColor: 'var(--mantine-color-border-0)',
borderRadius: '4px',
color: 'var(--mantine-color-background-0)',
color: 'var(--mantine-color-primary-0)',
zIndex: 3,
}}
>
@@ -130,44 +130,7 @@ export function ThemePlaylistCard({
>
{hover && <Overlay opacity={0.5} zIndex={1} />}
<Stack h={'100%'} w={'100%'} align='center' mt={'.75rem'}>
{cardPlaylist.name !== 'Time of Day' ? (
<>
<Text
px={'.5rem'}
mt={'.5rem'}
mb={'-.5rem'}
style={{
color: 'var(--mantine-color-background-0)',
backgroundColor: 'var(--mantine-color-primary-0)',
borderRadius: '4px',
zIndex: 160,
}}
>
Count: {themeList.length}
</Text>
<ScrollArea
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
h={'255px'}
w={'100%'}
style={{ zIndex: 2 }}
>
<Stack gap={4}>
{themeList.length > 0 &&
themeList
.sort((a: number, b: number) => (a > b ? 1 : -1))
.map((item: number) => {
const miniTheme: any = allThemes.find(
(theme: Theme) => theme.id === item,
);
return (
<ThemeMiniCard key={miniTheme?.id} miniTheme={miniTheme} />
);
})}
</Stack>
</ScrollArea>
</>
) : (
{cardPlaylist.name === 'Time of Day' ? (
<>
<Text
px={'.5rem'}
@@ -207,6 +170,43 @@ export function ThemePlaylistCard({
</Stack>
</ScrollArea>
</>
) : (
<>
<Text
px={'.5rem'}
mt={'.5rem'}
mb={'-.5rem'}
style={{
color: 'var(--mantine-color-background-0)',
backgroundColor: 'var(--mantine-color-primary-0)',
borderRadius: '4px',
zIndex: 160,
}}
>
Count: {themeList.length}
</Text>
<ScrollArea
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
h={'255px'}
w={'100%'}
style={{ zIndex: 2 }}
>
<Stack gap={4}>
{themeList.length > 0 &&
themeList
.sort((a: number, b: number) => (a > b ? 1 : -1))
.map((item: number) => {
const miniTheme: any = allThemes.find(
(theme: Theme) => theme.id === item,
);
return (
<ThemeMiniCard key={miniTheme?.id} miniTheme={miniTheme} />
);
})}
</Stack>
</ScrollArea>
</>
)}
</Stack>
</Button>