Merge pull request #4910 from nyaruka/improved_trigger_display

Improve display of triggers on list pages

temba/triggers/types.py

@@ -74,6 +74,7 @@ class Meta(BaseChannelTriggerForm.Meta):
     code = Trigger.TYPE_KEYWORD
     slug = "keyword"
     name = _("Keyword")
+    icon = "message"
     allowed_flow_types = (Flow.TYPE_MESSAGE, Flow.TYPE_VOICE)
     allowed_channel_role = Channel.ROLE_RECEIVE
     export_fields = ChannelTriggerType.export_fields + ("keywords", "match_type")
@@ -114,6 +115,7 @@ class Meta(BaseChannelTriggerForm.Meta):
     code = Trigger.TYPE_CATCH_ALL
     slug = "catch_all"
     name = _("Catch All")
+    icon = "message"
     allowed_flow_types = (Flow.TYPE_MESSAGE, Flow.TYPE_VOICE)
     allowed_channel_role = Channel.ROLE_RECEIVE
     form = Form
@@ -161,6 +163,7 @@ class Meta(BaseTriggerForm.Meta):
     code = Trigger.TYPE_SCHEDULE
     slug = "schedule"
     name = _("Schedule")
+    icon = "calendar"
     allowed_flow_types = (Flow.TYPE_MESSAGE, Flow.TYPE_VOICE, Flow.TYPE_BACKGROUND)
     exportable = False
     form = Form
@@ -227,6 +230,7 @@ class Meta(BaseTriggerForm.Meta):
     code = Trigger.TYPE_INBOUND_CALL
     slug = "inbound_call"
     name = _("Inbound Call")
+    icon = "incoming_call"
     allowed_flow_types = (Flow.TYPE_VOICE, Flow.TYPE_MESSAGE, Flow.TYPE_BACKGROUND)
     allowed_channel_role = Channel.ROLE_ANSWER
     form = Form
@@ -260,6 +264,7 @@ def __init__(self, org, user, *args, **kwargs):
     code = Trigger.TYPE_NEW_CONVERSATION
     slug = "new_conversation"
     name = _("New Conversation")
+    icon = "conversation"
     allowed_flow_types = (Flow.TYPE_MESSAGE,)
     allowed_channel_schemes = ContactURN.SCHEMES_SUPPORTING_NEW_CONVERSATION
     form = Form
@@ -289,6 +294,7 @@ class Meta(BaseChannelTriggerForm.Meta):
     code = Trigger.TYPE_REFERRAL
     slug = "referral"
     name = _("Referral")
+    icon = "referral"
     allowed_flow_types = (Flow.TYPE_MESSAGE,)
     allowed_channel_schemes = ContactURN.SCHEMES_SUPPORTING_REFERRALS
     form = Form
@@ -306,6 +312,7 @@ def __init__(self, org, user, *args, **kwargs):
     code = Trigger.TYPE_CLOSED_TICKET
     slug = "closed_ticket"
     name = _("Closed Ticket")
+    icon = "agent"
     allowed_flow_types = (Flow.TYPE_MESSAGE, Flow.TYPE_VOICE, Flow.TYPE_BACKGROUND)
     form = Form
 
@@ -322,6 +329,7 @@ def __init__(self, org, user, *args, **kwargs):
     code = Trigger.TYPE_OPT_IN
     slug = "opt_in"
     name = _("Opt-In")
+    icon = "optin"
     allowed_flow_types = (Flow.TYPE_MESSAGE, Flow.TYPE_BACKGROUND)
     allowed_channel_schemes = ContactURN.SCHEMES_SUPPORTING_OPTINS
     form = Form
@@ -339,6 +347,7 @@ def __init__(self, org, user, *args, **kwargs):
     code = Trigger.TYPE_OPT_OUT
     slug = "opt_out"
     name = _("Opt-Out")
+    icon = "optout"
     allowed_flow_types = (Flow.TYPE_MESSAGE, Flow.TYPE_BACKGROUND)
     allowed_channel_schemes = ContactURN.SCHEMES_SUPPORTING_OPTINS
     form = Form

templates/flows/flow_list.html

@@ -49,8 +49,8 @@
               <td>
                 <div class="flex items-center">
                   <div class="flex-grow">
