Merge pull request 'solve community member edit with forms' (!30) from feature/solve-community-member-edit-with-forms into master

Reviewed-on: #30

public/static/js/communities/community_members.js

@@ -1,5 +1,5 @@
 (function () {
-    const element = document.getElementById('new_member_user_id');
+    const element = document.getElementById('newMember').elements['user_id'];
     const choices = new Choices(element, {
         noResultsText: 'No users found',
         noChoicesText: 'Start typing to search users'
@@ -13,50 +13,5 @@
 
     element.addEventListener('choice', function () {
         choices.setChoices([], 'value', 'label', true);
-        document.getElementById('new_member_button').disabled = false;
     });
-
-    document.getElementById('new_member_button').addEventListener('click', function () {
-        document.getElementById('loading').style.visibility = 'visible';
-
-        let data = new FormData();
-        data.append('user_id', document.getElementById('new_member_user_id').value);
-
-        RVR.httpRequest('POST', newMemberUrl, function () {
-            window.location.reload();
-        }, data);
-    });
-
-    const ownerCheckboxesButtons = document.getElementsByClassName('member_owner');
-    for (const ownerCheckboxesButton of ownerCheckboxesButtons) {
-        ownerCheckboxesButton.addEventListener('change', function () {
-            document.getElementById('loading').style.visibility = 'visible';
-
-            let data = new FormData();
-            data.append('community_member_id', this.dataset.id);
-            data.append('owner', this.checked ? 1 : 0);
-
-            RVR.httpRequest('POST', editMemberUrl, function () {
-                document.getElementById('loading').style.visibility = 'hidden';
-
-                if (!this.response.success) {
-                    ownerCheckboxesButton.checked = !ownerCheckboxesButton.checked;
-                }
-            }, data);
-        });
-    };
-
-    const deleteButtons = document.getElementsByClassName('delete_member');
-    for (const deleteButton of deleteButtons) {
-        deleteButton.addEventListener('click', function () {
-            document.getElementById('loading').style.visibility = 'visible';
-
-            let data = new FormData();
-            data.append('community_member_id', this.dataset.id);
-
-            RVR.httpRequest('POST', deleteMemberUrl, function () {
-                window.location.reload();
-            }, data);
-        });
-    };
 })();

public/static/js/rvr.js

@@ -163,8 +163,14 @@ var RVR = {
 
         for (var i = 0; i < observedInputs.length; i++) {
             var input = form.elements[observedInputs[i]];
-            if (input.defaultValue !== input.value) {
-                anyChanged = true;
+            if (input.type === 'checkbox') {
+                if (input.defaultChecked !== input.checked) {
+                    anyChanged = true;
+                }
+            } else {
+                if (input.defaultValue !== input.value) {
+                    anyChanged = true;
+                }
             }
         }
 

src/Controller/CommunityController.php

@@ -96,6 +96,7 @@ class CommunityController implements IAuthenticationRequired
         $communityMember = new CommunityMember();
         $communityMember->setCommunity($community);
         $communityMember->setUser($user);
+        $communityMember->setOwner((bool)\Container::$request->post('owner'));
         \Container::$persistentDataManager->saveToDb($communityMember);
 
         return new JsonContent(['success' => true]);
@@ -107,14 +108,14 @@ class CommunityController implements IAuthenticationRequired
             return null;
         }
 
-        $communityMember = $this->communityMemberRepository->getById(\Container::$request->post('community_member_id'));
+        $communityMember = $this->communityMemberRepository->getById(\Container::$request->query('community_member_id'));
         if ($communityMember->getUserId() === \Container::$request->user()->getUniqueId()) {
             return new JsonContent([
                 'error' => ['errorText' => 'Own user cannot be edited.']
             ]);
         }
 
-        $communityMember->setOwner(\Container::$request->post('owner'));
+        $communityMember->setOwner((bool)\Container::$request->post('owner'));
         \Container::$persistentDataManager->saveToDb($communityMember);
 
         return new JsonContent(['success' => true]);
@@ -126,7 +127,7 @@ class CommunityController implements IAuthenticationRequired
             return null;
         }
 
-        $communityMember = $this->communityMemberRepository->getById(\Container::$request->post('community_member_id'));
+        $communityMember = $this->communityMemberRepository->getById(\Container::$request->query('community_member_id'));
         if ($communityMember->getUserId() === \Container::$request->user()->getUniqueId()) {
             return new JsonContent([
                 'error' => ['errorText' => 'Own user cannot be deleted.']

views/communities/community_members.php

@@ -18,15 +18,33 @@
             <?php foreach ($members as $member): ?>
                 <?php $editable = $member->getUserId() !== Container::$request->user()->getUniqueId(); ?>
                 <tr>
-                    <td><?= $member->getUser()->getDisplayName() ?></td>
-                    <td style="text-align: center;"><input type="checkbox" class="member_owner" data-id="<?= $member->getId() ?>" <?= $member->getOwner() ? 'checked' : '' ?> <?= !$editable ? 'disabled' : '' ?> /></td>
-                    <td style="text-align: right;"><button type="button" class="small red delete_member" data-id="<?= $member->getId() ?>" <?= !$editable ? 'disabled' : '' ?>>Delete</button></td>
+                    <td>
+                        <form id="editMember_<?= $member->getId() ?>" action="<?= Container::$routeCollection->getRoute('community-members-edit')->generateLink(['communityId' => $community->getId(), 'community_member_id' => $member->getId()]) ?>" method="post" data-reload-on-success="true" data-observe-inputs="owner"></form>
+                        <form id="deleteMember_<?= $member->getId() ?>" action="<?= Container::$routeCollection->getRoute('community-members-delete')->generateLink(['communityId' => $community->getId(), 'community_member_id' => $member->getId()]) ?>" method="post" data-reload-on-success="true"></form>
+                        <?= $member->getUser()->getDisplayName() ?>
+                    </td>
+                    <td style="text-align: center;">
+                        <input type="checkbox" form="editMember_<?= $member->getId() ?>" name="owner" <?= $member->getOwner() ? 'checked' : '' ?> <?= !$editable ? 'disabled' : '' ?> />
+                    </td>
+                    <td style="text-align: right;">
+                        <?php if ($editable): ?>
+                            <button type="submit" form="editMember_<?= $member->getId() ?>" name="submit" class="small marginRight" disabled>Save</button><!--
+                         --><button type="submit" form="deleteMember_<?= $member->getId() ?>" class="small red delete_member" data-action="<?= Container::$routeCollection->getRoute('community-members-delete')->generateLink(['communityId' => $community->getId(), 'community_member_id' => $member->getId()]) ?>">Delete</button>
+                        <?php endif; ?>
+                    </td>
                 </tr>
             <?php endforeach; ?>
             <tr>
-                <td><select type="text" id="new_member_user_id"></td>
-                <td></td>
-                <td style="text-align: right;"><button type="button" class="small" id="new_member_button" disabled>Add</button></td>
+                <td>
+                <form id="newMember" action="<?= Container::$routeCollection->getRoute('community-members-new')->generateLink(['communityId' => $community->getId()]) ?>" method="post" data-reload-on-success="true" data-observe-inputs="user_id"></form>
+                    <select type="text" form="newMember" name="user_id">
+                </td>
+                <td style="text-align: center;">
+                <input type="checkbox" form="newMember" name="owner" />
+                </td>
+                <td style="text-align: right;">
+                    <button type="submit" form="newMember" name="submit" class="small" disabled>Add</button>
+                </td>
             </tr>
         </table>
     </div>
@@ -35,8 +53,5 @@
 @section(pageScript)
 <script>
     var searchUserUrl = '<?= Container::$routeCollection->getRoute('searchUser')->generateLink(['q' => 'QUERY']) ?>';
-    var newMemberUrl = '<?= Container::$routeCollection->getRoute('community-members-new')->generateLink(['communityId' => $community->getId()]) ?>';
-    var editMemberUrl = '<?= Container::$routeCollection->getRoute('community-members-edit')->generateLink(['communityId' => $community->getId()]) ?>';
-    var deleteMemberUrl = '<?= Container::$routeCollection->getRoute('community-members-delete')->generateLink(['communityId' => $community->getId()]) ?>';
 </script>
 @endsection