185 lines
4.1 KiB
Vue
185 lines
4.1 KiB
Vue
<script lang="ts" setup>
|
|
import RitzenbergenLib from "../../ritzenbergenlib";
|
|
import FormResults from "../FormResults.vue";
|
|
import { ref } from "vue";
|
|
import Modal from "../Modal.vue";
|
|
import { Formular } from "../../dto/formular.dto";
|
|
|
|
async function init() {
|
|
forms.value=await RitzenbergenLib.graphqlClient.request<{formulare: Formular[] }>(`
|
|
{
|
|
formulare {
|
|
id
|
|
name
|
|
minitext
|
|
ispublic
|
|
fields {
|
|
id
|
|
name
|
|
displayname
|
|
displayvalue
|
|
placeholder
|
|
type
|
|
title
|
|
required
|
|
maxlength
|
|
min
|
|
max
|
|
checked
|
|
value
|
|
}
|
|
}
|
|
}
|
|
`
|
|
).then(data=>data.formulare);
|
|
|
|
console.log(forms.value);
|
|
}
|
|
|
|
const forms = ref([] as Formular[]);
|
|
|
|
const props=defineProps({
|
|
formid: {
|
|
type: [Number, null],
|
|
required: false,
|
|
default: null
|
|
}
|
|
});
|
|
|
|
init();
|
|
|
|
function submit($event: Event) {
|
|
const url = new URL(
|
|
RitzenbergenLib.RitzenbergenLib.api("/formulare/submit.php")
|
|
);
|
|
const formData = new FormData(<HTMLFormElement>$event.target);
|
|
fetch(url.toString(), {
|
|
method: "POST",
|
|
body: formData
|
|
}).then(() => {
|
|
init();
|
|
values.value={};
|
|
});
|
|
}
|
|
|
|
const modalOpened=ref<boolean>(false);
|
|
|
|
const openedForm=ref<Formular|null>(null);
|
|
|
|
function openModal(form: Formular){
|
|
openedForm.value=form;
|
|
modalOpened.value=true;
|
|
}
|
|
|
|
const values=ref({});
|
|
</script>
|
|
<template>
|
|
<Modal v-if="openedForm && openedForm.ispublic" v-show="modalOpened" @closemodal="modalOpened=false">
|
|
<FormResults v-if="modalOpened" :form="openedForm"/>
|
|
</Modal>
|
|
<section ref="anmeldeformular" id="anmeldeformular">
|
|
<section class="form5 cid-u6k7q0BfGa">
|
|
<div class="container" v-for="(form, i) in forms" :key="i">
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 content-head">
|
|
<div class="mbr-section-head mb-5">
|
|
<h3
|
|
class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"
|
|
>
|
|
<strong>{{ form.name }}</strong>
|
|
</h3>
|
|
<br />
|
|
<h5 style="text-align: center">
|
|
<b @click="openModal(form)" class="fakelink" v-if="form.ispublic">{{ form.minitext }}
|
|
</b> <b v-else>{{ form.minitext }}</b> <br />
|
|
</h5>
|
|
<br />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div
|
|
class="col-lg-8 mx-auto mbr-form"
|
|
data-form-type="formoid"
|
|
>
|
|
<form
|
|
class="mbr-form form-with-styler"
|
|
data-form-title="Form Name"
|
|
:data-formid="form.id"
|
|
:data-i="i"
|
|
@submit.prevent="submit"
|
|
>
|
|
<div v-for="(field, j) in form.fields" :key="j">
|
|
<label
|
|
v-if="field.placeholder == null"
|
|
:for="'field-' + field.id"
|
|
>
|
|
{{
|
|
field.displayvalue ?? field.displayname ?? field.name
|
|
}}:
|
|
<span v-if="field.type == 'range'"
|
|
><br />{{ values[field.id] }}</span
|
|
>
|
|
</label>
|
|
<FormKit
|
|
v-if="field.type != 'textarea'"
|
|
:id="'field-' + field.id"
|
|
:type="field.type"
|
|
:name="field.name"
|
|
:placeholder="field.placeholder"
|
|
:required="field.required"
|
|
:maxlength="field.maxlength"
|
|
:min="field.min"
|
|
:max="field.max"
|
|
:checked="field.checked"
|
|
:title="field.title"
|
|
:value="field.value"
|
|
v-model="values[field.id]"
|
|
|
|
/>
|
|
<textarea
|
|
v-else
|
|
:id="'field-' + field.id"
|
|
:name="field.name"
|
|
:placeholder="field.placeholder"
|
|
:required="field.required"
|
|
:maxlength="field.maxlength"
|
|
:title="field.title"
|
|
:value="field.value"
|
|
></textarea>
|
|
|
|
</div>
|
|
|
|
<div
|
|
class="col-lg-12 col-md-12 col-sm-12 align-center mbr-section-btn"
|
|
>
|
|
<button
|
|
type="submit"
|
|
class="btn btn-primary display-7 formular-submit-button"
|
|
>
|
|
Absenden
|
|
</button>
|
|
</div>
|
|
<input type="hidden" :value="form.id" name="internalformid" />
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</template>
|
|
<style scoped>
|
|
label {
|
|
margin-right: 10px;
|
|
}
|
|
.fakelink{
|
|
color: blue;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|