Add filter by photo ability in officer query #965

michplunkett · 2023-07-10T16:37:21Z

Fixes issue

Description of Changes

Add the ability for the user to filter officers by the availability of a photo, format the list_officer.html file using djlint, correct carrot behavior on officer search, center displayed officer photos, and update relevant test case.

Screenshots (if appropriate)

Images on the search page are now centered (laptop screen):

Images on the search page are now centered (phone screen):

The carrots 🥕 now respond correctly when their respective menus are opened:
URL: http://localhost:3000/department/1?last_name=&first_name=&badge=&min_age=16&max_age=85&unique_internal_identifier=&require_photo=True&submit=Submit

Tests and linting

This branch is up-to-date with the develop branch.
pytest passes on my local development environment.
pre-commit passes on my local development environment.

michplunkett · 2023-07-10T18:53:29Z

OpenOversight/app/static/css/openoversight.css

+@media all and (min-width: 768px) and (max-width: 991px) {
+    .filter-sidebar > .form > .btn.btn-primary:first-of-type {
+        margin-bottom: 5px;
+    }
+}
+


Before media query:

After media query:

OpenOversight/tests/routes/test_officer_and_department.py

michplunkett · 2023-07-11T16:45:10Z

OpenOversight/app/static/css/openoversight.css

-    min-width: 200px;
-    min-height: 200px;
+    height: 300px;


With the previous setup you got these HUGE photos that threw off the flow of the page, so I set a standard height so that the width is automatically set according to its respective aspect ratio.

michplunkett · 2023-07-11T16:47:10Z

OpenOversight/app/utils/forms.py

