feat(usermanager): reimplement group edit view

lumi2/static/js/group_edit.js

@@ -1,9 +1,14 @@
 $(function() {
+    for (entry of $(".unsortable")) {
+        $(entry).data("sorter", false);
+    }
+
     $("table").tablesorter({
         theme: 'bootstrap',
         headerTemplate: '{content} {icon}',
         cssIcon: 'bi-arrow-down-up',
         cssIconNone: '',
+        cssIconDisabled: '',
         cssIconAsc: 'bi-arrow-up',
         cssIconDesc: 'bi-arrow-down',
     });
@@ -23,102 +28,50 @@ class UserEntry {
     }
 
     onClickLeave() {
-        // Deactivate the last remaining member's togglebutton before leaving
-        if ($(membersTable).find(".userEntry").length < 2) {
-            for (entry of $(membersTable).find(".userEntry")) {
-                if ($(entry).id != this.username) {
-                    $(entry).find(".toggleMembershipButton")[0].prop("disabled", true);
-                }
-            }
-        }
-
         this.setButtonAppearanceInProgress();
-
         $.ajax({
             context: {
                 "userEntry": this
             },
-            url: `/api/group/${groupname}`,
-            type: "GET",
+            url: `/api/group/${groupname}/member/${this.username}`,
+            type: "DELETE",
             dataType: "json",
-        }).done(function(groupJson) {
-            $.ajax({
-                context: {
-                    "userEntry": this.userEntry,
-                },
-                url: `/api/group/${groupname}`,
-                type: "PUT",
-                dataType: "json",
-                data: JSON.stringify(groupJson),
-                contentType: "application/json",
-            })
-            .done(function(groupJson) {
-                this.userEntry.isMember = false;
-                $(this.userEntry.buttonElement).off("click");
-                $(this.userEntry.buttonElement).click(() => this.userEntry.onClickJoin());
-                $(this.userEntry.rowElement).prependTo($("#tableNonMembers").find("tbody"));
-                this.userEntry.setButtonAppearanceJoinGroup();
-            })
-            .fail(function(xhr, status, errorThrown) {
-                console.log(`Error: ${errorThrown}`);
-                console.log(`Status: ${status}`);
-                console.dir(xhr);
-                alert("Sorry, there was a problem sending information to the server.");
-
-                this.userEntry.setButtonAppearanceLeaveGroup();
-            });
+        }).done(function() {
+            this.userEntry.isMember = false;
+            $(this.userEntry.buttonElement).off("click");
+            $(this.userEntry.buttonElement).click(() => this.userEntry.onClickJoin());
+            $(this.userEntry.rowElement).prependTo($("#tableNonMembers").find("tbody"));
+            this.userEntry.setButtonAppearanceJoinGroup();
+            // TODO check status code!
         }).fail(function(xhr, status, errorThrown) {
             console.log(`Error: ${errorThrown}`);
             console.log(`Status: ${status}`);
             alert("Sorry, there was a problem retrieving information from the server.");
-
             this.userEntry.setButtonAppearanceLeaveGroup();
         });
     }
 
     onClickJoin() {
         this.setButtonAppearanceInProgress();
-
         $.ajax({
             context: {
                 "userEntry": this
             },
-            url: `/api/group/${groupname}`,
-            type: "GET",
+            url: `/api/group/${groupname}/member/${this.username}`,
+            type: "POST",
             dataType: "json",
-        }).done(function(groupJson) {
-            // Add current user to the members array
-            groupJson.group.members.push(this.userEntry.username);
-            $.ajax({
-                context: {
-                    "userEntry": this.userEntry,
-                },
-                url: `/api/group/${groupname}`,
-                type: "PUT",
-                dataType: "json",
-                data: JSON.stringify(groupJson),
-                contentType: "application/json",
-            })
-            .done(function(groupJson) {
-                this.userEntry.isMember = true;
-                $(this.userEntry.buttonElement).off("click");
-                $(this.userEntry.buttonElement).click(() => this.userEntry.onClickLeave());
-                $(this.userEntry.rowElement).prependTo($("#tableMembers").find("tbody"));
-                this.userEntry.setButtonAppearanceLeaveGroup();
-            })
-            .fail(function(xhr, status, errorThrown) {
-                console.log(`Error: ${errorThrown}`);
-                console.log(`Status: ${status}`);
-                console.dir(xhr);
-                alert("Sorry, there was a problem sending information to the server.");
-
-                this.userEntry.setButtonAppearanceJoinGroup();
-            });
+        }).done(function() {
+            this.userEntry.isMember = true;
+            $(this.userEntry.buttonElement).off("click");
+            $(this.userEntry.buttonElement).click(() => this.userEntry.onClickLeave());
+            $(this.userEntry.rowElement).prependTo($("#tableMembers").find("tbody"));
+            this.userEntry.setButtonAppearanceLeaveGroup();
+            // TODO check status code!
         }).fail(function(xhr, status, errorThrown) {
             console.log(`Error: ${errorThrown}`);
             console.log(`Status: ${status}`);
             alert("Sorry, there was a problem retrieving information from the server.");
-            this.userEntry.setButtonAppearanceJoinGroup();
+            this.userEntry.setButtonAppearanceLeaveGroup();
         });
     }
 

lumi2/static/js/group_list.js

@@ -0,0 +1,10 @@
+$(function() {
+    $("table").tablesorter({
+        theme: 'bootstrap',
+        headerTemplate: '{content} {icon}',
+        cssIcon: 'bi-arrow-down-up',
+        cssIconNone: '',
+        cssIconAsc: 'bi-arrow-up',
+        cssIconDesc: 'bi-arrow-down',
+    });
+});

lumi2/templates/usermanager/group_edit.html

@@ -11,7 +11,7 @@
         <table class="table table-hover align-middle" id="tableNonMembers">
             <thead>
                 <tr>
-                    <th scope="col" colspan="3" class="text-center text-opacity-75 fs-4">Other users</th>
+                    <th scope="col" colspan="3">Username</th>
                 </tr>
             </thead>
             <tbody>
@@ -41,7 +41,7 @@
         <table class="table table-hover align-middle" id="tableMembers">
             <thead>
                 <tr>
-                    <th scope="col" colspan="3" class="text-center text-primary text-opacity-75 fs-4">{{ groupname }}</th>
+                    <th scope="col" colspan="3">Username</th>
                 </tr>
             </thead>
             <tbody>

lumi2/templates/usermanager/group_list.html

@@ -16,18 +16,17 @@
         <thead>
             <tr>
                 <th scope="col">Group Name</th>
-                <th scope="col">Members</th>
+                <th scope="col">Number of Members</th>
             </tr>
         </thead>
         <tbody>
             {% for group in groups | sort %}
             <tr>
                 <th scope="row">
-                    <a href="{{ url_for('usermanager.group_view', groupname=group.groupname) }}">{{ group.groupname }}</a>
+                    <a href="{{ url_for('usermanager.group_update', groupname=group.groupname) }}">{{ group.groupname }}</a>
                 </th>
                 <td class="align-middle">
-                    {% for user in group.members %}
-                    {% endfor %}
+                    {{ group.members|length }}
                 </td>
             </tr>
             {% endfor %}
@@ -39,4 +38,5 @@
     <p class="text-muted">There are currently no groups.</p>
 </div>
 {% endif %}
+<script src="{{ url_for('static', filename='js/group_list.js') }}"></script>
 {% endblock content %}

lumi2/usermanager.py

@@ -339,35 +339,6 @@ def group_create():
     abort(404)
 
 
-@bp.route("/groups/view/<string:groupname>")
-def group_view(groupname: str):
-    """Displays a form allowing group creation."""
-
-    try:
-        conn = ldap.get_connection()
-    except Exception:
-        abort(500)
-
-    try:
-        group = ldap.get_group(conn, groupname)
-    except ldap.EntryNotFoundException:
-        conn.unbind()
-        abort(404)
-
-    conn.unbind()
-    # TODO implement
-    abort(404)
-
-
-class GroupUpdateForm(FlaskForm):
-    updated_members = HiddenField(
-        'Group Members',
-    )
-    submit = SubmitField(
-        'Apply',
-    )
-
-
 @bp.route("/groups/update/<string:groupname>")
 def group_update(groupname: str):
     """Detail and Update view for a group.