Add date field
This commit is contained in:
parent
0fde33803b
commit
c8bc69ae30
|
@ -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(),
|
||||
];
|
||||
}
|
||||
}
|
|
@ -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>
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue