From 5248d23ffb180277d6d115b9707659060be67764 Mon Sep 17 00:00:00 2001
From: Yaroslav Ovdii <yaroslav.o@upplabs.com>
Date: Mon, 27 Jul 2020 14:19:11 +0300
Subject: [PATCH] Retire the template browser in the form component

---
 interface.html       |  58 +-----------------
 js/libs/builder.js   |  18 +++++-
 js/libs/templates.js | 141 +++++++++++++++----------------------------
 3 files changed, 68 insertions(+), 149 deletions(-)

diff --git a/interface.html b/interface.html
index 14f63dc1..11b56afe 100644
--- a/interface.html
+++ b/interface.html
@@ -6,63 +6,11 @@
       <p>Loading the form builder... Please wait!</p>
     </div>
   </div>
-  <main v-bind:class="{ 'select-template': chooseTemplate }">
+  <main>
     <header>
-      <p v-if="chooseTemplate">Template gallery</p>
-      <p v-else>Configure your form</p>
+      <p>Configure your form</p>
       <a href="https://help.fliplet.com/article/176" target="_blank">Need help?</a>
     </header>
-    <section v-if="chooseTemplate" class="col-sm-12 choose-template" ref="templateGallery">
-      <p class="templates-sub-title">Choose a form template to get started.</p>
-      <template v-if="organizationTemplates.length">
-        <div class="gallery-heading">Templates by \{{ organizationName }}</div>
-        <div class="templates-holder">
-          <div class="template-wrapper" v-for="template in organizationTemplates">
-            <div class="template-info">
-              <h4 class="template-title">\{{ template.settings.displayName }} <span type="button" class="template-created-info" data-toggle="tooltip" data-placement="left" :title="template.createdDescription"><i class="fa fa-info" aria-hidden="true"></i></span></h4>
-              <div v-if="readMore.indexOf(template.id) > -1" class="template-desc">
-                <span v-html="template.settings.description"></span>
-                <a href="#" class="readless" v-on:click.prevent="toggleReadMore(false, template.id)">Close</a>
-              </div>
-              <div v-else class="template-desc">
-                <span v-html="truncate(template.settings.description, 100)"></span>
-                <a v-if="template.settings.description.length > 100" href="#" class="readmore" v-on:click.prevent="toggleReadMore(true, template.id)">Read more <i class="fa fa-angle-down"></i></a>
-              </div>
-              <div class="template-controls">
-                <div class="btn btn-secondary" v-on:click.prevent="previewTemplate(template.id)">
-                  <template v-if="settings.previewingTemplate === template.id">Previewing</template>
-                  <template v-else>Preview</template>
-                </div>
-                <div class="btn btn-primary" v-on:click.prevent="useTemplate(template.id)">Use</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </template>
-      <div class="gallery-heading">Fliplet templates</div>
-      <div class="templates-holder">
-        <div class="template-wrapper" v-for="template in systemTemplates">
-          <div class="template-info">
-            <h4 class="template-title">\{{ template.settings.displayName }} <span type="button" class="template-created-info" data-toggle="tooltip" data-placement="left" title="Created by Fliplet"><i class="fa fa-info" aria-hidden="true"></i></span></h4>
-            <div v-if="readMore.indexOf(template.id) > -1" class="template-desc">
-              <span v-html="template.settings.description"></span>
-              <a href="#" class="readless" v-on:click.prevent="toggleReadMore(false, template.id)">Close</a>
-            </div>
-            <div v-else class="template-desc">
-              <span v-html="truncate(template.settings.description, 100)"></span>
-              <a v-if="template.settings.description.length > 100" href="#" class="readmore" v-on:click.prevent="toggleReadMore(true, template.id)">Read more <i class="fa fa-angle-down"></i></a>
-            </div>
-            <div class="template-controls">
-              <div class="btn btn-secondary" v-on:click.prevent="previewTemplate(template.id)">
-                <template v-if="settings.previewingTemplate === template.id">Previewing</template>
-                <template v-else>Preview</template>
-              </div>
-              <div class="btn btn-primary" v-on:click.prevent="useTemplate(template.id)">Use</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
     <section v-if="toChangeTemplate" class="col-sm-12 change-template">
       <div class="back-btn">
         <a href="#" v-on:click.prevent="goBack"><i class="fa fa-angle-left"></i> Back</a>
@@ -96,7 +44,7 @@ <h3 class="panel-title">Are you sure you want to load a new form?</h3>
         </div>
       </div>
     </section>
-    <div class="builder" v-show="!chooseTemplate && !toChangeTemplate">
+    <div class="builder">
       <nav>
         <ul class="nav nav-tabs">
           <li v-bind:class="{ active: section === 'form' }">
