From 8fb3fb7175343df468966fca798e99326c7710b9 Mon Sep 17 00:00:00 2001 From: Michael Bumann Date: Sun, 26 Apr 2020 18:49:40 +0200 Subject: [PATCH] Forms edit content --- app/assets/stylesheets/application.css.scss | 3 +- app/assets/stylesheets/highlight.css.scss | 5 ++ app/controllers/forms_controller.rb | 4 + app/javascript/highlight.js | 7 ++ app/javascript/packs/application.js | 1 + app/javascript/tinyforms.js | 6 +- app/views/forms/_form_example.html.erb | 11 +++ app/views/forms/_form_example_js.html.erb | 11 +++ app/views/forms/edit.html.erb | 93 +++++++++++++++++++-- app/views/forms/index.html.erb | 8 +- app/views/forms/setup.html.erb | 64 ++++++++++++++ config/routes.rb | 5 +- 12 files changed, 201 insertions(+), 17 deletions(-) create mode 100644 app/assets/stylesheets/highlight.css.scss create mode 100644 app/javascript/highlight.js create mode 100644 app/views/forms/_form_example.html.erb create mode 100644 app/views/forms/_form_example_js.html.erb create mode 100644 app/views/forms/setup.html.erb diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index fed9ee3..fd8abf0 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -27,7 +27,8 @@ $weight-bold: 400; @import 'bulma/bulma'; @import "checkmark-icon"; -@import './demo'; +@import 'demo'; +@import 'highlight'; .field_with_errors input { border-color: $red; diff --git a/app/assets/stylesheets/highlight.css.scss b/app/assets/stylesheets/highlight.css.scss new file mode 100644 index 0000000..87e256f --- /dev/null +++ b/app/assets/stylesheets/highlight.css.scss @@ -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; +} + diff --git a/app/controllers/forms_controller.rb b/app/controllers/forms_controller.rb index 8b1495c..095ede0 100644 --- a/app/controllers/forms_controller.rb +++ b/app/controllers/forms_controller.rb @@ -39,6 +39,10 @@ class FormsController < ApplicationController end end + def setup + @form = current_user.forms.find_by!(token: params[:id]) + end + def form @form = Form.find_by!(token: params[:id]) end diff --git a/app/javascript/highlight.js b/app/javascript/highlight.js new file mode 100644 index 0000000..e48cb54 --- /dev/null +++ b/app/javascript/highlight.js @@ -0,0 +1,7 @@ +document.addEventListener("turbolinks:load", function () { + document.querySelectorAll('pre code').forEach(function (block) { + if (window.hljs) { + hljs.highlightBlock(block); + } + }); +}); diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 5aee77c..65acde0 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -13,6 +13,7 @@ require('tinyforms'); require('demo'); require('backend_typed'); require('tabs'); +require('highlight'); // 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' %>) diff --git a/app/javascript/tinyforms.js b/app/javascript/tinyforms.js index 2e6c4ce..f4b8601 100644 --- a/app/javascript/tinyforms.js +++ b/app/javascript/tinyforms.js @@ -40,9 +40,13 @@ window.tinyforms = { onSubmit: function(e) { e.preventDefault(); - return tinyforms.submitForm(this) + var form = this; + return tinyforms.submitForm(form) .then((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) => { this.dispatchEvent(new CustomEvent('tinyforms:error', {detail: { submission: response.submission, response: response }})); diff --git a/app/views/forms/_form_example.html.erb b/app/views/forms/_form_example.html.erb new file mode 100644 index 0000000..58844d6 --- /dev/null +++ b/app/views/forms/_form_example.html.erb @@ -0,0 +1,11 @@ +
+ <% form.spreadsheet_headers.take(3).each do |header| %> +

+ + <%= text_field_tag header %> +

