chore: setup djhtml in pre-commit, reformat all html

ManoManoTech · Mar 25, 2024 · d0d5de2 · d0d5de2
1 parent cc7f89f
commit d0d5de2
Show file tree

Hide file tree

Showing 21 changed files with 290 additions and 282 deletions.
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -28,3 +28,10 @@ repos:
     rev: v1.35.1
     hooks:
       - id: yamllint
+
+  - repo: https://github.com/rtts/djhtml
+    rev: '3.0.6'
+    hooks:
+      - id: djhtml
+      # djcss disabled for now
+      - id: djjs
diff --git a/pyproject.toml b/pyproject.toml
@@ -132,7 +132,8 @@ lint = {composite= ["lint-ruff", "lint-pylint", "lint-mypy"], help="Run all lint
 # Format
 fmt-black = {cmd="ruff format .", help="Run black-like ruff formatter"}
 fmt-ruff =  {cmd="ruff check . --fix --select I001", help="Run isort-like import sorting with ruff"}
-fmt = {composite= ["fmt-black", "fmt-ruff"], help="Run all formatters (black, isort-like ruff)"}
+fmt-dj = {cmd="djhtml src", help="Run HTML formatting with djhtml"}
+fmt = {composite= ["fmt-black", "fmt-ruff", "fmt-dj"], help="Run all formatters (black, isort-like ruff, djhtml)"}
 # Tests
 tests = {cmd="pytest", help="Run the tests"}
 tests-cov ={cmd= "pytest --junitxml=pytest-report.xml --cov --cov-report xml:pytest-coverage.xml --cov-fail-under=0 --cov-report html", help="Run the tests with coverage, and generate reports"}

diff --git a/rollup.config.mjs b/rollup.config.mjs
@@ -17,7 +17,7 @@ export default {
     plugins: [
         inject({
             htmx: 'htmx.org'
-         }),
+        }),
         nodeResolve({
             browser: true,
             jsnext: true,

diff --git a/src/firefighter/components/export_button/export_button.html b/src/firefighter/components/export_button/export_button.html
@@ -24,8 +24,8 @@
       {% for format in formats %}
         <li>
           <button method="get" formtarget="_blank" type="submit"
-            name="fields" value="{{format.fields}}"
-            form="main-filter" formaction="{{format.url}}" class="" role="menuitem" tabindex="-1">{{format.label}}</button>
+                  name="fields" value="{{format.fields}}"
+                  form="main-filter" formaction="{{format.url}}" class="" role="menuitem" tabindex="-1">{{format.label}}</button>
         </li>
       {% endfor %}
     </ul>

diff --git a/src/firefighter/components/form_field/form_field.html b/src/firefighter/components/form_field/form_field.html
@@ -10,9 +10,9 @@
 
     {% render_field field class=field_input_class class+="input input-bordered w-full" %}
     {% if field.help_text %}
-        <label class="label">
-          <span class="label-text-alt">{{field.help_text}}</span>
-        </label>
-      {% endif %}
+      <label class="label">
+        <span class="label-text-alt">{{field.help_text}}</span>
+      </label>
+    {% endif %}
   </div>
 </div>
diff --git a/src/firefighter/components/messages/messages.html b/src/firefighter/components/messages/messages.html
@@ -1,52 +1,52 @@
 {% if messages %}
-<ul class="messages">
-    {% for message in messages %}
-        {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
-            <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
-                <div class="alert alert-error shadow-lg">
-                    <div>
-                    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-                    <span>   {{ message }}</span>
+    <ul class="messages">
+        {% for message in messages %}
+            {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
+                <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
+                    <div class="alert alert-error shadow-lg">
+                        <div>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                            <span>   {{ message }}</span>
+                        </div>
                     </div>
-                </div>
-            </li>
-        {% elif message.level == DEFAULT_MESSAGE_LEVELS.INFO %}
-        <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
-            <div class="alert alert-info  shadow-lg">
-                <div>
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-                <span>   {{ message }}</span>
-                </div>
-            </div>
-        </li>
-        {% elif message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %}
-        <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
-            <div class="alert alert-success shadow-lg">
-                <div>
-                    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-                    <span>   {{ message }}</span>
-                </div>
-            </div>
-        </li>
-        {% elif message.level == DEFAULT_MESSAGE_LEVELS.WARNING %}
-        <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
-            <div class="alert alert-warning shadow-lg">
-                <div>
-                    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
-                    <span>   {{ message }}</span>
-                </div>
-            </div>
-        </li>
-        {% else %}
-        <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
-            <div class="alert shadow-lg">
-                <div>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-                    <span>   {{ message }}</span>
-                </div>
-            </div>
-        </li>
-        {% endif %}
-    {% endfor %}
-</ul>
+                </li>
+            {% elif message.level == DEFAULT_MESSAGE_LEVELS.INFO %}
+                <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
+                    <div class="alert alert-info  shadow-lg">
+                        <div>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                            <span>   {{ message }}</span>
+                        </div>
+                    </div>
+                </li>
+            {% elif message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %}
+                <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
+                    <div class="alert alert-success shadow-lg">
+                        <div>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                            <span>   {{ message }}</span>
+                        </div>
+                    </div>
+                </li>
+            {% elif message.level == DEFAULT_MESSAGE_LEVELS.WARNING %}
+                <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
+                    <div class="alert alert-warning shadow-lg">
+                        <div>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
+                            <span>   {{ message }}</span>
+                        </div>
+                    </div>
+                </li>
+            {% else %}
+                <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
+                    <div class="alert shadow-lg">
+                        <div>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                            <span>   {{ message }}</span>
+                        </div>
+                    </div>
+                </li>
+            {% endif %}
+        {% endfor %}
+    </ul>
 {% endif %}
diff --git a/src/firefighter/components/modal/modal.html b/src/firefighter/components/modal/modal.html
@@ -4,7 +4,7 @@
   x-data="{ open: false }"
   {% if autoplay == True %}x-init="$nextTick(() => { open = true })"{% endif %} >
   <div x-ref="modal1_button"
-    @click="open = true">
+       @click="open = true">
     {% slot "modal_enabler" %}
       <button
         type="button"
@@ -26,25 +26,25 @@
     style="display: none;"
     class="z-50 fixed top-0 left-0 w-full h-screen flex justify-center items-center" >
     <div aria-hidden="true"
-      class="absolute top-0 left-0 w-full h-screen bg-black transition duration-300 z-[90]"
-      :class="{ 'opacity-60': open, 'opacity-0': !open }"
-      x-show="open"
-      style="display: none;"
-      x-transition:leave="delay-150"></div>
+         class="absolute top-0 left-0 w-full h-screen bg-black transition duration-300 z-[90]"
+         :class="{ 'opacity-60': open, 'opacity-0': !open }"
+         x-show="open"
+         style="display: none;"
+         x-transition:leave="delay-150"></div>
     <div data-modal-document
-      @click.stop=""
-      @keydown.escape="open = false"
-      x-show="open"
-      x-trap="open"
-      x-trap.noscroll="open"
-      x-trap.inert="open"
-      x-transition:enter="transition ease-out duration-300"
-      x-transition:enter-start="transform scale-50 opacity-0"
-      x-transition:enter-end="transform scale-100 opacity-100"
-      x-transition:leave="transition ease-out duration-200"
-      x-transition:leave-start="transform scale-100 opacity-100"
-      x-transition:leave-end="transform scale-50 opacity-0"
-      class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-neutral-900 dark:text-neutral-100 m-w-4/5 xl:m-w-3/5  min-h-4/5 z-[100]" style="max-height: 95vh;">
+         @click.stop=""
+         @keydown.escape="open = false"
+         x-show="open"
+         x-trap="open"
+         x-trap.noscroll="open"
+         x-trap.inert="open"
+         x-transition:enter="transition ease-out duration-300"
+         x-transition:enter-start="transform scale-50 opacity-0"
+         x-transition:enter-end="transform scale-100 opacity-100"
+         x-transition:leave="transition ease-out duration-200"
+         x-transition:leave-start="transform scale-100 opacity-100"
+         x-transition:leave-end="transform scale-50 opacity-0"
+         class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-neutral-900 dark:text-neutral-100 m-w-4/5 xl:m-w-3/5  min-h-4/5 z-[100]" style="max-height: 95vh;">
       <div class="p-6 border-b border-neutral-300 dark:border-neutral-700 flex justify-between">
         <h1 id="modal1_label" class="font-semibold" x-ref="modal1_label"> {% slot "modal_header" %} {% if title %}{{ title }}{% endif %}{% endslot %}</h1>
 

diff --git a/src/firefighter/incidents/templates/incidents/filter.html b/src/firefighter/incidents/templates/incidents/filter.html
@@ -1,14 +1,14 @@
 {% load widget_tweaks %}
 
 <form method="get" class="w-64 flex-shrink-0 h-auto" id="main-filter"
-  hx-trigger="input from:[type=checkbox],input delay:300ms"
-  hx-boost="true"
-  hx-ext="debug"
-  hx-get="{{ request.path }}"
-  hx-target="#filtered-container"
-  hx-swap="outerHTML"
-  hx-push-url="true"
-  hx-indicator=".progress">
+      hx-trigger="input from:[type=checkbox],input delay:300ms"
+      hx-boost="true"
+      hx-ext="debug"
+      hx-get="{{ request.path }}"
+      hx-target="#filtered-container"
+      hx-swap="outerHTML"
+      hx-push-url="true"
+      hx-indicator=".progress">
   <div class="shadow overflow-hidden h-full">
     <div class="px-4 py-5 bg-white dark:bg-neutral-800 text-neutral-700 dark:text-neutral-100 sm:p-6 flex flex-col gap-5 h-full">
       {% for filter_field in filter_order %}

diff --git a/src/firefighter/incidents/templates/incidents/widgets/form_container.html b/src/firefighter/incidents/templates/incidents/widgets/form_container.html
@@ -1,63 +1,63 @@
 {% load widget_tweaks %}
 
 <div class="col-span-1 select-none" x-data="{
-  expanded_form: true,
-  selectAll : false,
-  selected_{{ filter_form.html_name }}: [],
-  toggleAllCheckboxes() {
-  this.selectAll = !this.selectAll
-  this.selected_{{ filter_form.html_name }} = [];
-
-  checkboxes = document.querySelectorAll('input[name={{ filter_form.html_name }}]');
-  [...checkboxes].map((el) => {
-  el.checked = this.selectAll;
-  (this.selectAll) ? this.selected_{{ filter_form.html_name }}.push(el.value) : this.selected_{{ filter_form.html_name }} = [];
-  })
-
-  this.updateSelectAllState()
-  },
-  updateSelectAllStateGroup() {
-  this.updateSelectAllState()
-  },
-  updateSelectAllState() {
-
-  checkboxes_group = document.querySelectorAll('input[group-select]');
-  checkboxes = document.querySelectorAll('input[name={{ filter_form.html_name }}]');
-  this.selected_{{ filter_form.html_name }}= [];
-  [...checkboxes].map((el) => {
-  if (el.checked) {
-
-  this.selected_{{ filter_form.html_name }}.push(el.value);
-  }
-  })
-
-
-  if (this.selected_{{ filter_form.html_name }}.length == 0) {
-  this.selectAll = false;
-  $refs.checkAll.indeterminate = false;
-  [...checkboxes_group].map((el) => {
-  el.checked = false
-  })
-  } else if (this.selected_{{ filter_form.html_name }}.length < checkboxes.length) {
-
-  this.selectAll = false;
-  $refs.checkAll.indeterminate = true;
-
-  } else {
-  this.selectAll = true;
-  $refs.checkAll.indeterminate = false;
-
-  [...checkboxes_group].map((el) => {
-  el.checked = true
-  })
-  }
-
-  this.selectAll = (this.selected_{{ filter_form.html_name }}.length == checkboxes.length) ? true : false;
-
-  checkboxes_group = document.querySelectorAll('input[group-select]');
-  }
-  }"
-  x-init="updateSelectAllStateGroup();"
+                                            expanded_form: true,
+                                            selectAll : false,
+                                            selected_{{ filter_form.html_name }}: [],
+                                            toggleAllCheckboxes() {
+                                            this.selectAll = !this.selectAll
+                                            this.selected_{{ filter_form.html_name }} = [];
+
+                                            checkboxes = document.querySelectorAll('input[name={{ filter_form.html_name }}]');
+                                            [...checkboxes].map((el) => {
+                                            el.checked = this.selectAll;
+                                            (this.selectAll) ? this.selected_{{ filter_form.html_name }}.push(el.value) : this.selected_{{ filter_form.html_name }} = [];
+                                            })
+
+                                            this.updateSelectAllState()
+                                            },
+                                            updateSelectAllStateGroup() {
+                                            this.updateSelectAllState()
+                                            },
+                                            updateSelectAllState() {
+
+                                            checkboxes_group = document.querySelectorAll('input[group-select]');
+                                            checkboxes = document.querySelectorAll('input[name={{ filter_form.html_name }}]');
+                                            this.selected_{{ filter_form.html_name }}= [];
+                                            [...checkboxes].map((el) => {
+                                            if (el.checked) {
+
+                                            this.selected_{{ filter_form.html_name }}.push(el.value);
+                                            }
+                                            })
+
+
+                                            if (this.selected_{{ filter_form.html_name }}.length == 0) {
+                                            this.selectAll = false;
+                                            $refs.checkAll.indeterminate = false;
+                                            [...checkboxes_group].map((el) => {
+                                            el.checked = false
+                                            })
+                                            } else if (this.selected_{{ filter_form.html_name }}.length < checkboxes.length) {
+
+                                            this.selectAll = false;
+                                            $refs.checkAll.indeterminate = true;
+
+                                            } else {
+                                            this.selectAll = true;
+                                            $refs.checkAll.indeterminate = false;
+
+                                            [...checkboxes_group].map((el) => {
+                                            el.checked = true
+                                            })
+                                            }
+
+                                            this.selectAll = (this.selected_{{ filter_form.html_name }}.length == checkboxes.length) ? true : false;
+
+                                            checkboxes_group = document.querySelectorAll('input[group-select]');
+                                            }
+                                            }"
+     x-init="updateSelectAllStateGroup();"
 >
   <h3 class="flow-root">
     <!-- Expand/collapse section button -->