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

Testing new features

Browse Source
This commit is contained in:
Sean Edmunds
2025-03-17 22:47:36 -05:00
parent 5171c32e3b
commit 0d1ceaad91
1 changed files with 95 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -70,6 +70,10 @@ export default function Search({
open(`${url}${item.option.searchTerm}`, '_self');
};
const handleAppSearchItem = (item: any) => {
open(`https://${item.option.url}`, '_self');
};
const handleKeyPress = (item: any) => {
let option = '';
let subtext = '';
@@ -134,7 +138,9 @@ export default function Search({
setListIndex(0);
openDropdown();
setPlaceholderValue(
searchHistory.length > 0 ? `${searchHistory[listIndex].prefix} ${searchHistory[listIndex].searchTerm}` : '',
searchHistory.length > 0
? `${searchHistory[listIndex].prefix} ${searchHistory[listIndex].searchTerm}`
: '',
);
}
if (!providerLabel.startsWith('Invalid')) {
@@ -156,7 +162,9 @@ export default function Search({
}
} else if (item.code === 'ArrowRight' || item.code === 'Tab') {
setSearchValue(
searchHistory.length > 0 ? `${searchHistory[listIndex].prefix} ${searchHistory[listIndex].searchTerm}` : '',
searchHistory.length > 0
? `${searchHistory[listIndex].prefix} ${searchHistory[listIndex].searchTerm}`
: '',
);
setValue(searchHistory.length > 0 ? searchHistory[listIndex].id : 0);
}
@@ -232,6 +240,15 @@ export default function Search({
const optionsFilter: OptionsFilter = ({ options, search }) => {
const splittedSearch = search.toLowerCase().trim().split(' ');
if (splittedSearch[0] === '!') {
return apps.map((app: any) => {
return {
label: app.name,
value: app.baseUrl,
...app,
};
});
}
return options
.filter((option: any) => {
const words = option.value.toLowerCase().trim().split(' ');
@@ -244,13 +261,80 @@ export default function Search({
function RenderOption(item: any) {
const [showFillButton, setShowFillButton] = useState(false);
const m = new Date(item.option.dateTimeStamp);
const dateString = `${m.getUTCFullYear()}/${`0${m.getUTCMonth() + 1}`.slice(-2)}/${`0${m.getUTCDate()}`.slice(-2)} ${`0${m.getUTCHours()}`.slice(-2)}:${`0${m.getUTCMinutes()}`.slice(-2)}:${`0${m.getUTCSeconds()}`.slice(-2)}`;
if (item.option.searchTerm) {
const m = new Date(item.option.dateTimeStamp);
const dateString = `${m.getUTCFullYear()}/${`0${m.getUTCMonth() + 1}`.slice(-2)}/${`0${m.getUTCDate()}`.slice(-2)} ${`0${m.getUTCHours()}`.slice(-2)}:${`0${m.getUTCMinutes()}`.slice(-2)}:${`0${m.getUTCSeconds()}`.slice(-2)}`;
return (
<Group
w={'100%'}
onClick={() => {
handleSearchHistoryItem(item);
}}
onMouseEnter={() => {
setShowFillButton(true);
}}
onMouseLeave={() => {
setShowFillButton(false);
}}
>
<Group w={'15%'}>
<Text
style={{
backgroundColor: `${theme.primaryColor}33`,
fontWeight: 600,
borderRadius: '15px',
padding: '5px',
}}
>
{item.option.provider}
</Text>
{showFillButton && (
<ActionIcon
className={actionIconClasses.selectOptionActions}
classNames={actionIconClasses}
onClick={(e) => {
e.stopPropagation();
setSearchValue(`${item.option.prefix} ${item.option.searchTerm}`);
}}
>
<FiEdit />
</ActionIcon>
)}
</Group>
<Group justify='space-between' w={'80%'}>
<Text c={theme.primaryColor}>{item.option.searchTerm}</Text>
<Text
style={{
color: `${theme.primaryColor}55`,
}}
>
{dateString}
</Text>
</Group>
{showFillButton && (
<ActionIcon
className={actionIconClasses.selectOptionActions}
classNames={actionIconClasses}
onClick={(e) => {
e.stopPropagation();
deleteHistoryItem({
method: 'DELETE',
endpoint: 'api/searchHistory',
body: { id: item.option.id },
});
}}
>
<FiTrash />
</ActionIcon>
)}
</Group>
);
}
return (
<Group
w={'100%'}
onClick={() => {
handleSearchHistoryItem(item);
handleAppSearchItem(item);
}}
onMouseEnter={() => {
setShowFillButton(true);
@@ -268,20 +352,8 @@ export default function Search({
padding: '5px',
}}
>
{item.option.provider}
{item.option.label}
</Text>
{showFillButton && (
<ActionIcon
className={actionIconClasses.selectOptionActions}
classNames={actionIconClasses}
onClick={(e) => {
e.stopPropagation();
setSearchValue(`${item.option.prefix} ${item.option.searchTerm}`);
}}
>
<FiEdit />
</ActionIcon>
)}
</Group>
<Group justify='space-between' w={'80%'}>
<Text c={theme.primaryColor}>{item.option.searchTerm}</Text>
@@ -290,25 +362,9 @@ export default function Search({
color: `${theme.primaryColor}55`,
}}
>
{dateString}
{item.option.value}
</Text>
</Group>
{showFillButton && (
<ActionIcon
className={actionIconClasses.selectOptionActions}
classNames={actionIconClasses}
onClick={(e) => {
e.stopPropagation();
deleteHistoryItem({
method: 'DELETE',
endpoint: 'api/searchHistory',
body: { id: item.option.id },
});
}}
>
<FiTrash />
</ActionIcon>
)}
</Group>
);
}
@@ -337,7 +393,9 @@ export default function Search({
useEffect(() => {
if (dropdownOpened) {
setPlaceholderValue(
searchHistory.length > 0 ? `${searchHistory[listIndex].prefix} ${searchHistory[listIndex].searchTerm}` : '',
searchHistory.length > 0
? `${searchHistory[listIndex].prefix} ${searchHistory[listIndex].searchTerm}`
: '',
);
}
}, [listIndex, dropdownOpened]);
@@ -412,6 +470,7 @@ export default function Search({
/>
<HelpModal
providerModalOpened={providerModalOpened}
applicationData={applicationData}
providerData={providerData}
closeProviderModal={closeProviderModal}
/>