Skip to content
Snippets Groups Projects
Commit 76a7499d authored by Odin Johan Vatne's avatar Odin Johan Vatne
Browse files

Separate tags by category

parent 451351f4
Branches issue-10-fxmapcontrol
No related tags found
No related merge requests found
Showing
with 98 additions and 41 deletions
......@@ -25,7 +25,7 @@
vertical-align: text-top;
}
#tagBox {
#tagBox, .tagBox {
display: flex;
flex-wrap: wrap;
justify-content: left;
......@@ -35,9 +35,25 @@
list-style-type: none;
}
.tagCategory {
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
margin-top: 0.5em;
list-style-type: none;
border-left: 1px solid black;
}
.tagCategory h3 {
text-align: center;
margin: 4px;
}
.tag-bubble {
display: inline-block;
font-weight: 500;
width: fit-content;
background-color: lightpink;
border: 1px indianred solid;
......@@ -48,11 +64,11 @@
margin: 4px 4px 0px;
}
#tagBox.closable .tag-bubble {
.closable .tag-bubble {
user-select: none;
}
#tagBox.closable .tag-bubble:hover {
.closable .tag-bubble:hover {
background-color: white;
border-style: dashed;
}
\ No newline at end of file
......@@ -12,15 +12,40 @@ function addTag(list) {
tagSet.add(tagId);
const tagBox = document.getElementById("tagBox");
// <li class="tag {{ tag.category|lower|slugify }}" title="{{ tag.category}}">{{tag.name}}</li>
if (tagBox.classList.contains("categorized")) {
for (category of tagBox.children) {
if (category.attributes['meta'].value == tagCategory) {
category.innerHTML += `<li class="tag tag-bubble ${tagCategorySlug}" onclick="removeTag(this, ${tagId})">${tagName}</li>`;
updateForm();
return;
}
}
console.log("hello?");
// If the category was not found
let newInner = `<ul class="tagCategory ${tagCategorySlug}" meta="${tagCategory}">`
newInner += `<h3>${tagCategory}</h3>`
newInner += `<li class="tag tag-bubble ${tagCategorySlug}" onclick="removeTag(this, ${tagId})">${tagName}</li>`
newInner += `</ul>`
tagBox.innerHTML += newInner
} else {
console.log("fuck");
tagBox.innerHTML += `<li class="tag tag-bubble ${tagCategorySlug}" onclick="removeTag(this, ${tagId})">${tagName}</li>`;
}
// <li class="tag {{ tag.category|lower|slugify }}" title="{{ tag.category}}">{{tag.name}}</li>
//tagBox.innerHTML += `<li class="tag tag-bubble ${tagCategorySlug}" onclick="removeTag(this, ${tagId})">${tagName}</li>`;
updateForm();
}
function removeTag(item, tagId) {
tagSet.delete(tagId);
parent = item.parentElement
if (parent.classList.contains("tagCategory") && parent.children.length == 2) {
item.remove();
parent.remove();
} else {
item.remove();
}
updateForm();
}
......
{% load html_components %}
{% if onclick %}
<ul id="{{id}}" class="tagBox closable categorized">
{% else %}
<ul id="{{id}}" class="tagBox categorized">
{% endif %}
{% for category, tags in tagsByCategory.items %}
<ul class="tagCategory {{category|slugify}}" meta="{{category}}">
<h3>{{category}}</h3>
{% for tag in tags %}
{% tagbubble tag onclick %}
{% endfor %}
</ul>
{% endfor %}
</ul>
\ No newline at end of file
{% load html_components %}
<ul id="tagBox">
{% for tag in project_tags %}
{% tagbubble tag.tag %}
{% for pair in tagPairs %}
{% tagbubble pair.tag %}
{% endfor %}
</ul>
\ No newline at end of file
<select id="tagDropdown" oninput="addTag(this)" >
<option value="" disabled selected>Select tags</option>
{% for category, tags in tagsByCategory.items %}
<optgroup label={{category}}>
{% for tag in tags %}
<option value="{{tag.id}}" meta="{{tag.category}}">{{tag.name}}</option>
{% endfor %}
</optgroup>
{% endfor %}
</select>
\ No newline at end of file
......@@ -8,17 +8,15 @@
{% endblock %}
{% block title %} New Project {% endblock %}
{% block content %}
{% load html_components %}
<form action="/project/create/" method="post">
{% csrf_token %} {{ form.as_p }}
{% load html_components %}
<p>{% status_select %}</p>
{% tags_dropdown tags %}
<br>
<ul id="tagBox" class="closable">
<!-- Generated tags from the dropdown go here -->
</ul>
{% tagbox_categorized onclick=True %}
<br>
<input type="submit" value="Create Project"/>
</form>
......
......@@ -6,7 +6,7 @@
<script src="{% static 'pasapp/js/tag_edit.js' %}"></script>
<script>
{% for projectTag in projectTags %}
tagSet.add({{projectTag.tag.id}});
tagSet.add({{projectTag.id}});
{% endfor %}
</script>
<script src="{% static 'pasapp/js/project_status_edit.js' %}"></script>
......@@ -25,12 +25,7 @@
{% tags_dropdown tags %}
<br>
<ul id="tagBox" class="closable">
{% for projectTag in projectTags %}
{% tagbubble projectTag.tag True %}
{% endfor %}
<!-- Generated tags from the dropdown go here -->
</ul>
{% tagbox_categorized projectTags True %}
<br>
<input type="submit" value="Update Project"/>
</form>
......
......@@ -24,7 +24,7 @@
{% endif %}
{% if projectTags %}
<b>Tags:</b>
{% tagbox_static projectTags %}
{% tagbox_categorized projectTags %}
{% endif %}
{% if project.professor.id == user.id %}
{% load html_components %}
......
......@@ -26,7 +26,7 @@
<p><span class="i">🛈</span> {{numApplicants}} students have applied so far.</p>
{% if projectTags %}
<b>Tags:</b>
{% tagbox_static projectTags %}
{% tagbox_categorized projectTags %}
{% endif %}
{% if student_application %}
<h2>Your application:</h2>
......
from django import template
from pasapp.forms import CommentForm
from pasapp.utils import tagsByCategory
register = template.Library()
......@@ -13,28 +14,19 @@ def tagbubble(tag, onclick=False):
@register.inclusion_tag('pasapp/components/tagbox_static.html')
def tagbox_static(project_tags):
return { 'project_tags': project_tags }
def tagbox_static(tag_pairs):
return { 'tagPairs': tag_pairs }
@register.inclusion_tag('pasapp/components/tagfilters.html')
def tagfilters(all_tags, selected_tags):
tags_by_category = {};
for tag in all_tags:
if tag.category in tags_by_category:
tags_by_category[tag.category].append(tag)
else:
tags_by_category[tag.category] = [tag,]
tags_by_category = tagsByCategory(all_tags)
return { 'tagsByCategory': tags_by_category, 'selectedTags': selected_tags }
@register.inclusion_tag('pasapp/components/tags_dropdown.html')
def tags_dropdown(tags):
# tags_by_category = {};
# for tag in tags:
# if tag.category in tags_by_category:
# tags_by_category[tag.category].append(tag)
# else:
# tags_by_category[tag.category] = [tag,]
return { 'tags': tags }
tags_by_category = tagsByCategory(tags)
return { 'tagsByCategory': tags_by_category }
@register.inclusion_tag('pasapp/components/application_student.html')
def application_student(application, comments=[], interactive=False, comment_box=False):
......
......@@ -4,3 +4,12 @@ def contextWithHeader(context, request):
context['user'] = request.user
context['loginForm'] = AuthenticationForm()
return context
def tagsByCategory(tags):
tags_by_category = {}
for tag in tags:
if tag.category in tags_by_category:
tags_by_category[tag.category].append(tag)
else:
tags_by_category[tag.category] = [tag,]
return tags_by_category
\ No newline at end of file
......@@ -70,6 +70,7 @@ def student_project_details(request, project_id):
num_applicants = Application.objects.filter(project=project_id).count()
student_application = Application.objects.filter(project=project_id, student=request.user).first() if is_student(request.user) else None
project_tags = ProjectTag.objects.filter(project=project)
project_tags = [pair.tag for pair in project_tags]
comments = Comment.objects.filter(application=student_application)
context = {'project': project, 'numApplicants': num_applicants, 'projectTags': project_tags, 'student_application': student_application, 'comments': comments}
return render(request, 'pasapp/pages/student_project_details.html', contextWithHeader(context, request))
......@@ -79,6 +80,7 @@ def professor_project_details(request, project_id):
applications = Application.objects.filter(project=project_id).order_by('-date_created')
comments = Comment.objects.filter(application__in=applications)
project_tags = ProjectTag.objects.filter(project=project)
project_tags = [pair.tag for pair in project_tags]
context = {'project': project, 'applications': applications, 'comments': comments, 'projectTags': project_tags}
return render(request, 'pasapp/pages/professor_project_details.html', contextWithHeader(context, request))
......@@ -209,10 +211,10 @@ def edit_project(request, project_id):
else:
form_tags = ' '.join(str(project_tag.tag.id) for project_tag in project_tags)
form = NewProjectForm(initial={
'title': project.title, 'description': project.description, 'status': project.status, 'hidden': project.hidden, 'tags':form_tags})
tags = Tag.objects.all()
project_tags = [pair.tag for pair in project_tags]
context = {'form': form, 'project': project, 'tags': tags, 'projectTags': project_tags}
return render(request, 'pasapp/pages/edit_project.html', contextWithHeader(context, request))
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment