Add copy to clipboard button in Diagnostics page.

resources/js/components/diagnostics/ConfigurationsDiagnostics.vue

@@ -1,6 +1,6 @@
 <template>
 	<Panel header="Configuration" v-if="configs" class="border-none max-w-7xl mx-auto">
-		<pre><div v-for="config in configs" class=" text-muted-color font-mono text-sm">{{ config }}</div>
+		<pre id="ConfigurationData"><div v-for="config in configs" class=" text-muted-color font-mono text-sm">{{ config }}</div>
 		</pre>
 	</Panel>
 </template>
@@ -11,9 +11,14 @@ import DiagnosticsService from "@/services/diagnostics-service";
 
 const configs = ref<string[] | undefined>(undefined);
 
+const emits = defineEmits<{
+	loaded: [];
+}>();
+
 function load() {
 	DiagnosticsService.config().then((response) => {
 		configs.value = response.data;
+		emits("loaded");
 	});
 }
 

resources/js/components/diagnostics/ErrorsDiagnostics.vue

@@ -1,5 +1,5 @@
 <template>
-	<Panel header="Errors" class="border-none max-w-7xl mx-auto">
+	<Panel header="Errors" class="border-none max-w-7xl mx-auto" :pt:contentcontainer:id="'ErrorsData'">
 		<div v-if="!errors" class="text-sky-400 font-bold">Loading...</div>
 		<div v-else v-for="error in errors" class="flex">
 			<div class="w-24 capitalize" :class="getCss(error.type)">{{ error.type }}</div>
@@ -14,9 +14,14 @@ import DiagnosticsService from "@/services/diagnostics-service";
 
 const errors = ref<App.Http.Resources.Diagnostics.ErrorLine[] | undefined>(undefined);
 
+const emits = defineEmits<{
+	loaded: [];
+}>();
+
 function load() {
 	DiagnosticsService.errors().then((response) => {
 		errors.value = response.data;
+		emits("loaded");
 	});
 }
 

resources/js/components/diagnostics/InfoDiagnostics.vue

@@ -1,6 +1,6 @@
 <template>
 	<Panel header="Info" v-if="infos" class="border-none max-w-7xl mx-auto">
-		<pre><div v-for="info in infos" class=" text-muted-color font-mono text-sm">{{ info }}</div>
+		<pre id="InfoData"><div v-for="info in infos" class=" text-muted-color font-mono text-sm">{{ info }}</div>
 		</pre>
 	</Panel>
 </template>
@@ -10,10 +10,14 @@ import Panel from "primevue/panel";
 import DiagnosticsService from "@/services/diagnostics-service";
 
 const infos = ref<string[] | undefined>(undefined);
+const emits = defineEmits<{
+	loaded: [];
+}>();
 
 function load() {
 	DiagnosticsService.info().then((response) => {
 		infos.value = response.data;
+		emits("loaded");
 	});
 }
 

resources/js/views/Diagnostics.vue

@@ -2,23 +2,23 @@
 	<Toolbar class="w-full border-0 h-14">
 		<template #start>
 			<Button @click="togglableStore.toggleLeftMenu" icon="pi pi-bars" class="mr-2 border-none" severity="secondary" text />
-			<!-- <router-link :to="{ name: 'gallery' }">
-				<Button icon="pi pi-angle-left" class="mr-2" severity="secondary" text />
-			</router-link> -->
 		</template>
 
 		<template #center>
 			{{ $t("lychee.DIAGNOSTICS") }}
 		</template>
 
-		<template #end> </template>
+		<template #end>
+			<Button :disabled="!canCopy" text aria-label="Copy" icon="pi pi-copy" v-tooltip="'Copy diagnostics to clipboard'" @click="copy" />
+		</template>
 	</Toolbar>
-	<ErrorsDiagnotics />
-	<InfoDiagnostics v-if="user?.id" />
+	<ErrorsDiagnotics @loaded="errorLoaded = true" />
+	<InfoDiagnostics v-if="user?.id" @loaded="infoLoaded = true" />
 	<SpaceDiagnostics v-if="user?.id" />
-	<ConfigurationsDiagnostics v-if="user?.id" />
+	<ConfigurationsDiagnostics v-if="user?.id" @loaded="configurationLoaded = true" />
 </template>
 <script setup lang="ts">
+import { ref, computed } from "vue";
 import Toolbar from "primevue/toolbar";
 import Button from "primevue/button";
 import ConfigurationsDiagnostics from "@/components/diagnostics/ConfigurationsDiagnostics.vue";
@@ -28,9 +28,35 @@ import SpaceDiagnostics from "@/components/diagnostics/SpaceDiagnostics.vue";
 import { useAuthStore } from "@/stores/Auth";
 import { storeToRefs } from "pinia";
 import { useTogglablesStateStore } from "@/stores/ModalsState";
+import { useToast } from "primevue/usetoast";
 
 const authStore = useAuthStore();
 const { user } = storeToRefs(authStore);
 authStore.getUser();
 const togglableStore = useTogglablesStateStore();
+
+const toast = useToast();
+const errorLoaded = ref<boolean>(false);
+const infoLoaded = ref<boolean>(false);
+const configurationLoaded = ref<boolean>(false);
+
+const canCopy = computed(() => errorLoaded.value && infoLoaded.value && configurationLoaded.value);
+
+function copy() {
+	const errors = document.getElementById("ErrorsData");
+	const info = document.getElementById("InfoData");
+	const Configuration = document.getElementById("ConfigurationData");
+	const errorLines = errors?.innerText.split("\n") ?? [];
+	let errorText = "";
+	for (let i = 0; i < errorLines.length; i++) {
+		errorText += `${errorLines[i].padEnd(7)}: ${errorLines[i + 1]}\n`;
+		i += 1;
+	}
+
+	const toClipBoard = `Errors:\n${"-".repeat(20)}\n${errorText}\n\n\nInfo:\n${"-".repeat(20)}\n${info?.innerText}\n\n\nConfig:\n${"-".repeat(20)}\n${Configuration?.innerText}`;
+
+	navigator.clipboard
+		.writeText(toClipBoard)
+		.then(() => toast.add({ severity: "info", summary: "Info", detail: "Diagnostic copied to clipboard", life: 3000 }));
+}
 </script>

resources/js/views/Error.vue

@@ -34,7 +34,7 @@
 	</template>
 </template>
 <script setup lang="ts">
-import { type Ref, ref } from "vue";
+import { ref } from "vue";
 import Divider from "primevue/divider";
 import Message from "primevue/message";
 import Panel from "primevue/panel";