#2705: SearchFilter.jsx

Code Structure

Hooks used: Selector, Dispatch, Navigate, Location

Imports from: ../../../../actions, ../../../../actions/list/filter, ../../../../components/base/navigation, ../../../../components/design, ../../../../components/design/input/autoCompletion/TextAutoCompletion, ../../../../components/design/popper/AdvancedPopperAction, ../../../panel/favorite/FavoritesPanel, ../ListPage.module.scss, ./magicFilter/MagicFilters, @fortawesome/free-solid-svg-icons, @fortawesome/react-fontawesome, classnames, prop-types, react, react-redux...

Has PropTypes for: SearchFilter

Uses CSS Modules for styling.

Source Code (abridged)

import { faSearch, faSync } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Button, Navbar } from 'reactstrap';
import { useNavigate, useLocation } from 'react-router';
import {
    createListFavorite,
    deleteListFavorite,
    dismissCurrentError,
    fetchCurrentList,
    exportCurrentList,
    startMultiSelection,
    renameListFavorite,
    selectListFavorite,
    updateListFavorite,
} from '../../../../actions';
import { changeSearchString } from '../../../../actions/list/filter';
import Navigation from '../../../../components/base/navigation';
import { Alert, Col, Spinner } from '../../../../components/design';
import TextAutoCompletion
    from '../../../../components/design/input/autoCompletion/TextAutoCompletion';
import AdvancedPopperAction from '../../../../components/design/popper/AdvancedPopperAction';
import FavoritesPanel from '../../../panel/favorite/FavoritesPanel';
import styles from '../ListPage.module.scss';
import MagicFilters from './magicFilter/MagicFilters';

function SearchFilter() {
    const category = useSelector((state) => {
        const listState = state.list;
        return listState.categories[listState.currentCategory];
    });
    const dispatch = useDispatch();
    const onErrorDismiss = () => dispatch(dismissCurrentError());
    const onFavoriteCreate = (name) => dispatch(createListFavorite({ name }));
    const onFavoriteDelete = (id) => dispatch(deleteListFavorite({ id }));
    const onFavoriteRename = (id, newName) => dispatch(renameListFavorite({ id, newName }));
    const onFavoriteSelect = (id) => dispatch(selectListFavorite({ id }));
    const onFavoriteUpdate = () => dispatch(updateListFavorite());
    const onSearchStringBlur = () => dispatch(fetchCurrentList());
    const onSearchStringChange = (completion) => dispatch(changeSearchString(completion));
    const onSearchStringDelete = () => dispatch(changeSearchString(''));
    const onSyncButtonClick = () => dispatch(fetchCurrentList(true));
    const onExportButtonClick = () => dispatch(exportCurrentList());
    const onMultiSelectionButtonClick = () => dispatch(startMultiSelection());

    const {
        error,
        filter,
        filterFavorites,
        isFetching,
        newlySwitched,
        quickSelectUrl,
        standardEditPage,
        ui,
        useModalEditDialog,
    } = category;

    const navigate = useNavigate();
    const location = useLocation();

    const onSelectQuickSelection = ({ id }) => {
        let url = `/${standardEditPage.replace(':id', id)}`;

        if (useModalEditDialog) {
            // Add modal=true query parameter so backend knows it was opened in modal context
            url += url.includes('?') ? '&modal=true' : '?modal=true';
            navigate(url, { state: { background: location } });
        } else {
            navigate(url);
        }
    };

    return (
        <>
            <div className={styles.searchRow}>
                {/* FLEX-BOX IS SET TO REVERSE ON BIG SCREENS */}
                <div className={classNames(styles.container, styles.flex)}>
                    {/* Render the menu if it's loaded. */}
                    {ui && ui.pageMenu && (
                        <Col>
                            <Navbar>
                                <Navigation
                                    entries={ui.pageMenu}
                                    // Let the menu float to the right.
                                    className="ml-auto"
                                />
                            </Navbar>
                        </Col>
                    )}
                </div>
                <div className={styles.container}>
                    <FavoritesPanel
                        onFavoriteCreate={onFavoriteCreate}
                        onFavoriteDelete={onFavoriteDelete}
                        onFavoriteRename={onFavoriteRename}
                        onFavoriteSelect={onFavoriteSelect}
                        onFavoriteUpdate={onFavoriteUpdate}
                        favorites={filterFavorites}
                        currentFavoriteId={filter.id}
                        isModified
                        closeOnSelect={false}
                        translations={ui.translations}
                        htmlId="searchFilterFavoritesPopover"
                        newFavoriteI18nKey="favorite.filter.addNew"
                    />
                    {ui && ui.excelExportSupported && (
                        <Button
                            id="excelExport"
                            color="primary"
                            onClick={onExportButtonClick}
                            outline
                        >
                            {ui.translations.exportAsXls}
                        </Button>
                    )}
                    {ui && ui.multiSelectionSupported && (
                        <Button
// ... (truncated, total 185 lines)

Git History

bf988bc6d Eliminate 43 npm vulnerabilities: react-scripts→Vite, ESLint 9, dependency cleanup, bugfixes
d5a25864e SearchFilter.jsx openes edit dialog in modal window, if AbstractPagesRest.useModalDialog == true
0aea09df2 WIP: Address text parsing
8eb9bed9c Address wicket pages removed. Import of vcards started. Layout of Export As Excel button in listpages modified.
b35853f98 Address pages: view page is now displayed as modal dialog (error fixed in backend with Claude Code).