Merge pull request 'Inline user info in service offering page' (#250) from 243-service-provider-improvements into main
Reviewed-on: #250
This commit is contained in:
commit
fa621fe979
6 changed files with 227 additions and 80 deletions
|
|
@ -5,14 +5,25 @@ from django_jsonform.widgets import JSONFormWidget
|
|||
from servala.core.models import ControlPlane, ServiceDefinition
|
||||
|
||||
CONTROL_PLANE_USER_INFO_SCHEMA = {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"CNAME Record": {
|
||||
"title": "CNAME Record",
|
||||
"type": "string",
|
||||
"type": "array",
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"title": {
|
||||
"type": "string",
|
||||
"title": "Title",
|
||||
},
|
||||
"content": {
|
||||
"type": "string",
|
||||
"title": "Content",
|
||||
},
|
||||
"help_text": {
|
||||
"type": "string",
|
||||
"title": "Help Text (optional)",
|
||||
},
|
||||
},
|
||||
"required": ["title", "content"],
|
||||
},
|
||||
"additionalProperties": {"type": "string"},
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
# Generated by Django 5.2.7 on 2025-10-24 10:04
|
||||
|
||||
from django.db import migrations
|
||||
|
||||
|
||||
def convert_user_info_to_array(apps, schema_editor):
|
||||
"""
|
||||
Convert user_info from object format {"key": "value"} to array format
|
||||
[{"title": "key", "content": "value"}].
|
||||
"""
|
||||
ControlPlane = apps.get_model("core", "ControlPlane")
|
||||
|
||||
for control_plane in ControlPlane.objects.all():
|
||||
if not control_plane.user_info:
|
||||
continue
|
||||
|
||||
# If it's already an array (migration already run or new format), skip
|
||||
if isinstance(control_plane.user_info, list):
|
||||
continue
|
||||
|
||||
# Convert from dict to array
|
||||
if isinstance(control_plane.user_info, dict):
|
||||
new_user_info = []
|
||||
for key, value in control_plane.user_info.items():
|
||||
new_user_info.append({"title": key, "content": value})
|
||||
|
||||
control_plane.user_info = new_user_info
|
||||
control_plane.save(update_fields=["user_info"])
|
||||
|
||||
|
||||
def reverse_user_info_to_object(apps, schema_editor):
|
||||
"""
|
||||
Reverse the migration by converting array format back to object format.
|
||||
Note: help_text will be lost during reversal.
|
||||
"""
|
||||
ControlPlane = apps.get_model("core", "ControlPlane")
|
||||
|
||||
for control_plane in ControlPlane.objects.all():
|
||||
if not control_plane.user_info:
|
||||
continue
|
||||
|
||||
# If it's already an object, skip
|
||||
if isinstance(control_plane.user_info, dict):
|
||||
continue
|
||||
|
||||
# Convert from array to dict
|
||||
if isinstance(control_plane.user_info, list):
|
||||
new_user_info = {}
|
||||
for item in control_plane.user_info:
|
||||
if isinstance(item, dict) and "title" in item and "content" in item:
|
||||
new_user_info[item["title"]] = item["content"]
|
||||
|
||||
control_plane.user_info = new_user_info
|
||||
control_plane.save(update_fields=["user_info"])
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [
|
||||
("core", "0011_alter_organizationorigin_billing_entity"),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.RunPython(convert_user_info_to_array, reverse_user_info_to_object),
|
||||
]
|
||||
|
|
@ -156,7 +156,8 @@ class ControlPlane(ServalaModelMixin, models.Model):
|
|||
blank=True,
|
||||
verbose_name=_("User Information"),
|
||||
help_text=_(
|
||||
"Key-value information displayed to users when selecting this control plane"
|
||||
'Array of info objects: [{"title": "…", "content": "…", "help_text": "…"}]. '
|
||||
"The help_text field is optional and will be shown as a hover popover on an info icon."
|
||||
),
|
||||
)
|
||||
wildcard_dns = models.CharField(
|
||||
|
|
|
|||
|
|
@ -102,7 +102,16 @@
|
|||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% include "includes/control_plane_user_info.html" with control_plane=instance.context.control_plane %}
|
||||
{% if control_plane.user_info %}
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">{% translate "Service Provider Zone Information" %}</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
{% include "includes/control_plane_user_info.html" with control_plane=instance.context.control_plane %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if instance.spec and spec_fieldsets %}
|
||||
<div class="col-12">
|
||||
|
|
@ -239,3 +248,12 @@
|
|||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
// Initialize Bootstrap popovers for help text
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
|
||||
[...popoverTriggerList].map(el => new bootstrap.Popover(el));
|
||||
});
|
||||
</script>
|
||||
{% endblock extra_js %}
|
||||
|
|
|
|||
|
|
@ -7,9 +7,13 @@
|
|||
{{ offering }}
|
||||
{% endblock page_title %}
|
||||
{% endblock html_title %}
|
||||
{% partialdef control-plane-info %}
|
||||
{% if selected_plane %}
|
||||
{% include "includes/control_plane_user_info.html" with control_plane=selected_plane %}
|
||||
{% partialdef control-plane-info inline=True %}
|
||||
{% if selected_plane and selected_plane.user_info %}
|
||||
<div class="mt-3">
|
||||
<div class="border-top pt-3">
|
||||
{% include "includes/control_plane_user_info.html" with control_plane=selected_plane %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endpartialdef %}
|
||||
{% partialdef service-form %}
|
||||
|
|
@ -30,65 +34,98 @@
|
|||
{% endpartialdef %}
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-8">
|
||||
<div class="card">
|
||||
<div class="card-header d-flex align-items-center">
|
||||
{% if service.logo %}
|
||||
<img src="{{ service.logo.url }}"
|
||||
alt="{{ service.name }}"
|
||||
class="me-3"
|
||||
style="max-width: 48px;
|
||||
max-height: 48px">
|
||||
{% endif %}
|
||||
<div class="d-flex flex-column">
|
||||
<h4 class="mb-0">{{ offering }}</h4>
|
||||
<small class="text-muted">{{ offering.service.category }}</small>
|
||||
{% if not has_control_planes %}
|
||||
<!-- No Service Available Message -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="alert alert-warning d-flex align-items-center" role="alert">
|
||||
<i class="bi bi-exclamation-triangle-fill me-2"></i>
|
||||
<div>
|
||||
<strong>{% translate "Service Unavailable" %}</strong>
|
||||
<p class="mb-0">{% translate "We currently cannot offer this service. Please check back later or contact support for more information." %}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if offering.description %}
|
||||
<div class="row mb-3">
|
||||
<div class="col-12">
|
||||
<p>{{ offering.description|urlize }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if not has_control_planes %}
|
||||
<p>{% translate "We currently cannot offer this service, sorry!" %}</p>
|
||||
{% else %}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<!-- Two Column Layout -->
|
||||
<div class="row g-3">
|
||||
<!-- Left Column: Service Provider Zone -->
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">{% translate "Service Provider Zone" %}</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form hx-trigger="change"
|
||||
hx-get="{{ request.path }}?fragment=service-form"
|
||||
hx-target="#service-form"
|
||||
hx-swap="outerHTML">
|
||||
hx-swap="outerHTML"
|
||||
class="control-plane-select-form">
|
||||
{{ select_form }}
|
||||
</form>
|
||||
{% endif %}
|
||||
{% if service.external_links or offering.external_links %}
|
||||
<div class="row mt-3">
|
||||
<div class="col-12">
|
||||
<h6 class="mb-3">{% translate "External Links" %}</h6>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
{% for link in service.external_links %}
|
||||
{% include "includes/external_link.html" %}
|
||||
{% endfor %}
|
||||
{% for link in offering.external_links %}
|
||||
{% include "includes/external_link.html" %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.control-plane-select-form .form-label {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<div id="control-plane-info"
|
||||
hx-trigger="load, change from:form"
|
||||
hx-get="{{ request.path }}?fragment=control-plane-info">
|
||||
{% partial control-plane-info %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column: Service Information -->
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">{% translate "Service Information" %}</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if offering.service.logo or offering.description %}
|
||||
<div class="d-flex gap-3 mb-3">
|
||||
{% if offering.service.logo %}
|
||||
<div class="flex-shrink-0">
|
||||
<img src="{{ offering.service.logo.url }}"
|
||||
alt="{{ offering.service.name }}"
|
||||
style="max-width: 64px;
|
||||
max-height: 64px">
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if offering.description %}
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-0">{{ offering.description|urlize }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if offering.service.external_links or offering.external_links %}
|
||||
{% if offering.service.logo or offering.description %}<hr class="my-3">{% endif %}
|
||||
<h6 class="mb-3">{% translate "External Links" %}</h6>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
{% for link in offering.service.external_links %}
|
||||
{% include "includes/external_link.html" %}
|
||||
{% endfor %}
|
||||
{% for link in offering.external_links %}
|
||||
{% include "includes/external_link.html" %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% if not offering.service.logo and not offering.description %}
|
||||
<p class="text-muted mb-0">{% translate "No additional information available." %}</p>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="service-form">{% partial service-form %}</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-4">
|
||||
{% if has_control_planes %}
|
||||
<div id="control-plane-info"
|
||||
hx-trigger="load, change from:form"
|
||||
hx-get="{{ request.path }}?fragment=control-plane-info">{% partial control-plane-info %}</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<!-- Service Form (unchanged) -->
|
||||
<div class="row mt-3">
|
||||
<div class="col-12">
|
||||
<div id="service-form">{% partial service-form %}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -103,4 +140,19 @@
|
|||
</script>
|
||||
<script defer src="{% static "js/fqdn.js" %}"></script>
|
||||
{% endif %}
|
||||
<script>
|
||||
// Initialize Bootstrap popovers for help text
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
|
||||
[...popoverTriggerList].map(el => new bootstrap.Popover(el));
|
||||
});
|
||||
|
||||
// Re-initialize popovers after HTMX swaps
|
||||
document.body.addEventListener('htmx:afterSwap', function(event) {
|
||||
if (event.detail.target.id === 'control-plane-info') {
|
||||
const popoverTriggerList = event.detail.target.querySelectorAll('[data-bs-toggle="popover"]');
|
||||
[...popoverTriggerList].map(el => new bootstrap.Popover(el));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock extra_js %}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
{% load i18n %}
|
||||
{% comment %}
|
||||
Reusable snippet for displaying ControlPlane user_info
|
||||
Usage: {% include "includes/control_plane_user_info.html" with control_plane=control_plane_object %}
|
||||
{% endcomment %}
|
||||
{% if control_plane.user_info %}
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">{% translate "Service Provider Zone Information" %}</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0 table-lg">
|
||||
<tbody>
|
||||
{% for key, value in control_plane.user_info.items %}
|
||||
<tr>
|
||||
<th>{{ key }}</th>
|
||||
<td>{{ value }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="control-plane-info-list">
|
||||
{% for info in control_plane.user_info %}
|
||||
<div class="info-item mb-3">
|
||||
<div class="d-flex align-items-center mb-1">
|
||||
<small class="text-muted fw-semibold">
|
||||
{{ info.title }}
|
||||
</small>
|
||||
{% if info.help_text %}
|
||||
<i class="bi bi-info-circle ms-1 text-muted"
|
||||
data-bs-toggle="popover"
|
||||
data-bs-trigger="hover focus"
|
||||
data-bs-placement="top"
|
||||
data-bs-content="{{ info.help_text }}"
|
||||
style="cursor: help;
|
||||
font-size: 0.875rem;"></i>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="bg-light-subtle p-2 rounded">
|
||||
<code class="text-dark">{{ info.content }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue