Skip to content

Closes #1451 Added user categories to profile and settings #1459

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TimOsahenru wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

Closes #1451 Added user categories to profile and settings #1459

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c359526
user categories to profile
TimOsahenru Nov 1, 2022
2f63423
Added categories to user profile
TimOsahenru Nov 2, 2022
ed37c54
modified users category in profile
TimOsahenru Nov 5, 2022
610fde0
Merge branch 'CiviWiki:develop' into add-user-categories
TimOsahenru Nov 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions project/accounts/forms.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import re

from accounts.models import Profile
from categories.models import Category
from django import forms
from django.contrib.auth import get_user_model
from django.core.files.images import get_image_dimensions
Expand Down Expand Up @@ -110,13 +111,15 @@ class ProfileEditForm(forms.ModelForm):

class Meta:
model = Profile

fields = [
"first_name",
"last_name",
"about_me",
"profile_image",
"username",
"email",
"categories",
]

first_name = forms.CharField(label="First Name", max_length=63, required=False)
Expand All @@ -125,6 +128,11 @@ class Meta:
email = forms.EmailField(label="Email", disabled=True)
username = forms.CharField(label="Username", disabled=True)
profile_image = forms.ImageField(required=False)
categories = forms.ModelMultipleChoiceField(
queryset=Category.objects.all(),
required=False,
widget=forms.CheckboxSelectMultiple(),
)


class UpdatePassword(forms.ModelForm):
Expand Down
27 changes: 18 additions & 9 deletions project/accounts/templates/accounts/account.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@

<!-- Prevent users from following themselves. -->
{% if not profile == request.user.profile %}
{% if profile not in request.user.profile.following.all %}
<a href="{% url 'profile-follow' profile.user.username %}" class="waves-effect waves-light btn follow-btn" id="sidebar-follow-btn">
follow
</a>
{% else %}
<a href="{% url 'profile-unfollow' profile.user.username %}" class="waves-effect waves-light btn follow-btn" id="sidebar-follow-btn">
unfollow
</a>
{% endif %}
{% if profile not in request.user.profile.following.all %}
<a href="{% url 'profile-follow' profile.user.username %}" class="waves-effect waves-light btn follow-btn" id="sidebar-follow-btn">
follow
</a>
{% else %}
<a href="{% url 'profile-unfollow' profile.user.username %}" class="waves-effect waves-light btn follow-btn" id="sidebar-follow-btn">
unfollow
</a>
{% endif %}
{% endif %}

<div class="user-info section">
Expand All @@ -45,6 +45,15 @@
<div class="section-title">ABOUT ME</div>
<div class="divider"></div>
<div class="about-me">{{ profile.about_me }}</div>
<div class="divider"></div>
<div class="section-title">CATEGORIES</div>
{% for category in profile.categories.all %}
{% if forloop.last %}
<p class="about-me">{{ category }}.</p>
{% else %}
<p class="about-me">{{ category }},</p>
{% endif %}
{% endfor %}
</div>
</div>
</div>
Expand Down
134 changes: 67 additions & 67 deletions project/accounts/templates/accounts/settings.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,83 +10,83 @@

