Skip to content

Commit

Permalink
Merge pull request #93 from rcpch:91-styling-for-tabs-in-visit-form
Browse files Browse the repository at this point in the history 
91 styling for tabs in visit form
  • Loading branch information
@eatyourpeas
eatyourpeas authored Jun 6, 2024
2 parents db76873 + 12fea19 commit cb57c86
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 44 deletions.
141 changes: 98 additions & 43 deletions project/npda/templates/npda/visit_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,28 @@
{% endfor %}

<div role="tablist" class="tabs tabs-bordered">
<input type="radio" name="my_tabs_1" role="tab" class="tab" aria-label="Routine&nbsp;Measurements" checked/>
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-none">
<input type="radio" name="my_tabs_1" role="tab" class="tab font-bold
{% if routine_measurements_categories_with_errors and form_method == 'update' %}
bg-rcpch_red
{% elif form_method == 'create' %}
bg-white
{% else %}
bg-rcpch_pink
{% endif %}"
aria-label="Routine&nbsp;Measurements" checked
/>
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-none mt-4">
{% for field_category in form.categories %}
{% with field_category|colour_for_category as background_colour %}
{% if field_category == "Measurements" or field_category == "HBA1c" or field_category == "Treatment" or field_category == "CGM" or field_category == "BP"%}
<div class="flex flex-col mb-6 {% if background_colour %} bg-{{background_colour}} {% endif %}">
<div class="flex flex-col mb-6
{% if background_colour %}
bg-{{background_colour}}
{% endif %}
{% if field_category in routine_measurements_categories_with_errors %}
outline outline-8 outline-rcpch_red
{% endif %}"
>
{% for field in form %}
{% if field.field.category == field_category %}
<div class="flex flex-row my-2 mx-2">
Expand Down Expand Up @@ -70,17 +86,42 @@
{% endfor %}
</div>

<input type="radio" name="my_tabs_1" role="tab" class="tab rounded-none" aria-label="Annual&nbsp;Review"/>
<input type="radio" name="my_tabs_1" role="tab" class="tab rounded-none font-bold
{% if annual_review_categories_with_errors %}
bg-rcpch_red
{% elif form_method == 'create' %}
bg-white
{% else %}
bg-rcpch_pink
{% endif %}"
aria-label="Annual&nbsp;Review"
/>
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-none p-6">
{% for field_category in form.categories %}
{% with field_category|colour_for_category as background_colour %}
{% if field_category == "Foot Care" or field_category == "DECS" or field_category == "ACR" or field_category == "Cholesterol" or field_category == "Thyroid" or field_category == "Coeliac" or field_category == "Psychology" or field_category == "Smoking" or field_category == "Dietician" or field_category == "Sick Day Rules" or field_category == "Immunisation (flu)" %}
<div class="collapse collapse-arrow my-2 bg-base-200 rounded-none {% if field_category in categories_with_errors %} bg-rcpch_red {% elif field_category in categories_without_errors %} bg-rcpch_pink {% else %} bg-rcpch_dark_blue {% endif %}">
<div class="collapse collapse-arrow my-2 bg-base-200 rounded-none
{% if field_category in categories_with_errors %}
bg-rcpch_red
{% elif field_category in categories_without_errors %}
bg-rcpch_pink
{% else %}
bg-rcpch_dark_blue
{% endif %}
">
<input type="radio" name="my-accordion-3" checked="checked" />
<div class="collapse-title text-xl font-medium text-white">
<strong>{{field_category}}</strong>
</div>
<div class="collapse-content flex flex-col mb-6 text-lg {% if field_category in categories_with_errors %} bg-rcpch_red {% elif field_category in categories_without_errors %} bg-rcpch_pink {% else %} bg-rcpch_dark_blue {% endif %}">
<div class="collapse-content flex flex-col mb-6 text-lg
{% if field_category in categories_with_errors %}
bg-rcpch_red
{% elif field_category in categories_without_errors %}
bg-rcpch_pink
{% else %}
bg-rcpch_dark_blue
{% endif %}
">
{% for field in form %}
{% if field.field.category == field_category %}
<div class="flex flex-row my-2 mx-2">
Expand Down Expand Up @@ -117,45 +158,59 @@
{% endfor %}
</div>

<input type="radio" name="my_tabs_1" role="tab" class="tab w" aria-label="Inpatient&nbsp;Entry"/>
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-none p-6">
{% for field_category in form.categories %}
{% with field_category|colour_for_category as background_colour %}
{% if field_category == "Hospital Admission" %}
<div class="flex flex-col mb-6 {% if background_colour %} bg-{{background_colour}} {% endif %}">
{% for field in form %}
{% if field.field.category == field_category %}
<div class="flex flex-row my-2 mx-2">
<div class="flex items-center justify-center md:w-1/3">
<label for="{{ field.id_for_label }}" class="block text-gray-700 font-bold md:text-center mb-1 md:mb-0 pr-4"><small>{{ field.label }}</small></label>
</div>
<div class="flex space-between md:w-2/3">
{% if field.field.widget|is_select %}
<select id="{{ field.id_for_label }}" name="{{ field.html_name }}" class="select rcpch-select rounded-none">
{% for choice in field.field.choices %}
<option value="{{choice.0}}" {% if field.value == choice.0 %} selected="{{ field.value }}" {% endif %}>{{choice.1}}</option>
{% endfor %}
</select>
{% elif field.field.widget|is_dateinput %}
<input type="date" id="{{ field.id_for_label }}" name="{{ field.html_name }}" class="input rcpch-input-text" {% if field.value %} value={{ field.value|date:"Y-m-d" }} {% endif %}>
<button type='button' _="on click set #{{ field.id_for_label}}'s value to '{% today_date %}'" class="btn rcpch-btn bg-rcpch_light_blue border border-rcpch_light_blue hover:bg-rcpch_strong_blue hover:border-rcpch_strong_blue">Today</button>
<button type='button' _="on click set #{{ field.id_for_label}}'s value to #id_visit_date.value" class="btn rcpch-btn bg-rcpch_light_blue border border-rcpch_light_blue hover:bg-rcpch_strong_blue hover:border-rcpch_strong_blue">Fill with Visit Date</button>
{% else %}
<input type="text" id="{{ field.id_for_label }}" name="{{ field.html_name }}" class="input rcpch-input-text rounded-none" {% if field.field.required %} placeholder="Required" {% endif %} {% if field.value %} value={{ field.value }} {% elif field.value == 0 %} value="0.0" {% endif %}>
<input type="radio" name="my_tabs_1" role="tab" aria-label="Inpatient&nbsp;Entry" class="tab w font-bold
{% if "Hospital Admission" in categories_with_errors %}
bg-rcpch_red
{% elif "Hospital Admission" in categories_without_errors %}
bg-rcpch_pink
{% endif %}
"/>
<div role="tabpanel" class="
tab-content bg-base-100 border-base-300 rounded-none p-6">
{% for field_category in form.categories %}
{% with field_category|colour_for_category as background_colour %}
{% if field_category == "Hospital Admission" %}
<div class="flex flex-col mb-6
{% if background_colour %}
bg-{{background_colour}}
{% endif %}
{% for error in field.errors %}
<p>
<strong class="text-gray-700">{{ error|escape }}</strong>
</p>
{% endfor %}
</div>
{% if "Hospital Admission" in categories_with_errors %}
outline outline-8 outline-rcpch_red
{% endif %}"
>
{% for field in form %}
{% if field.field.category == field_category %}
<div class="flex flex-row my-2 mx-2">
<div class="flex items-center justify-center md:w-1/3">
<label for="{{ field.id_for_label }}" class="block text-gray-700 font-bold md:text-center mb-1 md:mb-0 pr-4"><small>{{ field.label }}</small></label>
</div>
<div class="flex space-between md:w-2/3">
{% if field.field.widget|is_select %}
<select id="{{ field.id_for_label }}" name="{{ field.html_name }}" class="select rcpch-select rounded-none">
{% for choice in field.field.choices %}
<option value="{{choice.0}}" {% if field.value == choice.0 %} selected="{{ field.value }}" {% endif %}>{{choice.1}}</option>
{% endfor %}
</select>
{% elif field.field.widget|is_dateinput %}
<input type="date" id="{{ field.id_for_label }}" name="{{ field.html_name }}" class="input rcpch-input-text" {% if field.value %} value={{ field.value|date:"Y-m-d" }} {% endif %}>
<button type='button' _="on click set #{{ field.id_for_label}}'s value to '{% today_date %}'" class="btn rcpch-btn bg-rcpch_light_blue border border-rcpch_light_blue hover:bg-rcpch_strong_blue hover:border-rcpch_strong_blue">Today</button>
<button type='button' _="on click set #{{ field.id_for_label}}'s value to #id_visit_date.value" class="btn rcpch-btn bg-rcpch_light_blue border border-rcpch_light_blue hover:bg-rcpch_strong_blue hover:border-rcpch_strong_blue">Fill with Visit Date</button>
{% else %}
<input type="text" id="{{ field.id_for_label }}" name="{{ field.html_name }}" class="input rcpch-input-text rounded-none" {% if field.field.required %} placeholder="Required" {% endif %} {% if field.value %} value={{ field.value }} {% elif field.value == 0 %} value="0.0" {% endif %}>
{% endif %}
{% for error in field.errors %}
<p>
<strong class="text-gray-700">{{ error|escape }}</strong>
</p>
{% endfor %}
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
{% endwith %}
{% endfor %}
{% endif %}
{% endwith %}
{% endfor %}
</div>


