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

v1.2.2 2021-01-28 08:09 UTC

This package is auto-updated.

Last update: 2024-10-30 01:53:42 UTC


README

OverSeer
Latest Stable Version Total Downloads

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 your js/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 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

    // 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.