{% block content %}
<section style='display: flex;justify-content: center; padding-top: 20px;'>
<div class="setting card" style="width: 75%;">
<div class="card-content">
<div class="step-title">
<div class="section">
<div class="title-lato center">
Account Settings
</div>
</div>
<div class="accent-line"></div>
{{form.non_field_errors}}
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div class='row'>
<div class=" col s12 m6 ">
<span class='error'>{{form.first_name.errors}}</span>
{{form.first_name.label_tag}}
{{form.first_name}}
</div>
<div class=" col s12 m6 ">
<span class='error'>{{form.last_name.errors}}</span>
{{form.last_name.label_tag}}
{{form.last_name}}
</div>
</div>
<div class="row">
<div class=" col s12 m6 ">
<span class='error'>{{form.profile_image.errors}}</span>
{{form.profile_image.label_tag}}
{{form.profile_image}}
</div>
</div>
<div class='row'>
<div class=" col s12 m6 ">
<span class='error'>{{form.username.errors}}</span>
{{form.username.label_tag}}
{{form.username}}
</div>
<div class=" col s12 m6 ">
<span class='error'>{{form.email.errors}}</span>
{{form.email.label_tag}}
{{form.email}}
</div>
</div>
<div class='row'>
<div class="col s24 m12">
<span> {{form.about_me.errors}}</span>
{{form.about_me.label_tag}}
{{form.about_me}}
</div>
</div>
<div class='row'>
<div class="col s24 m12">
<span> {{form.categories.errors}}</span>
{{form.categories.label_tag}}
{{form.categories}}
</div>
</div>
<div class="row center">
{%if not readonly %}
<button class='btn' type='submit' value="Save Changes">Save Changes</button>
{% endif%}
</div>
</form>
<div class="row center">
<button id="delete-account-button" style="background-color: #ee6e73" class="cd-popup-trigger btn">Expunge Account</button>
</div>
<div class="setting card" style="width: 75%;">
<div class="card-content">
<div class="step-title">
<div class="section">
<div class="title-lato center">
Account Settings
</div>
</div>
<div class="accent-line"></div>
{{form.non_field_errors}}
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div class='row'>
<div class=" col s12 m6 ">
<span class='error'>{{form.first_name.errors}}</span>
{{form.first_name.label_tag}}
{{form.first_name}}
</div>
<div class=" col s12 m6 ">
<span class='error'>{{form.last_name.errors}}</span>
{{form.last_name.label_tag}}
{{form.last_name}}
</div>
</div>
<div class="row">
<div class=" col s12 m6 ">
<span class='error'>{{form.profile_image.errors}}</span>
{{form.profile_image.label_tag}}
{{form.profile_image}}
</div>
</div>
<div class='row'>
<div class=" col s12 m6 ">
<span class='error'>{{form.username.errors}}</span>
{{form.username.label_tag}}
{{form.username}}
</div>
<div class=" col s12 m6 ">
<span class='error'>{{form.email.errors}}</span>
{{form.email.label_tag}}
{{form.email}}
</div>
</div>
<div class='row'>
<div class="col s24 m12">
<span> {{form.about_me.errors}}</span>
{{form.about_me.label_tag}}
{{form.about_me}}
</div>
</div>
<div class='row'>
<div class="col s12 m6">
{{form.categories.errors}}
{{form.categories.label_tag}}
{{form.categories}}
Comment on lines +64 to +67
Copy link
Contributor

@brylie brylie Nov 6, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks correct. I'm not sure why the field isn't rendering. One thing to try would be to post this code and the form definition to a Stack Overflow question to get help from the broader community.

https://stackoverflow.com

Copy link
Contributor Author

@TimOsahenru TimOsahenru Nov 6, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alright I'll do just that. but, I think it's a UI issue, I made an observation as to this form section missing out this tag

<select>
<option></option>
</select>

could that be the issue?

Copy link
Contributor

@brylie brylie Nov 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only UI here is whatever we write. Since we are using a Django Form to render UI fields, we need to figure out the correct way to render a ModelMultiSelect form field. Hence, asking on StackOverflow to see if what we are trying is correct.

Copy link
Contributor Author

@TimOsahenru TimOsahenru Nov 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks @brylie, I've asked on stackoverflow hoping to get answer soon.

Copy link
Contributor

@brylie brylie Nov 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One thing that might help in this case would be to create an empty testing project to work directly with the form fields. Just create a new Django project with a single app. Define two models in the app with one ForeignKey field. Create a form/template/view and see if the form field renders correctly. That will isolate the problem to give us an idea of how it should work.

Copy link
Contributor Author

@TimOsahenru TimOsahenru Nov 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great thoughts @brylie. I'll do just that right away.

Copy link

@ikeoffiah ikeoffiah Apr 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can I pick this up, if this issue has not been resolved?

Copy link
Contributor

@brylie brylie Apr 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure thing. You may need to start a fresh branch, since this one has conflicts.

</div>
</div>
<div class="row center">
{% if not readonly %}
<button class='btn' type='submit' value="Save Changes">Save Changes</button>
{% endif %}
</div>
</form>
<div class="row center">
<button id="delete-account-button" style="background-color: #ee6e73" class="cd-popup-trigger btn">Expunge Account</button>
</div>
</div>
</div>
</div>
</section>
{% endblock content %}

{% block extra_js %}
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(event) {
const button = document.getElementById('delete-account-button');

button.addEventListener('click', (event) => {
// Confirm user intent before committing to expunge
if (window.confirm('Are you certain you want to expunge your information? This action is irreversible.')) {
Expand Down
3 changes: 3 additions & 0 deletions project/accounts/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,7 @@ def get_initial(self):
"last_name": profile.last_name or None,
"about_me": profile.about_me or None,
"profile_image": profile.profile_image or None,
"categories": profile.categories.add() or None,
}
)
return super(SettingsView, self).get_initial()
Expand All @@ -178,12 +179,14 @@ class UserProfileView(LoginRequiredMixin, View):

def get(self, request, username=None):
profile = get_object_or_404(Profile, user__username=username)
# categories = profile.categories.all()
Copy link

@qlty-cloud-legacy qlty-cloud-legacy bot Nov 5, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove this commented out code.


return TemplateResponse(
request,
"account.html",
{
"profile": profile,
# "categories": categories,
},
)

Expand Down