Expand Down
2 changes: 1 addition & 1 deletion project/npda/templatetags/npda_tags.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ def colour_for_category(category):
# returns a colour for a given category
colours = [
{"category": VisitCategories.HBA1, "colour": "rcpch_red_light_tint2"},
{"category": VisitCategories.MEASUREMENT, "colour": "rcpch_red"},
{"category": VisitCategories.MEASUREMENT, "colour": "rcpch_vivid_green"},
{"category": VisitCategories.TREATMENT, "colour": "rcpch_orange"},
{"category": VisitCategories.CGM, "colour": "rcpch_orange_light_tint2"},
{"category": VisitCategories.BP, "colour": "rcpch_yellow"},
Expand Down
11 changes: 11 additions & 0 deletions project/npda/views/visit.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,15 +85,26 @@ def get_context_data(self, **kwargs):
visit_instance = Visit.objects.get(pk=self.kwargs["pk"])
visit_categories = get_visit_categories(visit_instance)
context["visit_categories"] = visit_categories
context["routine_measurements_categories"] = ["Measurements", "HBA1c", "Treatment", "CGM", "BP"]
context["annual_review_categories"] = ["Foot Care", "DECS", "ACR", "Cholesterol", "Thyroid", "Coeliac", "Psychology", "Smoking", "Dietician", "Sick Day Rules", "Immunisation (flu)"]
categories_with_errors = []
categories_without_errors = []
routine_measurements_categories_with_errors = []
annual_review_categories_with_errors = []
for category in visit_categories:
if category["has_error"] == False:
categories_without_errors.append(category["category"])
else:
categories_with_errors.append(category["category"])
if category["category"] in context["routine_measurements_categories"]:
routine_measurements_categories_with_errors.append(category["category"])
elif category["category"] in context["annual_review_categories"]:
annual_review_categories_with_errors.append(category["category"])
context["routine_measurements_categories_with_errors"] = routine_measurements_categories_with_errors
context["annual_review_categories_with_errors"] = annual_review_categories_with_errors
context["categories_with_errors"] = categories_with_errors
context["categories_without_errors"] = categories_without_errors

return context

def get_success_url(self):
Expand Down

0 comments on commit cb57c86

Please sign in to comment.