Skip to content

Commit e5fee76

Browse files
monim67monim67
committed
Add django-bootstrap-modal-forms usage to demo
1 parent 97b45ee commit e5fee76

File tree

14 files changed

+255
-9
lines changed

14 files changed

+255
-9
lines changed

‎dev/myapp/forms.py‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
from typing import Iterable, NoReturn
22

3+
from bootstrap_modal_forms.forms import BSModalModelForm
34
from crispy_forms.helper import FormHelper
45
from django import forms
56
from django_filters import DateFilter, FilterSet
@@ -66,6 +67,37 @@ class Meta:
6667
}
6768

6869

70+
class EventModalModelForm(BSModalModelForm): # type: ignore
71+
class Meta:
72+
model = Event
73+
fields = [
74+
"start_date",
75+
"end_date",
76+
"start_time",
77+
"end_time",
78+
"start_datetime",
79+
"end_datetime",
80+
"start_month",
81+
"end_month",
82+
"start_year",
83+
"end_year",
84+
]
85+
widgets = {
86+
"start_date": DatePickerInput(options={"format": "MM/DD/YYYY"}),
87+
"end_date": DatePickerInput(
88+
options={"format": "MM/DD/YYYY"}, range_from="start_date"
89+
),
90+
"start_datetime": DateTimePickerInput(),
91+
"end_datetime": DateTimePickerInput(range_from="start_datetime"),
92+
"start_time": TimePickerInput(),
93+
"end_time": TimePickerInput(range_from="start_time"),
94+
"start_month": MonthPickerInput(),
95+
"end_month": MonthPickerInput(range_from="start_month"),
96+
"start_year": YearPickerInput(),
97+
"end_year": YearPickerInput(range_from="start_year"),
98+
}
99+
100+
69101
class EventFilter(FilterSet): # type: ignore
70102
start_date__gt = DateFilter(
71103
field_name="start_date",

‎dev/myapp/templates/myapp/bootstrap3/modal-form-index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{% extends 'myapp/bootstrap3/layout.html' %}
2+
{% load static bootstrap3 %}
3+
4+
{% block extra_css %}
5+
{{ form.media.css }}
6+
{% endblock %}
7+
8+
{% block extra_js %}
9+
{{ form.media.js }}
10+
<script src="{% static 'js/jquery.bootstrap.modal.forms.min.js' %}"></script>
11+
<script>
12+
$(document).ready(function () {
13+
$("#create-event").modalForm({
14+
formURL: "{% url 'myapp:modal-form' %}"
15+
});
16+
});
17+
</script>
18+
{% endblock %}
19+
20+
{% block content %}
21+
<div class="row">
22+
<div class="col-md-6">
23+
<button id="create-event" class="btn btn-primary" type="button" name="button">Create Event</button>
24+
</div>
25+
</div>
26+
<div class="modal fade" tabindex="-1" role="dialog" id="modal">
27+
<div class="modal-dialog" role="document">
28+
<div class="modal-content"></div>
29+
</div>
30+
</div>
31+
{% endblock %}

‎dev/myapp/templates/myapp/bootstrap3/modal-form.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{% load bootstrap3 %}
2+
<div class="container-fluid">
3+
<div class="row">
4+
<div class="col-md-8">
5+
<h3>{{ title_text }}</h3>
6+
<form method="post">
7+
{% csrf_token %}
8+
{% bootstrap_form form %}
9+
{% buttons %}
10+
<button type="submit" class="btn btn-primary">{{ submit_text }}</button>
11+
{% endbuttons %}
12+
</form>
13+
</div>
14+
</div>
15+
</div>

‎dev/myapp/templates/myapp/bootstrap4/modal-form-index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{% extends 'myapp/bootstrap4/layout.html' %}
2+
{% load static %}
3+
4+
{% block extra_css %}
5+
{{ form.media.css }}
6+
{% endblock %}
7+
8+
{% block extra_js %}
9+
{{ form.media.js }}
10+
<script src="{% static 'js/jquery.bootstrap.modal.forms.min.js' %}"></script>
11+
<script>
12+
$(document).ready(function () {
13+
$("#create-event").modalForm({
14+
formURL: "{% url 'myapp:modal-form' %}"
15+
});
16+
});
17+
</script>
18+
{% endblock %}
19+
20+
{% block content %}
21+
<div class="row">
22+
<div class="col-md-6">
23+
<h4>{{ title_text }}</h4>
24+
<button id="create-event" class="btn btn-primary" type="button" name="button">Create Event</button>
25+
</div>
26+
</div>
27+
</div>
28+
<div class="modal fade" tabindex="-1" role="dialog" id="modal">
29+
<div class="modal-dialog" role="document">
30+
<div class="modal-content"></div>
31+
</div>
32+
</div>
33+
{% endblock %}

‎dev/myapp/templates/myapp/bootstrap4/modal-form.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{% load bootstrap4 %}
2+
<div class="container">
3+
<h2 class="pb-2 mt-4 mb-2 border-bottom">Custom Form with Bootstrap 4</h2>
4+
<div class="row">
5+
<div class='col-md-6'>
6+
<form action="" method="post">
7+
{% csrf_token %}
8+
{% bootstrap_form form %}
9+
{% buttons %}
10+
<button type="submit" class="btn btn-primary">{{ submit_text }}</button>
11+
{% endbuttons %}
12+
</form>
13+
</div>
14+
</div>
15+
</div>

‎dev/myapp/templates/myapp/bootstrap5/modal-form-index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{% extends 'myapp/bootstrap5/layout.html' %}
2+
{% load static django_bootstrap5 %}
3+
4+
{% block extra_css %}
5+
{{ form.media.css }}
6+
{% endblock %}
7+
8+
{% block extra_js %}
9+
{{ form.media.js }}
10+
<script src="{% static 'js/bootstrap5.modal.forms.js' %}"></script>
11+
<script>
12+
document.addEventListener('DOMContentLoaded', (e) => {
13+
modalForm(document.getElementById('create-event'), {
14+
formURL: "{% url 'myapp:modal-form' %}"
15+
})
16+
});
17+
</script>
18+
{% endblock %}
19+
20+
{% block content %}
21+
<h2 class="pb-2 mt-4 mb-2 border-bottom">{{ title_text }}</h2>
22+
<div class="row">
23+
<div class="col-6">
24+
<button id="create-event" class="btn btn-primary" type="button" name="button">Create Event</button>
25+
</div>
26+
</div>
27+
<div class="modal fade" tabindex="-1" role="dialog" id="modal">
28+
<div class="modal-dialog" role="document">
29+
<div class="modal-content"></div>
30+
</div>
31+
</div>
32+
{% endblock %}

‎dev/myapp/templates/myapp/bootstrap5/modal-form.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{% load django_bootstrap5 %}
2+
<div class="container">
3+
<h2 class="pb-2 mt-4 mb-2 border-bottom">{{ title_text }}</h2>
4+
<div class="row pb-2">
5+
<div class="col">
6+
<form action="" method="post">
7+
{% csrf_token %}
8+
{% bootstrap_form form %}
9+
{% bootstrap_alert "Demo site is static HTML clone of django, submitting won't work" alert_type='warning' %}
10+
<button type="submit" class="btn btn-primary">{{ submit_text }}</button>
11+
</form>
12+
</div>
13+
</div>
14+
</div>

‎dev/myapp/templates/myapp/nav-bar.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@
1919
<li class="nav-item {% if url_name == 'django-filter' %}active{% endif %}">
2020
<a class="nav-link" href="{% url 'myapp:django-filter' %}">With django-filter</a>
2121
</li>
22+
<li class="nav-item {% if url_name == 'modal-form-index' %}active{% endif %}">
23+
<a class="nav-link" href="{% url 'myapp:modal-form-index' %}">With django-bootstrap-modal-forms</a>
24+
</li>
2225
{% endwith %}
2326
</ul>
2427
</div>

‎dev/myapp/urls.py‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,14 @@
2424
views.DynamicFormsetView.as_view(),
2525
name="dynamic-formset",
2626
),
27+
path(
28+
"modal-form.html",
29+
views.EventModalCreateView.as_view(),
30+
name="modal-form",
31+
),
32+
path(
33+
"modal-form-index.html",
34+
views.ModalIndexTemplateView.as_view(),
35+
name="modal-form-index",
36+
),
2737
]

