search

dragon-fire-fly / developer_matcher

2 stars 1 forks source link

[BUG] The first photo is always deleted when a user tries to delete a photo #38

Closed dragon-fire-fly closed 1 year ago

dragon-fire-fly commented 1 year ago

Describe the bug If the user has more than one photo and wants to delete any photo, the first photo is always deleted.

To Reproduce Steps to reproduce the behavior:

  1. Go to 'http://127.0.0.1:8000/user/profile/picture/'
  2. Click on 'delete' under any photo (except the first one)
  3. See error

Expected behavior The photo above the delete button should be deleted, not always the first one.

Screenshots In the below example, the delete button below the third picture was clicked. Using console.logs to investigate, the correct delete button is being pressed... delete-pic-no-3 ... but the form for the first picture is being sent each time.... form-pic-1 .. and the first picture is therefore deleted. after-form-sent

Desktop:

Additional context This appears to be a javascript issue as without the confirm delete modal, the python code is deleting the correct picture but between the template and js, the incorrect id is being selected for the form.

dragon-fire-fly commented 1 year ago

This issue was solved by removing the JS and moving the modal inside the for loop. This way, a new modal is generated for each picture and the id can easily be passed to the modal, eliminating the need for JS or JQuery. The upadated code looks like this:

<div class="row">
        {% for picture in pictures %}
        <div class="col-md-3">
            <div class="card text-center">
                <img src="{{picture.profile_picture.url}}" alt="" class="card-img-top">
                <div class="card-body">
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#deletePicModal-{{ picture.id }}">Delete picture</button>
                </div>
            </div>
        </div>
        <!-- Modal for delete picture button -->
        <!-- Modified from https://getbootstrap.com/docs/5.0/components/modal/ -->
        <div class="modal fade" id="deletePicModal-{{ picture.id }}" tabindex="-1" role="dialog" aria-labelledby="deletePicModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deletePicModalLabel">Are you sure?</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span id="close-pic-modal-span" aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>This action will delete your picture {{picture.id}}</p>
                        <p>This action is IRREVERSIBLE. Are you sure?</p>
                    </div>
                    <div class="modal-footer">
                        <a href="" class="btn btn-primary" data-bs-dismiss="modal">Cancel</a>
                    <a href="{% url 'app_user:delete-profile-pic' picture.id %}" class="btn btn-danger" id="confirm-pic-delete">Delete my Picture</a>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}        
    </div>

The same concept was also used for deleting pictures in project pages and for deleting messages on the message overview page.