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

Bugfixes and updates

Browse Source
This commit is contained in:
Sean Edmunds
2025-06-24 16:20:29 -05:00
parent 81aecb261a
commit 9aa8dba56c
36 changed files with 1000 additions and 967 deletions
Download Patch File Download Diff File Expand all files Collapse all files

233
src/pages/homepage/components/Search/Search.tsx
View File

@@ -1,4 +1,4 @@
import { Group, type OptionsFilter, Select, Stack, Text } from '@mantine/core';
import { Group, type OptionsFilter, Overlay, Select, Stack, Text } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { HelpModal, WeatherModal } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
@@ -61,7 +61,7 @@ export default function Search({
searchValue,
setSearchValue,
} = useCommonHooks();
const [placeholderValue, setPlaceholderValue] = useState('');
const [placeholderValue, setPlaceholderValue] = useState<string>('');
const [value, setValue] = useState(0);
const handleSearchHistoryItem = ({ option }: { option: SearchHistoryItem }) => {
@@ -322,118 +322,125 @@ export default function Search({
}, [searchValue]);
return (
<Stack
style={{
height: '100px',
backgroundColor: 'transparent',
textAlign: 'center',
position: 'relative',
padding: '.3rem',
display: 'inline-block',
gap: 0,
}}
>
<Select
classNames={selectClasses}
className={selectClasses.search}
data={searchHistory.map((item: SearchHistoryItem) => ({
label: `${item.provider}`,
value: `${item.prefix} ${item.searchTerm} ${item.dateTimeStamp}`,
...item,
}))}
filter={optionsFilter}
value={searchValue}
searchValue={searchValue}
placeholder={placeholderValue}
nothingFoundMessage={
<Text c={'var(--mantine-color-primary-0)'}>Nothing found...</Text>
}
data-active={searchValue !== ''}
dropdownOpened={dropdownOpened}
comboboxProps={{
transitionProps: { transition: 'fade', duration: 200 },
<>
{dropdownOpened && <Overlay pos={'absolute'} h={'100%'} w={'100%'} blur={1} />}
<Stack
style={{
height: '100px',
backgroundColor: 'transparent',
textAlign: 'center',
position: 'relative',
padding: '.3rem',
display: 'inline-block',
gap: 0,
}}
spellCheck='true'
searchable
autoFocus={!isMobile}
leftSection={providerLabel}
rightSection={<Stack />}
renderOption={(item: any) => {
const Icon = allIcons[item.option.icon];
return !searchValue.startsWith('!') ? (
<SearchSelectItem
item={item}
handleSearchHistoryItem={handleSearchHistoryItem}
searchEndpoint={searchEndpoint}
/>
) : (
<Group
pos={'relative'}
m={0}
p={0}
gap={0}
justify='center'
w={'100%'}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleAppLaunchItem(item);
}}
>
<Text pos={'absolute'} left={'1rem'} c={'var(--mantine-color-accent-0)'}>
Launch
</Text>
{Icon && (
<Icon
style={{
color: 'var(--mantine-color-primary-0)',
height: '2rem',
width: '2rem',
}}
/>
)}
<Text pos={'absolute'} right={'1rem'} c={'var(--mantine-color-accent-0)'}>
{item.option.name}
</Text>
</Group>
);
}}
onBlur={() => {
setPlaceholderValue('');
setListIndex(0);
closeDropdown();
}}
onFocus={() => {
if (searchValue !== '') {
openDropdown();
>
<Select
classNames={selectClasses}
data={searchHistory.map((item: SearchHistoryItem) => ({
label: `${item.provider}`,
value: `${item.prefix} ${item.searchTerm} ${item.dateTimeStamp}`,
...item,
}))}
filter={optionsFilter}
value={searchValue}
searchValue={searchValue}
placeholder={placeholderValue}
nothingFoundMessage={
<Text c={'var(--mantine-color-primary-0)'}>Nothing found...</Text>
}
}}
onKeyDown={(e) => {
if (e.key === 'Tab') {
e.preventDefault();
}
}}
onInput={onInput}
onKeyUp={handleKeyUp}
/>
<HelpModal
setSearchValue={setSearchValue}
setProviderLabel={setProviderLabel}
setProviderURL={setProviderURL}
applicationData={applications}
providerData={providers}
providerModalOpened={providerModalOpened}
closeProviderModal={closeProviderModal}
/>
<WeatherModal
current={current}
extendedForecast={extendedForecast}
weatherModalOpened={weatherModalOpened}
setSearchValue={setSearchValue}
setProviderLabel={setProviderLabel}
setProviderURL={setProviderURL}
closeWeatherModal={closeWeatherModal}
/>
</Stack>
data-active={searchValue !== ''}
dropdownOpened={dropdownOpened}
comboboxProps={{
transitionProps: { transition: 'fade', duration: 200 },
}}
styles={{
input: {
zIndex: 1000,
},
}}
spellCheck={true}
searchable
autoFocus={!isMobile}
leftSection={providerLabel}
rightSection={<div />}
renderOption={(item: any) => {
const Icon = allIcons[item.option.icon];
return !searchValue.startsWith('!') ? (
<SearchSelectItem
item={item}
handleSearchHistoryItem={handleSearchHistoryItem}
searchEndpoint={searchEndpoint}
/>
) : (
<Group
pos={'relative'}
m={0}
p={0}
gap={0}
justify='center'
w={'100%'}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleAppLaunchItem(item);
}}
>
<Text pos={'absolute'} left={'1rem'} c={'var(--mantine-color-accent-0)'}>
Launch
</Text>
{Icon && (
<Icon
style={{
color: 'var(--mantine-color-primary-0)',
height: '2rem',
width: '2rem',
}}
/>
)}
<Text pos={'absolute'} right={'1rem'} c={'var(--mantine-color-accent-0)'}>
{item.option.name}
</Text>
</Group>
);
}}
onBlur={() => {
setPlaceholderValue('');
setListIndex(0);
closeDropdown();
}}
onFocus={() => {
if (searchValue !== '') {
openDropdown();
}
}}
onKeyDown={(e) => {
if (e.key === 'Tab') {
e.preventDefault();
}
}}
onInput={onInput}
onKeyUp={handleKeyUp}
/>
<HelpModal
setSearchValue={setSearchValue}
setProviderLabel={setProviderLabel}
setProviderURL={setProviderURL}
applicationData={applications}
providerData={providers}
providerModalOpened={providerModalOpened}
closeProviderModal={closeProviderModal}
/>
<WeatherModal
current={current}
extendedForecast={extendedForecast}
weatherModalOpened={weatherModalOpened}
setSearchValue={setSearchValue}
setProviderLabel={setProviderLabel}
setProviderURL={setProviderURL}
closeWeatherModal={closeWeatherModal}
/>
</Stack>
</>
);
}