feat: make data tables responsive

savannahghi · Jul 29, 2021 · 7b48ea4 · 7b48ea4
1 parent 0fe0366
commit 7b48ea4
Show file tree

Hide file tree

Showing 21 changed files with 4,909 additions and 71 deletions.
diff --git a/fahari/common/dashboard.py b/fahari/common/dashboard.py
@@ -16,6 +16,10 @@ def get_fahari_facilities_queryset():
         operation_status="Operational",
         county__in=WHITELIST_COUNTIES,
         active=True,
+    ).order_by(
+        "name",
+        "county",
+        "mfl_code",
     )
 
 

diff --git a/fahari/common/forms.py b/fahari/common/forms.py
@@ -2,6 +2,7 @@
 from crispy_forms.layout import Submit
 from django.forms import ModelForm, TextInput
 
+from .dashboard import get_fahari_facilities_queryset
 from .models import Facility, FacilityAttachment, FacilityUser, Organisation, System
 
 
@@ -103,6 +104,10 @@ class Meta:
 
 
 class FacilityUserForm(BaseModelForm):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.helper.form_id = "facility_user_form"
+        self.fields["facility"].queryset = get_fahari_facilities_queryset()
 
     field_order = (
         "facility",

diff --git a/fahari/common/serializers.py b/fahari/common/serializers.py
@@ -36,7 +36,7 @@ class Meta(BaseSerializer.Meta):
 class FacilityUserSerializer(BaseSerializer):
 
     facility_name = serializers.ReadOnlyField(source="facility.name")
-    user_name = serializers.ReadOnlyField(source="user.name")
+    user_name = serializers.ReadOnlyField(source="user.username")
 
     class Meta(BaseSerializer.Meta):
         model = FacilityUser

diff --git a/fahari/ops/forms.py b/fahari/ops/forms.py
@@ -102,6 +102,11 @@ class Meta(BaseModelForm.Meta):
                     "size": 128,
                 }
             ),
+            "expiry_date": TextInput(
+                attrs={
+                    "type": "date",
+                }
+            ),
         }
 
 
@@ -125,6 +130,43 @@ def __init__(self, *args, **kwargs):
 
     class Meta(BaseModelForm.Meta):
         model = ActivityLog
+        widgets = {
+            "planned_date": TextInput(
+                attrs={
+                    "type": "date",
+                }
+            ),
+            "requested_date": TextInput(
+                attrs={
+                    "type": "date",
+                }
+            ),
+            "procurement_date": TextInput(
+                attrs={
+                    "type": "date",
+                }
+            ),
+            "finance_approval_date": TextInput(
+                attrs={
+                    "type": "date",
+                }
+            ),
+            "final_approval_date": TextInput(
+                attrs={
+                    "type": "date",
+                }
+            ),
+            "done_date": TextInput(
+                attrs={
+                    "type": "date",
+                }
+            ),
+            "invoiced_date": TextInput(
+                attrs={
+                    "type": "date",
+                }
+            ),
+        }
 
 
 class SiteMentorshipForm(BaseModelForm):
@@ -146,6 +188,13 @@ def __init__(self, *args, **kwargs):
 
     class Meta(BaseModelForm.Meta):
         model = SiteMentorship
+        widgets = {
+            "day": TextInput(
+                attrs={
+                    "type": "date",
+                }
+            ),
+        }
 
 
 class DailyUpdateForm(BaseModelForm):
@@ -170,6 +219,13 @@ def __init__(self, *args, **kwargs):
 
     class Meta(BaseModelForm.Meta):
         model = DailyUpdate
+        widgets = {
+            "date": TextInput(
+                attrs={
+                    "type": "date",
+                }
+            ),
+        }
 
 
 class TimeSheetForm(BaseModelForm):
@@ -191,6 +247,18 @@ def __init__(self, *args, **kwargs):
 
     class Meta(BaseModelForm.Meta):
         model = TimeSheet