-    officer_query = (
+    return (
        officer_query.outerjoin(Face)
        .order_by(Face.officer_id.asc())
        .order_by(Officer.id.desc())
    )
-    return officer_query


Removed unnecessary variable assignment.

michplunkett · 2023-07-11T17:24:40Z

OpenOversight/app/main/views.py

+    # Filter officers by presence of a photo
+    if form_data["require_photo"]:
+        officers = officers.join(Face)
+    else:
+        officers = officers.options(selectinload(Officer.face))


Picture filtering logic.

This reverts commit 6468e2d.

michplunkett · 2023-07-11T19:38:03Z

I linted the HTML file so that it's easier to merge in the formatting PR next.

AetherUnbound

This is fantastic! Can't wait to add it to our own instance, great stuff 😄 🎉

OpenOversight/app/main/views.py

OpenOversight/tests/routes/test_officer_and_department.py

b-meson · 2023-07-12T16:07:07Z

I haven't built the project and ran it with this diff but the code itself looks good to me.

michplunkett · 2023-07-12T17:05:20Z

OpenOversight/tests/routes/test_officer_and_department.py

+        def normalize_tokens_for_comparison(html_str: str, split_str: str):
+            """Remove new lines, leading, and closing spaces between <dd> elements in
+            formatted HTML."""
+            parsed_list = html_str.data.decode(ENCODING_UTF_8).split(split_str)[1:]
+            parsed_list = [re.sub(r"<dd>\n\s+", "<dd>", token) for token in parsed_list]
+            parsed_list = [
+                re.sub(r"\n\s+</dd>", "</dd>", token) for token in parsed_list
+            ]
+            return parsed_list


This addresses the problem that with the newly formatted HTML have a starting line break and A LOT of spaces between the <dd> elements.

todrobbins · 2023-07-19T17:02:57Z

Thank you for working on this @michplunkett! Looks terrific.

lucyparsons#798 Add the ability for the user to filter officers by the availability of a photo, format the `list_officer.html` file using [`djlint`](https://www.djlint.com/), correct carrot behavior on officer search, center displayed officer photos, and update relevant test case. Images on the search page are now centered (laptop screen): <img width="1469" alt="Screenshot 2023-07-11 at 12 18 34 PM" src="https://github.com/lucyparsons/OpenOversight/assets/5885605/2ee9a10d-9f3c-40ad-be19-9f43442cc9f5"> Images on the search page are now centered (phone screen): <img width="621" alt="Screenshot 2023-07-11 at 12 18 45 PM" src="https://github.com/lucyparsons/OpenOversight/assets/5885605/3b318ee1-78c0-45ad-af92-f807188adb2d"> The carrots 🥕 now respond correctly when their respective menus are opened: URL: `http://localhost:3000/department/1?last_name=&first_name=&badge=&min_age=16&max_age=85&unique_internal_identifier=&require_photo=True&submit=Submit` <img width="1470" alt="Screenshot 2023-07-11 at 2 21 50 PM" src="https://github.com/lucyparsons/OpenOversight/assets/5885605/d73b2c68-93ae-46b4-ad94-14666608fe56"> - [x] This branch is up-to-date with the `develop` branch. - [x] `pytest` passes on my local development environment. - [x] `pre-commit` passes on my local development environment.

michplunkett added 3 commits July 10, 2023 11:18

Small views edits

2e5ea7f

Update email_client.py

d16374a

Update __init__.py

e7e2e34

michplunkett self-assigned this Jul 10, 2023

michplunkett linked an issue Jul 10, 2023 that may be closed by this pull request

Filter by photo availability #798

Closed

2 tasks

michplunkett added 5 commits July 10, 2023 13:22

Merge branch 'fix_build' into filter_by_photo

79c99f9

Update views.py

2a5113f

Update views.py

b35bdb5

Update list_officer.html

e368c25

Update openoversight.css

2dde1bc

michplunkett commented Jul 10, 2023

View reviewed changes

michplunkett added 12 commits July 10, 2023 14:14

Update views.py

87c92c8

Update forms.py

e989bda

HTML update

0ee8ef7

Update list_officer.html

fcdd73c

Update views.py

27f8ae2

Update views.py

f2c317a

Merge branch 'develop' into filter_by_photo

c18eff8

Formatting using djlint

297c1b1

Update list_officer.html

d009908

Update list_officer.html

4b498d0

Update test_officer_and_department.py

bc87b28

Update test

0e8e8bf

michplunkett commented Jul 11, 2023

View reviewed changes

OpenOversight/tests/routes/test_officer_and_department.py Outdated Show resolved Hide resolved

michplunkett added 2 commits July 11, 2023 11:42

Update test_officer_and_department.py

ebf3c8c

Update list_officer.html

2745329

michplunkett commented Jul 11, 2023

View reviewed changes

Update list_officer.html

b359215

michplunkett commented Jul 11, 2023

View reviewed changes

Update forms.py

858c01f

michplunkett added 3 commits July 11, 2023 12:12

Update forms.py

6468e2d

Update list_officer.html

515f97e

Update openoversight.css

e02b42d

michplunkett commented Jul 11, 2023

View reviewed changes

Revert "Update forms.py"

f4aff85

This reverts commit 6468e2d.

michplunkett marked this pull request as ready for review July 11, 2023 17:28

michplunkett requested review from AetherUnbound and b-meson July 11, 2023 17:28

michplunkett mentioned this pull request Jul 11, 2023

Filter by photo availability #798

Closed

2 tasks

michplunkett linked an issue Jul 11, 2023 that may be closed by this pull request

Improve /department/id search view for mobile #931

Open

michplunkett mentioned this pull request Jul 11, 2023

Improve /department/id search view for mobile #931

Open

AetherUnbound approved these changes Jul 12, 2023

View reviewed changes

OpenOversight/app/main/views.py Outdated Show resolved Hide resolved

OpenOversight/tests/routes/test_officer_and_department.py Outdated Show resolved Hide resolved

michplunkett added 2 commits July 11, 2023 23:08

Update views.py

8bc3a7e

Merge branch 'develop' into filter_by_photo

924a834

michplunkett added 2 commits July 12, 2023 11:44

Update test_officer_and_department.py

81339ad

Update test_officer_and_department.py

a916d2b

michplunkett merged commit 6f03a78 into develop Jul 12, 2023

michplunkett deleted the filter_by_photo branch July 12, 2023 16:59

michplunkett commented Jul 12, 2023

View reviewed changes

michplunkett removed a link to an issue Jul 14, 2023

Improve /department/id search view for mobile #931

Open

michplunkett linked an issue Jul 14, 2023 that may be closed by this pull request

Improve /department/id search view for mobile #931

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add filter by photo ability in officer query #965

Add filter by photo ability in officer query #965

michplunkett commented Jul 10, 2023 •

edited

Loading

michplunkett Jul 10, 2023

michplunkett Jul 11, 2023 •

edited

Loading

michplunkett Jul 11, 2023

michplunkett Jul 11, 2023

michplunkett commented Jul 11, 2023

AetherUnbound left a comment

b-meson commented Jul 12, 2023

michplunkett Jul 12, 2023

todrobbins commented Jul 19, 2023

Add filter by photo ability in officer query #965

Add filter by photo ability in officer query #965

Conversation

michplunkett commented Jul 10, 2023 • edited Loading

Fixes issue

Description of Changes

Screenshots (if appropriate)

Tests and linting

michplunkett Jul 10, 2023

Choose a reason for hiding this comment

michplunkett Jul 11, 2023 • edited Loading

Choose a reason for hiding this comment

michplunkett Jul 11, 2023

Choose a reason for hiding this comment

michplunkett Jul 11, 2023

Choose a reason for hiding this comment

michplunkett commented Jul 11, 2023

AetherUnbound left a comment

Choose a reason for hiding this comment

b-meson commented Jul 12, 2023

michplunkett Jul 12, 2023

Choose a reason for hiding this comment

todrobbins commented Jul 19, 2023

michplunkett commented Jul 10, 2023 •

edited

Loading

michplunkett Jul 11, 2023 •

edited

Loading