19. Dezember 2024Verwendung eines Textfilters auf mehrere Auswahlfelder

Verwendung eines Textfilters auf mehrere Auswahlfelder

Thomas Hauling

Startseite
/iTWO Insights
/Verwendung eines Textfilters auf mehrere Auswahlfelder

In diesem Artikel beschreibe ich die Erstellung einer "Extended User Action", die es dem Benutzer ermöglicht, nach mehreren Dokumenten zu suchen und diese auszuwählen. Als Beispiel bauen wir ein Pop-Up, in dem Vertragsanhänge ausgewählt werden können. Wir schauen uns an:

wie ein Textfilter implementiert werden kann,
mehrere Dokumente pro Feld ausgewählt werden können
die Dokument-Auswahl auch nach dem Filtern erhalten bleibt

Aufbau des Views

Unsere Pop-Up Komponente besteht aus einem Formular, das es dem Benutzer ermöglicht, nach bestimmten Dateien zu suchen und diese auszuwählen. Die Ansicht ist in zwei Hauptbereiche unterteilt: Angebote und Planunterlagen.

Dateisuche:
- Ein Suchfeld ermöglicht es dem Benutzer, nach Dateien zu suchen, deren Namen einen bestimmten Text enthalten. Der eingegebene Text wird in der searchText-Variable gespeichert und zur Filterung der angezeigten Dokumente verwendet.
Angebote:
- Dieser Abschnitt zeigt eine Liste von Angeboten an, die durch die Context.Angebote-Variable bereitgestellt werden. Jedes Angebot wird durch eine Checkbox repräsentiert, die es dem Benutzer ermöglicht, das Angebot auszuwählen oder abzuwählen.
- Die Liste der Angebote wird dynamisch gefiltert, basierend auf dem im Suchfeld eingegebenen Text.
Planunterlagen:
- Ähnlich wie bei den Angeboten zeigt dieser Abschnitt eine Liste von Planunterlagen an, die durch die Context.Planunterlagen-Variable bereitgestellt werden. Auch hier kann der Benutzer die Planunterlagen durch Checkboxen auswählen oder abwählen.
- Die Liste der Planunterlagen wird ebenfalls dynamisch gefiltert.

Logik und Funktionen

Die Komponenten-Logik wird durch mehrere Funktionen und Variablen gesteuert:

Initialisierung des Kontexts:
- Der $scope.Context-Objekt enthält Arrays für die ausgewählten Angebote (selectedAngebote) und Planunterlagen (selectedPlanunterlagen), sowie die vollständigen Listen der verfügbaren Angebote und Planunterlagen.
Filterung der Listen:
- Die ng-repeat-Direktive wird verwendet, um die Listen der Angebote und Planunterlagen anzuzeigen. Diese Direktive filtert die Listen basierend auf dem searchText.
Auswahl von Dokumenten:
- Die Funktion toggleSelection wird aufgerufen, wenn ein Benutzer eine Checkbox aktiviert oder deaktiviert. Diese Funktion fügt das ausgewählte Dokument zum entsprechenden Array (selectedAngebote oder selectedPlanunterlagen) hinzu oder entfernt es daraus.
Formularaktionen:
- Abbrechen: Die sendCancelled-Funktion wird aufgerufen, wenn der Benutzer den Vorgang abbrechen möchte. Diese Funktion setzt den isApproved-Status auf false und ruft die onOk-Funktion auf.
- Weiter: Die handleSubmit-Funktion wird aufgerufen, wenn der Benutzer das Formular absendet. Diese Funktion setzt den isApproved-Status auf true und ruft ebenfalls die onOk-Funktion auf.

Beispiel UI

Hier der HTML und Script-Teil der Komponente

Eingangsparameter "html"

<div>

<h1>Vertragsanhänge</h1>

<label for="searchText">Dateisuche</label>

<strong>Angebot</strong>

<div>

<label>Angebote</label>

</div>

</li>

<strong>Planunterlagen</strong>

<div>

<label>Planunterlagen</label>

                        <input type="checkbox" ng-model="doc.selected" ng-change="toggleSelection(doc, Context.selectedPlanunterlagen)">

</div>

</li>

</ul>

<button type="button" ng-click="sendCancelled();" style="padding: 5px 10px;">Vorgang abbrechen</button>

<button id="OkButton" type="submit" style="padding: 5px 10px;">Weiter</button>

</div>

</form>

</div>

Eingangsparameter "Skript"

  $scope.Context = {
        selectedAngebote: [],
        selectedPlanunterlagen: [],
        Angebote: [
            { "DESCRIPTION": "Ziegelheld AG 123-55", "BAS_FILEARCHIVEDOC_FK": 1003567 },
            { "DESCRIPTION": "Baumax GmbH 2024-01", "BAS_FILEARCHIVEDOC_FK": 1003557 },
            { "DESCRIPTION": "Holzbau Müller Angebot 2024-02", "BAS_FILEARCHIVEDOC_FK": 1003589 },
            { "DESCRIPTION": "Betonwerke Schmidt Angebot 2024-03", "BAS_FILEARCHIVEDOC_FK": 1003590 },
            { "DESCRIPTION": "Elektro Meier Angebot 2024-04", "BAS_FILEARCHIVEDOC_FK": 1003591 },
            { "DESCRIPTION": "Sanitärtechnik Fischer Angebot 2024-05", "BAS_FILEARCHIVEDOC_FK": 1003592 }
        ],
        Planunterlagen: [
            { "DESCRIPTION": "Grundriss EG", "BAS_FILEARCHIVEDOC_FK": 2004567 },
            { "DESCRIPTION": "Schnitt A-A", "BAS_FILEARCHIVEDOC_FK": 2004578 },
            { "DESCRIPTION": "Lageplan", "BAS_FILEARCHIVEDOC_FK": 2004589 },
            { "DESCRIPTION": "Statik Berechnung", "BAS_FILEARCHIVEDOC_FK": 2004590 },
            { "DESCRIPTION": "Bauzeitenplan", "BAS_FILEARCHIVEDOC_FK": 2004591 },
            { "DESCRIPTION": "Brandschutzkonzept", "BAS_FILEARCHIVEDOC_FK": 2004592 }
        ]
    };

    $scope.searchText = '';

    $scope.toggleSelection = function(doc, selectedDocs) {
        const idx = selectedDocs.findIndex(function(selectedDoc) {
            return selectedDoc.BAS_FILEARCHIVEDOC_FK === doc.BAS_FILEARCHIVEDOC_FK;
        });

        if (idx > -1) {
            selectedDocs.splice(idx, 1);
        } else {
            selectedDocs.push(doc);
        }
    };

    $scope.sendCancelled = function() {
        console.log('Process cancelled');
        $scope.Context.isApproved = false;
        $scope.onOk();
    };

    $scope.handleSubmit = function() {
        console.log('Form submitted', $scope.Context);
        $scope.Context.isApproved = true;
        $scope.onOk();
    };

Zusammenfassung

Das obige Beispiel bietet eine benutzerfreundliche Möglichkeit, nach spezifischen Dokumenten zu suchen und diese auszuwählen. Die Controllerlogik stellt sicher, dass Dokumente korrekt ausgewählt und aus der Auswahl gelöscht werden können. Durch die Implementierung eines Textfilters wird die Benutzerfreundlichkeit weiter erhöht.