make rapid form crispy

anatomy/static/js/upload_form_helpers.js

@@ -1,4 +1,4 @@
-    let active_file_inputs = new Set();
+    var active_file_inputs = new Set();
 
     function add_input_form() {
         var form_idx = $('#id_images-TOTAL_FORMS').val();

rapids/forms.py

@@ -25,6 +25,10 @@ from django.contrib.admin.widgets import FilteredSelectMultiple
 from django.forms.widgets import RadioSelect, TextInput, Textarea
 from django.contrib.auth.models import User
 
+from crispy_forms.helper import FormHelper
+from crispy_forms.layout import Submit, Layout, Div, Field, HTML
+from crispy_forms.bootstrap import InlineRadios
+
 
 class RapidAnswerForm(ModelForm):
     class Meta:
@@ -97,25 +101,50 @@ class RapidForm(ModelForm):
 
         ModelForm.__init__(self, *args, **kwargs)
         super(RapidForm, self).__init__(*args, **kwargs)
-        # self.fields['question'].widget.attrs = {'class': 'question-form', 'rows': 10, 'cols': 100}
+
-        # self.fields['feedback'].widget.attrs = {'class': 'feedback-form', 'rows': 10, 'cols': 100}
+
+        self.helper = FormHelper()
+        self.helper.form_id = 'id-anatomy-question-form'
+        self.helper.form_tag = False
+
+        self.helper.layout = Layout(
+            Div(InlineRadios('normal')),
+            Div(
+            HTML("<h4 class='clearfix' id='abnormality-label'>Abnormality</h4>"),
+            Field('abnormality', css_class='form-control'),
+            HTML("<h4 class='clear-both' id='region-label'>Region</h4>"),
+            Field('region', css_class='form-control'),
+            css_class='clearfix abnormal-fields'
+            ),
+            HTML("<h4 class='clear-both' id='examination-label'>Examination*</h4>"),
+            Field('examination', css_class='form-control'),
+            Div(InlineRadios('laterality', css_class='form-control'), css_class='clearfix clear-both'),
+            Field('feedback', css_class='form-control'),
+            Field('history', css_class='form-control'),
+            Field('open_access', css_class='form-control'),
+            HTML("<h4 class='clear-both' id='exams-label'>Exams</h4>"),
+            Field('exams', css_class='form-control'),
+        )
 
         self.fields["abnormality"] = ModelMultipleChoiceField(
             required=False,
             queryset=Abnormality.objects.all(),
             widget=FilteredSelectMultiple(verbose_name="Abnormality", is_stacked=False),
         )
+        self.fields["abnormality"].label = ""
 
         self.fields["region"] = ModelMultipleChoiceField(
             required=False,
             queryset=Region.objects.all(),
             widget=FilteredSelectMultiple(verbose_name="Region", is_stacked=False),
         )
+        self.fields["region"].label = ""
 
         self.fields["examination"] = ModelMultipleChoiceField(
             queryset=Examination.objects.all(),
             widget=FilteredSelectMultiple(verbose_name="Examination", is_stacked=False),
         )
+        self.fields["examination"].label = ""
 
         self.fields["laterality"] = ChoiceField(
             choices=Rapid.LATERALITY_CHOICES, required=False, widget=RadioSelect()
@@ -133,6 +162,7 @@ class RapidForm(ModelForm):
             queryset=exam_queryset.distinct(),
             widget=FilteredSelectMultiple(verbose_name="Exams", is_stacked=False),
         )
+        self.fields["exams"].label = ""
 
     def save(self, commit=True):
         instance = ModelForm.save(self, False)
@@ -186,11 +216,8 @@ class RapidForm(ModelForm):
         ]
         # fields = ['question', 'feedback', 'subspecialty', 'references']
         widgets = {
-            # "normal": RadioSelect(
+             "normal": RadioSelect() 
-            # choices=[(True, 'Yes'),
+             }
-            #     (False, 'No')])
-        }
-
 
 ImageFormSet = inlineformset_factory(
     Rapid,

rapids/migrations/0015_alter_rapid_normal.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.0.2 on 2024-10-21 09:11
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('rapids', '0014_exam_exam_open_access'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='rapid',
+            name='normal',
+            field=models.BooleanField(choices=[(True, 'Normal'), (False, 'Abnormal')], default=False, help_text='Defines if a question is normal/abnormal'),
+        ),
+    ]

