From 0ad296bb458888aa58c9d354cc0fdff573bcd650 Mon Sep 17 00:00:00 2001
From: Todd Dembrey <todd.dembrey@torchbox.com>
Date: Tue, 5 Mar 2019 15:06:11 +0000
Subject: [PATCH] Gh-1016: Add role icon to review and options
---
opentech/apply/funds/forms.py | 4 ++--
opentech/apply/funds/tables.py | 4 ++--
opentech/apply/utils/image.py | 5 +++++
.../app/src/components/ReviewBlock/index.js | 20 ++++++++++++-------
.../app/src/containers/ReviewInformation.js | 2 ++
5 files changed, 24 insertions(+), 11 deletions(-)
diff --git a/opentech/apply/funds/forms.py b/opentech/apply/funds/forms.py
index 544007cef..99f11d75b 100644
--- a/opentech/apply/funds/forms.py
+++ b/opentech/apply/funds/forms.py
@@ -4,7 +4,7 @@ from django.utils.translation import ugettext_lazy as _
from django_select2.forms import Select2Widget
from opentech.apply.users.models import User
-from opentech.apply.utils.image import generate_image_url
+from opentech.apply.utils.image import generate_image_tag
from .models import ApplicationSubmission, AssignedReviewers, ReviewerRole
from .widgets import Select2MultiCheckboxesWidget
@@ -140,7 +140,7 @@ class UpdateReviewersForm(forms.ModelForm):
if not image:
return ''
filter_spec = 'fill-20x20'
- return generate_image_url(image, filter_spec)
+ return generate_image_tag(image, filter_spec)
def prepare_field(self, field_name, initial, excluded):
field = self.fields[field_name]
diff --git a/opentech/apply/funds/tables.py b/opentech/apply/funds/tables.py
index da52797aa..a08dc0512 100644
--- a/opentech/apply/funds/tables.py
+++ b/opentech/apply/funds/tables.py
@@ -17,7 +17,7 @@ from wagtail.core.models import Page
from opentech.apply.funds.models import ApplicationSubmission, Round, ScreeningStatus
from opentech.apply.funds.workflow import STATUSES, get_review_active_statuses
from opentech.apply.users.groups import STAFF_GROUP_NAME
-from opentech.apply.utils.image import generate_image_url
+from opentech.apply.utils.image import generate_image_tag
from opentech.images.models import CustomImage
from .widgets import Select2MultiCheckboxesWidget
@@ -151,7 +151,7 @@ class SummarySubmissionsTableWithRole(BaseAdminSubmissionsTable):
image = CustomImage.objects.filter(id=value).first()
if image:
filter_spec = 'fill-20x20'
- return generate_image_url(image, filter_spec)
+ return generate_image_tag(image, filter_spec)
return ''
diff --git a/opentech/apply/utils/image.py b/opentech/apply/utils/image.py
index 0075c46ee..96e9c6114 100644
--- a/opentech/apply/utils/image.py
+++ b/opentech/apply/utils/image.py
@@ -7,4 +7,9 @@ def generate_image_url(image, filter_spec):
signature = generate_signature(image.id, filter_spec)
url = reverse('wagtailimages_serve', args=(signature, image.id, filter_spec))
url += image.file.name[len('original_images/'):]
+ return url
+
+
+def generate_image_tag(image, filter_spec):
+ url = generate_image_url(image. filter_spec)
return format_html(f'<img alt="{image.title}" src="{url}">')
diff --git a/opentech/static_src/src/app/src/components/ReviewBlock/index.js b/opentech/static_src/src/app/src/components/ReviewBlock/index.js
index a52c47df9..4fd9c7a98 100644
--- a/opentech/static_src/src/app/src/components/ReviewBlock/index.js
+++ b/opentech/static_src/src/app/src/components/ReviewBlock/index.js
@@ -3,11 +3,10 @@ import PropTypes from 'prop-types'
import './styles.scss';
-export const Opinion = ({ author, opinion }) => (
+export const Opinion = ({ author, icon, opinion }) => (
<li className="reviews-sidebar__item reviews-sidebar__item--decision">
<div className="reviews-sidebar__name">
- <span>{author}</span>
- {/* <img src={opinion.author.role.icon} /> */}
+ <span>{author}</span><img src={icon} />
</div>
<div></div>
<div className={`reviews-sidebar__outcome ${opinion.toLowerCase()}`}>{opinion}</div>
@@ -16,13 +15,14 @@ export const Opinion = ({ author, opinion }) => (
Opinion.propTypes = {
author: PropTypes.string,
+ icon: PropTypes.string,
opinion: PropTypes.string,
}
-export const AssignedToReview = ({ author }) => {
+export const AssignedToReview = ({ author, icon }) => {
return (
<li className="reviews-sidebar__item">
- <div>{author}</div>
+ <div className="reviews-sidebar__name">{author}<img src={icon} /></div>
<div>-</div>
<div>-</div>
</li>
@@ -30,16 +30,21 @@ export const AssignedToReview = ({ author }) => {
}
AssignedToReview.propTypes = {
+ icon: PropTypes.string,
author: PropTypes.string,
}
-export const Review = ({ url, author, score, recommendation, children }) => {
+export const Review = ({ url, author, icon, score, recommendation, children }) => {
const hasOpinions = children.length > 0;
return (
<>
<li className="reviews-sidebar__item">
- <a target="_blank" rel="noopener noreferrer" href={url}>{author}</a>
+ <a target="_blank" rel="noopener noreferrer" href={url}>
+ <div className="reviews-sidebar__name">
+ {author}<img src={icon} />
+ </div>
+ </a>
<div>{recommendation.display}</div>
<div>{parseFloat(score).toFixed(1)}</div>
</li>
@@ -55,6 +60,7 @@ export const Review = ({ url, author, score, recommendation, children }) => {
Review.propTypes = {
author: PropTypes.string.isRequired,
+ icon: PropTypes.string,
score: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
recommendation: PropTypes.shape({
display: PropTypes.string.isRequired,
diff --git a/opentech/static_src/src/app/src/containers/ReviewInformation.js b/opentech/static_src/src/app/src/containers/ReviewInformation.js
index 93628f57a..909c00b25 100644
--- a/opentech/static_src/src/app/src/containers/ReviewInformation.js
+++ b/opentech/static_src/src/app/src/containers/ReviewInformation.js
@@ -56,6 +56,7 @@ const ReviewInformation = ({ data }) => {
key={reviewer.id}
url={review.url}
author={reviewer.name}
+ icon={reviewer.role.icon}
score={review.score}
recommendation={review.recommendation} >
{review.opinions.map((opinion, i) => {
@@ -63,6 +64,7 @@ const ReviewInformation = ({ data }) => {
return <Opinion
key={i}
author={author.name}
+ icon={author.role.icon}
opinion={opinion.opinion}
/>
})}
--
GitLab