‎dev/myapp/views.py‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
from typing import List, Optional, Type
22

3+
from bootstrap_modal_forms.generic import BSModalCreateView
34
from django.forms import ModelForm, formset_factory
45
from django.http import HttpRequest
6+
from django.urls import reverse_lazy
7+
from django.views.generic import TemplateView
58
from django.views.generic.edit import CreateView, FormView, UpdateView
69
from django_filters.views import FilterView
710

@@ -12,7 +15,13 @@
1215
TimePickerInput,
1316
YearPickerInput,
1417
)
15-
from dev.myapp.forms import CustomForm, EventFilter, EventForm, ToDoForm
18+
from dev.myapp.forms import (
19+
CustomForm,
20+
EventFilter,
21+
EventForm,
22+
EventModalModelForm,
23+
ToDoForm,
24+
)
1625
from dev.myapp.models import Event
1726

1827

@@ -127,3 +136,25 @@ class DynamicFormsetView(
127136
"title_text": "Use with Formsets",
128137
"submit_text": "Submit",
129138
}
139+
140+
141+
class EventModalCreateView(
142+
NamespaceTemplateMixin, SuccessRedirectMixin, BSModalCreateView # type: ignore
143+
):
144+
template_name = "myapp/{namespace}/modal-form.html"
145+
form_class = EventModalModelForm
146+
success_message = "Success: Event was created."
147+
success_url = reverse_lazy("index")
148+
extra_context = {
149+
"title_text": "Create new Event",
150+
"submit_text": "Submit",
151+
}
152+
153+
154+
class ModalIndexTemplateView(NamespaceTemplateMixin, TemplateView):
155+
template_name = "myapp/{namespace}/modal-form-index.html"
156+
extra_context = {
157+
"title_text": "Usage with django-bootstrap-modal-forms",
158+
"submit_text": "Submit",
159+
"form": EventModalModelForm, # Hack to make form.media work
160+
}

0 commit comments

Comments
 (0)