Started migrating Forms

src/components/startseite/Forms.vue

@@ -1,11 +1,40 @@
 <script lang="ts" setup>
-import RitzenbergenLib from "../../ritzenbergenlib.ts";
+import RitzenbergenLib from "../../ritzenbergenlib";
 import FormResults from "../FormResults.vue";
 import { ref, defineProps } from "vue";
 import Modal from "../Modal.vue";
+import { Formular } from "../../dto/formular.dto";
+
+async function init() {
+	forms.value=await RitzenbergenLib.graphqlClient.request<Formular[]>(`
+{
+	formulare {
+		id
+		name
+		minitext
+		ispublic
+		fields {
+			id
+			formular
+			name
+			displayname
+			displayvalue
+			placeholder
+			type
+			title
+			required
+			maxlength
+			min
+			max
+			checked
+			value
+		}
+	}
+}
+`
+	);
+}
 
-const Formular = RitzenbergenLib.Formular;
-const Field = RitzenbergenLib.Field;
 const forms = ref([] as Formular[]);
 
 const props=defineProps({
@@ -16,11 +45,7 @@ const props=defineProps({
 		}
 });
 
-
+init();
-
-Formular.getForms().then((f) => {
-	forms.value = f;
-});
 
 function submit($event: Event) {
 	const url = new URL(

src/ritzenbergenlib.ts

@@ -1,5 +1,4 @@
 import $ from "jquery";
-import { ref } from "vue";
 import { GraphQLClient } from 'graphql-request';
 
 const graphqlClient = new GraphQLClient('http://localhost:3000/graphql', {
@@ -162,148 +161,7 @@ class Spiel {
 			});
 	}
 }
-class Formular {
-	public id: number;
-	public name: string;
-	public minitext: string;
-	public ispublic: boolean;
-	public multiple: boolean;
-	public fields=ref<Field[]>([]);
-	constructor(
-		id: number,
-		name: string,
-		minitext: string,
-		ispublic: boolean,
-		multiple: boolean
-	) {
-		this.id = id;
-		this.name = name;
-		this.minitext = minitext;
-		this.ispublic = ispublic;
-		this.multiple = multiple;
-		this.getFields().then((fields)=>this.fields.value=fields);
-	}
-	public static async getForms(): Promise<Formular[]> {
-		let forms: Formular[] = [];
-		try{
-		forms = await fetch(
-			RitzenbergenLib.api("/formulare/get_formulare.php"),
-			{
-				method: "GET",
-			}
-		)
-			.then((response) => response.json())
-			.then((result) =>
-				result.map(
-					(el: any) =>
-						new Formular(
-							el.id,
-							el.name,
-							el.minitext,
-							el.public==null?null:(el.public==1?true:false),
-							el.multiple==null?null:(el.multiple==1?true:false)
-						)
-				)
-			);
 
-		} catch(e){
-				console.warn(e);
-		}
-		return forms;
-	}
-	private async getFields(): Promise<Field[]> {
-		return fetch(
-			RitzenbergenLib.api(
-				"/formulare/get_fields.php?formular=" + this.id
-			),
-			{
-				method: "GET",
-			}
-		)
-			.then((response) => response.json())
-			.then((result) =>
-				result.map(
-					(el: any) =>
-						new Field(el.formular, el.name, el.value, el.type, {
-							id: el.id,
-							displayname: el.displayname,
-							displayvalue: el.displayvalue,
-							placeholder: el.placeholder,
-							title: el.title,
-							required: el.required==null?null:(el.required==1?true:false),
-							maxlength: el.maxlength,
-							min: el.min,
-							max: el.max,
-							multiple: el.multiple==null?null:(el.multiple==1?true:false),
-							checked: el.checked==null?null:(el.checked==1?true:false),
-						})
-				)
-			);
-	}
-}
-type FieldType =
-	| "text"
-	| "password"
-	| "number"
-	| "range"
-	| "date"
-	| "time"
-	| "checkbox"
-	| "radio"
-	| "color"
-	| "submit"
-	| "textarea";
-
-class Field {
-	id?: number;
-	formular: number;
-	name: string;
-	displayname?: string | null;
-	value: string;
-	displayvalue?: string | null;
-	placeholder?: string | null;
-	type: FieldType;
-	title?: string | null;
-	required: boolean;
-	maxlength?: number | null;
-	min?: number | null;
-	max?: number | null;
-	checked?: boolean | null;
-	constructor(
-		formular: number,
-		name: string,
-		value: string,
-		type: FieldType,
-		options?: {
-			id?: number;
-			displayname?: string | null;
-			displayvalue?: string | null;
-			placeholder?: string | null;
-			title?: string | null;
-			required?: boolean;
-			maxlength?: number | null;
-			min?: number | null;
-			max?: number | null;
-			multiple?: boolean | null;
-			checked?: boolean | null;
-		}
-	) {
-		this.id = options?.id;
-		this.formular = formular;
-		this.name = name;
-		this.displayname = options?.displayname ?? null;
-		this.value = value;
-		this.displayvalue = options?.displayvalue ?? null;
-		this.placeholder = options?.placeholder ?? null;
-		this.type = type;
-		this.title = options?.title ?? null;
-		this.required = options?.required ?? false;
-		this.maxlength = options?.maxlength ?? null;
-		this.min = options?.min ?? null;
-		this.max = options?.max ?? null;
-		this.checked = options?.checked ?? null;
-	}
-}
 
 export default {
 	RitzenbergenLib,
@@ -313,7 +171,5 @@ export default {
 	Ergebnis,
 	Tipp,
 	Spiel,
-	Formular,
-	Field,
 	graphqlClient
 };

src/views/Main.vue

@@ -52,7 +52,7 @@ async function loadImage(path: string) {
   
   <Events style="margin-top: 120px;"/>
 
-  <!-- <Forms/> -->
+  <Forms/>
       
 
   <!-- <Bilderbuch/> -->