Add ability to preview application

This commit is contained in:
Miguel Nogueira 2020-07-12 19:36:12 +01:00
parent e978a5417b
commit 1f50faaea7
8 changed files with 159 additions and 32 deletions

View File

@ -103,4 +103,11 @@ class FormController extends Controller
} }
public function preview(Request $request, Form $form)
{
return view('dashboard.administration.formpreview')
->with('form', json_decode($form->formStructure, true))
->with('title', $form->formName);
}
} }

View File

@ -0,0 +1,33 @@
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class Form extends Component
{
public $formFields;
public $disableFields = false;
/**
* Create a new component instance.
*
* @return void
*/
public function __construct($disableFields = false)
{
$this->disableFields = $disableFields;
}
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\View\View|string
*/
public function render()
{
return view('components.form');
}
}

1
public/img/preview.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.3 KiB

View File

@ -0,0 +1,32 @@
@foreach($form['fields'] as $fieldName => $field)
@switch ($field['type'])
@case('textarea')
<div class="form-group mt-2 mb-2">
<label for="{{$fieldName}}">{{$field['title']}}</label>
<textarea class="form-control" rows="7" name="{{$fieldName}}" id="{{$fieldName}}" {{ ($disableFields) ? 'disabled' : '' }}>
</textarea>
</div>
@break
@case('textbox')
<div class="form-group mt-2 mb-2">
<label for="{{$fieldName}}">{{$field['title']}}</label>
<input type="text" name="{{$fieldName}}" id="{{$fieldName}}" {{ ($disableFields) ? 'disabled' : '' }} class="form-control">
</div>
@break
@endswitch
@endforeach

View File

@ -0,0 +1,79 @@
@extends('adminlte::page')
@section('title', 'Raspberry Network | Application Form Preview')
@section('content_header')
<h4>Administration / Form Builder / Preview</h4>
@stop
@section('js')
<x-global-errors></x-global-errors>
@stop
@section('content')
<div class="row">
<div class="col-6 offset-4">
<img src="/img/preview.svg" width="250px" alt="Form preview illustration" />
</div>
</div>
<div class="row mt-4">
<div class="col">
<div class="alert alert-success">
<h5><i class="fas fa-eye"></i> This is how your form looks like to applicants</h3>
<p>
You may edit it and add more fields later.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
<h3>{{ $title }}'s form</h2>
</div>
<div class="card-body">
@component('components.form', ['form' => $form, 'disableFields' => true])
@endcomponent
</div>
<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>
</div>
</div>
</div>
</div>
@stop

View File

@ -59,7 +59,7 @@
<button type="submit" class="btn btn-sm btn-danger mr-2"><i class="fa fa-trash"></i> Delete</button> <button type="submit" class="btn btn-sm btn-danger mr-2"><i class="fa fa-trash"></i> Delete</button>
</form> </form>
<button type="button" class="btn btn-sm btn-success"><i class="fa fa-eye"></i> Preview</button> <button type="button" class="btn btn-sm btn-success" onclick="window.location.href='{{ route('previewForm', ['form' => $form->id]) }}'"><i class="fa fa-eye"></i> Preview</button>
</td> </td>
</tr> </tr>

View File

@ -93,38 +93,10 @@
<form action="{{route('saveApplicationForm', ['vacancySlug' => $vacancy->vacancySlug])}}" method="POST" id="submitApplicationForm"> <form action="{{route('saveApplicationForm', ['vacancySlug' => $vacancy->vacancySlug])}}" method="POST" id="submitApplicationForm">
@csrf @csrf
@foreach($preprocessedForm['fields'] as $fieldName => $field)
@switch ($field['type']) @component('components.form', ['form' => $preprocessedForm, 'disableFields' => false])
@case('textarea') @endcomponent
<div class="form-group mt-2 mb-2">
<label for="{{$fieldName}}">{{$field['title']}}</label>
<textarea class="form-control" rows="7" name="{{$fieldName}}" id="{{$fieldName}}">
</textarea>
</div>
@break
@case('textbox')
<div class="form-group mt-2 mb-2">
<label for="{{$fieldName}}">{{$field['title']}}</label>
<input type="text" name="{{$fieldName}}" id="{{$fieldName}}" class="form-control">
</div>
@break
@endswitch
@endforeach
</form> </form>

View File

@ -194,6 +194,9 @@ Route::group(['middleware' => ['auth', 'forcelogout']], function(){
Route::get('forms', 'FormController@index') Route::get('forms', 'FormController@index')
->name('showForms'); ->name('showForms');
Route::get('forms/preview/{form}', 'FormController@preview')
->name('previewForm');
Route::get('devtools', 'DevToolsController@index') Route::get('devtools', 'DevToolsController@index')
->name('devTools'); ->name('devTools');