show experiment criteria in demographics view

babex-vue/src/components/participants/ParticipantDemographics.vue

@@ -17,6 +17,9 @@
         premature_no: true,
     });
 
+
+    let criteriaSnippet = ref('');
+
     defineProps(['experiments']);
 
     let request = null;
@@ -127,6 +130,15 @@
         d3.select('.graph svg').remove();
         loading.value = true;
         makeGraph('.graph');
+
+        if (experiment) {
+            fetch(`/experiments/${experiment.value}/criteria/`, {
+                credentials: 'include',
+                method: 'GET',
+            }).then(async (response) => {
+                criteriaSnippet.value = await response.text()
+            });
+        }
     }, {deep: true});
 </script>
 
@@ -145,7 +157,8 @@
         </div>
         <div class="col-3">
             <div>{{ _('Criteria:') }}</div>
-            <div class="criteria" :class="experiment && 'disabled'">
+            <div v-if="experiment" v-html="criteriaSnippet"></div>
+            <div class="criteria" v-if="!experiment">
                 <div>
                     {{ _('Parent with Dyslexia') }}
                     <div class="float-end">

lab/experiments/templates/experiments/detail_parts/info.html

@@ -135,7 +135,7 @@ <h3 class="d-inline">
         </div>
     </div>
     <div class="tab-pane fade" id="criteria" role="tabpanel">
-        {% include 'experiments/criteria_snippit.html' %}
+        {% include 'experiments/criteria_snippet.html' %}
         <div class="p-2">
             <a class="btn btn-secondary" href="{% url 'experiments:default_criteria' experiment.pk %}?next={{ request.path }}">
                 {% trans 'experiments:detail:edit_default_criteria' %}

lab/experiments/templates/experiments/index.html

@@ -83,7 +83,7 @@ <h1 class="h2">
                                    class="icon-phone" title="{% trans 'experiments:home:invite:title'  %}" ></a>
                             </div>
                             <div>
-                                {% include 'experiments/experiment_actions_snippit.html' %}
+                                {% include 'experiments/experiment_actions_snippet.html' %}
                             </div>
                             </div>
                         </td>

lab/experiments/urls/experiments_urls/__init__.py

@@ -3,6 +3,7 @@
 from experiments.views import (
     ExperimentAttachmentView,
     ExperimentCreateView,
+    ExperimentCriteriaView,
     ExperimentDeleteView,
     ExperimentDetailView,
     ExperimentHomeView,
@@ -16,4 +17,5 @@
     path("<int:pk>/update/", ExperimentUpdateView.as_view(), name="update"),
     path("<int:pk>/delete/", ExperimentDeleteView.as_view(), name="delete"),
     path("<int:pk>/attachment/<int:attachment>", ExperimentAttachmentView.as_view(), name="attachment"),
+    path("<int:pk>/criteria/", ExperimentCriteriaView.as_view(), name="criteria"),
 ]

lab/experiments/views/experiment_views.py

@@ -136,3 +136,15 @@ def get(self, request, *args, **kwargs):
         response = HttpResponse(attachment.file, content_type=attachment.file.content_type)
         response["Content-Disposition"] = "attachment; filename=" + attachment.filename
         return response
+
+
+class ExperimentCriteriaView(LabManagerMixin, ExperimentObjectMixin, generic.TemplateView):
+    """used to display an html table with filter criteria on the demographics view"""
+
+    experiment_kwargs_name = "pk"
+    template_name = "experiments/criteria_snippet.html"
+
+    def get_context_data(self, *args, **kwargs):
+        context = super().get_context_data(*args, **kwargs)
+        context["experiment"] = self.experiment
+        return context