-                    <div style="max-width:80%" class="flex inline whitespace-nowrap flex-grow items-center">
-                      <div class="inline-block flex items-center text-gray-600">
+                    <div style="max-width:80%" class="flex whitespace-nowrap flex-grow items-center">
+                      <div class="flex items-center text-gray-600">
                         {% if object.flow_type == 'V' %}
                           <temba-icon name="flow_ivr" class="mr-2">
                           </temba-icon>
@@ -80,11 +80,12 @@
                 {% if not object.is_archived %}
                   <div class="whitespace-no-break flex items-center justify-end">
                     {% if object.has_issues %}
-                    <div>
-                      <temba-tip position="top" text="{{ _("Has issues") |escapejs }}" slot="toggle">
-                        <temba-icon name="issue" class="mr-2" clickable="true"></temba-icon>
-                      </temba-tip>
-                    </div>
+                      <div>
+                        <temba-tip position="top" text="{{ _("Has issues") |escapejs }}" slot="toggle">
+                          <temba-icon name="issue" class="mr-2" clickable="true">
+                          </temba-icon>
+                        </temba-tip>
+                      </div>
                     {% endif %}
                     {% if object.run_stats.total %}
                       <div onclick="goto(event)"

templates/includes/recipients_contact.html

@@ -1,8 +1,9 @@
 {% load contacts i18n %}
 
 {% if contact.is_active %}
-  <!-- djlint:off -->
+  {# djlint:off #}
   <a href="{% url 'contacts.contact_read' contact.uuid %}" onclick="goto(event, this)"><temba-label icon="contact" clickable class="mr-1 mb-1">{{ contact|name_or_urn:user_org }}</temba-label></a>
+  {# djlint:on #}
 {% else %}
   <temba-label icon="contact" clickable class="mr-1 mb-1">
     <div class="line-through">{% trans "Deleted" %}</div>

templates/includes/recipients_group.html

@@ -1,4 +1,3 @@
-<!-- djlint:off -->
-<a href="{% url 'contacts.contact_filter' group.uuid %}" onclick="goto(event, this)"><temba-label icon="group{% if groups_as_filters %}{% if exclusion %}_exclude{% else %}_include{% endif %}{% endif %}"
-    clickable
-  class="mr-1 mb-1">{{ group.name }}</temba-label></a>
+{# djlint:off #}
+<a href="{% url 'contacts.contact_filter' group.uuid %}" onclick="goto(event, this)"><temba-label icon="group{% if groups_as_filters %}{% if exclusion %}_exclude{% else %}_include{% endif %}{% endif %}" clickable class="mr-1 mb-1">{{ group.name }}</temba-label></a>
+{# djlint:on #}

templates/triggers/trigger_list.html

@@ -50,56 +50,44 @@
               onclick="updateTrigger(event, {{ obj.id }})"
               class="trigger object-row">
             {% if org_perms.triggers.trigger_update %}
-              <td onclick="checkInner(event);" class="trigger checkbox object-row-checkbox">
+              <td onclick="checkInner(event);" class="trigger checkbox object-row-checkbox" width="32px">
                 <temba-checkbox onclick="handleRowSelection(this)">
                 </temba-checkbox>
               </td>
             {% endif %}
-            <td class="w-full">
-              {% if obj.trigger_type == 'K' %}
-                {% include "triggers/types/keyword.html" with trigger=obj %}
-              {% elif obj.trigger_type == 'M' %}
-                {% trans "A missed call" %}
-              {% elif obj.trigger_type == 'C' %}
-                {% trans "An uncaught message" %}
-              {% elif obj.trigger_type == 'V' %}
-                {% trans "An inbound call" %}
-              {% elif obj.trigger_type == 'I' %}
-                {% trans "An opt in event" %}
-              {% elif obj.trigger_type == 'O' %}
-                {% trans "An opt out event" %}
-              {% elif obj.trigger_type == 'N' %}
-                {% trans "A new conversation" %}
-              {% elif obj.trigger_type == 'R' %}
-                {% trans "The referrer id" %}
-                <b>
-                  {{ obj.referrer_id }}
-                </b>
-              {% elif obj.trigger_type == 'T' %}
-                {% trans "A closed ticket" %}
-              {% endif %}
-              {% if obj.channel %}
-                {% trans "on the channel" %}
-                <div onclick="goto(event)"
-                     href="{% url "channels.channel_read" obj.channel.uuid %}"
-                     class="linked inline">{{ obj.channel }}</div>
-              {% endif %}
-              {% if obj.schedule %}
-                {% trans "Start" %}
-              {% else %}
-                {% trans "starts" %}
-              {% endif %}
-              <div onclick="goto(event)" href="{% url "flows.flow_editor" obj.flow.uuid %}" class="linked inline">{{ obj.flow }}</div>
-              {% if obj.schedule %}
-                {% if obj.schedule.next_fire and not obj.is_archived %}
-                  {{ obj.schedule.get_display }}
-                {% else %}
-                  {% trans "is not scheduled" %}
+            <td>
+              <div>
+                <div style="max-width:80%" class="flex whitespace-nowrap flex-grow items-center">
+                  <div class="flex items-center mr-2">
+                    <temba-icon name="{{ obj.type.icon }}" class="text-gray-600">
+                    </temba-icon>
+                  </div>
+                  <div class="flex-grow">
+                    {% with "triggers/types/"|add:obj.type.slug|add:".html" as type_template %}
+                      {% include type_template with trigger=obj %}
+                    {% endwith %}
+                  </div>
+                </div>
+                {% if obj.channel or obj.contacts.all or obj.groups.all or obj.exclude_groups.all %}
+                  <div class="text-sm mt-2">
+                    {% if obj.channel %}
+                      {# djlint:off #}
+                      <a href="{% url 'channels.channel_read' obj.channel.uuid %}" onclick="goto(event, this)"><temba-label icon="{{ obj.channel.type.get_icon }}" clickable class="mr-1 mb-1">{{ obj.channel }}</temba-label></a>
+                      {# djlint:on #}
+                    {% endif %}
+                    {% include "includes/recipients.html" with contacts=obj.contacts.all groups=obj.groups.all exclude_groups=obj.exclude_groups.all groups_as_filters=True %}
+                  </div>
                 {% endif %}
-              {% endif %}
+              </div>
             </td>
-            <td onclick="handleRowSelection(this)" width="250px">
-              {% include "includes/recipients.html" with contacts=obj.contacts.all groups=obj.groups.all exclude_groups=obj.exclude_groups.all groups_as_filters=True %}
+            <td>
+              <div class="text-right">
+                <a href="{% url 'flows.flow_editor' obj.flow.uuid %}" onclick="goto(event, this)">
+                  <temba-label icon="flow" primary clickable class="mx-1 my-1">
+                    {{ obj.flow.name }}
+                  </temba-label>
+                </a>
+              </div>
             </td>
           </tr>
         {% empty %}

templates/triggers/types/catch_all.html

@@ -0,0 +1,5 @@
+{% load i18n %}
+
+{% blocktrans trimmed %}
+  A message that doesn't match any keyword triggers
+{% endblocktrans %}

templates/triggers/types/closed_ticket.html

@@ -0,0 +1,5 @@
+{% load i18n %}
+
+{% blocktrans trimmed %}
+  A ticket being closed
+{% endblocktrans %}

templates/triggers/types/inbound_call.html

@@ -0,0 +1,5 @@
+{% load i18n %}
+
+{% blocktrans trimmed %}
+  An incoming call
+{% endblocktrans %}

templates/triggers/types/missed_call.html

@@ -0,0 +1,5 @@
+{% load i18n %}
+
+{% blocktrans trimmed %}
+  A missed call on an Android device
+{% endblocktrans %}

templates/triggers/types/new_conversation.html

@@ -0,0 +1,5 @@
+{% load i18n %}
+
+{% blocktrans trimmed %}
+  A new conversation
+{% endblocktrans %}

templates/triggers/types/opt_in.html

@@ -0,0 +1,5 @@
+{% load i18n %}
+
+{% blocktrans trimmed %}
+  A contact opting in
+{% endblocktrans %}

templates/triggers/types/opt_out.html

@@ -0,0 +1,5 @@
+{% load i18n %}
+
+{% blocktrans trimmed %}
+  A contact opting out
+{% endblocktrans %}

templates/triggers/types/referral.html

@@ -0,0 +1,5 @@
+{% load i18n %}
+
+{% blocktrans trimmed with referrer=obj.referrer_id %}
+  A referral from <b>{{ referrer }}</b>
+{% endblocktrans %}

templates/triggers/types/schedule.html

@@ -0,0 +1,7 @@
+{% load i18n %}
+
+{% if obj.schedule.next_fire and not obj.is_archived %}
+  {{ obj.schedule.get_display|capfirst }}
+{% else %}
+  {% trans "is not scheduled" %}
+{% endif %}