Formulare im Admin Panel, Event Formular-Fremdschlüssel-Spalte hinzugefügt

src/components/FormResults.vue

@@ -1,31 +1,54 @@
 <script lang="ts" setup>
 import RitzenbergenLib from "../ritzenbergenlib.ts";
-import { defineProps, ref } from "vue";
+import { defineProps, ref, watchEffect } from "vue";
 
 const props = defineProps({
 	form: {
 		type: RitzenbergenLib.Formular,
 		required: true,
 	},
+	token: {
+		type: String,
+		required: false,
+		default: ""
+	}
 });
 
-const form = props.form;
+const form = ref(props.form);
 
-let results = ref([]);
-fetch(
-	RitzenbergenLib.RitzenbergenLib.api(
-		"/formulare/get_results.php?id=" + form.id
+
+const results = ref([]);
+const myfields = ref([]);
+watchEffect(() => {
+	fetch(
+		RitzenbergenLib.RitzenbergenLib.api(
+			"/formulare/get_results.php?id=" + form.value.id
+		)
 	)
-)
-	.then((res) => res.json())
-	.then((data) => {
-		results.value = data;
+		.then((res) => res.json())
+		.then((data) => {
+			if(data.error){
+				// Admin Rechte nötig
+				fetch(RitzenbergenLib.RitzenbergenLib.api("/admin/formulare/ergebnisse.php?formular="+form.value.id),{
+						headers: {
+								"Authorization":props.token
+						}
+				})
+				.then((res)=>res.json())
+				.then((data)=>{
+						results.value=data;
+				})
+			} else {
+				results.value = data;
+			}
+		});
+
+	myfields.value = [];
+	form.value.fields.forEach((field: RitzenbergenLib.Field) => {
+		if (myfields.value.find((el) => el.name == field.name) == undefined) {
+			myfields.value.push(field);
+		}
 	});
-const myfields = [];
-form.fields.forEach((field: RitzenbergenLib.Field) => {
-	if (myfields.find((el) => el.name == field.name) == undefined) {
-		myfields.push(field);
-	}
 });
 
 function prettyResult(result: any) {
@@ -36,7 +59,7 @@ function prettyResult(result: any) {
 		let tempresult = result.value;
 		let cancel = false;
 		tempresult = tempresult.map((el) => {
-			let field = form.fields.find((f) => f.value == el);
+			let field = form.value.fields.find((f) => f.value == el);
 			if (field == undefined) {
 				cancel = true;
 				return el;
@@ -48,7 +71,7 @@ function prettyResult(result: any) {
 		return result.value.join(", ");
 	}
 	if (result.type == "radio") {
-		let field = form.fields.find((f) => f.value == result.value);
+		let field = form.value.fields.find((f) => f.value == result.value);
 		if (field != undefined) {
 			return field.displayvalue ?? result.value;
 		}
@@ -58,7 +81,9 @@ function prettyResult(result: any) {
 </script>
 
 <template>
+		
 	<h1>Ergebnisse {{ form.name }}</h1>
+	<div class="main">
 	<table>
 		<thead>
 			<tr>
@@ -70,8 +95,23 @@ function prettyResult(result: any) {
 		</thead>
 		<tbody>
 			<tr v-for="(result, ri) in results" :key="ri">
-					<td v-for="(field, fi) in myfields" :key="fi" :style="field.type=='color'?{ 'backgroundColor': result.data.find((el) => el.name == field.name).value, width: '10px', height: '10px' }:{}">
-						<span v-if="field.type!='color'">{{
+				<td
+					v-if="result.data != undefined"
+					v-for="(field, fi) in myfields"
+					:key="fi"
+					:style="
+						field.type == 'color'
+							? {
+									backgroundColor: result.data.find(
+										(el) => el.name == field.name
+									).value,
+									width: '10px',
+									height: '10px',
+								}
+							: {}
+					"
+				>
+					<span v-if="field.type != 'color'">{{
 						prettyResult(
 							result.data.find(
 								(el) =>
@@ -80,17 +120,28 @@ function prettyResult(result: any) {
 							)
 						)
 					}}</span>
-						<span v-else ></span>
+					<span v-else></span>
 				</td>
 				<td>{{ result.timestamp }}</td>
 			</tr>
 		</tbody>
 	</table>
+	</div>
 </template>
 
 <style scoped>
 @import "../assets/css/bulitipp2.css";
 td {
-		min-width: 150px;
+	min-width: 150px;
+	min-height: 0;
+}
+tbody, table, .main{
+		overflow-x: scroll;
+}
+thead tr td {
+	background-color: #efefef;
+}
+h1 {
+		text-align: center;
 }
 </style>