bumi/tinyforms
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Forms edit content

Browse Source
This commit is contained in:
bumi 2020-04-26 18:49:40 +02:00
parent d733468abe
commit 8fb3fb7175
12 changed files with 201 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/stylesheets/application.css.scss
View File

@ -27,7 +27,8 @@ $weight-bold: 400;
@import 'bulma/bulma'; @import 'bulma/bulma';
@import "checkmark-icon"; @import "checkmark-icon";
@import './demo'; @import 'demo';
@import 'highlight';
.field_with_errors input { .field_with_errors input {
border-color: $red; border-color: $red;

5
app/assets/stylesheets/highlight.css.scss Normal file
View File

@ -0,0 +1,5 @@
code.html .hljs-tag:first-child .hljs-attr, code.html .hljs-tag:first-child .hljs-string {
font-weight: bold;
font-size: 1.2em;
}

4
app/controllers/forms_controller.rb
View File

@ -39,6 +39,10 @@ class FormsController < ApplicationController
end end
end end
def setup
@form = current_user.forms.find_by!(token: params[:id])
end
def form def form
@form = Form.find_by!(token: params[:id]) @form = Form.find_by!(token: params[:id])
end end

7
app/javascript/highlight.js Normal file
View File

@ -0,0 +1,7 @@
document.addEventListener("turbolinks:load", function () {
document.querySelectorAll('pre code').forEach(function (block) {
if (window.hljs) {
hljs.highlightBlock(block);
}
});
});

1
app/javascript/packs/application.js
View File

@ -13,6 +13,7 @@ require('tinyforms');
require('demo'); require('demo');
require('backend_typed'); require('backend_typed');
require('tabs'); require('tabs');
require('highlight');
// Uncomment to copy all static images under ../images to the output folder and reference // Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)

6
app/javascript/tinyforms.js
View File

@ -40,9 +40,13 @@ window.tinyforms = {
onSubmit: function(e) { onSubmit: function(e) {
e.preventDefault(); e.preventDefault();
return tinyforms.submitForm(this) var form = this;
return tinyforms.submitForm(form)
.then((response) => { .then((response) => {
this.dispatchEvent(new CustomEvent('tinyforms:submitted', {detail: { submission: response.submission, response: response }})); this.dispatchEvent(new CustomEvent('tinyforms:submitted', {detail: { submission: response.submission, response: response }}));
if (form.dataset.tinyformsSubmitted && typeof window[form.dataset.tinyformsSubmitted] === 'function') {
window[form.dataset.tinyformsSubmitted](response.submission);
}
}) })
.catch((response) => { .catch((response) => {
this.dispatchEvent(new CustomEvent('tinyforms:error', {detail: { submission: response.submission, response: response }})); this.dispatchEvent(new CustomEvent('tinyforms:error', {detail: { submission: response.submission, response: response }}));

11
app/views/forms/_form_example.html.erb Normal file
View File

@ -0,0 +1,11 @@
<form action="<%= submission_url(form) %>" method="post"
accept-charset="UTF-8" enctype="multipart/form-data">
<% form.spreadsheet_headers.take(3).each do |header| %>
<p>
<label><%= header %></label>
<%= text_field_tag header %>
</p>
<% end %>
...
<%= submit_tag 'Submit' %>
</form>

11
app/views/forms/_form_example_js.html.erb Normal file
View File

@ -0,0 +1,11 @@
<form data-tinyforms="true" data-tinyforms-submitted="alert" action="<%= submission_url(form) %>" method="post"
accept-charset="UTF-8" enctype="multipart/form-data">
<% form.spreadsheet_headers.take(3).each do |header| %>
<p>
<label><%= header %></label>
<%= text_field_tag header %>
</p>
<% end %>
...
<%= submit_tag 'Submit' %>
</form>

95
app/views/forms/edit.html.erb
View File

@ -1,14 +1,91 @@
<div class="section"> <div class="container">
<div class=" columns "> <div class="is-pulled-right">
<div class="column is-half is-offset-one-quarter"> <%= link_to image_tag("#{@form.backend_name}-icon.svg", alt: @form.backend_name.humanize), @form.spreadsheet_url %>
<div class="box"> </div>
<div class="content has-text-centered"> <nav class="breadcrumb is-small has-bullet-separator" aria-label="breadcrumbs">
<h1 class="has-text-weight-light">Update <%= @form.title %></h1> <ul>
<li>
<%= link_to forms_url do %>
<span class="icon is-small"><i class="fas fa-home" aria-hidden="true"></i></span>
Forms
<% end %>
</li>
<li><%= link_to @form.title, form_url(@form) %></li>
</ul>
</nav>
<h1 class="title">
<%= @form.title %>
</h1>
<%= render 'form', form: @form %>
<div class="columns">
<div class="column is-one-quarter">
<aside class="menu">
<p class="menu-label">
General
</p>
<ul class="menu-list">
<li><%= link_to "Form Settings", edit_form_url(@form), class: "is-active" %></li>
<li><%= link_to "Setup", setup_form_url(@form) %></li>
<li><a>Email notifications</a></li>
</ul>
</aside>
</div>
<div class="column">
<%= form_for @form, local: true do |f| %>
<div class="field">
<label class="label">Name</label>
<div class="control">
<%= f.text_field :title, class: 'input', placeholder: '', autocomplete: 'off' %>
</div>
</div>
<div class="field">
<label class="label">Redirect URL</label>
<div class="control">
<%= f.text_field :thank_you_url, class: 'input', placeholder: '', autocomplete: 'off' %>
</div>
<p class="help">The URL where the user will be redirected after submission</p>
</div>
<% if @form.airtable? %>
<div class="field">
<label class="label">Airtable Table Name</label>
<div class="control">
<%= f.text_field :airtable_table, class: 'input', placeholder: 'Table 1', autocomplete: 'off' %>
</div>
<p class="help">The name of the table in your Airtable base. Your Airtable can have multiple tables/sheets. Which one do you want to use?</p>
</div>
<div class="field">
<label class="label">Airtable API Key</label>
<div class="control">
<%= f.text_field :airtable_api_key, class: 'input', placeholder: '', autocomplete: 'off' %>
</div>
<p class="help">Your Airtable account API Key. You find this one on your <a href="https://airtable.com/account" target="_blank">Airtable account page</a>.</p>
</div>
<div class="field">
<label class="label">Airtable APP Key</label>
<div class="control">
<%= f.text_field :airtable_app_key, class: 'input', placeholder: '', autocomplete: 'off' %>
</div>
<p class="help">The application key of your Airtable document. You find this one on the <a href="https://airtable.com/api" target="_blank">API page of your Airtable base</a>.</p>
</div>
<% end %>
<div>
<%= f.submit 'Save', class: 'button is-primary' %>
</div>
<% end %>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>

8
app/views/forms/index.html.erb
View File

@ -23,12 +23,8 @@
<p class="title is-4 "><%= link_to form.title, form_url(form) %></p> <p class="title is-4 "><%= link_to form.title, form_url(form) %></p>
</div> </div>
<div class="media-right has-text-right is-size-4"> <div class="media-right">
<figure class="image is-48x48 "> <%= link_to image_tag("#{form.backend_name}-icon.svg", alt: form.backend_name.humanize, style: "height:48px"), form.spreadsheet_url %>
<%= link_to form.spreadsheet_url, {class: "has-text-success", target: "__blank"} do %>
<i class="far fa-file-excel"></i>
<% end %>
</figure>
</div> </div>
</div> </div>

64
app/views/forms/setup.html.erb Normal file
View File

@ -0,0 +1,64 @@
<div class="container">
<div class="is-pulled-right">
<%= link_to image_tag("#{@form.backend_name}-icon.svg", alt: @form.backend_name.humanize), @form.spreadsheet_url %>
</div>
<nav class="breadcrumb is-small has-bullet-separator" aria-label="breadcrumbs">
<ul>
<li>
<%= link_to forms_url do %>
<span class="icon is-small"><i class="fas fa-home" aria-hidden="true"></i></span>
Forms
<% end %>
</li>
<li><%= link_to @form.title, form_url(@form) %></li>
</ul>
</nav>
<h1 class="title">
<%= @form.title %>
</h1>
<div class="columns">
<div class="column is-one-quarter">
<aside class="menu">
<p class="menu-label">
General
</p>
<ul class="menu-list">
<li><%= link_to "Form Settings", edit_form_url(@form) %></li>
<li><%= link_to "Setup", setup_form_url(@form), class: 'is-active' %></li>
<li><a>Email notifications</a></li>
</ul>
</aside>
</div>
<div class="column">
<h3 class="title">Your submission URL:</h3>
<p>
<code><%= submission_url(@form) %></code>
</p>
<p>
Please set your form action as in the example below. Make sure to use proper <code>name</code> attributes.
<p>
<pre><code class="html">
<%= html_escape_once render('form_example', form: @form) %>
</code></pre>
<h3 class="subtitle">Example with JavaScript:</h3>
<p>
Learn more about our <a href="https://www.notion.so/JavaScript-Library-442071548edd4cd1af9c7d8edb3d42cb">JavaScript library</a> and our <a href="https://www.notion.so/Tinyforms-API-7862355e22ce4bbead5de3b635cda55e">API</a> in your help section.
</p>
<pre><code class="html">
<%= html_escape_once render('form_example_js', form: @form) %>
</code></pre>
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.0/build/styles/railscasts.min.css">
<style>
</style>
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.0/build/highlight.min.js"></script>
</div>
</div>
</div>

5
config/routes.rb
View File

@ -2,7 +2,10 @@ Rails.application.routes.draw do
# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
resources :forms do resources :forms do
member { get :form } member do
get :form
get :setup
end
resources :submissions resources :submissions
end end
# short link for submission file uploads # short link for submission file uploads