pkp/pkp-lib#9744 Add vue templates for Jobs, FailedJobs and FailedJob…

…Details pages

src/components/Container/JobsPage.vue

@@ -1,5 +1,4 @@
 <script>
-import Page from './Page.vue';
 import Pagination from '@/components/Pagination/Pagination.vue';
 import PkpTable from '@/components/TableNext/Table.vue';
 import TableCell from '@/components/TableNext/TableCell.vue';
@@ -12,21 +11,38 @@ export default {
 		TableCell,
 		Pagination,
 	},
-	extends: Page,
 	mixins: [ajaxError],
 	data() {
 		return {
-			i18nDescription: '',
-			columns: [],
 			rows: [],
-			label: '',
 			total: 0,
 			currentPage: 1,
 			lastPage: 1,
 			isLoadingItems: false,
-			apiUrl: null,
 		};
 	},
+	props: {
+		label: {
+			type: String,
+			default: '',
+		},
+		i18nDescription: {
+			type: String,
+			default: '',
+		},
+		columns: {
+			type: Array,
+			default: [],
+		},
+		apiUrl: {
+			type: String,
+			default: null,
+		},
+		apiUrlRedispatchAll: {
+			type: String,
+			default: null,
+		},
+	},
 	computed: {
 		description() {
 			return this.replaceLocaleParams(this.i18nDescription, {

src/components/Container/Page.vue

@@ -4,13 +4,19 @@ import ModalManager from '@/components/Modal/ModalManager.vue';
 
 import PkpAnnouncer from '@/components/Announcer/Announcer.vue';
 import ReviewerSubmissionPage from '@/pages/reviewerSubmission/ReviewerSubmissionPage.vue';
+import JobsPage from '@/pages/jobs/JobsPage.vue';
+import FailedJobsPage from '@/pages/jobs/FailedJobsPage.vue';
+import FailedJobDetailsPage from '@/pages/jobs/FailedJobDetailsPage.vue';
 
 export default {
 	name: 'Page',
 	components: {
 		PkpAnnouncer,
 		ModalManager,
 		ReviewerSubmissionPage,
+		JobsPage,
+		FailedJobsPage,
+		FailedJobDetailsPage,
 	},
 	extends: Container,
 	data() {

src/components/TableNext/Table.vue

@@ -1,36 +1,36 @@
 <template>
 	<div
-		v-if="
-			!!$slots['label'] || !!$slots['description'] || !!$slots['top-controls']
-		"
+		v-if="slots.label || slots.description || slots['top-controls']"
 		class="flex justify-between bg-default p-4"
 	>
 		<div>
-			<span v-if="!!$slots['label']" :id="labelId" class="text-xl-bold">
-				<slot name="label">{{ $slots['label'] }}</slot>
+			<span v-if="slots.label" :id="labelId" class="text-xl-bold">
+				<slot name="label" />
 			</span>
-			<div v-if="!!$slots['description']" :id="descriptionId">
-				<slot name="description">{{ $slots['description'] }}</slot>
+			<div v-if="slots.description" :id="descriptionId">
+				<slot name="description" />
 			</div>
 		</div>
-		<div v-if="!!$slots['top-controls']">
-			<slot name="top-controls">{{ $slots['top-controls'] }}</slot>
+		<div v-if="slots['top-controls']">
+			<slot name="top-controls" />
 		</div>
 	</div>
 	<table
 		class="pkpTable w-full max-w-full border-separate border-spacing-0"
-		:aria-labelledby="labelledBy ? labelledBy : labelId"
-		:aria-describedby="describedBy ? describedBy : descriptionId"
+		:aria-labelledby="labelledBy ?? (slots.label ? labelId : null)"
+		:aria-describedby="
+			describedBy ?? (slots.description ? descriptionId : null)
+		"
 	>
 		<slot />
 	</table>
-	<div v-if="!!$slots['bottom-controls']" class="flex justify-between py-4">
-		<slot name="bottom-controls">{{ $slots['bottom-controls'] }}</slot>
+	<div v-if="slots['bottom-controls']" class="flex justify-between py-4">
+		<slot name="bottom-controls" />
 	</div>
 </template>
 
 <script setup>
-import {provide, toRefs, defineEmits, ref} from 'vue';
+import {provide, toRefs, defineEmits, ref, useSlots} from 'vue';
 import {useId} from '@/composables/useId.js';
 
 const emit = defineEmits([
@@ -67,9 +67,11 @@ const tableContext = {
 	columnsCount,
 };
 
+const slots = useSlots();
+
 const {generateId} = useId();
-const labelId = generateId();
-const descriptionId = generateId();
+const labelId = slots.label ? generateId() : null;
+const descriptionId = slots.description ? generateId() : null;
 
 provide('tableContext', tableContext);
 </script>

src/pages/jobs/FailedJobDetailsPage.vue

@@ -0,0 +1,61 @@
+<template>
+	<PkpTable>
+		<template #label v-if="label">
+			<span v-html="label"></span>
+		</template>
+		<TableHeader>
+			<TableColumn
+				v-for="column in columns"
+				:key="column.name"
+				:id="column.name"
+			>
+				{{ column.label }}
+			</TableColumn>
+		</TableHeader>
+		<TableBody>
+			<TableRow v-for="row in rows" :key="row.key">
+				<TableCell>{{ row.attribute }}</TableCell>
+				<TableCell>
+					<span>
+						<pre>{{ row.value }}</pre>
+					</span>
+				</TableCell>
+			</TableRow>
+		</TableBody>
+	</PkpTable>
+</template>
+
+<script>
+import PkpTable from '@/components/TableNext/Table.vue';
+import TableCell from '@/components/TableNext/TableCell.vue';
+import TableColumn from '@/components/TableNext/TableColumn.vue';
+import TableHeader from '@/components/TableNext/TableHeader.vue';
+import TableBody from '@/components/TableNext/TableBody.vue';
+import TableRow from '@/components/TableNext/TableRow.vue';
+
+export default {
+	name: 'FailedJobDetailsPage',
+	components: {
+		PkpTable,
+		TableCell,
+		TableColumn,
+		TableHeader,
+		TableBody,
+		TableRow,
+	},
+	props: {
+		label: {
+			type: String,
+			default: '',
+		},
+		columns: {
+			type: Array,
+			default: [],
+		},
+		rows: {
+			type: Array,
+			default: [],
+		},
+	},
+};
+</script>