fix colour input, mutator detail fields

apps/api/serializers.py

@@ -146,8 +146,8 @@ class MessageMutatorSerializer(DynamicModelSerializer):
 
 
 class MessageStyleSerializer(DynamicModelSerializer):
-    title_mutator = serializers.SerializerMethodField()
-    description_mutator = serializers.SerializerMethodField()
+    title_mutator_detail = serializers.SerializerMethodField()
+    description_mutator_detail = serializers.SerializerMethodField()
 
     class Meta:
         model = MessageStyle
@@ -163,22 +163,24 @@ class MessageStyleSerializer(DynamicModelSerializer):
             "show_images",
             "fetch_images",
             "title_mutator",
+            "title_mutator_detail",
             "description_mutator",
+            "description_mutator_detail",
             "auto_created"
         )
         read_only_fields = ("auto_created",)
 
-    def get_title_mutator(self, obj: MessageStyle):
+    def get_title_mutator_detail(self, obj: MessageStyle):
         request = self.context.get("request")
         if request.method == "GET":
             return MessageMutatorSerializer(obj.title_mutator).data
-        return []
+        return {}
 
-    def get_description_mutator(self, obj: MessageStyle):
+    def get_description_mutator_detail(self, obj: MessageStyle):
         request = self.context.get("request")
         if request.method == "GET":
             return MessageMutatorSerializer(obj.description_mutator).data
-        return []
+        return {}
 
 
 class UniqueContentRuleSerializer(DynamicModelSerializer):

apps/home/static/home/js/index.js

@@ -131,13 +131,14 @@ $(document).ready(function() {
             label = $(this).attr("data-label");
             helpText = $(this).attr("data-helptext");
             tabIndex = parseInt($(this).attr("data-tabindex"));
+            dataField = $(this).attr("data-field");
             defaultColour = $(this).attr("data-defaultcolour");
-            defaultColour = defaultColour ? defaultColour : "#3498db"
+            defaultColour = defaultColour ? defaultColour : "#3498db";
 
         $(this).replaceWith(`
             <label for="${id}Picker" class="form-label">${label}</label>
             <div id="${id}" class="input-group">
-                <input type="color" name="${id}Picker" id="${id}Picker" class="form-control-color input-group-text colour-picker rounded-start-1" tabindex="${tabIndex}">
+                <input type="color" name="${id}Picker" id="${id}Picker" class="form-control-color input-group-text colour-picker rounded-start-1" tabindex="${tabIndex}" data-default="${defaultColour}" data-field="${dataField}">
                 <input type="text" name="${id}Text" id="${id}Text" class="form-control colour-text" tabindex="${tabIndex + 1}">
                 <button type="button" class="btn btn-secondary colour-reset" data-bs-toggle="tooltip" data-bs-title="Reset Colour" data-defaultcolour="${defaultColour}" tabindex="${tabIndex + 2}">
                     <i class="bi bi-arrow-clockwise"></i>

apps/home/static/home/js/tables.js

@@ -373,6 +373,9 @@ function setDefaultModalData($modal) {
         else if (type === "datetime-local") {
             $(this).val(getCurrentDateTime());
         }
+        else if ($(this).is("select") && defaultVal === "firstOption") {
+            $(this).val($(this).find("option:first").val()).change();
+        }
         else {
             $(this).val(defaultVal).change();
         }
@@ -392,6 +395,9 @@ async function loadModalData($modal, url) {
         else if (isISODateTimeString(value)) {
             $(this).val(value.split('+')[0].substring(0, 16));
         }
+        else if ($(this).attr("type") === "color") {
+            $(this).val(`#${value}`);
+        }
         else {
             $(this).val(value).change();
         }
@@ -413,11 +419,17 @@ async function onModalSubmit($modal, $table, url) {
         }
 
         let value;
-        if (type === "checkbox") {
-            value = $(this).prop("checked");
-        }
-        else {
-            value = $(this).val();
+        switch (type) {
+            case "checkbox":
+                value = $(this).prop("checked");
+                break;
+            case "color":
+                value = $(this).val();
+                value = value ? value.replace("#", "") : value;
+                break;
+            default:
+                value = $(this).val();
+                break;
         }
 
         data[key] = value;

apps/home/static/home/js/tabs/styles.js

@@ -62,13 +62,13 @@ function initMessageStylesModule() {
             },
             {
                 title: "Title Mutator",
-                data: "title_mutator",
-                render: renderMutatorColumn
+                data: "title_mutator_detail",
+                render: (data, type, row) => renderMutatorColumn(row.title_mutator_detail)
             },
             {
                 title: "Description Mutator",
-                data: "description_mutator",
-                render: renderMutatorColumn
+                data: "description_mutator_detail",
+                render: (data, type, row) => renderMutatorColumn(row.description_mutator_detail)
             },
             {
                 title: "Editable",

apps/home/templates/home/modals/editStyle.html

@@ -24,7 +24,8 @@
                                     data-id="styleEmbedColour"
                                     data-label="Embed Colour"
                                     data-helptext="Colour of the embed (if enabled)."
-                                    data-defaultcolour="#3498db">
+                                    data-defaultcolour="#3498db"
+                                    data-field="colour">
                                 </div>
                             </div>
                         </div>

apps/home/templates/home/modals/editSub.html

@@ -29,7 +29,7 @@
                         <div class="col-lg-6 pe-lg-4">
                             <div class="mb-4">
                                 <label for="subMessageStyle" class="form-label">Message Style</label>
-                                <select name="subMessageStyle" id="subMessageStyle" class="select-2" data-dropdownparent="#subFormModal" data-field="message_style" tabindex="3">
+                                <select name="subMessageStyle" id="subMessageStyle" class="select-2" data-dropdownparent="#subFormModal" data-field="message_style" data-default="firstOption" tabindex="3">
                                 </select>
                                 <div class="form-text">Appearance of delivered content.</div>
                             </div>