Merge pull request #1186 from Metro-Records/hcg/wagtail

* Transition alerts to Wagtail

* Remove custom alert handling

* Clean up custom Wagtail JavaScript

* Update styles

* Remove unused dep

* flake8

* Fix flake8 pre-commit config

* Use rich text instead of markdown for alerts

* Add missing migration

* Update label style for light/dark mode, eliminate unneeded loop

* Add default border for empty alert select

.pre-commit-config.yaml

@@ -15,5 +15,5 @@ repos:
     rev: '9f60881'
     hooks:
       - id: flake8
-        files: lametro councilmatic tests
+        files: ^(lametro|councilmatic|tests)
         exclude: lametro/migrations councilmatic/settings.py

councilmatic/settings.py

@@ -137,7 +137,6 @@
     "debug_toolbar",
     "template_profiler_panel",
     "captcha",
-    "markdownify.apps.MarkdownifyConfig",
     "wagtail.contrib.forms",
     "wagtail.contrib.redirects",
     "wagtail.contrib.typed_table_block",
@@ -149,6 +148,7 @@
     "wagtail.images",
     "wagtail.search",
     "wagtail.admin",
+    "wagtail.contrib.modeladmin",
     "wagtail",
     "modelcluster",
     "taggit",
@@ -341,19 +341,6 @@ def custom_sampler(ctx):
     },
 }
 
-
-# Allow some html tags to render in markdown. Mainly for alerts
-MARKDOWNIFY = {
-    "default": {
-        "WHITELIST_TAGS": [
-            "br",
-            "strong",
-            "em",
-            "a",
-        ]
-    }
-}
-
 # Hard time limit on HTTP requests
 REQUEST_TIMEOUT = 5
 

councilmatic/urls.py

@@ -44,9 +44,6 @@
     MinutesView,
     pong,
     test_logging,
-    AlertCreateView,
-    AlertDeleteView,
-    AlertUpdateView,
 )
 from lametro.feeds import LAMetroPersonDetailFeed
 
@@ -119,9 +116,6 @@
         manual_event_live_link,
         name="manual_event_live_link",
     ),
-    path("alerts/", AlertCreateView.as_view(), name="alerts"),
-    path("alerts/<int:pk>/delete/", AlertDeleteView.as_view(), name="delete_alert"),
-    path("alerts/<int:pk>/update/", AlertUpdateView.as_view(), name="update_alert"),
     url(
         r"^pong/$",
         pong,

lametro/forms.py

@@ -2,7 +2,6 @@
 
 from django import forms
 from django.core.files.uploadedfile import InMemoryUploadedFile
-from django.core.exceptions import ValidationError
 
 from captcha.fields import ReCaptchaField
 from captcha.fields import ReCaptchaV3
@@ -11,8 +10,7 @@
 from haystack.query import EmptySearchQuerySet
 
 from councilmatic_core.views import CouncilmaticSearchForm
-
-from lametro.models import LAMetroPerson, Alert
+from lametro.models import LAMetroPerson
 
 
 class LAMetroCouncilmaticSearchForm(CouncilmaticSearchForm):
@@ -183,23 +181,3 @@ def __init__(self, *args, **kwargs):
     class Meta:
         model = LAMetroPerson
         fields = ["councilmatic_biography"]
-
-
-class AlertForm(forms.ModelForm):
-    def clean_description(self):
-        data = self.cleaned_data.get("description", None)
-        if not data:
-            raise ValidationError("Please provide an alert description")
-        return data
-
-    class Meta:
-        model = Alert
-        fields = "__all__"
-        widgets = {
-            "description": forms.Textarea(
-                attrs={
-                    "rows": 4,
-                    "placeholder": "Enter alert text",
-                }
-            ),
-        }

lametro/migrations/0017_alter_alert_description.py

@@ -0,0 +1,19 @@
+# Generated by Django 3.2.25 on 2024-12-04 19:18
+
+from django.db import migrations
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("lametro", "0016_alter_aboutpage_body"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="alert",
+            name="description",
+            field=wagtail.fields.RichTextField(default="No content"),
+            preserve_default=False,
+        ),
+    ]

lametro/models/cms.py

@@ -1,6 +1,10 @@
+from django.db import models
+from django.utils.html import format_html, strip_tags
+
 from wagtail.models import Page
-from wagtail.fields import StreamField
+from wagtail.fields import StreamField, RichTextField
 from wagtail.admin.panels import FieldPanel
+from wagtail.rich_text import expand_db_html
 
 from lametro.blocks import ArticleBlock
 
