Display template IDs on the list UI and popup editor. Closes #986.

frontend/src/views/TemplateForm.vue

@@ -7,7 +7,12 @@
               class="is-pulled-right" type="is-primary"
               icon-left="file-find-outline">{{ $t('templates.preview') }}</b-button>
 
-            <h4 v-if="isEditing">{{ data.name }}</h4>
+            <template v-if="isEditing">
+              <h4>{{ data.name }}</h4>
+              <p class="has-text-grey is-size-7">
+                {{ $t('globals.fields.id') }}: <span data-cy="id">{{ data.id }}</span>
+              </p>
+            </template>
             <h4 v-else>{{ $t('templates.newTemplate') }}</h4>
         </header>
         <section expanded class="modal-card-body">

frontend/src/views/Templates.vue

@@ -41,6 +41,10 @@
         </b-tag>
       </b-table-column>
 
+      <b-table-column v-slot="props" field="id" :label="$t('globals.fields.id')" sortable>
+        {{ props.row.id }}
+      </b-table-column>
+
       <b-table-column v-slot="props" field="createdAt"
         :label="$t('globals.fields.createdAt')" sortable>
         {{ $utils.niceDate(props.row.createdAt) }}