Skip to content

Commit

Permalink
adds topic tree to taxonomy task detail view
Browse files Browse the repository at this point in the history
  • Loading branch information
@actlikewill
actlikewill committed Oct 17, 2023
1 parent 25ba39f commit 03237a7
Show file tree
Hide file tree
Showing 9 changed files with 203 additions and 168 deletions.
4 changes: 2 additions & 2 deletions indigo_app/js/components/TaxonomyTOC.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default {
// Set expanded state of current item and its parents
function formatItem (x) {
const children = (x.children || []).map(y => formatItem(y));
x.expanded = x.data.slug === current || children.some(y => y.expanded);
x.expanded = x.selected || x.data.slug === current || children.some(y => y.expanded);
return x;
}
taxonomy.map(x => formatItem(x));
Expand All @@ -35,7 +35,7 @@ export default {
toc[0].addEventListener('itemRendered', (e) => {
const tocItem = e.target;
if (!tocItem) return;
if (this.current === tocItem.item.data?.slug) {
if (tocItem.item.selected || this.current === tocItem.item.data?.slug) {
tocItem.querySelector('.content__action__title').classList.add('active');
}
});
Expand Down
11 changes: 11 additions & 0 deletions indigo_app/templates/indigo_api/_task_filter_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,17 @@
</select>
</div>
{% endif %}

{% if show_country %}
<div class="mr-2 mb-2">
<select class="narrow selectpicker notooltip" multiple title="{% trans 'Country' %}" name="{{ form.country.name }}"
data-style="btn-outline-secondary" data-actions-box="true" data-live-search="true" data-size="7">
{% for country in form.fields.country.queryset %}
<option value="{{ country.pk }}" {% if country.pk|stringformat:"i" in form.country.value %}selected{% endif %}>{{ country.name }}</option>
{% endfor %}
</select>
</div>
{% endif %}
</div>

{% if format %}
Expand Down
190 changes: 94 additions & 96 deletions indigo_app/templates/indigo_app/tasks/available_tasks.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,120 +7,118 @@
<div class="container-fluid mt-3">

<div class="row">
<div class="col-md-3">
<div class="card">
<div class="card-body">
<div data-vue-component="TaxonomyTOC"></div>
{{ taxonomy_toc|json_script:"taxonomy_toc" }}
<div class="col-md-3">
<div class="card">
<div class="card-body">
<div data-vue-component="TaxonomyTOC"></div>
{{ taxonomy_toc|json_script:"taxonomy_toc" }}
</div>
</div>
</div>
</div>

<div class="col-md">
{% if priority_workflows %}
<h4>{% trans "Priority projects" %}</h4>

<div class="mb-3 row">
{% for workflow in priority_workflows %}
<div class="col-4 mb-2">
<div class="card">
<div class="card-body">
<div class="mb-2">
<a href="{% url 'workflow_detail' place=workflow.place.place_code pk=workflow.pk %}">{{ workflow.title }}</a>
<span class="mr-3 text-warning text-nowrap"><i class="fas fa-exclamation-circle"></i> {% trans "Priority" %}</span>
</div>
<div class="col-md">
{% if priority_workflows %}
<h4>{% trans "Priority projects" %}</h4>
<div class="mb-3 row">
{% for workflow in priority_workflows %}
<div class="col-4 mb-2">
<div class="card">
<div class="card-body">
<div class="mb-2">
<a href="{% url 'workflow_detail' place=workflow.place.place_code pk=workflow.pk %}">{{ workflow.title }}</a>
<span class="mr-3 text-warning text-nowrap"><i class="fas fa-exclamation-circle"></i> {% trans "Priority" %}</span>
</div>

<div class="text-muted">
<span class="mr-2">{{ workflow.country.name }}{% if workflow.locality %} › {{ workflow.locality.name }}{% endif %}</span>
{% if workflow.due_date %}
{% trans "Due" %} {{ workflow.due_date|date:"Y-m-d" }}
{% if workflow.overdue %}
<i class="ml-3 fas fa-exclamation-triangle"></i> {% trans "Overdue" %}
<div class="text-muted">
<span class="mr-2">{{ workflow.country.name }}{% if workflow.locality %} › {{ workflow.locality.name }}{% endif %}</span>
{% if workflow.due_date %}
{% trans "Due" %} {{ workflow.due_date|date:"Y-m-d" }}
{% if workflow.overdue %}
<i class="ml-3 fas fa-exclamation-triangle"></i> {% trans "Overdue" %}
{% endif %}
{% endif %}
{% endif %}
</div>
</div>

<div class="progress mt-2" style="height: 0.5rem">
<div class="progress-bar bg-success" role="progressbar" style="width: {{ workflow.pct_complete }}%"></div>
</div>
<div class="progress mt-2" style="height: 0.5rem">
<div class="progress-bar bg-success" role="progressbar" style="width: {{ workflow.pct_complete }}%"></div>
</div>

<div class="row">
{% for state, count, label in workflow.task_counts %}
{% if count %}
<div class="col-4 mt-1">
<i class="fas fa-sm fa-fw task-icon-{{ state }}" title="{{ state }}"></i>
<span class="text-muted">{{ count }} {{ label }}</span>
</div>
{% endif %}
{% endfor %}
<div class="row">
{% for state, count, label in workflow.task_counts %}
{% if count %}
<div class="col-4 mt-1">
<i class="fas fa-sm fa-fw task-icon-{{ state }}" title="{{ state }}"></i>
<span class="text-muted">{{ count }} {{ label }}</span>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}

<h4>{% trans "Available tasks" %} <span class="badge badge-light">{{ paginator.count }}</span></h4>
<h4>{% trans "Available tasks" %} <span class="badge badge-light">{{ paginator.count }}</span></h4>

<div class="card">
<div class="card-header">
<form method="GET" id="task-filter-form" onchange="this.submit();">
<div class="d-flex">
<div class="card">
<div class="card-header">
<form method="GET" id="task-filter-form" onchange="this.submit();">
<div class="d-flex">

<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-secondary {% if not form.state.value.0 %}active{% endif %}">
<input type="radio" name="{{ form.state.name }}" autocomplete="off" value="" {% if not form.state.value %}checked{% endif %}>
{% trans "Available tasks" %}
</label>
<label class="btn btn-outline-secondary {% if 'open' in form.state.value %}active{% endif %}">
<input type="radio" name="{{ form.state.name }}" autocomplete="off" value="open" {% if 'open' in form.state.value %}checked{% endif %}>
<i class="fas fa-sm fa-fw task-icon-open"></i>
{% trans "Open" %}
</label>
<label class="btn btn-outline-secondary {% if 'pending_review' in form.state.value %}active{% endif %}">
<input type="radio" name="{{ form.state.name }}" autocomplete="off" value="pending_review" {% if 'pending_review' in form.state.value %}checked{% endif %}>
<i class="fas fa-sm fa-fw task-icon-pending_review"></i>
{% trans "Pending review" %}
</label>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-secondary {% if not form.state.value.0 %}active{% endif %}">
<input type="radio" name="{{ form.state.name }}" autocomplete="off" value="" {% if not form.state.value %}checked{% endif %}>
{% trans "Available tasks" %}
</label>
<label class="btn btn-outline-secondary {% if 'open' in form.state.value %}active{% endif %}">
<input type="radio" name="{{ form.state.name }}" autocomplete="off" value="open" {% if 'open' in form.state.value %}checked{% endif %}>
<i class="fas fa-sm fa-fw task-icon-open"></i>
{% trans "Open" %}
</label>
<label class="btn btn-outline-secondary {% if 'pending_review' in form.state.value %}active{% endif %}">
<input type="radio" name="{{ form.state.name }}" autocomplete="off" value="pending_review" {% if 'pending_review' in form.state.value %}checked{% endif %}>
<i class="fas fa-sm fa-fw task-icon-pending_review"></i>
{% trans "Pending review" %}
</label>
</div>
<select class="form-control selectpicker notooltip col-2 ml-2"
id="{{ form.type.id_for_label }}" name="{{ form.type.html_name }}"
data-style="btn-outline-success" title="Task type"
data-actions-box="true"
data-live-search="true" data-size="7" multiple>
{% for opt in form.type %}
{{ opt }}
{% endfor %}
</select>
<select class="form-control selectpicker notooltip col-2 ml-2"
id="{{ form.country.id_for_label }}" name="{{ form.country.html_name }}"
data-style="btn-outline-success" title="Country"
data-actions-box="true"
data-live-search="true" data-size="7" multiple>
{% for opt in form.country %}
{{ opt }}
{% endfor %}
</select>
</div>
<select class="form-control selectpicker notooltip col-2 ml-2"
id="{{ form.type.id_for_label }}" name="{{ form.type.html_name }}"
data-style="btn-outline-success" title="Task type"
data-actions-box="true"
data-live-search="true" data-size="7" multiple>
{% for opt in form.type %}
{{ opt }}
{% endfor %}
</select>
<select class="form-control selectpicker notooltip col-2 ml-2"
id="{{ form.country.id_for_label }}" name="{{ form.country.html_name }}"
data-style="btn-outline-success" title="Country"
data-actions-box="true"
data-live-search="true" data-size="7" multiple>
{% for opt in form.country %}
{{ opt }}
{% endfor %}
</select>
</form>
</div>

{% if tasks %}
{% include 'indigo_api/_task_list.html' with tasks=tasks selectable=False place=True %}
{% else %}
<div class="card-body">
<p class="text-center"><em>{% trans "No tasks found." %}</em></p>
</div>
</form>
{% endif %}
</div>

{% if tasks %}
{% include 'indigo_api/_task_list.html' with tasks=tasks selectable=False place=True %}
{% else %}
<div class="card-body">
<p class="text-center"><em>{% trans "No tasks found." %}</em></p>
</div>
{% if is_paginated %}
<nav class="mt-4">
{% include 'indigo_app/_paginator.html' with params=form.data_as_url %}
</nav>
{% endif %}
</div>

{% if is_paginated %}
<nav class="mt-4">
{% include 'indigo_app/_paginator.html' with params=form.data_as_url %}
</nav>
{% endif %}
</div>
</div>
</div>
{% endblock %}
12 changes: 6 additions & 6 deletions indigo_app/templates/indigo_app/tasks/tabbed_layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,6 @@
<div class="container">
<nav class="nav nav-tabs">
{% block main-header-tabs %}
<a class="nav-item nav-link {% if view.tab == 'projects' %}active{% endif %}" href="{% url 'taxonomy_project_list' %}">
{% trans "Project Topics" %}
{% if view.tab == 'projects' %}
<span class="badge badge-light">{{ tab_count }}</span>
{% endif %}
</a>
<a class="nav-item nav-link {% if view.tab == 'my_tasks' %}active{% endif %}" href="{% url 'my_tasks' %}">
{% trans "My tasks" %}
{% if view.tab == 'my_tasks' %}
Expand All @@ -30,6 +24,12 @@
<span class="badge badge-light">{{ tab_count }}</span>
{% endif %}
</a>
<a class="nav-item nav-link {% if view.tab == 'projects' %}active{% endif %}" href="{% url 'taxonomy_task_list' %}">
{% trans "Topics" %}
{% if view.tab == 'topics' %}
<span class="badge badge-light">{{ tab_count }}</span>
{% endif %}
</a>
{% endblock %}
</nav>
</div>
Expand Down
47 changes: 0 additions & 47 deletions indigo_app/templates/indigo_app/tasks/taxonomy_project_detail.html
View file

This file was deleted.

57 changes: 57 additions & 0 deletions indigo_app/templates/indigo_app/tasks/taxonomy_task_detail.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
{% extends "indigo_app/tasks/tabbed_layout.html" %}
{% load i18n %}

{% block title %}{% trans "Projects" %}{% endblock %}

{% block content %}
<div class="container-fluid mt-3 mb-5">
<div class="row">
<div class="col-md-3">
<div class="card">
<div class="card-body">
<div data-vue-component="TaxonomyTOC"></div>
{{ taxonomy_toc|json_script:"taxonomy_toc" }}
</div>
</div>
</div>
<div class="col-md">
<div class="flex-fill">
<h5>{{ topic.name }}</h5>
</div>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-7">
{% if topic.description %}
{{ topic.description|safe }}
{% endif %}
</div>
<div class="col-5">
<div class="row mt-2">
<div class="col-8">
<div class="progress bg-light">
<div class="progress-bar bg-success" role="progressbar" style="width: {{ project.pct_done }}%"></div>
</div>
</div>
<div class="col text-muted">
{% blocktrans trimmed with n_done=topic.n_done count n_tasks=topic.n_tasks %}
{{ n_done }} of {{ n_tasks }} task
{% plural %}
{{ n_done }} of {{ n_tasks }} tasks
{% endblocktrans %}
</div>
</div>
</div>
</div>
</div>
<div class="card-header p-sticky-0">
{% include 'indigo_api/_task_filter_form.html' with form=form show_country=True %}
</div>
{% if tasks %}
{% include 'indigo_api/_task_cards.html' with task_groups=task_groups assign_button=False %}
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}
Loading

0 comments on commit 03237a7

Please sign in to comment.