@@ -18,3 +22,38 @@ class AboutPage(Page):
     content_panels = Page.content_panels + [
         FieldPanel("body"),
     ]
+
+
+class Alert(models.Model):
+    include_in_dump = True
+
+    def __str__(self):
+        return f"{self.get_type_display()} Alert - {strip_tags(self.description)[:50]}"
+
+    TYPE_CHOICES = [
+        ("primary", "Primary"),
+        ("secondary", "Secondary"),
+        ("success", "Success"),
+        ("danger", "Danger"),
+        ("warning", "Warning"),
+        ("info", "Info"),
+    ]
+
+    description = RichTextField()
+    type = models.CharField(max_length=255, choices=TYPE_CHOICES)
+
+    panels = [
+        FieldPanel(
+            "type",
+            help_text="Select a style for your alert.",
+        ),
+        FieldPanel("description"),
+    ]
+
+    def content(self):
+        return format_html(
+            "<div class='list-display-wrapper'>"
+            + expand_db_html(self.description)
+            + f"<span class='button button-small alert-{self.type}'>{self.get_type_display()}</span>"
+            + "</div>"
+        )

lametro/models/legislative.py

@@ -1237,17 +1237,3 @@ def __str__(self):
 
         else:
             return self.name
-
-
-class Alert(models.Model):
-    TYPE_CHOICES = [
-        ("primary", "Primary"),
-        ("secondary", "Secondary"),
-        ("success", "Success"),
-        ("danger", "Danger"),
-        ("warning", "Warning"),
-        ("info", "Info"),
-    ]
-
-    description = models.TextField(null=True, blank=True)
-    type = models.CharField(max_length=255, choices=TYPE_CHOICES)

lametro/static/css/city_custom.css

@@ -814,3 +814,7 @@ caption {
 .scroll-anchor {
     scroll-margin-top: 80px;
 }
+
+.alert p:last-of-type {
+    margin: unset;
+}

lametro/static/css/wagtail_custom.css

@@ -0,0 +1,58 @@
+[class*="alert"] {
+  --font-color: #fff;
+  --a: 0.6;
+  background-color: rgba(var(--r), var(--g), var(--b), var(--a));
+  color: var(--font-color);
+  border: 1px solid rgba(var(--r), var(--g), var(--b), 1)!important;
+}
+
+.button[class*="alert"]:hover {
+  background-color: rgba(var(--r), var(--g), var(--b), var(--a));
+  color: var(--font-color);
+}
+
+/* Add default border to empty alert select */
+.alert- {
+  border: 1px solid var(--w-color-border-field-default)!important;
+}
+
+.alert-primary {
+  --r: 235;
+  --g: 104;
+  --b: 100;
+}
+
+.alert-secondary {
+  --r: 170;
+  --g: 170;
+  --b: 170;
+}
+
+.alert-success {
+  --r: 34;
+  --g: 178;
+  --b: 76;
+}
+
+.alert-danger {
+  --r: 51;
+  --g: 153;
+  --b: 153;
+}
+
+.alert-warning {
+  --font-color: #000;
+  --r: 245;
+  --g: 230;
+  --b: 37;
+}
+
+.alert-info {
+  --r: 245;
+  --g: 122;
+  --b: 0;
+}
+
+.list-display-wrapper {
+  font-weight: normal!important;
+}

lametro/static/js/wagtail_custom.js

@@ -0,0 +1,37 @@
+ALERT_COLORS = {
+	"primary": "#eb6864",
+	"secondary": "#aaa",
+	"success": "#22b24c",
+	"danger": "#369",
+	"warning": "#f5e625",
+	"info": "#f57a00",
+}
+
+function styleParent(e) {
+	if (e.target.classList.length > 0) {
+		e.target.classList = ""
+	}
+	e.target.classList.add(`alert-${e.target.value}`);
+}
+
+// Callback function to execute when mutations are observed
+const styleAlertTypeSelect = (mutationList, observer) => {
+	mutationList.map(mu => {
+		mu.addedNodes && mu.addedNodes.forEach(node => {
+			if (node.id === "id_type") {
+				styleParent({target: node})
+				node.addEventListener("change", styleParent)
+				observer.disconnect()
+				return
+			}
+		})
+	})
+};
+
+// Create an observer instance linked to the callback function
+const observer = new MutationObserver(styleAlertTypeSelect);
+
+const config = {childList: true, subtree: true};
+
+// Start observing the target node for configured mutations
+observer.observe(document.body, config);