[UPDT] HORILLA VIEWS: Generic hx-confirm method

This commit is contained in:
Horilla
2024-09-24 14:25:59 +05:30
parent ae3a9ace51
commit 8c7664e2cb
5 changed files with 105 additions and 43 deletions

View File

@@ -791,6 +791,7 @@ class HorillaFormView(FormView):
model: object = None
view_id: str = get_short_uuid(4)
hx_confirm: str = ""
form_class: forms.ModelForm = None
template_name = "generic/horilla_form.html"
ids_key: str = "instance_ids"
@@ -847,6 +848,7 @@ class HorillaFormView(FormView):
context["dynamic_create_fields"] = self.dynamic_create_fields
context["form_class_path"] = self.form_class_path
context["view_id"] = self.view_id
context["hx_confirm"] = self.hx_confirm
pk = None
if self.form.instance:
pk = self.form.instance.pk
@@ -901,11 +903,24 @@ class HorillaFormView(FormView):
view.display_title = "Dynamic create"
field = dynamic_tuple[0]
key = self.request.session.session_key + "cbv" + field
field_instance = form.instance._meta.get_field(field)
value = []
form_field = forms.ChoiceField
if isinstance(field_instance, models.models.ManyToManyField):
form_field = forms.MultipleChoiceField
if form.instance.pk is not None:
value = list(
getattr(form.instance, field).values_list(
"id", flat=True
)
)
else:
value = getattribute(getattribute(form.instance, field), "pk")
CACHE.set(
key,
{
"dynamic_field": field,
"value": getattribute(form.instance, field),
"value": value,
"model": form._meta.model,
},
)
@@ -925,12 +940,14 @@ class HorillaFormView(FormView):
choices = [(instance.id, instance) for instance in queryset]
choices.insert(0, ("", "Select option"))
choices.append(("dynamic_create", "Dynamic create"))
form.fields[field] = forms.ChoiceField(
attrs = form.fields[field].widget.attrs
form.fields[field] = form_field(
choices=choices,
label=form.fields[field].label,
required=form.fields[field].required,
widget=forms.Select(attrs=form.fields[field].widget.attrs),
)
form.fields[field].widget.attrs = attrs
form.initial[field] = value
if pk:
form.instance = instance
title = str(instance)

View File

@@ -8,6 +8,11 @@
<div class="oh-modal__dialog" id="genericModalBody"></div>
</div>
<div class="oh-activity-sidebar" id="genericSidebar" style="z-index:1000;">
<div class="oh-activity-sidebar__body" id="genericOffCanvas">
</div>
</div>
<script>
$(document).on("htmx:afterOnLoad", function (event) {
$("[data-toggle='oh-modal-toggle']").click(function (e) {

View File

@@ -1,36 +1,61 @@
{% for field_tuple in dynamic_create_fields %}
<div
class="oh-modal"
id="dynamicModal{{field_tuple.0}}"
role="dialog"
aria-labelledby="dynamicModal{{field_tuple.0}}"
aria-hidden="true"
>
<div id="{{view_id}}">
{% for field_tuple in dynamic_create_fields %}
<div
class="oh-modal__dialog"
id="dynamicModal{{field_tuple.0}}Body"
></div>
class="oh-modal"
id="dynamicModal{{field_tuple.0}}"
role="dialog"
aria-labelledby="dynamicModal{{field_tuple.0}}"
aria-hidden="true"
>
<div
class="oh-modal__dialog"
id="dynamicModal{{field_tuple.0}}Body"
></div>
</div>
{% endfor %}
<form id="{{view_id}}Form" hx-post="{{request.path}}?{{request.GET.urlencode}}" hx-encoding="multipart/form-data" hx-swap="outerHTML" {% if hx_confirm %} hx-confirm="{{hx_confirm}}" {% endif %}>{{form.structured}}</form>
{% for field_tuple in dynamic_create_fields %}
<form
id="modalButton{{field_tuple.0}}Form"
hx-get="/dynamic-path-{{field_tuple.0}}-{{request.session.session_key}}?dynamic_field={{field_tuple.0}}"
hx-target="#dynamicModal{{field_tuple.0}}Body"
>
<input type="hidden" name="dynamic_initial" data-dynamic-field="{{field_tuple.0}}">
<input type="hidden" name="view_id" value="{{view_id}}">
<button
hidden
type="submit"
id="modalButton{{field_tuple.0}}"
onclick="$('#dynamicModal{{field_tuple.0}}').addClass('oh-modal--show');"
>
{{field_tuple.0}}
</button>
</form>
<form id="reload-field{{field_tuple.0}}{{view_id}}" hx-get="{% url "reload-field" %}?form_class_path={{form_class_path}}&dynamic_field={{field_tuple.0}}" hx-target="#dynamic_field_{{field_tuple.0}}">
<input type="hidden" name="dynamic_initial" data-dynamic-field="{{field_tuple.0}}">
<input type="hidden" name="view_id" value="{{view_id}}">
<button hidden class="reload-field" data-target="{{field_tuple.0}}">
Reload Field
</button>
</form>
<script>
$("#{{view_id}}Form [name={{field_tuple.0}}]").change(function (e) {
values = $(this).val();
if (values == "dynamic_create") {
$("#modalButton{{field_tuple.0}}").click()
}else if (values.includes("dynamic_create")) {
let index = values.indexOf("dynamic_create");
values.splice(index, 1);
$(this).val(values).change();
$("#modalButton{{field_tuple.0}}").parent().find('input[name=dynamic_initial]').val(values)
$("#reload-field{{field_tuple.0}}{{view_id}}").find('input[name=dynamic_initial]').val(values)
$("#modalButton{{field_tuple.0}}").click()
}
});
$("#reload-field{{field_tuple.0}}{{view_id}}").submit(function (e) {
e.preventDefault();
$(this).find("[name=dynamic_initial]").val();
});
</script>
{% endfor %}
</div>
{% endfor %}
<form id="{{view_id}}" hx-post="{{request.path}}?{{request.GET.urlencode}}" hx-encoding="multipart/form-data" hx-swap="outerHTML">{{form.structured}}</form>
{% for field_tuple in dynamic_create_fields %}
<button
hidden
id="modalButton{{field_tuple.0}}"
hx-get="/dynamic-path-{{field_tuple.0}}-{{request.session.session_key}}?dynamic_field={{field_tuple.0}}"
hx-target="#dynamicModal{{field_tuple.0}}Body"
onclick="$('#dynamicModal{{field_tuple.0}}').addClass('oh-modal--show');"
>
{{field_tuple.0}}</button>
<button hidden class="reload-field" hx-get="{% url "reload-field" %}?form_class_path={{form_class_path}}&dynamic_field={{field_tuple.0}}" hx-target="#dynamic_field_{{field_tuple.0}}" data-target="{{field_tuple.0}}">
Reload Field
</button>
<script>
$("#{{view_id}} [name={{field_tuple.0}}]").change(function (e) {
if (this.value=="dynamic_create") {
$("#modalButton{{field_tuple.0}}").click()
$(this).val("").change();
}
});
</script>
{% endfor %}

View File

@@ -4,9 +4,17 @@
<script>
$("#{{dynamic_id}} [name={{field.name}}]").change(function (e) {
if (this.value=="dynamic_create") {
$("#modalButton{{field.name}}").click()
$(this).val("").change();
values = $(this).val();
if (values == "dynamic_create") {
$("#modalButton{{field_tuple.0}}").click()
}else if (values.includes("dynamic_create")) {
let index = values.indexOf("dynamic_create");
values.splice(index, 1);
$(this).val(values).change();
$("#{{request.GET.view_id}} #modalButton{{field.name}}").parent().find('input[name=dynamic_initial]').val(values)
$("#{{request.GET.view_id}} #reload-field{{field.name}}{{request.GET.view_id}}").find('input[name=dynamic_initial]').val(values)
$("#{{request.GET.view_id}} #modalButton{{field.name}}").click()
}
});
</script>

View File

@@ -79,13 +79,20 @@ class ReloadField(View):
choices.insert(0, ("", "Select option"))
choices.append(("dynamic_create", "Dynamic create"))
parent_form.fields[cache_field] = forms.ChoiceField(
form_field = forms.ChoiceField
if isinstance(field, forms.ModelMultipleChoiceField):
form_field = forms.MultipleChoiceField
parent_form.fields[cache_field] = form_field(
choices=choices,
label=field.label,
required=field.required,
widget=forms.Select(attrs=field.widget.attrs),
)
parent_form.fields[cache_field].initial = dynamic_cache["value"]
dynamic_initial = request.GET.get("dynamic_initial", [])
parent_form.fields[cache_field].widget.attrs = field.widget.attrs
parent_form.fields[cache_field].initial = eval(
f"""[{dynamic_cache["value"]},{dynamic_initial}]"""
)
field = parent_form[cache_field]
dynamic_id: str = get_short_uuid(4)