Browse Source

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.
l10n_master 0.5.0
Miguel N. 10 months ago
parent
commit
bca6020ab0
  1. 1
      .gitignore
  2. 5
      .phive/phars.xml
  3. 14
      app/Facades/ContextAwareValidation.php
  4. 72
      app/Helpers/ContextAwareValidator.php
  5. 72
      app/Http/Controllers/FormController.php
  6. 2
      app/Policies/FormPolicy.php
  7. 34
      app/Providers/ContextAwareValidatorProvider.php
  8. 2
      config/app.php
  9. 1
      public/img/editor.svg
  10. 1
      public/js/formbuilder.js
  11. 19
      public/js/formeditor.js
  12. 103
      resources/views/dashboard/administration/editform.blade.php
  13. 4
      resources/views/dashboard/administration/formpreview.blade.php
  14. 2
      resources/views/dashboard/administration/forms.blade.php
  15. 48
      resources/views/dashboard/user/viewapp.blade.php
  16. 8
      routes/web.php

1
.gitignore

@ -4,6 +4,7 @@
/public/storage
/storage/*.key
/vendor
/tools
.env
.env.backup
.phpunit.result.cache

5
.phive/phars.xml

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<phive xmlns="https://phar.io/phive">
<phar name="phpunit" version="^9.2.5" installed="9.2.5" location="./tools/phpunit" copy="false"/>
<phar name="php-cs-fixer" version="^2.16.4" installed="2.16.4" location="./tools/php-cs-fixer" copy="false"/>
</phive>

14
app/Facades/ContextAwareValidation.php

@ -0,0 +1,14 @@
<?php
namespace App\Facades;
use Illuminate\Support\Facades\Facade;
class ContextAwareValidation extends Facade
{
protected static function getFacadeAccessor()
{
return 'contextAwareValidator';
}
}

72
app/Helpers/ContextAwareValidator.php

@ -0,0 +1,72 @@
<?php
namespace App\Helpers;
use Illuminate\Support\Facades\Validator;
use Illuminate\Support\Collection;
class ContextAwareValidator
{
/**
* The getValidator() method will take an array of fields from the request body, iterates through them,
* and dynamically adds validation rules for them. Depending on parameters, it may or may not generate
* a form structure for rendering purposes.
*
* This method is mostly meant by internal use by means of static proxies (Facades), in order to reduce code repetition;
* Using it outside it's directed scope may cause unexpected results; For instance, the method expects inputs to be in array format, e.g. myFieldNameID1[],
* myFieldNameID2[], and so on and so forth.
*
* This isn't checked by the code yet, but if you're implementing it this way in the HTML markup, make sure it's consistent (e.g. use a loop).
*
* P.S This method automatically ignores the CSRF token for validation.
*
* @param array $fields The request form fields
* @param bool $generateStructure Whether to incldue a JSON-ready form structure for rendering
* @param bool $includeFormName Whether to include formName in the list of validation rules
* @return Validator|Collection A validator instance you can use to check for validity, or a Collection with a validator and structure (validator, structure)
*/
public function getValidator(array $fields, bool $generateStructure = false, bool $includeFormName = false)
{
$formStructure = [];
$validator = [];
$excludedNames = [
'_token',
'_method',
'formName'
];
if ($includeFormName)
{
$validator['formName'] = 'required|string|max:100';
}
foreach ($fields as $fieldName => $field)
{
if(!in_array($fieldName, $excludedNames))
{
$validator[$fieldName . ".0"] = 'required|string';
$validator[$fieldName . ".1"] = 'required|string';
if ($generateStructure)
{
$formStructure['fields'][$fieldName]['title'] = $field[0];
$formStructure['fields'][$fieldName]['type'] = $field[1];
}
}
}
$validatorInstance = Validator::make($fields, $validator);
return ($generateStructure) ?
collect([
'validator' => $validatorInstance,
'structure' => json_encode($formStructure)
])
: $validatorInstance;
}
}

72
app/Http/Controllers/FormController.php

