#2705: SearchFilter.jsx

Codestruktur

Verwendete Hooks: Selector, Dispatch, Navigate, Location

Importe von: ../../../../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...

Hat PropTypes für: SearchFilter

Verwendet CSS Modules für das Styling.

Quellcode (gekürzt)

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) {
            // Modal=true als Abfrageparameter hinzufügen, damit das Backend weiß, dass es im Modalkontext geöffnet wurde
            url += url.includes('?') ? '&modal=true' : '?modal=true';
            navigate(url, { state: { background: location } });
        } else {
            navigate(url);
        }
    };

    return (
        <>
            <div className={styles.searchRow}>
                {/* FLEX-BOX IST AUF GROSSEN BILDSCHIRMEN UMGEKEHRT */}
                <div className={classNames(styles.container, styles.flex)}>
                    {/* Menü rendern, falls es geladen ist. */}
                    {ui && ui.pageMenu && (
                        <Col>
                            <Navbar>
                                <Navigation
                                    entries={ui.pageMenu}
                                    // Menü nach rechts floaten lassen.
                                    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
// ... (gekürzt, insgesamt 185 Zeilen)

Git-Verlauf

bf988bc6d 43 npm-Schwachstellen beseitigt: react-scripts→Vite, ESLint 9, Bereinigung von Abhängigkeiten, Fehlerbehebungen
d5a25864e SearchFilter.jsx öffnet Bearbeitungsdialog im Modalfenster, wenn AbstractPagesRest.useModalDialog == true
0aea09df2 WIP: Textparsing für Adressen
8eb9bed9c Adress-Wicket-Seiten entfernt. Import von vCards gestartet. Layout des "Export als Excel"-Buttons in Listenseiten geändert.
b35853f98 Adressseiten: Ansichtsseite wird jetzt als modaler Dialog angezeigt (Fehler im Backend mit Claude Code behoben).