fcc5d99d40
* add vitest * initialize lib w/ tests * move to dev dep * run tests in CI * update file names * move api folder to lib * move api and api types to same folder * update generator outpath * rm husky * i guess i _did_ need those types * reorg types * extract validators into testable components * (WIP) start composable testing * fix import type * fix linter complaint * simplify icon type def * fix linter errors (maybe?) * rename client file for sorting
69 lines
2 KiB
Vue
69 lines
2 KiB
Vue
<template>
|
|
<v-container>
|
|
<BasePageTitle divider>
|
|
<template #header>
|
|
<v-img max-height="200" max-width="200" class="mb-2" :src="require('~/static/svgs/data-reports.svg')"></v-img>
|
|
</template>
|
|
<template #title> Report </template>
|
|
</BasePageTitle>
|
|
<v-container v-if="report">
|
|
<BaseCardSectionTitle :title="report.name"> </BaseCardSectionTitle>
|
|
|
|
<v-card-text> Report Id: {{ id }} </v-card-text>
|
|
|
|
<v-data-table :headers="itemHeaders" :items="report.entries" :items-per-page="50" show-expand>
|
|
<template #item.success="{ item }">
|
|
<v-icon :color="item.success ? 'success' : 'error'">
|
|
{{ item.success ? $globals.icons.checkboxMarkedCircle : $globals.icons.close }}
|
|
</v-icon>
|
|
</template>
|
|
<template #item.timestamp="{ item }">
|
|
{{ $d(Date.parse(item.timestamp), "short") }}
|
|
</template>
|
|
<template #expanded-item="{ headers, item }">
|
|
<td class="pa-6" :colspan="headers.length">{{ item.exception }}</td>
|
|
</template>
|
|
</v-data-table>
|
|
</v-container>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, useRoute, ref, onMounted } from "@nuxtjs/composition-api";
|
|
import { useUserApi } from "~/composables/api";
|
|
import { ReportOut } from "~/lib/api/types/reports";
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
const route = useRoute();
|
|
const id = route.value.params.id;
|
|
|
|
const api = useUserApi();
|
|
|
|
const report = ref<ReportOut | null>(null);
|
|
|
|
async function getReport() {
|
|
const { data } = await api.groupReports.getOne(id);
|
|
report.value = data ?? null;
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await getReport();
|
|
});
|
|
|
|
const itemHeaders = [
|
|
{ text: "Success", value: "success" },
|
|
{ text: "Message", value: "message" },
|
|
{ text: "Timestamp", value: "timestamp" },
|
|
];
|
|
|
|
return {
|
|
report,
|
|
id,
|
|
itemHeaders,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|