rapids/models.py

@@ -161,7 +161,12 @@ class Rapid(QuestionBase):
     question = models.TextField(null=True, blank=True)
     history = models.TextField(null=True, blank=True)
 
-    normal = models.BooleanField(default=False, help_text="Tick if true")
+    NORMAL_CHOICES = (
+        (True, "Normal"),
+        (False, "Abnormal"), 
+    )
+
+    normal = models.BooleanField(default=False, help_text="Defines if a question is normal/abnormal", choices=NORMAL_CHOICES)
 
     NONE = "NONE"
     LEFT = "LEFT"

rapids/templates/rapids/rapid_form.html

@@ -1,11 +1,11 @@
 {% extends "rapids/base.html" %}
 {% load static from static %}
+{% load crispy_forms_tags %}
 
 {% block js %}
 <!--<script type="text/javascript" src="/admin/jsi18n/"></script>-->
 
 <script type="text/javascript">
-    let normal = false;
     let csrf_token = "{{csrf_token}}";
     let hash_url = "{% url 'rapids:rapid_question_by_hash' %}";
     //let monitor_directory_handler = false;
@@ -58,9 +58,9 @@
 
 
     $(document).ready(function () {
-        $("#add_abnormality").appendTo($("label[for='id_abnormality']"));
+        $("#add_abnormality").appendTo($("#abnormality-label"));
-        $("#add_examination").appendTo($("label[for='id_examination']"));
+        $("#add_examination").appendTo($("#examination-label"));
-        $("#add_region").appendTo($("label[for='id_region']"));
+        $("#add_region").appendTo($("#region-label"));
 
         dropContainer = document.getElementById("drop-container");
 
@@ -179,31 +179,13 @@
 
         $("input[type=file]").on('change', input_change);
 
-
-
-        function ifNormal() {
-            if (document.getElementById("id_normal").checked) {
-                $("#answer_form_set textarea").attr("required", false)
-                $('#answer_empty_form textarea').attr("required", false)
-                normal = true;
-            } else {
-                $("#answer_form_set textarea").attr("required", true)
-                $('#answer_empty_form textarea').attr("required", true)
-                normal = false;
-            }
-        }
-
-        $("#id_normal").change(() => ifNormal());
-
-        ifNormal();
-
         $("#rapid-form").on("submit", (evt) => {
             submit = true;
-            if (!normal) {
+            if (!$normal) {
                 if ($('#id_answers-TOTAL_FORMS').val() == "0") {
                     submit = false;
                     add_answers_input_form();
-                    toastr.error(`Please enter an answers (or select Normal)`);
+                    toastr.error(`Question that are not normal require an answer`);
                     evt.preventDefault();
                 }
 
@@ -245,77 +227,6 @@
 
 
 
-//    async function readFileAndProcess(callback) {
-//        //$("#single-dicom-viewer").empty()
-//        //images = []
-//        //Function that returns a promise to read the file
-//        const reader = (file) => {
-//            return new Promise((resolve, reject) => {
-//                const fileReader = new FileReader();
-//                fileReader.onload = () => resolve(fileReader);
-//                fileReader.readAsDataURL(file);
-//            });
-//        }
-//
-//        // Add file to the process list
-//        active_file_inputs.add(el)
-//        const readFile = (file, el) => {
-//            reader(file).then(reader => {
-//                console.log("12345", reader)
-//                $(el).parent().parent().find(".temp-thumb").remove();
-//
-//                if (reader.result.startsWith("data:application/octet-stream;base64")) {
-//                    const element = $(`<div class='temp-thumb' src=${reader.result}></div>`).get(0)
-//                    $(el).parent().parent().prepend(element);
-//                    const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(
-//                        file
-//                    );
-//                    cornerstone.enable(element);
-//                    cornerstone.loadAndCacheImage(imageId).then(function (image) {
-//                        cornerstone.displayImage(element, image);
-//                        cornerstone.resize(element)
-//
-//                    });
-//
-//                } else {
-//                    var image = new Image();
-//                    image.title = file.name;
-//                    image.src = reader.result;
-//                    image.className = "temp-thumb";
-//                    $(el).parent().parent().prepend(image);
-//                    //images.push(reader.result);
-//                }
-//
-//                active_file_inputs.delete(el)
-//                console.log("active", active_file_inputs)
-//                // Only load once all queued files have been processed
-//                if (active_file_inputs.size < 1) {
-//                    loadViewer();
-//                }
-//            });
-//        }
-//
-//        file_set = $("#image_form_set input[type=file]");
-//
-//        file_set.each(async (n, el) => {
-//            if (el.files.length > 0) {
-//                filename = el.files[0].name;
-//                // Probably no need to await here anymore
-//                await readFile(el.files[0], el);
-//            }
-//        })
-//    }
-
-//    const viewLoadChecker = setInterval(function () {
-//        if (load_viewer) {
-//            load_viewer = false;
-//            loadViewer();
-//        }
-//    }, 2000);
-
-
-
-
     function extractDicomDetails(byteArray) {
                     if (!$("#id_examination_to option").length) {
 
@@ -355,10 +266,52 @@
         }
                     }
     }
+</script>
+<script type="text/hyperscript">
+    init
+    set global $normal to false
+    if (#id_normal_0.checked ) 
+        Fade(.abnormal-fields) then 
+        set global $normal to true then 
+        remove @required from <#answer_form_set textarea/> then
+        remove @required from <#answer_empty_form textarea.required/> 
+    end
+    end
+
+    def Fade(elt)
+        if elt's style's opacity != "0"
+            transition element elt opacity to 0 over 350ms
+            transition element elt transform to "translateY(0.25rem)" over 350ms
+            hide elt
+        else
+            show elt
+            transition element elt opacity to 1 over 350ms
+            transition element elt transform to "translateY(0rem)" over 350ms
+        end
+    end
+  on change from #id_normal_0 
+    if (#id_normal_0.checked ) 
+        Fade(.abnormal-fields) then 
+        set global $normal to true then 
+        remove @required from <#answer_form_set textarea/> then
+        remove @required from <#answer_empty_form textarea.required/> 
+    end
+  on change from #id_normal_1 
+    if (#id_normal_1.checked ) 
+        Fade(.abnormal-fields) then 
+        set global $normal to false then 
+        add @required to <#answer_form_set textarea/> then
+        add @required to <#answer_empty_form textarea.required/> 
+    end
+
+
+
+
 </script>
 
 {{ form.media }}
 {% endblock %}
+
 {% block content %}
 
 {% if object %}
@@ -380,7 +333,7 @@ the feedback image box is checked they will not be displayed when taking the que
     <span id="directory-picker-display">No directory monitored</span>
 </div> -->
 <form action="" method="post" enctype="multipart/form-data" id="rapid-form">
-    {% csrf_token %}
+    {% comment %} {% csrf_token %} {% endcomment %}
     <a href="/rapids/abnormality/create" id="add_abnormality" class="add-popup"
         onclick="return showAddPopup(this);"><img src="{% static '/img/icon-addlink.svg' %}"></a>
     <a href="/rapids/examination/create" id="add_examination" class="add-popup"
@@ -388,9 +341,9 @@ the feedback image box is checked they will not be displayed when taking the que
     <a href="/rapids/region/create" id="add_region" class="add-popup" onclick="return showAddPopup(this);"><img
             src="{% static '/img/icon-addlink.svg' %}"></a>
 
-    <table>
+    {% crispy form form.helper %}
-        {{ form.as_table }}
+
-    </table>
+    <div class="abnormal-fields">
     <h3>Answers:</h3>
     <input type="button" value="Add More Answers" id="add_more_answers">
     <div id="answer_form_set">
@@ -403,6 +356,7 @@ the feedback image box is checked they will not be displayed when taking the que
         {% endfor %}
     </div>
     {{ answer_formset.management_form }}
+    </div>
     <h3>Images:</h3>
     <div id="drop-container" class="drop-target">Drop images here (or use the buttons below)<div
             id="feedback-drop-target">Feedback image?<br />drop those here</div>
@@ -434,4 +388,14 @@ the feedback image box is checked they will not be displayed when taking the que
 
 <div id="single-dicom-viewer" class="rapid-dicom-viewer" data-images="" data-annotations='' style="display:none"></div>
 
-{% endblock %}
+{% endblock %}
+
+
+{% block css %}
+   <style>
+    .add-popup {
+        float: left;
+    } 
+</style>
+{% endblock css %}
+