@ -7,6 +7,8 @@ use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;
use Illuminate\Support\Facades\Auth;
use ContextAwareValidator;
class FormController extends Controller
{
@ -29,39 +31,17 @@ class FormController extends Controller
{
$this->authorize('create', Form::class);
$fields = $request->all();
$formFields = $request->all();
$formStructure = [];
$excludedNames = [
'_token',
'formName' // It's added outside the loop. Not excluding causes unwanted duplication.
];
$validator = [
'formName' => 'required|string|max:100'
];
$contextValidation = ContextAwareValidator::getValidator($fields, true, true);
foreach ($formFields as $fieldName => $field)
if (!$contextValidation->get('validator')->fails())
{
if(!in_array($fieldName, $excludedNames))
{
$validator[$fieldName . ".0"] = 'required|string';
$validator[$fieldName . ".1"] = 'required|string';
$formStructure['fields'][$fieldName]['title'] = $field[0];
$formStructure['fields'][$fieldName]['type'] = $field[1];
}
}
$validation = Validator::make($formFields, $validator);
if (!$validation->fails())
{
$storableFormStructure = json_encode($formStructure);
$storableFormStructure = $contextValidation->get('structure');
Form::create(
[
'formName' => $formFields['formName'],
'formName' => $fields['formName'],
'formStructure' => $storableFormStructure,
'formStatus' => 'ACTIVE'
]
@ -71,7 +51,7 @@ class FormController extends Controller
return redirect()->to(route('showForms'));
}
$request->session()->flash('errors', $validation->errors()->getMessages());
$request->session()->flash('errors', $contextValidation->get('validator')->errors()->getMessages());
return redirect()->back();
}
@ -107,7 +87,41 @@ class FormController extends Controller
{
return view('dashboard.administration.formpreview')
->with('form', json_decode($form->formStructure, true))
->with('title', $form->formName);
->with('title', $form->formName)
->with('formID', $form->id);
}
public function edit(Request $request, Form $form)
{
return view('dashboard.administration.editform')
->with('formStructure', json_decode($form->formStructure, true))
->with('title', $form->formName)
->with('formID', $form->id);
}
public function update(Request $request, Form $form)
{
$contextValidation = ContextAwareValidator::getValidator($request->all(), true);
$this->authorize('update', $form);
if (!$contextValidation->get('validator')->fails())
{
// Add the new structure into the form. New, subsquent fields will be identified by the "new" prefix
// This prefix doesn't actually change the app's behavior when it receives applications.
// Additionally, old applications won't of course display new and updated fields, because we can't travel into the past and get data for them
$form->formStructure = $contextValidation->get('structure');
$form->save();
$request->session()->flash('success', 'Hooray! Your form was updated. New applications for it\'s vacancy will use it.');
}
else
{
$request->session()->flash('errors', $contextValidation->get('validator')->errors()->getMessages());
}
return redirect()->to(route('previewForm', ['form' => $form->id]));
}
}

2
app/Policies/FormPolicy.php

@ -57,7 +57,7 @@ class FormPolicy
*/
public function update(User $user, Form $form)
{
// unused
return $user->can('admin.hiring.forms');
}
/**

34
app/Providers/ContextAwareValidatorProvider.php

@ -0,0 +1,34 @@
<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use App;
class ContextAwareValidatorProvider extends ServiceProvider
{
/**
* Register services.
*
* @return void
*/
public function register()
{
//
}
/**
* Bootstrap services.
*
* @return void
*/
public function boot()
{
App::bind('contextAwareValidator', function(){
return new App\Helpers\ContextAwareValidator();
});
}
}

2
config/app.php