+ <% end %> + ... + <%= submit_tag 'Submit' %> +
diff --git a/app/views/forms/_form_example_js.html.erb b/app/views/forms/_form_example_js.html.erb new file mode 100644 index 0000000..6ef5a7d --- /dev/null +++ b/app/views/forms/_form_example_js.html.erb @@ -0,0 +1,11 @@ +
+ <% form.spreadsheet_headers.take(3).each do |header| %> +

+ + <%= text_field_tag header %> +

+ <% end %> + ... + <%= submit_tag 'Submit' %> +
diff --git a/app/views/forms/edit.html.erb b/app/views/forms/edit.html.erb index 4e04451..76ce773 100644 --- a/app/views/forms/edit.html.erb +++ b/app/views/forms/edit.html.erb @@ -1,14 +1,91 @@ -
-
-
-
-
-

Update <%= @form.title %>

+
+
+ <%= link_to image_tag("#{@form.backend_name}-icon.svg", alt: @form.backend_name.humanize), @form.spreadsheet_url %> +
+ +

+ <%= @form.title %> +

- <%= render 'form', form: @form %> +
+
+ + + +
+
+ + <%= form_for @form, local: true do |f| %> + +
+ +
+ <%= f.text_field :title, class: 'input', placeholder: '', autocomplete: 'off' %> +
-
+ +
+ +
+ <%= f.text_field :thank_you_url, class: 'input', placeholder: '', autocomplete: 'off' %> +
+

The URL where the user will be redirected after submission

+
+ + <% if @form.airtable? %> + +
+ +
+ <%= f.text_field :airtable_table, class: 'input', placeholder: 'Table 1', autocomplete: 'off' %> +
+

The name of the table in your Airtable base. Your Airtable can have multiple tables/sheets. Which one do you want to use?

+
+ +
+ +
+ <%= f.text_field :airtable_api_key, class: 'input', placeholder: '', autocomplete: 'off' %> +
+

Your Airtable account API Key. You find this one on your Airtable account page.

+
+ +
+ +
+ <%= f.text_field :airtable_app_key, class: 'input', placeholder: '', autocomplete: 'off' %> +
+

The application key of your Airtable document. You find this one on the API page of your Airtable base.

+
+ + <% end %> + +
+ <%= f.submit 'Save', class: 'button is-primary' %> +
+ <% end %> +
+
diff --git a/app/views/forms/index.html.erb b/app/views/forms/index.html.erb index 1530a2e..aa5a143 100644 --- a/app/views/forms/index.html.erb +++ b/app/views/forms/index.html.erb @@ -23,12 +23,8 @@

<%= link_to form.title, form_url(form) %>

-
-
- <%= link_to form.spreadsheet_url, {class: "has-text-success", target: "__blank"} do %> - - <% end %> -
+
+ <%= link_to image_tag("#{form.backend_name}-icon.svg", alt: form.backend_name.humanize, style: "height:48px"), form.spreadsheet_url %>
diff --git a/app/views/forms/setup.html.erb b/app/views/forms/setup.html.erb new file mode 100644 index 0000000..72c21a7 --- /dev/null +++ b/app/views/forms/setup.html.erb @@ -0,0 +1,64 @@ +
+
+ <%= link_to image_tag("#{@form.backend_name}-icon.svg", alt: @form.backend_name.humanize), @form.spreadsheet_url %> +
+ +

+ <%= @form.title %> +

+ + +
+
+ + + +
+
+ +

Your submission URL:

+

+ <%= submission_url(@form) %> +

+

+ Please set your form action as in the example below. Make sure to use proper name attributes. +

+ 


+<%= html_escape_once render('form_example', form: @form) %>
+
+ +

Example with JavaScript:

+

+ Learn more about our JavaScript library and our API in your help section. +

+ 

+<%= html_escape_once render('form_example_js', form: @form) %>
+
+ + + + +
+
+ +
diff --git a/config/routes.rb b/config/routes.rb index d977dd6..832d680 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -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 resources :forms do - member { get :form } + member do + get :form + get :setup + end resources :submissions end # short link for submission file uploads