Email report on every report page; kiosk long-name fix

frontend/src/views/reports/ReportsIndex.vue

@@ -43,6 +43,9 @@
       <h2>{{ currentReport.name }}</h2>
       <div class="report-actions">
         <button class="btn btn-secondary" @click="exportCSV">Export CSV</button>
+        <EmailReportButton v-if="emailtable && canemail"
+                           :subject="currentReport.name"
+                           :columns="emailtable.columns" :rows="emailtable.rows" />
         <button class="btn btn-secondary" @click="clearReport">Back to Reports</button>
       </div>
     </div>
@@ -266,9 +269,18 @@ import { ref, computed, onMounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import api, { reportsApi, businessunitsApi, assetsApi, locationsApi, applicationsApi } from '@/api'
 import { apiError } from '@/utils/apiError'
+import EmailReportButton from '@/components/EmailReportButton.vue'
+import { emailTableFrom, titleCase } from '@/utils/reportTable'
+import { useAuthStore } from '@/stores/auth'
 
 const router = useRouter()
 const route = useRoute()
+const authStore = useAuthStore()
+
+// Emailing a report is the reports.export permission, the same one the endpoint
+// enforces. Offering the button to somebody who will only get a 403 is worse
+// than not offering it.
+const canemail = computed(() => authStore.hasPermission('reports.export'))
 
 const reports = ref([])
 const search = ref('')
@@ -321,6 +333,12 @@ const genericColumns = computed(() => {
   return data.rows?.length ? Object.keys(data.rows[0]) : []
 })
 
+// The table to email, built from whatever the open report returned. Emailing
+// was available on two pages and nowhere else, purely because those two were
+// built as their own routed pages - the endpoint has always taken any
+// {columns, rows}. Lives in its own module so the shapes can be tested.
+const emailtable = computed(() => emailTableFrom(reportData.value))
+
 const activeFilterFields = computed(() =>
   currentReport.value ? (reportFilterFields[currentReport.value.id] || []) : []
 )
@@ -391,12 +409,6 @@ async function loadReports() {
   }
 }
 
-function titleCase(text) {
-  return String(text || '')
-    .split(/[\s_-]+/)
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ')
-}
 
 // Filter by name/description/category, then group by category in the fixed order.
 const groupedReports = computed(() => {