ctf0/over-seer

preview form data before saving to the db

OverSeer

A tiny package to help preview any form data before submitting to the db., _(*1)

If you are looking to have a control over the saved content as well, you may want to give Odin a try too., _(*2)

, _(*3)

Installation

• composer require ctf0/over-seer, _(*4)

• (Laravel < 5.5) add the service provider., _(*5)

  'providers' => [
      ctf0\OverSeer\OverSeerServiceProvider::class,
  ];
  

• publish the package assets with, _(*6)

  php artisan vendor:publish --provider="ctf0\OverSeer\OverSeerServiceProvider", _(*7)

• install dependencies, _(*8)

  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 your js/css files., _(*9)

  • if you are having issues Check.

  window.Vue = require('vue')
  
  require('../vendor/OverSeer/manager')
  
  new Vue({
      el: '#app'
  })
  

, _(*10)

Usage

• add an id to the form you want to collect its content, ex., _(*11)

  <form action="..." method="..." id="my-form">
      ...
  </form>
  

• then add the vue component anywhere near that form, _(*12)

  • form-id is the id you gave to your form, in that case my-form
  • template is where you want to display the data, ex views/posts/overseer
  • title optional url title, so instead of just my.app/overseer it would be my.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, _(*13)

  // for single values
  {{ $data->title }}
  
  // for nested values
  {{ $data->body->en }}
  

  just like you would usually do with any model., _(*14)

, _(*15)

Notes for WYSIWYG Editors

• we currently support tinyMCE but if you are using any other editor, PRs are welcome :trophy:

, _(*16)

Security

If you discover any security-related issues, please email ctf0-dev@protonmail.com., _(*17)