Add ability to edit forms and add new fields

This commit adds the ability to edit and modify existing forms.
On the technical side, it also adds a new reusable validation Facade which helps reduce duplicated code.
This commit is contained in:
2020-07-15 06:48:49 +01:00
parent 1f50faaea7
commit bca6020ab0
16 changed files with 337 additions and 51 deletions

View File

@@ -0,0 +1,103 @@
@extends('adminlte::page')
@section('title', 'Raspberry Network | Edit From')
@section('content_header')
<h4>Administration / Forms / Editor</h4>
@stop
@section('js')
<script src="/js/formeditor.js"></script>
<x-global-errors></x-global-errors>
@stop
@section('content')
<div class="row mb-5">
<div class="col">
</div>
<div class="col text-center">
<img src="/img/editor.svg" width="250px" alt="Editor illustration" class="img-responsive" />
</div>
<div class="col">
</div>
</div>
<div class="row">
<div class="col">
</div>
<div class="col">
<form id="editForm" method="POST" action="{{ route('updateForm', ['form' => $formID]) }}">
@csrf
@method('PATCH')
<div class="card">
<div class="card-header">
<h4>Editing {{ $title }}...</h4>
</div>
<div class="card-body">
@foreach($formStructure['fields'] as $fieldName => $field)
<div class="form-group mt-4 mb-4">
<input autocomplete="false" type="text" id="{{ $fieldName }}" class="form-control" name="{{ $fieldName }}[]" value="{{ $field['title'] }}" />
<select class="custom-select" id="{{ $fieldName }}-type" name="{{ $fieldName }}[]">
<option value="nil" disabled>Choose a type</option>
<option value="textbox" {{ ($field['type'] == 'textbox' ? 'selected' : '') }}>Textbox</option>
<option value="textarea" {{ ($field['type'] == 'textarea' ? 'selected' : '') }}>Multi line answer</option>
<option value="checkbox" {{ ($field['type'] == 'checkbox' ? 'selected' : '') }}>Checkbox</option>
</select>
</div>
@endforeach
<div class="field-container mt-4 mb-4">
</div>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-warning ml-2" onclick="$('#editForm').submit()"><i class="fas fa-save"></i> Save & Quit</button>
<button type="button" class="btn btn-primary ml-2" id="add"><i class="fas fa-plus"></i> New field</button>
</div>
</div>
</form>
</div>
<div class="col">
</div>
</div>
@stop

View File

@@ -66,8 +66,8 @@
<div class="card-footer text-center">
<button type="button" class="btn btn-success ml-2" onlick="window.location.href='{{ route('showForms') }}'"><i class="fas fa-chevron-left"></i> Go back</button>
<button type="button" class="btn btn-warning ml-2"><i class="far fa-edit"></i> Edit</button>
<button type="button" class="btn btn-success ml-2" onclick="window.location.href='{{ route('showForms') }}'"><i class="fas fa-chevron-left"></i> Go back</button>
<button type="button" class="btn btn-warning ml-2" onclick="window.location.href='{{ route('editForm', ['form' => $formID]) }}'"><i class="far fa-edit"></i> Edit</button>
</div>
</div>

View File

@@ -38,6 +38,7 @@
<th>#</th>
<th>Form Title</th>
<th>Created On</th>
<th>Updated On</th>
<th>Actions</th>
</tr>
@@ -51,6 +52,7 @@
<td>{{$form->id}}</td>
<td>{{$form->formName}}</td>
<td>{{$form->created_at}}</td>
<td>{{ $form->updated_at }}</td>
<td>
<form style="display: inline-block; white-space: nowrap" action="{{route('destroyForm', ['id' => $form->id])}}" method="POST">