Merge pull request #1195 from alphagov/better-template-management

Make it easier to find and preview templates
2026-09-06 04:48:26 -04:00 · 2017-03-20 15:49:16 +00:00
parent f03de94e9e 8a4c8526fa
commit 9de6046da7
27 changed files with 395 additions and 349 deletions
--- a/app/templates/views/api/keys.html
+++ b/app/templates/views/api/keys.html
@@ -19,41 +19,43 @@
      <a href="{{ url_for('.create_api_key', service_id=current_service.id) }}" class="button align-with-heading">Create an API key</a>
    </div>
  </div>
-  {% call(item, row_number) list_table(
-    keys,
-    empty_message="You haven’t created any API keys yet",
-    caption="API keys",
-    caption_visible=false,
-    field_headings=[
-      'API keys',
-      'Action'
-    ],
-    field_headings_visible=False
-  ) %}
-    {% call field() %}
-      <div class="file-list">
-        {{ item.name }}
-        <span class="file-list-hint">
-          {% if item.key_type == 'normal' %}
-            Live – sends to anyone
-          {% elif item.key_type == 'team' %}
-            Team and whitelist – limits who you can send to
-          {% elif item.key_type == 'test' %}
-            Test – pretends to send messages
-          {% endif %}
-        </span>
-      </div>
+  <div class="body-copy-table">
+    {% call(item, row_number) list_table(
+      keys,
+      empty_message="You haven’t created any API keys yet",
+      caption="API keys",
+      caption_visible=false,
+      field_headings=[
+        'API keys',
+        'Action'
+      ],
+      field_headings_visible=False
+    ) %}
+      {% call field() %}
+        <div class="file-list">
+          {{ item.name }}
+          <div class="hint">
+            {% if item.key_type == 'normal' %}
+              Live – sends to anyone
+            {% elif item.key_type == 'team' %}
+              Team and whitelist – limits who you can send to
+            {% elif item.key_type == 'test' %}
+              Test – pretends to send messages
+            {% endif %}
+          </div>
+        </div>
+      {% endcall %}
+      {% if item.expiry_date %}
+        {% call field(align='right') %}
+          <span class='hint'>Revoked {{ item.expiry_date|format_datetime_short }}</span>
+        {% endcall %}
+      {% else %}
+        {% call field(align='right', status='error') %}
+          <a href='{{ url_for('.revoke_api_key', service_id=current_service.id, key_id=item.id) }}'>Revoke</a>
+        {% endcall %}
+      {% endif %}
    {% endcall %}
-    {% if item.expiry_date %}
-      {% call field(align='right') %}
-        <span class='hint'>Revoked {{ item.expiry_date|format_datetime_short }}</span>
-      {% endcall %}
-    {% else %}
-      {% call field(align='right', status='error') %}
-        <a href='{{ url_for('.revoke_api_key', service_id=current_service.id, key_id=item.id) }}'>Revoke</a>
-      {% endcall %}
-    {% endif %}
-  {% endcall %}
+  </div>

  {{ page_footer(
    secondary_link=url_for('.api_integration', service_id=current_service.id),
--- a/app/templates/views/check.html
+++ b/app/templates/views/check.html
@@ -175,7 +175,11 @@
          wrapping_class='bottom-gutter-2-3'
        ) }}
      {% endif %}
+      {% if template.template_type != 'letter' or not request.args.from_test %}
      <input type="submit" class="button" value="Send {{ count_of_recipients }} {{ message_count_label(count_of_recipients, template.template_type, suffix='') }}" />
+      {% else %}
+        <a href="#" class="heading-medium">Download as PDF</a>
+      {% endif %}
      <a href="{{ back_link }}" class="page-footer-back-link">Back</a>
    </form>
  {% endif %}
--- a/app/templates/views/send-from-api.html
+++ b/app/templates/views/send-from-api.html
@@ -1,20 +0,0 @@
-{% extends "withnav_template.html" %}
-{% from "components/api-key.html" import api_key %}
-
-{% block service_page_title %}
-  API info
-{% endblock %}
-
-{% block maincolumn_content %}
-
-  <h1 class="heading-large">
-      API info
-  </h1>
-
-  {{ template|string }}
-
-  <div class="bottom-gutter">
-    {{ api_key(template.id, name="Template ID", thing='template ID') }}
-  </div>
-
-{% endblock %}
--- a/app/templates/views/send-test.html
+++ b/app/templates/views/send-test.html
@@ -13,11 +13,17 @@

 {% block maincolumn_content %}

