README.md

Form Editor

Here are the notes from the planning sessions on the new Usabilla form editor.

Folder structure

  product-editor/
    ├── actions/
    │     └── tests/
    ├── components/
    ├── config/
    │     └── product-name/
    │           ├── pages.config
    │           ├── controls.config
    │           ├── sections.config
    │           └── general.config
    ├── containers/
    │     └── form-editor/
    │           └── tests/
    │                 └── formEditor.unit.spec.js
    ├── models/
    │     └── tests/
    ├── reducers/
    │     └── tests/
    ├── services/
    │     └── tests/
    ├── product-editor.css
    ├── productEditor.ts
    └── Config.ts (ui-routes)

Component & Prop names

(S) = Smart Component
(D) = Dumb Component

%product-editor (S)
    type=['campaign', 'vFeedback', 'apps', 'inPage', 'email']
    %product-editor-topbar (D)
        exit-link,
        title,
        on-title-change,
        on-publish,
        on-preview,
        autosave-status,
    %product-editor-navbar (D)
        sections,
        activeSection,
        on-change,
    %ui-view
        %form-editor (S) (gets configuration passed through resolve method in ui-view)
            %form-editor-navbar (D)
                modes[],
                activeMode,
                on-change,
            %form-editor-panel (D)
                activeMode,
                %edit-mode
                    ng-if="activeMode === edit"
                %rules-mode
                    ng-if="activeMode === rules"
                %templates-mode
                    ng-if="activeMode === templates"
                %settings-mode
                    ng-if="activeMode === settings"
                %display-mode
                    ng-if="activeMode === display"
            %form-editor-field (D)
                ng-repeat="field in fields"
                on-select,
            %form-editor-controls (D)
                controls[],
                on-select,
                %button
                    ng-repeat="control in controls",
                    class="control-{{control.type}}",
                    ng-click="$ctrl.add(control.type)",
                    {{control.title}}
            %form-editor-page-navigation (D)
                pages[],
                on-select,
                on-add,
        %targeting (N/A)
        %scheduling (N/A)
        %preview (N/A)

Proposed workflow

1. Start with setting up a new project
2. Configure redux and thinking about the form of the store.state - How to manage initial configuration and store.state?
3. Wireframing the product-editor-component and its interactions — validate the ui-view router.
4. Wireframing the form-editor-component and its interactions
5. Integrating into Usabilla.js
6. Cycle through components and finalize them.

Todo

• Define the stages of a finished component (When is a component done?).
• Present our decisions to the team.
• Product editor menubar:
  • find proper names for 'sections'
• Using the agreed upon global names for products
• Config:
  • Define the config
  • Research relationship configuration & redux store:
  • Use config to set initialState?