Added jobRuns on the job page

resources/js/Components/Layout/Job/JobRuns/JobRunArtifacts.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import Separator from "@/Components/ui/separator/Separator.vue";
+import { JobRunArtifact } from "@/types/Jobs/job";
+
+defineProps<{
+    jobRun: JobRunArtifact;
+}>();
+</script>
+
+<template>
+    <ul>
+        <li v-for="artifact in jobRun.artifacts" :key="artifact.id">
+            <p>{{ artifact.name }}</p>
+            <p class="italic">{{ artifact.content }}</p>
+        </li>
+    </ul>
+</template>
+
+<style lang="scss" scoped>
+    ul {
+        list-style-type: circle;
+        padding-left: 1rem;
+    }
+</style>

resources/js/Components/Layout/Job/JobRuns/JobRunItem.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import AccordionContent from "@/Components/ui/accordion/AccordionContent.vue";
+import AccordionItem from "@/Components/ui/accordion/AccordionItem.vue";
+import AccordionTrigger from "@/Components/ui/accordion/AccordionTrigger.vue";
+import { JobRunArtifact } from "@/types/Jobs/job";
+import JobRunArtifacts from "./JobRunArtifacts.vue";
+
+defineProps<{
+    jobRun: JobRunArtifact;
+}>();
+</script>
+
+<template>
+    <AccordionItem :value="''+jobRun.id" :class="[jobRun.success ? 'bg-green-100' : 'bg-red-200', 'first:rounded-t last:rounded-b', 'px-3']">
+        <AccordionTrigger>
+            {{ new Date(Date.parse(jobRun.created_at)).toLocaleTimeString(undefined, {
+                    weekday: "long",
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric",
+                })
+            }}
+        </AccordionTrigger>
+        <AccordionContent>
+            <JobRunArtifacts :jobRun="jobRun" />
+        </AccordionContent>
+    </AccordionItem>
+</template>

resources/js/Components/Layout/Job/JobRuns/JobRuns.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Job, JobRunArtifact } from "@/types/Jobs/job";
+import JobRunItem from "./JobRunItem.vue";
+import Accordion from "@/Components/ui/accordion/Accordion.vue";
+import ScrollArea from "@/Components/ui/scroll-area/ScrollArea.vue";
+
+defineProps<{
+    job: Job;
+}>();
+</script>
+
+<template>
+    <h2>Ancien jobs</h2>
+    <ScrollArea class="min-h-[300px] max-h-[20vh] overflow-auto pr-2">
+        <Accordion type="multiple" collapsible>
+            <JobRunItem
+                :jobRun="jobRun"
+                v-for="jobRun in job.job_runs.sort((a, b) => {
+                    return (
+                        new Date(b.created_at).getTime() -
+                        new Date(a.created_at).getTime()
+                    );
+                })"
+                :key="jobRun.id"
+            />
+        </Accordion>
+    </ScrollArea>
+</template>