diff --git a/js/libs/builder.js b/js/libs/builder.js
index b20bbde5..521bc8ee 100644
--- a/js/libs/builder.js
+++ b/js/libs/builder.js
@@ -116,7 +116,8 @@ var app = new Vue({
       readMore: [],
       systemTemplates: [],
       organizationTemplates: [],
-      chooseTemplate: (!formSettings.templateId || formSettings.previewingTemplate !== ''),
+      isTemplateLoaded: !!formSettings.templateId,
+      chooseTemplate: false,
       toChangeTemplate: false,
       permissionToChange: false,
       newTemplate: '',
@@ -582,6 +583,7 @@ var app = new Vue({
     },
     triggerSave: function() {
       var $vm = this;
+      var $component = $(selector);
 
       if ($vm.chooseTemplate) {
         if ($vm.settings.templateId) {
@@ -607,11 +609,17 @@ var app = new Vue({
 
       // Add progress
       $('.spinner-holder p').text('Please wait while we save your changes...');
-      $(selector).addClass('is-loading');
+      $component.addClass('is-loading');
 
       // Save and close
       $vm.save().then(function() {
-        Fliplet.Widget.complete();
+        if ($vm.isTemplateLoaded) {
+          Fliplet.Widget.complete();
+        } else {
+          $component.removeClass('is-loading');
+          $vm.isTemplateLoaded = true;
+        }
+
         Fliplet.Studio.emit('reload-page-preview');
       });
     },
@@ -964,6 +972,10 @@ var app = new Vue({
             });
           }, 500);
         }
+
+        if (!$vm.fields.length) {
+          $vm.useTemplate(1);
+        }
       });
     });
 
diff --git a/js/libs/templates.js b/js/libs/templates.js
index d960f0cb..80692331 100644
--- a/js/libs/templates.js
+++ b/js/libs/templates.js
@@ -1,101 +1,60 @@
 var systemTemplates = [{
-    id: 1,
-    settings: {
-      displayName: 'Blank',
-      description: 'Create your own form from scratch.',
-      fields: [{
-          _type: 'flInput',
-          name: 'Question 1',
-          label: 'Enter your first question'
-        },
-        {
-          _type: 'flButtons',
-          name: 'buttons',
-          label: 'Form buttons',
-          _submit: false
-        }
-      ]
-    }
-  },
-  {
-    id: 2,
-    settings: {
-      displayName: 'Enquiry',
-      description: 'An easy way to track enquiries from your customers.',
-      fields: [{
-          _type: 'flInput',
-          name: 'Name',
-          label: 'Name'
-        },
-        {
-          _type: 'flEmail',
-          name: 'Email address',
-          label: 'Email address'
-        },
-        {
-          _type: 'flSelect',
-          name: 'Enquiry type',
-          label: 'What is your enquiry about?',
-          options: [{
-              id: 'Support'
-            },
-            {
-              id: 'Feedback'
-            }
-          ]
-        },
-        {
-          _type: 'flTextarea',
-          name: 'Message',
-          label: 'How can we help you today?'
-        },
-        {
-          _type: 'flButtons',
-          name: 'buttons',
-          label: 'Form buttons',
-          _submit: false
-        }
-      ]
-    }
+  id: 1,
+  settings: {
+    displayName: 'Blank',
+    description: 'Create your own form from scratch.',
+    fields: [{
+        _type: 'flInput',
+        name: 'Text field 1',
+        label: 'This is a text field'
+      },
+      {
+        _type: 'flButtons',
+        name: 'buttons',
+        label: 'Form buttons',
+        _submit: false
+      }
+    ]
   }
+}
 ];
 
 Fliplet.FormBuilder.templates = function() {
-  var organizationId = Fliplet.Env.get('organizationId');
+var organizationId = Fliplet.Env.get('organizationId');
 
-  var operation = Fliplet.Env.get('development') || !organizationId ?
-    Promise.resolve([]) :
-    Fliplet.API.request({
-      url: [
-        'v1/widget-instances',
-        '?organizationId=' + organizationId,
-        '&package=com.fliplet.form-builder',
-        '&publishedOnly=true',
-        '&where=' + encodeURIComponent(JSON.stringify({
-          $contains: {
-            template: true
-          },
-          name: {
-            $ne: null
-          }
-        }))
-      ].join('')
-    }).then(function(response) {
-      response.widgetInstances.forEach(function(instance) {
-        instance.settings.displayName = instance.settings.name
-      });
-      return Promise.resolve(response.widgetInstances);
+var operation = Fliplet.Env.get('development') || !organizationId ?
+  Promise.resolve([]) :
+  Fliplet.API.request({
+    url: [
+      'v1/widget-instances',
+      '?organizationId=' + organizationId,
+      '&package=com.fliplet.form-builder',
+      '&publishedOnly=true',
+      '&where=' + encodeURIComponent(JSON.stringify({
+        $contains: {
+          template: true
+        },
+        name: {
+          $ne: null
+        }
+      }))
+    ].join('')
+  }).then(function(response) {
+    response.widgetInstances.forEach(function(instance) {
+      instance.settings.displayName = instance.settings.name
     });
+    return Promise.resolve(response.widgetInstances);
+  });
 
-  return operation.then(function(organizationTemplates) {
-    organizationTemplates.forEach(function (tpl) {
-      tpl.app = tpl.pages.length && tpl.pages[0].app || {};
-      tpl.createdDescription = (tpl.settings.createdBy && tpl.settings.createdBy.fullName) + ' in ' + tpl.app.name;
-    });
+return operation.then(function(organizationTemplates) {
+  organizationTemplates.forEach(function (tpl) {
+    tpl.app = tpl.pages.length && tpl.pages[0].app || {};
+    tpl.createdDescription = (tpl.settings.createdBy && tpl.settings.createdBy.fullName) + ' in ' + tpl.app.name;
+  });
 
-    return Promise.resolve({
-      system: systemTemplates,
-      organization: organizationTemplates
-    });
-  })
+  return Promise.resolve({
+    system: systemTemplates,
+    organization: organizationTemplates
+  });
+})
 };