ctf0 / over-seer
preview form data before saving to the db
Fund package maintenance!
ctf0
Installs: 51
Dependents: 0
Suggesters: 0
Security: 0
Stars: 17
Watchers: 2
Forks: 2
Open Issues: 0
Language:Vue
Requires
- ctf0/package-changelog: *
- illuminate/support: >=5.4 <9.0
README
OverSeer
A tiny package to help preview any form data before submitting to the db.
If you are looking to have a control over the saved content as well, you may want to give Odin a try too.
Installation
-
composer require ctf0/over-seer
-
(Laravel < 5.5) add the service provider.
'providers' => [ ctf0\OverSeer\OverSeerServiceProvider::class, ];
-
publish the package assets with
php artisan vendor:publish --provider="ctf0\OverSeer\OverSeerServiceProvider"
-
install dependencies
yarn add vue form-serialize # or npm install vue form-serialize --save
-
add this one liner to your main js file and run
npm run watch
to compile yourjs/css
files.- if you are having issues Check.
window.Vue = require('vue') require('../vendor/OverSeer/manager') new Vue({ el: '#app' })
Usage
-
add an id to the form you want to collect its content, ex.
<form action="..." method="..." id="my-form"> ... </form>
-
then add the vue component anywhere near that form
form-id
is the id you gave to your form, in that casemy-form
template
is where you want to display the data, exviews/posts/overseer
title
optional url title, so instead of justmy.app/overseer
it would bemy.app/overseer/my-awesome-title
<over-seer form-id="my-form" template="posts.overseer" title="my-awesome-title" csrf="{{ csrf_token() }}"> <button>Preview</button> </over-seer>
-
now in the view where we will display our data, we can access it like
// for single values {{ $data->title }} // for nested values {{ $data->body->en }}
just like you would usually do with any model.
Notes for WYSIWYG Editors
- we currently support
tinyMCE
but if you are using any other editor, PRs are welcome 🏆
Security
If you discover any security-related issues, please email ctf0-dev@protonmail.com.