Add Third Column To Form Create View

[dchun]

Since there is a lot of empty whitespace to the right of the form, let's reduce the second column where the form is rendered from 9 to 6 and add a third column size of 3.

On the third column we will add a settings area. In the settings detail, we will store things like css and javascript (we can remove the javascript custom field and add it here). Let's further split that third column into three tabs: CSS, JS, & Settings (use the superhero faq.html tabs). We will store the css and js in the fields json column and we will store in a separate column, perhaps as an array field to store emails that are inputted in the settings area which we will use to email all the defined users every time the form is submitted.

In the second column where the form is rendered let's split it up into two tabs with the superhero faq.html template and add the instructions you added to the form#new view with the default view being the rendered form.

[phuong3030]

https://github.com/boopis/QuoteManager/pull/40

[dchun]

Let's add all of the tabs behind the main center panel. Let's change the name of the CSS tab to Syles and add a radio box with the options: one column, two columns. And underneath will be a css textarea field where custom styles can be added.

Also, let's add a few more fields for each field addition. Right now we only have a label and a required input field but I would like to add a placeholder, description, and class input fields as well. And I would like these options to be shown on the right panel and have the rendered output in the center panel.

Let's also add a half or full width radio option. If two half width radio options are next to each other where the first one starts on a new row, the two half width fields should be in one row.

So when we click the name field, for example, the right panel will have new input fields for all of the mentioned inputs and the center panel will render the output with a highlighted outline signaling that that field is being edited. And when the user clicks another field, like the email field, the input fields for the name field will be hidden and the new inputs will be shown. And when the user clicks on any field in the rendered form, it will be outlined and highlighted and the input fields for that section will be shown on the right panel.

[phuong3030]

https://github.com/boopis/QuoteManager/pull/44

[phuong3030]

I think the create form submit button should be moved out of center panel. What do you think?

[dchun]

Isn't the submit button already located on the center panel?

Also, can we move the label to the right panel with all of the other fields? And let's have a live render of the form in the center (of what the form will actually look like). So for fields like select or radio (with options), since there is limited space we can move the addition of fields below instead of to the right. We can however, leave the remove button on the center panel to remove the main fields (not the optional fields, we can have those in the right panel with the field options)

Also, let's have the field options do a fade in and out effect instead of show and hide when we transition from field to field. And the fields don't appear to be retained unless there is a focus out event before any transition, I think we may need to explicitly state focus out event if an input is focused in in the function to fade in and out so we do not lose any information added at the last input of the fields options section.

[phuong3030]

Ok, I got it. For the submit button, I mean we move the submit button under center panel. When users change the tab in center panel, users can't see that button.

[dchun]

Ok

[phuong3030]

I think i will move options of radio field (checkbox, select) to right panel. (3)

The 'remove field button': I have two ways to do that:

• First way: Remove 'remove' text, add remove icon after every field. When user hover mouse over this 'remove' button, we show instruction tooltip. (1)
• Second way: Move 'remove field button' to right panel. (2)

What do you think?

[dchun]

Let's go with the first way.

[phuong3030]

https://github.com/boopis/QuoteManager/pull/48

Form renderer needs some small effect, i will add it tomorrow.

I updated new code, now you can review it.

[phuong3030]

Bugs fixed and css effects added. https://github.com/boopis/QuoteManager/pull/49

[phuong3030]

Bugs fixed https://github.com/boopis/QuoteManager/pull/50

[phuong3030]

Email field is already added https://github.com/boopis/QuoteManager/pull/61

[dchun]

@phuong3030 do you think performance would be better if we changed the column type to postgres's default array field like so:

add_column :forms, :emails, :text, array: true, default: '{}'

[phuong3030]

I think the performance will be better with PG's Array data-type. We also need to create index to this field by using GIN.

add_index  :forms, :emails, using: 'gin' 

[dchun]

Check out the possibility of changing permissions and adding allowances in the controller: https://github.com/carrierwaveuploader/carrierwave/wiki/how-to:-secure-upload