dimagi · biyeun · Jun 12, 2024 · Jun 13, 2024 · Jun 17, 2024 · Jun 18, 2024
@@ -4,6 +4,52 @@
 from corehq.apps.hqwebapp.utils.bootstrap import set_bootstrap_version5
 
 
+def use_alpinejs(view_func):
+    """Use this decorator on the dispatch method of a TemplateView subclass
+    to use Alpine.js on a page.
+    Note: Eventually this will be bundled with Webpack. The es6/esm module
+    is incompatible with Requirejs and didn't seem fitting to add additional tooling
+    to support this in Requirejs since alpine.js lives primarily in HTML attributes.
+    Can be referenced in javascript with `window.Alpine` if necessary.
+
+    Example:
+        @use_alpinejs
+        def dispatch(self, request, *args, **kwargs):
+            return super().dispatch(request, *args, **kwargs)
+
+    Or alternatively:
+        @method_decorator(use_alpinejs, name='dispatch')
+        class MyViewClass(MyViewSubclass):
+            ...
+    """
+    return set_request_flag(view_func, 'use_alpinejs')
+
+
+def use_htmx(view_func):
+    """Use this decorator on the dispatch method of a TemplateView subclass
+    to use HTMX on a page.
+
+    Note: Bundling HTMX with RequireJS can be done by setting window.htmx = htmx
+    after importing the htmx module. However, some page loads caused HTMX to not initialize
+    properly on a page, resulting in components that never loaded. Importing the HTMX script
+    directly in <head> first thing proves to be the more performant and reliable way to get
+    HTMX initialize reliably and quickly.
+
+    TODO: Investigate bundling HTMX with Webpack.
+
+    Example:
+        @use_htmx
+        def dispatch(self, request, *args, **kwargs):
+            return super().dispatch(request, *args, **kwargs)
+
+    Or alternatively:
+        @method_decorator(use_htmx, name='dispatch')
+        class MyViewClass(MyViewSubclass):
+            ...
+    """
+    return set_request_flag(view_func, 'use_htmx')
+
+
 def use_daterangepicker(view_func):
     """Use this decorator on the dispatch method of a TemplateView subclass
     to enable the inclusion of the daterangepicker library at the base template

@@ -14,6 +14,7 @@ requirejs.config({
         "ko.mapping": "hqwebapp/js/lib/knockout_plugins/knockout_mapping.ko.min",
         "sentry_browser": "sentry/js/sentry.browser.7.28.0.min",
         "sentry_captureconsole": "sentry/js/sentry.captureconsole.7.28.0.min",
+        "sortablejs": "sortablejs/Sortable.min",
         "underscore": "underscore/underscore",
         "stripe": "https://js.stripe.com/v2/?noext",
     },

@@ -20,6 +20,7 @@ requirejs.config({
         "popper": "@popperjs/core/dist/umd/popper.min",
         "sentry_browser": "sentry/js/sentry.browser.7.28.0.min",
         "sentry_captureconsole": "sentry/js/sentry.captureconsole.7.28.0.min",
+        "sortablejs": "sortablejs/Sortable.min",
         "tempusDominus": "@eonasdan/tempus-dominus/dist/js/tempus-dominus.min",
         "underscore": "underscore/underscore",
         "nvd3/nv.d3.latest.min": "nvd3-1.8.6/build/nv.d3.min",

@@ -67,6 +67,7 @@
 @import "commcarehq/ace_cle";
 @import "commcarehq/appcues";
 @import "commcarehq/backgrounds";
+@import "commcarehq/data_cleaning";
 @import "commcarehq/datagrid";
 @import "commcarehq/datatables";
 @import "commcarehq/date_range_picker";
@@ -76,6 +77,7 @@
 @import "commcarehq/form_steps";
 @import "commcarehq/helpbubble";
 @import "commcarehq/hubspot";
+@import "commcarehq/htmx";
 @import "commcarehq/icons";
 @import "commcarehq/inline_edit";
 @import "commcarehq/label";

@@ -0,0 +1,137 @@
+.dc-spaces {
+  opacity: .5;
+  background-color: transparent;
+  font-weight: bold;
+  font-size: $font-size-base * 1.5;
+  line-height: $font-size-base * 1.5;
+  position: relative;
+  vertical-align: middle;
+  transition: .5s ease-in-out background-color;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-size: $font-size-lg;
+    display: none;
+  }
+
+  &:hover {
+    cursor: help;
+    color: $white;
+    background-color: rgba(0, 0, 0, .5);
+    opacity: 1.0;
+  }
+}
+
+.dc-value {
+  border: 1px solid rgba(0, 0, 0, .1);
+  display: inline-block;
+  font-family: $font-family-monospace;
+  letter-spacing: 1px;
+  line-height: 12px;
+  padding: $spacer *.25 $spacer *.5;
+  vertical-align: middle;
+}
+
+.dc-diff-view {
+  font-family: $font-family-monospace;
+  letter-spacing: 1px;
+}
+
+.dc-diff-before,
+.dc-diff-after {
+  border: 1px solid white;
+  display: inline-block;
+  margin: $spacer *.13;
+  padding-right: $spacer *.5;
+  vertical-align: middle;
+
+  &::before {
+    display: inline-block;
+    color: $white;
+    line-height: 12px;
+    padding: $spacer *.25 $spacer *.5;
+  }
+}
+
+.dc-diff-before {
+  background-color: $red-100;
+  border-color: $red-500;
+
+  &::before {
+    background-color: $red-500;
+    content: "-";
+  }
+
+  .dc-spaces {
+    color: $red-800;
+
+    &:hover {
+      color: $white;
+    }
+  }
+}
+
+.dc-diff-after {
+  background-color: $green-100;
+  border-color: $green-500;
+
+  &::before {
+    background-color: $green-500;
+    content: "+";
+  }
+
+  .dc-spaces {
+    color: $green-800;
+  }
+}
+
+.dc-null-value {
+  display: block;
+  position: relative;
+
+  .dc-info {
+    background-color: $gray-800;
+    color: $white;
+    font-weight: bold;
+    position: absolute;
+    left: 0;
+    top: 0;
+    opacity: 0;
+    padding: 0 $spacer * .25;
+    transition: opacity .5s ease-in-out;
+  }
+  &:hover .dc-info {
+    display: block;
+    opacity: 1;
+  }
+}
+
+.dc-diff-before .dc-null-value,
+.dc-diff-after .dc-null-value {
+  display: inline-block;
+
+  .dc-info {
+    top: -2px;
+    left: -9px;
+    font-size: $font-size-sm;
+    padding: 3px 6.5px;
+  }
+}
+
+.dc-diff-before .dc-null-value {
+  color: $red-500;
+
+  .dc-info {
+    background-color: $red-500;
+  }
+}
+
+.dc-diff-after .dc-null-value {
+  color: $green-500;
+
+  .dc-info {
+    background-color: $green-500;
+  }
+}
@@ -0,0 +1,72 @@
+@mixin htmx-spinner($width) {
+  position: absolute;
+  height: $width;
+  width: $width;
+  $offset: $width / 2;
+  left: calc(50% - $offset);
+  top: calc(50% - $offset);
+}
+
+form.htmx-request {
+  .htmx-loading {
+    position: relative;
+    &::before {
+      content: " ";
+      @extend .spinner-border;
+      @extend .spinner-border-sm;
+      @include htmx-spinner(22px);
+    }
+    &.btn-sm::before {
+      @include htmx-spinner(18px);
+    }
+  }
+  .input-group .btn.htmx-loading::before {
+    vertical-align: -0.28em;
+  }
+}
+
+.htmx-request.page-link {
+  background-color: $blue-300;
+  color: $white;
+  position: relative;
+
+  &::after {
+    content: " ";
+    @extend .spinner-border;
+    @extend .spinner-border-sm;
+    @include htmx-spinner(22px);
+  }
+}
+
+.htmx-request[type="checkbox"] {
+  position: relative;
+
+  &::after {
+    content: " ";
+    color: $blue-400;
+    @extend .spinner-border;
+    @extend .spinner-border-sm;
+    @include htmx-spinner(22px);
+  }
+}
+
+.htmx-request.form-check-input {
+  &::after {
+    @include htmx-spinner(30px);
+  }
+}
+
+button.htmx-request {
+  position: relative;
+  &::before {
+    content: " ";
+    @extend .spinner-border;
+    @extend .spinner-border-sm;
+    @include htmx-spinner(22px);
+    opacity: .5;
+  }
+
+  &.btn-sm::before {
+    @include htmx-spinner(18px);
+  }
+}