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

Add intro to fields
continuous-integration/drone/push Build is failing Details

This commit is contained in:
philipp lang 2024-06-07 00:48:54 +02:00
parent 2b976ac03e
commit 7e152c017a
4 changed files with 109 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/Form/Fields/Field.php
View File

@ -29,6 +29,7 @@ abstract class Field extends Data
public bool $forMembers;
public ?SpecialType $specialType = null;
public ?string $hint;
public ?string $intro;
/** @var mixed */
public $value;

58
database/migrations/2024_06_07_003232_add_intro_field.php Normal file
View File

@ -0,0 +1,58 @@
<?php
use App\Form\Models\Form;
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Collection;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
foreach (DB::table('forms')->get() as $event) {
$config = json_decode($event->config);
$config->sections = array_map(function ($section) {
/** @var Collection<int, mixed> */
$fields = $section->fields;
$section->fields = collect($fields)->map(function ($field) {
$field->intro = null;
return $field;
})->all();
return $section;
}, $config->sections);
DB::table('forms')->where('id', $event->id)->update(['config' => json_encode($config)]);
}
foreach (DB::table('formtemplates')->get() as $event) {
$config = json_decode($event->config);
$config->sections = array_map(function ($section) {
/** @var Collection<int, mixed> */
$fields = $section->fields;
$section->fields = collect($fields)->map(function ($field) {
$field->intro = null;
return $field;
})->all();
return $section;
}, $config->sections);
DB::table('formtemplates')->where('id', $event->id)->update(['config' => json_encode($config)]);
}
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
//
}
};

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