+  <h1 class="heading-large">
  {% if request.args['help'] %}
-    <h1 class="heading-large">Example text message</h1>
+    Example text message
  {% else %}
-    <h1 class="heading-large">Send yourself a test</h1>
+    {% if template.template_type == 'letter' %}
+      Generate preview
+    {% else %}
+      Send yourself a test
+    {% endif %}
  {% endif %}
+  </h1>

  {{ template|string }}

--- a/app/templates/views/service-settings.html
+++ b/app/templates/views/service-settings.html
@@ -11,7 +11,7 @@

    <h1 class="heading-large">Settings</h1>

-    <div class="bottom-gutter-3-2">
+    <div class="bottom-gutter-3-2 body-copy-table">

      {% call mapping_table(
        caption='Settings',
--- a/app/templates/views/templates/_template.html
+++ b/app/templates/views/templates/_template.html
@@ -1,25 +1,42 @@
-<div class="column-two-thirds">
-  {{ template|string }}
-</div>
-<div class="column-one-third">
+<div class="column-whole">
  {% if template._template.archived %}
-    <div class="message-updated-at">
-      This template was deleted<br/>{{ template._template.updated_at|format_date_normal }}
-    </div>
+    <p class="hint">
+      This template was deleted {{ template._template.updated_at|format_datetime_relative }}.
+    </p>
  {% else %}
-    <div class="message-use-links{% if show_title %}-with-title{% endif %}">
-      {% if current_user.has_permissions(permissions=['send_texts', 'send_emails', 'send_letters']) %}
-        <a href="{{ url_for(".send_messages", service_id=current_service.id, template_id=template.id) }}" class="primary">
-          Upload recipients
-        </a>
-      <a href="{{ url_for(".send_test", service_id=current_service.id, template_id=template.id) }}">
-        Send yourself a test
-      </a>
-    {% endif %}
-      {% if current_user.has_permissions(permissions=['manage_templates'], admin_override=True) %}
-         <a href="{{ url_for(".edit_service_template", service_id=current_service.id, template_id=template.id) }}">Edit template</a>
-      {% endif %}
-      <a href="{{ url_for(".send_from_api", service_id=current_service.id, template_id=template.id) }}">API info</a>
+    <div class="bottom-gutter-2-3">
+      <div class="grid-row">
+        {% if current_user.has_permissions(permissions=['send_texts', 'send_emails', 'send_letters']) %}
+        <div class="{{ 'column-half' if template.template_type == 'letter' else 'column-third' }}">
+          <a href="{{ url_for(".send_messages", service_id=current_service.id, template_id=template.id) }}" class="pill-separate-item">
+            Upload recipients
+          </a>
+        </div>
+        <div class="{{ 'column-half' if template.template_type == 'letter' else 'column-third' }}">
+          <a href="{{ url_for(".send_test", service_id=current_service.id, template_id=template.id) }}" class="pill-separate-item">
+            {{ 'Generate preview' if template.template_type == 'letter' else 'Send yourself a test' }}
+          </a>
+        </div>
+        {% endif %}
+        {% if
+          current_user.has_permissions(permissions=['manage_templates'], admin_override=True) and
+          template.template_type != 'letter'
+        %}
+        <div class="column-one-third">
+          <a href="{{ url_for(".edit_service_template", service_id=current_service.id, template_id=template.id) }}" class="pill-separate-item">
+            Edit template
+          </a>
+        </div>
+        {% endif %}
+      </div>
    </div>
  {% endif %}
 </div>
+<div class="column-whole template-container">
+  {% if current_user.has_permissions(permissions=['manage_templates'], admin_override=True) and template.template_type == 'letter' %}
+    <a href="{{ url_for(".edit_service_template", service_id=current_service.id, template_id=template.id) }}" class="edit-template-link-letter-body">Edit</a>
+    <a href="{{ url_for(".service_set_letter_contact_block", service_id=current_service.id) }}" class="edit-template-link-letter-contact">Edit</a>
+    <a href="#" class="edit-template-link-letter-address">Edit</a>
+  {% endif %}
+  {{ template|string }}
+</div>
--- a/app/templates/views/templates/_template_history.html
+++ b/app/templates/views/templates/_template_history.html
@@ -1,18 +1,16 @@
 <div class="column-whole">
  <h2 class="message-name">{{ template.name }}</h2>
+  <p class="hint">
+    {% if template.get_raw('version', 1) > 1 %}
+      Edit made {% if template.get_raw('updated_at', None) %}{{ template.get_raw('updated_at')|format_datetime_normal }}{% endif %}
+    {% else %}
+      Created
+      {% if template.get_raw('created_at', None) %}{{ template.get_raw('created_at')|format_datetime_normal }}{% endif %}
+    {% endif %}
+    by {{ template.get_raw('created_by').name }}
+  </p>
 </div>

-<div class="column-two-thirds">
+<div class="column-whole">
  {{ template|string }}
 </div>
-
-<div class="column-one-third">
-  <div class="message-use-links">
-    {% if template.get_raw('version', 1) > 1 %}
-      {% if template.get_raw('updated_at', None) %}{{ template.get_raw('updated_at')|format_datetime_normal }}{% endif %}
-    {% else %}
-      Created<br/>{% if template.get_raw('created_at', None) %}{{ template.get_raw('created_at')|format_datetime_normal }}{% endif %}
-    {% endif %}
-    <br/>by {{ template.get_raw('created_by').name }}
-  </div>
-</div>
--- a/app/templates/views/templates/choose.html
+++ b/app/templates/views/templates/choose.html
@@ -1,3 +1,6 @@
+{% from "components/message-count-label.html" import message_count_label %}
+{% from "components/textbox.html" import textbox %}
+
 {% extends "withnav_template.html" %}

 {% block service_page_title %}
@@ -33,7 +36,7 @@

  {% else %}

-    <div class="grid-row">
+    <div class="grid-row bottom-gutter-1-2">
      <div class="column-two-thirds">
        <h1 class="heading-large">Templates</h1>
      </div>
@@ -44,19 +47,29 @@
      {% endif %}
    </div>

-    <div class="grid-row">
+    {% if templates|length > 7 %}
+      <div data-module="autofocus">
+        <div class="live-search" data-module="live-search" data-targets="#template-list .column-whole">
+          {{ textbox(
+            search_form.search,
+            width='1-1'
+          ) }}
+        </div>
+      </div>
+    {% endif %}
+
+    <nav class="grid-row" id=template-list>
      {% for template in templates %}
        <div class="column-whole">
-          <h2 class="message-name">{{ template.name }}</h2>
-          {% if template.get_raw('updated_at', None) %}
-            <p class="message-updated-at">
-              Edited {{ template.get_raw('updated_at', None)|format_date_short }}&ensp;<a href="{{ url_for('.view_template_versions', service_id=current_service.id, template_id=template.id) }}">see previous versions</a>
-            </p>
-          {% endif %}
+          <h2 class="message-name">
+            <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=template.id) }}">{{ template.name }}</a>
+          </h2>
+          <p class="hint bottom-gutter-1-3">
+            {{ message_count_label(1, template.template_type, suffix='')|capitalize }} template
+          </p>
        </div>
-        {% include 'views/templates/_template.html' %}
      {% endfor %}
-    </div>
+    </nav>
  {% endif %}

 {% endblock %}
--- a/app/templates/views/templates/template.html
+++ b/app/templates/views/templates/template.html
@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/api-key.html" import api_key %}

 {% block service_page_title %}
  {{ template.name }}
@@ -17,9 +18,17 @@
    {% endwith %}
  </div>

-  {{ page_footer(
-    secondary_link=url_for('.choose_template', service_id=current_service.id),
-    secondary_link_text='All templates'
-  ) }}
+  <div class="bottom-gutter">
+    {{ api_key(template.id, name="Template ID", thing='template ID') }}
+  </div>
+
+  {% if template._template.updated_at %}
+    <div class="bottom-gutter-2">
+      <h2 class="heading-small">Last edited {{ template._template.updated_at|format_datetime_relative }}</h2>
+      <p>
+        <a href="{{ url_for('.view_template_versions', service_id=current_service.id, template_id=template.id) }}">See previous versions</a>
+      </p>
+    </div>
+  {% endif %}

 {% endblock %}