@ -175,6 +175,7 @@ return [
App\Providers\AuthServiceProvider::class,
App\Providers\UUIDConversionProvider::class,
App\Providers\IPInfoProvider::class,
App\Providers\ContextAwareValidatorProvider::class,
// App\Providers\BroadcastServiceProvider::class,
App\Providers\EventServiceProvider::class,
App\Providers\RouteServiceProvider::class,
@ -234,6 +235,7 @@ return [
'UUID' => App\Facades\UUID::class,
'IP' => App\Facades\IP::class,
'Markdown' => GrahamCampbell\Markdown\Facades\Markdown::class,
'ContextAwareValidator' => App\Facades\ContextAwareValidation::class
],

1
public/img/editor.svg

@ -0,0 +1 @@
<svg id="a5860ba0-ef67-4914-ac96-07e2ebcccb4f" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1095.74023" height="664.03433" viewBox="0 0 1095.74023 664.03433"><title>abstract</title><rect x="701" y="661" width="394.74023" height="2" fill="#3f3d56"/><polygon points="474 429 474 216 718 216 718 0 0 0 0 643 718 643 718 429 474 429" fill="#3f3d56"/><polygon points="718 216 718 0 469 0 469 213 249 213 249 0 0 0 0 216 225 216 225 429 0 429 0 643 476 643 476 429 474 429 474 216 718 216" opacity="0.1"/><path d="M224.12988,117.98284a172.00382,172.00382,0,0,1-172,172v-172Z" transform="translate(-52.12988 -117.98284)" fill="#6c63ff"/><path d="M132.12988,117.98284a80.00357,80.00357,0,0,1-80,80v44a124.00426,124.00426,0,0,0,124-124Z" transform="translate(-52.12988 -117.98284)" opacity="0.1"/><polygon points="718 60 718 29 553 29 553 0 517 0 517 29 517 60 517 84 517 115 553 115 718 115 718 84 553 84 553 60 718 60" fill="#d0cde1"/><path d="M481.12988,448.98284a81,81,0,1,0-92,80.23639V642.98284H256.36627a81,81,0,1,0,0,22H389.12988v48h22v-48h45v-22h-45V529.21923A81.00034,81.00034,0,0,0,481.12988,448.98284Z" transform="translate(-52.12988 -117.98284)" fill="#d0cde1"/><polygon points="626.5 445.263 662.508 507.631 698.517 570 626.5 570 554.483 570 590.492 507.631 626.5 445.263" fill="#d0cde1"/><polygon points="610.5 578 538.483 578 574.492 515.631 574.742 515.198 561.5 492.263 525.492 554.631 489.483 617 561.5 617 633.517 617 611 578 610.5 578" fill="#6c63ff"/><polygon points="159 345 159 291 186 291 186 259 52 259 52 393 186 393 186 345 159 345" fill="#d0cde1"/><rect x="89" y="234" width="50" height="50" fill="#6c63ff"/><path d="M989.162,357.83165,972.618,401.5551l-59.664,20.935s-36-4-36,16c0,14.18058,43,2,43,2l78.66169-23.57271,24.816-61.44917Z" transform="translate(-52.12988 -117.98284)" fill="#ffb8b8"/><rect x="635" y="228" width="234" height="202" fill="#6c63ff"/><polygon points="747.5 289.263 783.508 351.631 819.517 414 747.5 414 675.483 414 711.492 351.631 747.5 289.263" fill="#3f3d56"/><polygon points="747.331 334.415 763.665 362.708 780 391 747.331 391 714.661 391 730.996 362.708 747.331 334.415" fill="#d0cde1"/><polygon points="747.331 242.415 763.665 270.708 780 299 747.331 299 714.661 299 730.996 270.708 747.331 242.415" fill="#d0cde1"/><path d="M1024.15387,329.42035s-16.544-2.36343-24.816,28.36116-10.63544,33.088-10.63544,33.088,48.45031,7.09029,49.632,4.72686S1048.96988,336.51064,1024.15387,329.42035Z" transform="translate(-52.12988 -117.98284)" fill="#2f2e41"/><circle cx="962.57027" cy="167.71406" r="31.9063" fill="#ffb8b8"/><path d="M1000.51957,311.69463s10.63544,27.17944,7.09029,30.72459,43.72345,8.272,43.72345,8.272,3.54515-17.72572-10.63543-28.36116c0,0-5.90858-17.72572-4.72686-21.27087S1000.51957,311.69463,1000.51957,311.69463Z" transform="translate(-52.12988 -117.98284)" fill="#ffb8b8"/><path d="M1028.88073,323.51178a85.216,85.216,0,0,0-31.9063,21.27087c-14.18058,15.36229-21.27087,20.08915-21.27087,20.08915s-16.544,5.90857-10.63544,34.26973c2.95429,14.18058.88629,30.13373-1.92028,42.54174a265.8223,265.8223,0,0,0-6.35172,58.65559v12.2473s-108.71777,228.071-72.08461,243.43328,69.72118,20.08915,72.08461,16.544,44.90517-187.89267,44.90517-187.89267,11.81715,197.34639,41.36,197.34639,77.99318-8.272,77.99318-8.272l-60.26746-236.343s14.18058-40.17831-21.27087-68.53947l-4.72686-12.99886c19.60447.01,28.56614-124.06968,8.272-134.7155C1043.06131,321.14835,1038.33445,317.6032,1028.88073,323.51178Z" transform="translate(-52.12988 -117.98284)" fill="#2f2e41"/><path d="M999.33786,387.32438l-16.544,43.72345-59.664,20.935s-36-4-36,16c0,14.18058,43,2,43,2l78.6617-23.57271,24.816-61.44918Z" transform="translate(-52.12988 -117.98284)" fill="#ffb8b8"/><ellipse cx="868.62393" cy="652.21718" rx="20.68001" ry="11.81715" fill="#2f2e41"/><ellipse cx="1026.97373" cy="652.21718" rx="20.68001" ry="11.81715" fill="#2f2e41"/><path d="M1027.01734,240.95422h-.00012a25.34145,25.34145,0,0,0-4.89258.48651,21.44172,21.44172,0,0,0-9.34021-2.15271h-.84777c-16.34473,0-29.59461,14.7901-29.59461,33.03461v.00006h5.47669l.88452-6.73224L990,272.32269h4.56226a64.57589,64.57589,0,0,0-2.119,16.55036v33.62384h8.28027l4.79395-12.45795-1.19849,12.45795h53.22314l4.35816-11.32538-1.0896,11.32538h5.99243V296.09613C1066.80311,265.64215,1048.99037,240.95422,1027.01734,240.95422Z" transform="translate(-52.12988 -117.98284)" fill="#2f2e41"/></svg>

1
public/js/formbuilder.js

@ -1,3 +1,4 @@
// TODO: Add cleaner and less verbose solution found in formeditor.js
$(document).ready(function() {
$("#add").click(function() {
var lastField = $("#buildyourform div:last");

19
public/js/formeditor.js

@ -0,0 +1,19 @@
// reminder: use vuejs instead, this is still an ugly and cheap solution
$(document).ready(function(){
var fieldID = 0;
var wrapper = $('.field-container');
var newBtn = $('#add');
$(newBtn).click(function(e){
e.preventDefault()
fieldID++;
$(wrapper).append('<div id=group' + fieldID + '><input type="text" name="newFieldID' + fieldID + '[]" class="form-control" />');
$(wrapper).append('<select name="newFieldID' + fieldID + '[]" class="custom-select"> <option value="nil" disabled>Choose a type</option> <option value="textbox">Textbox</option> <option value="textarea">Multi line answer</option> <option value="checkbox">Checkbox</option> </select>');
//$(wrapper).append('<button type="button" class="btn btn-danger btn-sm float-right delete"><i class="fas fa-minus"></i></button></div>');
});
});

103
resources/views/dashboard/administration/editform.blade.php

@ -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

4
resources/views/dashboard/administration/formpreview.blade.php

@ -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>

2
resources/views/dashboard/administration/forms.blade.php

@ -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">

48
resources/views/dashboard/user/viewapp.blade.php

@ -75,6 +75,18 @@
@endhasrole
<div class="row">
<div class="col">
<div class="alert alert-warning alert-dismissible">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>Reminder:</strong> If this form has been updated, new fields and updated questions will not show up here!
</div>
</div>
</div>
<div class="row">
@ -357,9 +369,9 @@
</div>
<div class="row">
<div class="col">
@if ($comments->isEmpty())
<div class="alert alert-warning">
@ -378,11 +390,11 @@
@if (!$comments->isEmpty())
@foreach($comments as $comment)
<div class="row mt-3 mb-3">
<div class="row mt-3 mb-3">
<div class="col-md-2">
<div class="text-center">
@if($application->user->avatarPreference == 'gravatar')
<img class="profile-user-img img-fluid img-circle" src="https://gravatar.com/avatar/{{md5($comment->user->email)}}" alt="User profile picture">
@ -394,24 +406,24 @@
</div>
<div class="card comment">
<div class="card-header comment-header">
<h1 class="commenter">{{$comment->user->name}} &#9679; {{Carbon\Carbon::parse($comment->created_at)->diffForHumans()}}</h3>
</div>
<div class="card-body">
{{$comment->text}}
</div>
@if(Auth::user()->is($comment->user) || Auth::user()->hasRole('admin'))
<div class="card-footer comment-footer">
<form method="POST" id="deleteComment" action="{{route('deleteApplicationComment', ['comment' => $comment->id])}}">
@csrf
@method('DELETE')
@ -434,7 +446,7 @@
<div class="row mt-5">
<div class="col-md-2">
<div class="text-center">
@if($application->user->avatarPreference == 'gravatar')
<img class="profile-user-img img-fluid img-circle" src="https://gravatar.com/avatar/{{md5(Auth::user()->email)}}" alt="User profile picture">
@ -443,15 +455,15 @@
@endif
</div>
</div>
</div>
<div class="col">
<div class="card border-top border-bottom">
<div class="card-body">
<form id="newComment" method="POST" action="{{route('addApplicationComment', ['application' => $application->id])}}">
@csrf
<textarea id="comment" name="comment" class="form-control" id="commentText"></textarea>
@ -459,14 +471,14 @@
</form>
<div class="row">
<div class="col text-left">
<p class="text-sm text-muted">Commenting as {{Auth::user()->name}}</p>
</div>
<div class="col text-right">
<p class="text-sm text-muted"><span id="charcount">0</span>/600 max characters</p>
</div>
@ -476,7 +488,7 @@
</div>
<div class="card-footer text-right">
<button type="button" id="submitComment" class="btn btn-sm btn-secondary">Post</button>
</div>

8
routes/web.php

@ -196,7 +196,13 @@ Route::group(['middleware' => ['auth', 'forcelogout']], function(){
Route::get('forms/preview/{form}', 'FormController@preview')
->name('previewForm');
Route::get('forms/edit/{form}', 'FormController@edit')
->name('editForm');
Route::patch('forms/update/{form}', 'FormController@update')
->name('updateForm');
Route::get('devtools', 'DevToolsController@index')
->name('devTools');

Loading…
Cancel
Save