Layoutideen für Elementauswahl

[LudwigM]

Hallo,
ich möchte für verschiedene Mitglieder Daten erfassen. Es können mehrere Mitglieder in einer Gruppe zusammengefasst sein. Der Benutzer soll bei der Dateneingabe entweder mehrere Gruppen, oder mehrere Mitglieder, oder beides auswählen können. Letztendlich wird die Erfassung pro Mitglied erfasst, die Gruppen sind nur für die einfachere Auswahl durch den Benutzer. Statt jedes Mitlglied einer Gruppe einzeln auszuwählen, kann er eine Gruppe auswählen. Die Mitglieder und Gruppen sind in einer PostgreSQL-Tabelle gespeichert. Gruppen können an der Präfix-ID 'G' identifiziert werden.

Welche Layouts kämen dafür in Frage? Eine Idee wäre, zwei HTML-Tabellen mit Filterfunktion (z.B. DataTables) zu verwenden, eine mit den Mitgliedern und eine mit den Gruppen. Dann müsste man, wenn eine Gruppe ausgewählt wurde, die entsprechenden Mitglieder dieser Gruppe in der Mitglieder-Tabelle ebenfalls auswählen. Ist das eine gute Idee?

Wie stellt man die ausgewählten Mitglieder beim Absenden des Formulars am einfachsten für das PHP-Skript bereit? Am besten die jeweilige ID der DB-Tabelle.


Gruß
Ludwig

 

[LudwigM]

Es dürfte möglich sein, die ID in einer verborgenen Spalte abzulegen. Ich vermute, dass sie für den Benutzer weniger hilfreich ist?

Eher nicht hilfreich/erforderlich.

nur eine HTML-Tabelle zu verwenden und die Gruppe(n) durch ein Select auszuwählen. Da Du schreibst, dass es möglich sein soll, auch mehrere Gruppen auszuwählen, müsste es ein Multi-Select sein.

Warum würdest du ein Select einer Tabelle vorziehen? Es sollte ebenfalls eine Filterung möglich sein. Wobei das auch mit Javascript bei der Eingabe mit einem Event möglich sein sollte...?

 

[LudwigM]

Wie würde man dann in der Tabelle mit den Mitgliedern die Mitglieder als "ausgewählt" kennzeichnen, die in den ausgewählten Gruppen sind? Z.B. eine Ajax-Anfrage mit den ausgewählten Gruppen, die dann die enthaltenen Mitglieder aus der DB holt, die man dann anhand der IDs mit einer for-Schleife in der Tabelle als "ausgewählt" kennzeichnet?

 

[LudwigM]

In dem Fall könntest du eine verborgene Spalte einrichten, wo die Gruppe drin steht, zu der der Benutzer gehört. Kann er zu mehreren Gruppen gehören, kannst Du diese mit CSV oder JSON in einem String zusammen fassen.

Das ist eine gute Idee. Ja, er kann zu mehreren Gruppen gehören

PS: Ich wollte mich über das Custom Search bei Datatables informieren und bin dabei auf dieses gestoßen:

Das sieht sehr gut aus! Man könnte ja auch für jedes Mitlglied eine ComboBox hinzufügen, so funktioniert das auswählen nur so lange bis man einen anderen Filter setzt. Für den Nutzer wäre das etwas offensichtlicher. Warum ist im Beispiel für "Start date" und "Salary" kein Filter vorhanden? Kann man definieren welche Filter erscheinen sollen und welche nicht?

Für die Gruppen müsste man dann ja aber weiterhin eine zweite Möglichkeit hinzufügen, wie du z.B. mit dem Select vorgeschlagen hast. Dann muss anhand der Auswahl in der DataTable die entsprechenden Mitglieder auswählen. Das erscheint mir derzeit als das schwierigste. Aber erstmal anfangen...

 

[LudwigM]

Und es eröffnet die Möglichkeit, für die Gruppen, ohne Filterpane, ein Select in Form einer Tabelle einzurichten. Dann hättest Du eine Lösung aus einem Guss, die Haupttabelle und und die für die Auswahl der Gruppen sehen gleich aus und das Look-And-Feel wäre identisch

Das heißt dann zwei Tabellen, eine für die Mitglieder mit Filterpanes und eine für die Gruppen?
Wo ist dir das Select-Plugin aufgefallen?

 

[LudwigM]

Danke! Das sieht schon mal sehr gut aus!! Ziemlich genauso hatte ich mir das vorgestellt.

if (groups.filter(value => groupsInRow.includes(value)).length != 0) {

Kannst du mir die Zeile bitte erklären? Wo kommt "value" her? Mit dem Debugger konnte ich das leider nicht herausfinden

 

[LudwigM]

Danke, so ist es einfacher zu verstehen...
Was jetzt noch fehlt, ist
- wenn ein Mitglied aus-/ oder abgewählt wird muss überprüft werden, ob eine Gruppe (noch) komplett ausgewählt ist. Die Auswahl in der oberen Tabelle muss dann entsprechend aktualisiert werden
- wenn eine Gruppe abgewählt wird, müssen die Mitglieder in der unteren Tabelle auch wieder abgewählt werden
Dabei muss man dann aufpassen, dass man die Events nicht immer wieder gegenseitig aufruft. Vielleicht ist das Event "Click" geeigneter, um eine Benutzeraktion von einer JS-Aktion (select/deselect) zu unterscheiden?

 

[LudwigM]

Eine Gruppe soll nur dann selektiert sein, wenn unten alle Mitglieder selektiert sind, also a)

 

[LudwigM]

