fix colour input, mutator detail fields
All checks were successful
Build and Push Docker Image / build (push) Successful in 14s

This commit is contained in:
Corban-Lee Jones 2024-10-07 20:24:13 +01:00
parent 64b4e95bd1
commit ded11af42b
6 changed files with 35 additions and 19 deletions

View File

@ -146,8 +146,8 @@ class MessageMutatorSerializer(DynamicModelSerializer):
class MessageStyleSerializer(DynamicModelSerializer): class MessageStyleSerializer(DynamicModelSerializer):
title_mutator = serializers.SerializerMethodField() title_mutator_detail = serializers.SerializerMethodField()
description_mutator = serializers.SerializerMethodField() description_mutator_detail = serializers.SerializerMethodField()
class Meta: class Meta:
model = MessageStyle model = MessageStyle
@ -163,22 +163,24 @@ class MessageStyleSerializer(DynamicModelSerializer):
"show_images", "show_images",
"fetch_images", "fetch_images",
"title_mutator", "title_mutator",
"title_mutator_detail",
"description_mutator", "description_mutator",
"description_mutator_detail",
"auto_created" "auto_created"
) )
read_only_fields = ("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") request = self.context.get("request")
if request.method == "GET": if request.method == "GET":
return MessageMutatorSerializer(obj.title_mutator).data 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") request = self.context.get("request")
if request.method == "GET": if request.method == "GET":
return MessageMutatorSerializer(obj.description_mutator).data return MessageMutatorSerializer(obj.description_mutator).data
return [] return {}
class UniqueContentRuleSerializer(DynamicModelSerializer): class UniqueContentRuleSerializer(DynamicModelSerializer):

View File

@ -131,13 +131,14 @@ $(document).ready(function() {
label = $(this).attr("data-label"); label = $(this).attr("data-label");
helpText = $(this).attr("data-helptext"); helpText = $(this).attr("data-helptext");
tabIndex = parseInt($(this).attr("data-tabindex")); tabIndex = parseInt($(this).attr("data-tabindex"));
dataField = $(this).attr("data-field");
defaultColour = $(this).attr("data-defaultcolour"); defaultColour = $(this).attr("data-defaultcolour");
defaultColour = defaultColour ? defaultColour : "#3498db" defaultColour = defaultColour ? defaultColour : "#3498db";
$(this).replaceWith(` $(this).replaceWith(`
<label for="${id}Picker" class="form-label">${label}</label> <label for="${id}Picker" class="form-label">${label}</label>
<div id="${id}" class="input-group"> <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}"> <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}"> <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> <i class="bi bi-arrow-clockwise"></i>

View File

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

View File

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

View File

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

View File

@ -29,7 +29,7 @@
<div class="col-lg-6 pe-lg-4"> <div class="col-lg-6 pe-lg-4">
<div class="mb-4"> <div class="mb-4">
<label for="subMessageStyle" class="form-label">Message Style</label> <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> </select>
<div class="form-text">Appearance of delivered content.</div> <div class="form-text">Appearance of delivered content.</div>
</div> </div>