@ -2,70 +2,78 @@
<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 && singleSection.mode === 'edit'"
<asideform
v-if="singleSection !== null && singleSection.mode === 'edit'"
: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>
@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 && singleSection.mode === 'reorder'" heading="Felder ordnen"
@close="singleSection = null" @submit="storeSection">
<draggable item-key="key" :component-data="{ class: 'mt-3 grid gap-3' }" v-model="singleSection.model.fields">
<template #item="{ element }">
<div
class="py-2 px-3 border rounded bg-zinc-800 hover:bg-zinc-700 transition justify-between flex items-center">
<asideform v-if="singleSection !== null && singleSection.mode === 'reorder'" heading="Felder ordnen" @close="singleSection = null" @submit="storeSection">
<draggable v-model="singleSection.model.fields" item-key="key" :component-data="{class: 'mt-3 grid gap-3'}">
<template #item="{element}">
<div class="py-2 px-3 border rounded bg-zinc-800 hover:bg-zinc-700 transition justify-between flex items-center">
<span v-text="element.name"></span>
<a href="#">
<ui-sprite class="w-5 h-5" v-tooltip="`Umordnen`" src="menu"></ui-sprite>
<ui-sprite v-tooltip="`Umordnen`" class="w-5 h-5" src="menu"></ui-sprite>
</a>
</div>
</template>
</draggable>
</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>
<f-textarea id="intro" v-model="singleField.model.intro" label="Einleitung" size="sm" name="intro"></f-textarea>
<column-selector v-model="singleField.model.columns"></column-selector>
<component :is="fields[singleField.model.type]" v-model="singleField.model" :payload="inner.sections"
:meta="props.meta"></component>
<f-select id="nami_type" v-model="singleField.model.nami_type" :options="meta.namiTypes" label="NaMi-Feld"
size="sm" name="nami_type"></f-select>
<f-select id="special_type" v-model="singleField.model.special_type" :options="meta.specialTypes"
label="Bedeutung" size="sm" name="special_type"></f-select>
<component :is="fields[singleField.model.type]" v-model="singleField.model" :payload="inner.sections" :meta="props.meta"></component>
<f-select id="nami_type" v-model="singleField.model.nami_type" :options="meta.namiTypes" label="NaMi-Feld" size="sm" name="nami_type"></f-select>
<f-select id="special_type" v-model="singleField.model.special_type" :options="meta.specialTypes" label="Bedeutung" size="sm" name="special_type"></f-select>
<f-textarea id="hint" v-model="singleField.model.hint" label="Hinweis" size="sm" name="hint"></f-textarea>
<f-switch v-show="singleField.model.nami_type === null" id="for_members"
v-model="singleField.model.for_members" label="Für Unter-Mitglieder zusätzlich abfragen" size="sm"
name="for_members"></f-switch>
<f-switch
v-show="singleField.model.nami_type === null"
id="for_members"
v-model="singleField.model.for_members"
label="Für Unter-Mitglieder zusätzlich abfragen"
size="sm"
name="for_members"
></f-switch>
</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%)"
:base-url="meta.base_url" :value="previewString" @editSection="editSection($event.detail[0])"
@addSection="addSection" @editField="editField($event.detail[0], $event.detail[1])"
:base-url="meta.base_url"
: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])"
@editFields="startReordering($event.detail[0])" @deleteSection="deleteSection($event.detail[0])"
@active="updateActive($event.detail[0])"></event-form>
@editFields="startReordering($event.detail[0])"
@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 '!/adrema-form/dist/main.js';
import Asideform from './Asideform.vue';
import TextareaField from './TextareaField.vue';
@ -87,7 +95,7 @@ const active = ref(null);
async function onReorder() {
var order = this.inner.map((f) => f.id);
this.loading = true;
this.inner = (await this.axios.patch(`/mediaupload/${this.parentName}/${this.parentId}/${this.collection}`, { order })).data;
This.inner = (await this.axios.patch(`/mediaupload/${this.parentName}/${this.parentId}/${this.collection}`, {order})).data;
this.loading = false;
}
@ -118,7 +126,7 @@ const fields = {
function editSection(sectionIndex) {
singleSection.value = {
model: { ...inner.value.sections[sectionIndex] },
model: {...inner.value.sections[sectionIndex]},
index: sectionIndex,
mode: 'edit',
};
@ -126,7 +134,7 @@ function editSection(sectionIndex) {
function startReordering(index) {
singleSection.value = {
model: { ...inner.value.sections[index] },
model: {...inner.value.sections[index]},
index: index,
mode: 'reorder',
};

3
tests/Feature/Form/FormtemplateStoreActionTest.php
View File

@ -22,7 +22,7 @@ class FormtemplateStoreActionTest extends FormTestCase
$this->login()->loginNami()->withoutExceptionHandling();
FormtemplateRequest::new()->name('testname')->sections([
FormtemplateSectionRequest::new()->name('Persönliches')->fields([
$this->textField('a')->name('lala1')->columns(['mobile' => 2, 'tablet' => 2, 'desktop' => 1])->required(false)->hint('hhh'),
$this->textField('a')->name('lala1')->columns(['mobile' => 2, 'tablet' => 2, 'desktop' => 1])->required(false)->hint('hhh')->intro('intro'),
$this->textareaField('b')->name('lala2')->required(false)->specialType(SpecialType::FIRSTNAME)->rows(10),
]),
])->fake();
@ -34,6 +34,7 @@ class FormtemplateStoreActionTest extends FormTestCase
$this->assertEquals('lala1', $formtemplate->config->sections->get(0)->fields->get(0)->name);
$this->assertNull($formtemplate->config->sections->get(0)->fields->get(0)->specialType);
$this->assertEquals('hhh', $formtemplate->config->sections->get(0)->fields->get(0)->hint);
$this->assertEquals('intro', $formtemplate->config->sections->get(0)->fields->get(0)->intro);
$this->assertInstanceOf(TextField::class, $formtemplate->config->sections->get(0)->fields->get(0));
$this->assertInstanceOf(TextareaField::class, $formtemplate->config->sections->get(0)->fields->get(1));
$this->assertEquals(false, $formtemplate->config->sections->get(0)->fields->get(1)->required);