Das ist etwas schwieriger. Ich muss dann ja ermitteln, wie viele Mitglieder der Gruppe selektiert sind, und ob dies alle Mitlgieder der Gruppe sind, oder?
Beim jetzigen Code gibt es noch ein Problem. Wenn ich z.B. Gruppe 1 auswähle, dann ein Mitglied der Gruppe 2 selektiere, und danach eine weitere Gruppe selektiere, dann wird das ausgewählte Mitglied der Gruppe 2 wieder deselektiert. Dann müsste man nur die Mitlgieder der selektieren/deselektierten Gruppe die das Event ausgelöst hat durchlaufen? Edit: gelöst:

const eventGroups = $.map( indexes, function( n ) {
    return dtSel.rows().data()[n][0];
});
// is there an intersection between groups in row and groups in select?
if(eventGroups.filter(value => groupsInRow.includes(value)).length != 0) {
    if (groups.filter(value => groupsInRow.includes(value)).length != 0  ) {
        // select current row:
        this.select()

Wie kann man mehrere Elemente auf dem Smartphone auswählen? Statt [Strg]-Taste?

 

[LudwigM]

OK, wenn Du dir den Code ansiehst, kannst Du ja ablesen, wie es mit dem (De-)Selektieren funktioniert. Versuche es zunächst selbst und melde dich wieder, wenn Du nicht zum Ziel kommst.

Ich habe mir Gedanken gemacht, wie man es angehen könnte:
Ich würde für die Gruppen aus der DB die Anzahl an zugeordneten Mitgliedern beim Erstellen der Tabelle in eine Spalte übernehmen. Dann würde ich bei einem Select/Deselect-Event die Mitglieder einzeln mit rows().every() durchgehen und die ausgewählten Mitglieder je Gruppe summieren. Am Ende der Schleife werden die Gruppen selektiert, deren Anzahl zugeordneter Mitglieder gleich der Anzahl der ausgewählten Schläge ist. Was ist von dem Vorgehen zu halten? Gibt es eine bessere/einfachere Lösung?
Was mir dabei noch zu denken gibt ist, dass das Select-Event wohl auch beim Auswählen einer Gruppe durch den Benutzer - welches dann eine Auswahl der Mitglieder durch jQuery zur Folge hat - ausgelöst wird. Der Funktionalität wird es wohl keine Nachteile bringen, jedoch ist es unnötig ausgeführter Code, der die Anwendung möglicherweise lahm erscheinen lässt?

 

[LudwigM]

Die Erkennung ob alle Mitglieder einer Gruppe selektiert sind funktioniert soweit, wenn ich die select() und deselect() nicht auskommentiere, gibt es einen Fehler aufgrund von Rekursion. Ich hoffe du hast da noch eine Idee. Hier mein Code, ich freue mich auf Anmerkungen oder Verbesserungen:

Spoiler: Code

dtMain.on('select deselect',  function (e, dtMain, type, indexes) {
            const GROUP_ID = 0; //column index dtSel
            const MEMBER_COUNT = 2; //column index of dtSel
            var groups =[];
            dtSel.rows().every(function(rowIdx, tableLoop, rowLoop) {
                var arr_row = [];
                arr_row.push(dtSel.row(rowIdx).data()[GROUP_ID]);
                arr_row.push(dtSel.row(rowIdx).data()[MEMBER_COUNT]); //Members per group
                groups.push(arr_row);
            });
            var selMembers = new Map();
            for (const element of groups) {
                selMembers.set(element[0], 0); //set counter for selected members to 0
            }

            dtMain.rows('.selected').every(function(rowIdx, tableLoop, rowLoop) {
                const items_per_group = new Map();
                const groupsInRow = this.data()[0].split(',');

                for (const element of groupsInRow) {
                  selMembers.set(element, selMembers.get(element) + 1);
                }
            });
         
            var i =0;
            for (const element of groups) {
                if(element[1] == selMembers.get(element[0])) { //members per group == selected members
                    console.log("true");
                    //dtSel.row(i).select();
                } else
                {
                    console.log("false");
                    //dtSel.row(i).deselect();
                }
                i++;
            }
        });

 

[LudwigM]

Funktioniert gut!
Was etwas ungünstig ist ist, dass durch das Eingabeformular auf der linken Seite der Platz für die beiden Tabellen eigentlich rechts zu klein ist. Weiterhin stört es, dass wenn man die obere Tabelle auf wenige Elemente filtert, dass sich dann die untere Tabelle nach oben schiebt.
Wie könnte man die Auswahl der Mitglieder auslagern, sodass man im Haupteingabeformular einen Button "Mitglieder auswählen" anklickt und dann auf einer Seite die eine Tabelle links und die andere Tabelle rechts anordnet. Wenn die Auswahl abgeschlossen ist, werden die IDs zum Eingabeformular zurückgegeben und dort verarbeitet.
Dann wäre diese Auswahl auch einfach für andere Vorhaben wiederverwendbar.
Wäre ein Modal geeignet? Oder eine zweite Seite?

 

[LudwigM]

Da weißt Du jetzt mehr als ich: Es gibt dort ein Eingabeformular?

Ja, es sollen Daten eingegeben werden, die für die selektierten Mitglieder in der DB gespeichert werden.
Die Verbindung ist eigentlich nur, dass die IDs der selektierten Mitglieder ermittelt werden und zusammen mit den Eingaben im linken Formular per Ajax an eine PHP-Datei gesendet und verarbeitet werden.
Da es 60-100 Mitglieder sind, müssen diese gefiltert werden können.
Wenn das nicht reicht, kann ich nochmal einen Screenshot oder auch Link bereitstellen.