silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 106 Wiki Activity

Add date field

This commit is contained in:
philipp lang 2023-12-30 01:00:58 +01:00
parent 0fde33803b
commit c8bc69ae30
3 changed files with 86 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
app/Form/Fields/DateField.php Normal file
View File

@ -0,0 +1,34 @@
<?php
namespace App\Form\Fields;
use Faker\Generator;
class DateField extends Field
{
public static function name(): string
{
return 'Datum';
}
public static function meta(): array
{
return [
['key' => 'required', 'default' => false, 'rules' => ['required' => 'present|boolean'], 'label' => 'Erforderlich'],
['key' => 'max_today', 'default' => false, 'rules' => ['required' => 'present|boolean'], 'label' => 'Nur daten bis heute erlauben'],
];
}
public static function default(): string
{
return '';
}
public static function fake(Generator $faker): array
{
return [
'required' => $faker->boolean(),
'max_today' => $faker->boolean(),
];
}
}

28
resources/js/views/formtemplate/DateField.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<f-switch
id="fieldrequired"
:model-value="modelValue.required"
label="Erforderlich"
size="sm"
name="fieldrequired"
inline
@update:modelValue="$emit('update:modelValue', {...modelValue, required: $event})"
></f-switch>
<f-switch
id="max_today"
:model-value="modelValue.max_today"
label="Nur Daten bis heute erlauben"
size="sm"
name="max_today"
inline
@update:modelValue="$emit('update:modelValue', {...modelValue, max_today: $event})"
></f-switch>
</template>
<script setup>
const props = defineProps({
modelValue: {},
});
const emit = defineEmits(['update:modelValue']);
</script>

45
resources/js/views/formtemplate/FormBuilder.vue
View File

@ -2,50 +2,52 @@
<form class="grid gap-3 mt-4 grid-cols-[1fr_max-content] items-start" @submit.prevent="submit">
<div class="grid gap-3">
<slot name="meta"></slot>
<asideform v-if="singleSection !== null"
:heading="`Sektion ${singleSection.index !== null ? 'bearbeiten' : 'erstellen'}`"
@close="singleSection = null" @submit="storeSection">
<f-text :id="`sectionform-name`" v-model="singleSection.model.name" label="Name"
:name="`sectionform-name`"></f-text>
<f-textarea :id="`sectionform-intro`" v-model="singleSection.model.intro" label="Einleitung"
:name="`sectionform-intro`"></f-textarea>
<asideform v-if="singleSection !== null" :heading="`Sektion ${singleSection.index !== null ? 'bearbeiten' : 'erstellen'}`" @close="singleSection = null" @submit="storeSection">
<f-text :id="`sectionform-name`" v-model="singleSection.model.name" label="Name" :name="`sectionform-name`"></f-text>
<f-textarea :id="`sectionform-intro`" v-model="singleSection.model.intro" label="Einleitung" :name="`sectionform-intro`"></f-textarea>
</asideform>
<asideform v-if="singleSection === null && singleField === null" heading="Feld erstellen" :closeable="false"
:storeable="false" @submit="storeField">
<asideform v-if="singleSection === null && singleField === null" heading="Feld erstellen" :closeable="false" :storeable="false" @submit="storeField">
<div class="mt-3 grid gap-3">
<a v-for="(field, index) in props.meta.fields" :key="index"
class="py-2 px-3 border rounded bg-zinc-800 hover:bg-zinc-700 transition" href="#"
@click.prevent="addField(field)">
<a v-for="(field, index) in props.meta.fields" :key="index" class="py-2 px-3 border rounded bg-zinc-800 hover:bg-zinc-700 transition" href="#" @click.prevent="addField(field)">
<span v-text="field.name"></span>
</a>
</div>
</asideform>
<asideform v-if="singleSection === null && singleField !== null"
:heading="`Feld ${singleField.index !== null ? 'bearbeiten' : 'erstellen'}`" @close="singleField = null"
@submit="storeField">
<asideform
v-if="singleSection === null && singleField !== null"
:heading="`Feld ${singleField.index !== null ? 'bearbeiten' : 'erstellen'}`"
@close="singleField = null"
@submit="storeField"
>
<f-text id="fieldname" v-model="singleField.model.name" label="Name" size="sm" name="fieldname"></f-text>
<column-selector v-model="singleField.model.columns"></column-selector>
<component :is="fields[singleField.model.type]" v-model="singleField.model"></component>
</asideform>
</div>
<ui-box heading="Vorschau" container-class="grid gap-3" class="w-[800px]">
<event-form editable
<event-form
editable
style="--primary: hsl(181, 75%, 26%); --secondary: hsl(181, 75%, 35%); --font: hsl(181, 84%, 78%); --circle: hsl(181, 86%, 16%)"
:value="previewString" @editSection="editSection($event.detail[0])" @addSection="addSection"
:value="previewString"
@editSection="editSection($event.detail[0])"
@addSection="addSection"
@editField="editField($event.detail[0], $event.detail[1])"
@deleteField="deleteField($event.detail[0], $event.detail[1])"
@deleteSection="deleteSection($event.detail[0])" @active="updateActive($event.detail[0])"></event-form>
@deleteSection="deleteSection($event.detail[0])"
@active="updateActive($event.detail[0])"
></event-form>
</ui-box>
</form>
</template>
<script setup>
import { watch, computed, ref } from 'vue';
import { snakeCase } from 'change-case';
import {watch, computed, ref} from 'vue';
import {snakeCase} from 'change-case';
import '!/eventform/dist/main.js';
import Asideform from './Asideform.vue';
import TextareaField from './TextareaField.vue';
import TextField from './TextField.vue';
import DateField from './DateField.vue';
import DropdownField from './RadioField.vue';
import RadioField from './RadioField.vue';
import CheckboxField from './CheckboxField.vue';
@ -72,6 +74,7 @@ const emit = defineEmits(['update:modelValue']);
const fields = {
TextareaField: TextareaField,
TextField: TextField,
DateField: DateField,
DropdownField: DropdownField,
RadioField: RadioField,
CheckboxField: CheckboxField,
@ -80,7 +83,7 @@ const fields = {
function editSection(sectionIndex) {
singleSection.value = {
model: { ...inner.value.sections[sectionIndex] },
model: {...inner.value.sections[sectionIndex]},
index: sectionIndex,
};
}