How to avoid duplicate data in Django Template - django

I have this piece of code :
{% extends 'base.html' %}
{% load static %}
{% block page_title %}Manage Staff{% endblock page_title %}
{% block content %}
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Manage All Staff</h3>
</div>
<!-- /.card-header -->
<div class="card-body">
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th>SN</th>
<th>Full Name</th>
<th>Email</th>
<th>Course</th>
</tr>
</thead>
<tbody>
{% for staff in allStaff %}
<tr>
<td>-</td>
<td>{{staff.last_name}}, {{staff.first_name}}</td>
<td>{{staff.email}}</td>
<td>{{staff.course.name}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock content %}
The block page_title is used to display the current page in base.html.
My question is, how can I avoid repeating the text "Manage Staff" ?
Is there a way to display the block page_title in this current file ?
What I earlier tried was passing the value from my views.py file, so I wanna be sure I am doing the right thing

Related

How to customise task context (process_data cards) in django-viewflow

What I want
I'm building an approval workflow using django-viewflow and django-material.
The individual tasks are rendered as a main form with context on a very narrow column on the right-hand side.
I want to change the layout so that the task context (the detail views of all involved model instances) is better readable to the user, and also customise which fields are shown (eg. exclude a user's password hash).
Where I'm stuck
Is there a way to override which data is available as process_data short of overriding viewflow's get_model_display_data and include_process_data? E.g. I'd like to have the related instance's __str__() as title.
Does viewflow have any canonical way to provide individual detail card templates? My alternative would be to completely re-work the contents of the process_data sidebar using context['process'] as the central instance, but that would tie the templates to the data model.
Are django-material formsets with read-only fields and a custom layout the answer I'm after? (I will try this out as soon as I have a viewflow pro license.)
I'd be grateful on any pointers here.
What I've tried
I'm overriding/extending the viewflow templates. As per templatetag include_process_data, the template process_data.html supplies the column of model instance detail cards, fed by data from
get_model_display_data.
It's e.g. easy to override process_data.html to change the cards into a MaterializeCSS collapsible list:
{% load i18n viewflow material_frontend viewflow_frontend %}
<!--
This is template "APP_NAME/PROCESS_NAME/process_data.html" overriding "viewflow/flow/process_data.html".
We override instead of extending as "viewflow/flow/process_data.html" has no content block.super
Changes:
* Collapsible list of process context instead of cards.
-->
<script type="text/javascript">
$(document).ready(function () { $('.collapsible').collapsible(); });
</script>
<ul class="collapsible">
{% for root, fields, root_url in process_data %}
<li>
<div class="collapsible-header">
<span class="card-title">{{ root }} #{{ process.pk }}</span>
{% if root_url and request.user.is_staff %}
<a href="{{ root_url }}" class="card-edit" target="_blank" data-turbolinks="false" style="float:right">
{% trans 'edit' %}
</a>
{% endif %}
</div>
<div class="collapsible-body process_data_content">
<dl class="dl-horizontal">
{% for name, value in fields %}
<dt>{{ name }}:</dt>
<dd>
{% if value is True %}{% trans 'Yes' %}{% else %}
{% if value is False %}{% trans 'No' %}{% else %}
{% if value and value.url %}{{ value.name }}{% else %}
{{ value }}{% endif %}{% endif %}{% endif %}
</dd>
{% endfor %}
</dl>
</div>
{% if not hide_active_tasks and forloop.counter == 1 and process.active_tasks %}
<li>
<div class="collapsible-header">
<span class="card-title">{% trans 'Active tasks' %}</span>
</div>
<div class="collapsible-body process_data_content">
<table>
<thead>
<tr>
<th>{% trans 'Task' %}</th>
<th>{% trans 'Owner' %}</th>
</tr>
</thead>
<tbody>
{% for task in process.active_tasks %}
{% if task.flow_task.task_type == 'HUMAN' or task.flow_task.task_type == 'JOB' %}
<tr>
<td>
{{ task.flow_task}}/#{{ task.pk}}
</td>
<td>{{ task.owner|default:"" }}</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>
</li>
{% endif %}
</li>
{% endfor %}
</ul>
Overriding the template viewflow/flow/task.html with my own APP_NAME/PROCESS_NAME/TASK_NAME.html template at the cost of including model-specific information can show e.g. customised cards of related instances over the main form. I would refactor the individual cards into their own templates.
{% extends "viewflow/flow/task.html" %}
{% block left-panel__top %}
<!--
This is template "APP_NAME/PROCESS_NAME/TASK_NAME.html" extending "viewflow/flow/task.html".
-->
<!-- Help specific to this step goes here. -->
{% with activation.process as p %}
<div class="row">
<h3>Nested formsets</h3>
<p>These cards are placeholders for formsets nested within the main application form.</p>
<p>Nested formsets and the main application form can be updated at the same time and have exactly one submission button.</p>
</div>
<div class="row">
<!-- Organisation Questions: Answers -->
<!-- TODO refactor to template include -->
{% for x in p.organisationanswer_set.all %}
<div class="col s12 m6 xl4">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">
{{ x.question.question }}
</span>
<p><strong>Your answer:</strong> {{ oa.answer }}</p>
</div>
<div class="card-action">
Provide an answer
</div>
</div>
</div>
{% endfor %}
<!-- Dataset Questions: Answers -->
{% for x in p.datasetanswer_set.all %}
<div class="col s12 m6 xl4">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">
{{ x.question.question }}
</span>
<p><strong>Your answer:</strong> {{ x.answer }}</p>
</div>
<div class="card-action">
Provide an answer
</div>
</div>
</div>
{% endfor %}
<!-- Approvals: Receipts - TODO show this in task after custodian approval -->
{% for x in p.approvalreceipt_set.all %}
<div class="col s12 m6 xl4">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">
{{ x.approval }}
</span>
<p><strong>Your approval receipt:</strong> {{ x.receipt }}</p>
</div>
<div class="card-action">
Provide an answer
</div>
</div>
</div>
{% endfor %}
</div>
{% endwith %}
<div class="row">
<h3>Main application form</h3>
<p>These main application form would include the forms above as nested formsets.</p>
<p>This note will disappear once this has been implemented.</p>
</div>
{% endblock %}
For the basic cases create a template named as [app_label]/[flow_label]/process_data.html For example check the shipment demo
Viewflow is the thin workflow layer on top of the standard Django model-view-template pattern. Any customization practices for Django are valid for Viewflow
For the complex cases it's better to not to tune some universal implementation, but create your own set of templates for Viewflow, ex cookbook/custom_ui

display data in tables in django

I have narrowed down to the following , if anyone can help me pointing out how i can convert the following into table view that would be awesome. Following html is extended from the base.html
{% block page_content %}
<h1>Projects</h1>
<div class="row">
{% for project in projects %}
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top" src="{% static project.image %}">
<div class="card-body">
<h5 class="card-title">{{ project.title }}</h5>
<p class="card-text">{{ project.description }}</p>
<a href="{% url 'project_detail' project.pk %}"
class="btn btn-primary">
Read More
</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
Need help with displaying data in gridview . I m new to all this. I m able to read and display the data on a page from mongodb but need to display in a table.
million $ question for me now is where should i be adjusting the following snippet in my code to give me gridview
<table>
<tr>
<th>Field 1</th>
<th>Field N</th>
</tr>
{% for item in query_results %}
<tr>
<td>{{ item.field1 }}</td>
...
<td>{{ item.fieldN }}</td>
</tr>
{% endfor %}
</table>
My urls.py
from django.urls import path
from .import views
urlpatterns = [
path("",views.project_index, name = "project_index"),
path ("<project_detail>/",views.project_detail, name = "project_detail"),
#path("<int:pk>/", views.project_detail, name = "project_detail"),
]
My model.py
from django.db import models
# Create your models here.
class Project(models.Model):
title = models.CharField(max_length=100,primary_key=True)
desc = models.CharField(max_length=100)
urls = models.CharField(max_length=100)
#image = models.FilePathField(path="/img")
class Meta:
db_table = "spiderCollection1"
additional tables.py
import django_tables2 as tables
from .models import Project
import itertools
class ProjectTable(tables.Table):
class Meta:
model = Project
template_name = "django_tables2/bootstrap.html"
title = tables.Column("title")
desc = tables.Column("desc")
urls = tables.Column("urls")
following is views.py
from django_tables2 import SingleTableView
from django.shortcuts import render
from projects.models import Project
from projects.tables import ProjectTable
# Create your views here.
class ProjectListView(SingleTableView):
model = Project
table_class = ProjectTable
template_name = '/projects.html'
def project_index(request):
projects = Project.objects.all()
context = {
"projects":projects
}
return render (request, 'project_index.html',context)
#return render (request, 'project_index.html',locals())
def project_detail(request, pk):
#project = Project.objects.get(pk=pk)
project = Project.objects.all()
context = {
"project": project
#'personal_portfolio':project
}
return render(request, 'project_detail.html',context)
my main base.html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="{% url 'project_index' %}">Portfolio</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'project_index' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</div>
<!--<style>
h1 {
border: 5px solid red;
}
h2 {
border: 4px dotted blue;
}
div {
border: double;
}
</style>
-->
</nav>
<div class="container">
{% block page_content %}
{% endblock %}
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
and now project_index.html
{% extends "base.html" %}
{%load render_table from django_tables %}
{% load static %}
{% block page_content %}
<h1>Projects</h1>
<div class="row">
{% for project in projects %}
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top" src="{% static project.image %}">
<div class="card-body">
<h5 class="card-title">{{ project.title }}</h5>
<p class="card-text">{{ project.description }}</p>
<a href="{% url 'project_detail' project.pk %}"
class="btn btn-primary">
Read More
</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
If the goal is to display a table without using the django-table2 package follow the first part of the answer. If the goal is to use django-table2 then jump to Part II:
Part I
Based on your colde, let us use the example snippet, and edit it in order to display your project data in an HTML table...
Starting with your project_index.html, we need create the skeleton of the html table using <table>, <thead>, <tbody> and <th> tags, and then to loop over the passed projects context variable and add entries to the table using the <td> tag. And because you are using the bootstrap framework, we will need the row and the column divss to display the table correctly.
{% extends "base.html" %}
{% load static %}
{% block page_content %}
<h1>Projects</h1>
<div class="row">
<div class="col-md-4">
<table class="table table-striped table-hover">
<thead>
<th>#</th>
<th>title</th>
<th>description</th>
</thead>
<tbody>
{% for project in projects %}
<td><strong>{{ forloop.counter }} </strong></td>
<td><strong>{{ project.title}</strong></td>
<td>{{ project.description} Read More </td>
{% endfor %}
</tbody>
</table>
<div>
</div>
{% endblock %}
Make sure that your url.py points to the function project_index
To learn more check:
https://www.w3schools.com/html/html_tables.asp
https://getbootstrap.com/docs/4.4/content/tables
https://docs.djangoproject.com/en/2.2/ref/templates/builtins/#for
Part II
Django-table2 is a package that provides an app and middleware to generate html tables. In order to use it in your app make the following changes to your project_index.html:
{% extends "base.html" %}
{% load render_table from django_tables %}
{% load static %}
{% block page_content %}
<h1>Projects</h1>
<div class="row">
<div class="col-md-4">
{% render_table projects %}
</div>
</div>
{% endblock %}
The code above will use the html template provided by django-table2 for rendering tables, defined in your class ProjectTable
class ProjectTable(tables.Table):
class Meta:
model = Project
template_name = "django_tables2/bootstrap.html"
...
If you want to use a custom rendering you will need to set the template_name of the ProjectTable to your custom.html:
class ProjectTable(tables.Table):
class Meta:
model = Project
template_name = "custom.html"
...
Now create custom.html and add the code that will actually iterate over the items of the projects context variable. Maybe something like this (copied from the django_tables2/semantic.html)... Make changes you want to this template.
{% load django_tables2 %}
{% load i18n %}
{% block table-wrapper %}
<div class="ui container table-container">
{% block table %}
<table {% render_attrs table.attrs class="ui celled table" %}>
{% block table.thead %}
{% if table.show_header %}
<thead {{ table.attrs.thead.as_html }}>
<tr>
{% for column in table.columns %}
<th {{ column.attrs.th.as_html }}>
{% if column.orderable %}
{{ column.header }}
{% else %}
{{ column.header }}
{% endif %}
</th>
{% endfor %}
</tr>
</thead>
{% endif %}
{% endblock table.thead %}
{% block table.tbody %}
<tbody {{ table.attrs.tbody.as_html }}>
{% for row in table.paginated_rows %}
{% block table.tbody.row %}
<tr {{ row.attrs.as_html }}>
{% for column, cell in row.items %}
<td {{ column.attrs.td.as_html }}>{% if column.localize == None %}{{ cell }}{% else %}{% if column.localize %}{{ cell|localize }}{% else %}{{ cell|unlocalize }}{% endif %}{% endif %}</td>
{% endfor %}
</tr>
{% endblock table.tbody.row %}
{% empty %}
{% if table.empty_text %}
{% block table.tbody.empty_text %}
<tr><td colspan="{{ table.columns|length }}">{{ table.empty_text }}</td></tr>
{% endblock table.tbody.empty_text %}
{% endif %}
{% endfor %}
</tbody>
{% endblock table.tbody %}
{% block table.tfoot %}
<tfoot {{ table.attrs.tfoot.as_html }}>
{% if table.has_footer %}
<tr>
{% for column in table.columns %}
<td {{ column.attrs.tf.as_html }}>{{ column.footer }}</td>
{% endfor %}
</tr>
{% endif %}
{% block pagination %}
{% if table.page and table.paginator.num_pages > 1 %}
<tr>
<th colspan="{{ table.columns|length }}">
<div class="ui right floated pagination menu">
{% if table.page.has_previous %}
{% block pagination.previous %}
<a href="{% querystring table.prefixed_page_field=table.page.previous_page_number %}" class="icon item">
<i class="left chevron icon"></i>
</a>
{% endblock pagination.previous %}
{% endif %}
{% if table.page.has_previous or table.page.has_next %}
{% block pagination.range %}
{% for p in table.page|table_page_range:table.paginator %}
{% if p == '...' %}
{{ p }}
{% else %}
<a href="{% querystring table.prefixed_page_field=p %}" class="item {% if p == table.page.number %}active{% endif %}">
{{ p }}
</a>
{% endif %}
{% endfor %}
{% endblock pagination.range %}
{% endif %}
{% if table.page.has_next %}
{% block pagination.next %}
<a href="{% querystring table.prefixed_page_field=table.page.next_page_number %}" class="icon item">
<i class="right chevron icon"></i>
</a>
{% endblock pagination.next %}
{% endif %}
</div>
</th>
</tr>
{% endif %}
{% endblock pagination %}
</tfoot>
{% endblock table.tfoot %}
</table>
{% endblock table %}
</div>
{% endblock table-wrapper %}
Here make sure your urls.py includes:
...
path("projects/", ProjectListView.as_view())
...
for more refer to:
https://django-tables2.readthedocs.io/en/latest/pages/tutorial.html
https://github.com/jieter/django-tables2/blob/master/django_tables2/templates/django_tables2/semantic.html
<div class="center">
<table class="table table-bordered " border="1">
<tr>
<th>Name</th>
<th>Game</th>
</tr>
{% for i in user_data %}
<tr>
<td>{{i.name}}</td>
<td>{{i.favorite_game}}</td>
</tr>
{% endfor %}</table>

Loop over Django objects and Bootstrap cards

I would like to use Bootstrap cards in order to create one card by object and add some sub_objects in each one.
For example :
I have an object Publication which could contain one or many sub_objects Document.
Publication object has some attributes : category, title, picture, description and Document object has some attributes like title, format, language, ...
I would like to get something like this :
For a same category, I create a card by publication and I list all documents for each publication.
This is what I get with my code :
As you can see, I should have document n°1 and document°2 in the same card and not two different cards.
This is my code :
{% for category in research_categories|dictsort:'name' %}
<div class="row">
<fieldset>
<legend id="category_{{ category.id }}"><span class="name">{{ category }}</span></legend>
</fieldset>
</div>
<div class="row">
<div class="col-sm-4">
{% for element in test_research %}
{% if element.publication.category|stringformat:"s" == category|stringformat:"s" %}
{% ifchanged %}
<div class="card" style="width:250px">
<img class="card-img-top" src="{{ element.publication.cover.url }}" alt="Card image">
<div class="card-body">
<h4 class="card-title">{{ element.publication }}</h4>
<table class="table table-condensed">
<tbody>
<tr>
<td> {{ element.title }}</td>
</tr>
</tbody>
</table>
</div>
</div>
{% endifchanged %}
{% endif %}
{% endfor %}
</div>
</div>
{% endfor %}
And my view according to this part is :
# By default, display documents
test_research = Document.objects.all().order_by('publication__title', 'title', 'language', 'format')
research_categories = defaultdict(list)
for element in test_research:
research_categories[element.publication.category].append(element)
research_publications = defaultdict(list)
for element in test_research:
research_publications[element.publication].append(element)
kwargs['test_research'] = test_research
kwargs['research_categories'] = research_categories
kwargs['research_publications'] = research_publications

How to appear two times in the django template?

I have two times: {{maine.job_time}} and {{maine.transport_time}}, I can add them using {% load mathfilters%}. That works well.
I want to check now if the result of {{aine.job_time | add: maine.transport_time}} is equal to "3:00:00" displays OK. But my condition does not work.
Can you help me solve this problem?
Thank you
Here is my Django template:
{% extends 'blog/base.html' %}
{% load mathfilters %}
{% block content %}
{% if semain %}
<div class="container">
<table class="table table-bordered" >
<thead>
<tr>
<th> {{ dim }} </th>
</tr>
</thead>
<tr>
<td>
{% for maine in SemaineView %}
{% if maine.date|date:"D" == "dim" %}
<p class='postcontent' ><strong>job:</strong> {{ maine.job_time}}</p>
<p class='postcontent' ><strong>transport:</strong> {{ maine.transport_time }}</p>
<p class='postcontent' ><strong>Total:</strong> {{ maine.job_time|add:maine.transport_time }}</p>
{% if maine.job_time|add:maine.transport_time== "3:00:00" %}
<h1> ok </h1>
{% else %}
<h1> Non </h1>
{% endif %}
{% endif %}
{% endfor %}
{{ tr }}
</td>
</tr>
</table>
</div>
{% endif %}
{% endblock %}

How to traverse the two yuan dictionary in the Django template

1.my view have a dict,For example:
category_all = {
u'Python': {
'acticle_info': [
[<Article: python_tump>],[<Article:python_dict>]
],
'article_count': 22
}
}
2.my render is:
return render(request, 'blog/index.html',{'category_all':category_all})
3.i traverse the dict in Django template:
<!-- tabs Nav -->
<ul id="myTab" class="nav nav-tabs" role="tablist">
{% for blog_category in category_all.keys %}
<li role="presentation">{{ blog_category }}</li>
{% endfor %}
</ul>
<!-- Tab panes -->
<div id="myTabContent" class="tab-content">
{% for blog_category,blog_info in category_all.items %}
<div role="tabpanel" class="tab-pane" id="{{ blog_category }}">
<table class="table table-hover">
<tbody>
{% for get_blog_info in blog_info.acticle_info %}
{% for blog_result in get_blog_info %}
<tr class="active">
<td>{{ blog_result.title }}</td>
<td>{{ blog_result.date_publish }}</td>
</tr>
{% endfor get_blog_info %}
{% endfor %}
</tbody>
</table>
</div>
% endfor %}
</div>
4.help
4.1.How to get the article_count value
4.2.I used a lot of for loop, how can reduce the for cycle
You can get article_count value by:
blog_info.article_count
Change your category_all structure for reduce loops!