+        widgets = {
+            "date": TextInput(
+                attrs={
+                    "type": "date",
+                }
+            ),
+            "approved_at": TextInput(
+                attrs={
+                    "type": "datetime-local",
+                }
+            ),
+        }
 
 
 class WeeklyProgramUpdateForm(BaseModelForm):

diff --git a/fahari/static/js/project.js b/fahari/static/js/project.js
@@ -1,9 +1,15 @@
-/* Google Analytics */
-window.dataLayer = window.dataLayer || [];
+(function($) {
+    /* Google Analytics */
+    window.dataLayer = window.dataLayer || [];
 
-function gtag() {
-    dataLayer.push(arguments);
-}
-gtag("js", new Date());
+    function gtag() {
+        dataLayer.push(arguments);
+    }
+    gtag("js", new Date());
+    gtag("config", "G-WW2W29ZMTZ");
 
-gtag("config", "G-WW2W29ZMTZ");
+    // auto-collapse open menus in responsive mode
+    $(".navbar-collapse a").click(function() {
+        $(".navbar-collapse").collapse("hide");
+    });
+})(jQuery);
diff --git a/fahari/static/js/project.min.js b/fahari/static/js/project.min.js
diff --git a/fahari/static/js/vendors.js b/fahari/static/js/vendors.js
diff --git a/fahari/static/js/vendors.min.js b/fahari/static/js/vendors.min.js
diff --git a/fahari/templates/pages/common/facilities.html b/fahari/templates/pages/common/facilities.html
@@ -53,6 +53,7 @@ <h1 class="h3 mb-4 text-gray-800">
     $(document).ready(function() {
         $('#facilities-list').DataTable( {
             iDisplayLength: 100,
+            responsive: true,
             columns: [
                 {data: 'name', name: "name"},
                 {data: "mfl_code", name: "mfl_code"},

diff --git a/fahari/templates/pages/common/facility_users.html b/fahari/templates/pages/common/facility_users.html
@@ -48,6 +48,7 @@ <h1 class="h3 mb-4 text-gray-800">
     $(document).ready(function() {
         $('#facility-users-list').DataTable( {
             iDisplayLength: 100,
+            responsive: true,
             columns: [
                 {data: 'facility_name', name: "facility__name"},
                 {data: "user_name", name: "user__name"},

diff --git a/fahari/templates/pages/common/systems.html b/fahari/templates/pages/common/systems.html
@@ -50,6 +50,7 @@ <h1 class="h3 mb-4 text-gray-800">
     $(document).ready(function() {
         $('#systems-list').DataTable( {
             iDisplayLength: 100,
+            responsive: true,
             columns: [
                 {data: 'name', name: "name"},
                 {data: "description", name: "description"},

diff --git a/fahari/templates/pages/ops/activity_log.html b/fahari/templates/pages/ops/activity_log.html
@@ -55,6 +55,7 @@ <h1 class="h3 mb-4 text-gray-800">
     $(document).ready(function() {
         $('#activity-log-list').DataTable( {
             iDisplayLength: 100,
+            responsive: true,
             columns: [
                 {data: 'activity', name: "activity"},
                 {data: "planned_date", name: "planned_date"},

diff --git a/fahari/templates/pages/ops/daily_site_updates.html b/fahari/templates/pages/ops/daily_site_updates.html
@@ -57,6 +57,7 @@ <h1 class="h3 mb-4 text-gray-800">
     $(document).ready(function() {
         $('#daily-update-list').DataTable( {
             iDisplayLength: 100,
+            responsive: true,
             columns: [
                 {data: 'facility_name', name: "facility__name"},
                 {data: "date"},

diff --git a/fahari/templates/pages/ops/stock_receipt_verification.html b/fahari/templates/pages/ops/stock_receipt_verification.html
@@ -54,6 +54,7 @@ <h1 class="h3 mb-4 text-gray-800">
     $(document).ready(function() {
         $('#stock-receipts-list').DataTable( {
             iDisplayLength: 100,
+            responsive: true,
             columns: [
                 {data: 'facility_name', name: "facility__name"},
                 {data: "description", name: "description"},

diff --git a/fahari/templates/pages/ops/tickets.html b/fahari/templates/pages/ops/tickets.html
@@ -55,6 +55,7 @@ <h1 class="h3 mb-4 text-gray-800">
     $(document).ready(function() {
         $('#tickets-list').DataTable( {
             iDisplayLength: 100,
+            responsive: true,
             columns: [
                 {data: 'facility_system_name', name: 'facility_system__facility__name'},
                 {data: "details", name: "details"},

diff --git a/fahari/templates/pages/ops/timesheets.html b/fahari/templates/pages/ops/timesheets.html
@@ -56,6 +56,7 @@ <h1 class="h3 mb-4 text-gray-800">
     $(document).ready(function() {
         $('#timesheets-list').DataTable( {
             iDisplayLength: 100,
+            responsive: true,
             columns: [
                 {data: "staff_name", name: "staff__name"},
                 {data: "date", name: "date"},

diff --git a/fahari/templates/pages/ops/versions.html b/fahari/templates/pages/ops/versions.html
@@ -51,6 +51,7 @@ <h1 class="h3 mb-4 text-gray-800">
     $(document).ready(function() {
         $('#versions-list').DataTable( {
             iDisplayLength: 100,
+            responsive: true,
             columns: [
                 {data: "facility_name", name: "facility__name"},
                 {data: "system_name", name: "system__name"},

diff --git a/fahari/templates/pages/ops/weekly_program_updates.html b/fahari/templates/pages/ops/weekly_program_updates.html
@@ -50,6 +50,7 @@ <h1 class="h3 mb-4 text-gray-800">
     $(document).ready(function() {
         $('#updates-list').DataTable( {
             iDisplayLength: 100,
+            responsive: true,
             columns: [
                 {data: "date", name: "date"},
                 {data: "attendees", name: "attendees"},

diff --git a/gulpfile.js b/gulpfile.js
@@ -37,8 +37,25 @@ function pathsConfig(appName) {
             `${vendorsRoot}/popper.js/dist/umd/popper.js`,
             `${vendorsRoot}/bootstrap/dist/js/bootstrap.js`,
             `${vendorsRoot}/chart.js/dist/*.js`,
+            `${vendorsRoot}/jszip/dist/jszip.min.js`,
+            `${vendorsRoot}/pdfmake/dist/*.min.js`,
             `${vendorsRoot}/datatables.net/js/*.js`,
             `${vendorsRoot}/datatables.net-bs4/js/*.js`,
+            `${vendorsRoot}/datatables.net-responsive/js/*.js`,
+            `${vendorsRoot}/datatables.net-responsive-bs4/js/*.js`,
+            `${vendorsRoot}/datatables.net-autofill-bs4/js/*.js`,
+            `${vendorsRoot}/datatables.net-buttons-bs4/js/*.js`,
+            `${vendorsRoot}/datatables.net-colreorder-bs4/js/*.js`,
+            `${vendorsRoot}/datatables.net-datetime/js/*.js`,
+            `${vendorsRoot}/datatables.net-fixedcolumns-bs4/js/*.js`,
+            `${vendorsRoot}/datatables.net-fixedheader-bs4/js/*.js`,
+            `${vendorsRoot}/datatables.net-keytable-bs4/js/*.js`,
+            `${vendorsRoot}/datatables.net-rowgroup-bs4/js/*.js`,
+            `${vendorsRoot}/datatables.net-rowreorder-bs4/js/*.js`,
+            `${vendorsRoot}/datatables.net-scroller-bs4/js/*.js`,
+            `${vendorsRoot}/datatables.net-searchbuilder-bs4/js/*.js`,
+            `${vendorsRoot}/datatables.net-searchpanes-bs4/js/*.js`,
+            `${vendorsRoot}/datatables.net-select-bs4/js/*.js`,
             `${vendorsRoot}/jquery.easing/*.js`,
         ],
         app: this.app,