Feature/ID-4705 (#663)

* add timeStamp field

* ID-4705 [FEAT] Create TimeStamp form instance

css/builder.css

@@ -1387,3 +1387,10 @@ form hr {
   color: #e3e1e2;
 }
 
+.timeStamp {
+  font-size: 13px;
+  text-align: center;
+  color: #514f4f;
+  padding: 10px 10px;
+  background-color: #eaeaea;
+}

css/form.css

@@ -1606,3 +1606,10 @@ form hr {
   gap: 11px;
 }
 
+.timeStamp {
+  font-size: 16px;
+  text-align: center;
+  color: #514f4f;
+  padding: 10px 10px;
+  background-color: #eaeaea;
+}

js/components/timeStamp.js

@@ -0,0 +1,49 @@
+Fliplet.FormBuilder.field('timeStamp', {
+  name: 'Time Stamp',
+  category: 'Date & time',
+  submit: false,
+  props: {
+    placeholder: {
+      type: String
+    },
+    description: {
+      type: String
+    },
+    createdAt: {
+      type: Boolean,
+      default: true
+    },
+    updatedAt: {
+      type: Boolean,
+      default: true
+    },
+    showLabel: {
+      type: Boolean,
+      default: false
+    },
+    label: undefined
+  },
+  created: function() {
+    Fliplet.Hooks.on('afterFormSubmit', this.afterFormSubmit);
+  },
+  destroyed: function() {
+    Fliplet.Hooks.off('afterFormSubmit', this.afterFormSubmit);
+  },
+  methods: {
+    afterFormSubmit: async function(data) {
+      let dataSourceId = data.result.dataSourceId;
+
+      const connection = await Fliplet.DataSources.connect(dataSourceId);
+
+      if (data.result.createdAt !== data.result.updatedAt && this.updatedAt) {
+        connection.update(data.result.id, {
+          'Last updated': data.result.updatedAt
+        });
+      } else if (this.createdAt) {
+        connection.update(data.result.id, {
+          'Created at': data.result.createdAt
+        });
+      }
+    }
+  }
+});

js/configurations/timeStamp.js

@@ -0,0 +1 @@
+Fliplet.FormBuilder.configuration('timeStamp');

js/libs/core.js

@@ -222,7 +222,7 @@ Fliplet.FormBuilder = (function() {
       }
 
       component.computed._isFormField = function() {
-        return (this.showLabel || this.showLabel === undefined) && component.props._componentName.default !== 'flCustomButton';
+        return (this.showLabel || this.showLabel === undefined) && !(component.props._componentName.default === 'flCustomButton' || component.props._componentName.default === 'flTimeStamp');
       };
 
       component.computed._labelName = function() {
@@ -752,6 +752,15 @@ Fliplet.FormBuilder = (function() {
 
             break;
 
+          case 'flTimeStamp':
+            if (!this.updatedAt && !this.createdAt) {
+              _.assignIn(this.errors, {
+                timeStampOption: 'Select at least one timestamp saving option to continue'
+              });
+            }
+
+            break;
+
           default:
             // nothing
         }

js/libs/form.js

@@ -1177,6 +1177,8 @@ Fliplet().then(function() {
                 } else if (type === 'flGeolocation') {
                   appendField(field.name, value ? value[0] : null);
                   appendField(`${field.name} (accuracy)`, value ? value[1] : null);
+                } else if (type === 'flTimeStamp') {
+                  return;
                 } else {
                   // Other inputs
                   appendField(field.name, value);

templates/components/timeStamp.build.hbs

@@ -0,0 +1,3 @@
+<div>
+  <div class="timeStamp">timestamp will be recorded upon submission</div>
+</div>

templates/configurations/form.interface.hbs

@@ -1,8 +1,11 @@
-<form v-on:submit.prevent="onSubmit" class="form-horizontal">
+ <form v-on:submit.prevent="onSubmit" class="form-horizontal">
   <div class="form-fields-holder">
-    <div v-if="_isFormField || _componentName === 'flCustomButton'">
+    <div v-if="_isFormField || _componentName === 'flCustomButton' || _componentName === 'flTimeStamp'">
+      <div v-if="_componentName === 'flTimeStamp'">
+        This field will save a timestamp when form is submitted or updated.
+      </div>
       <div class="form-group cleafix" :class="{ 'has-error': _fieldLabelError }">
-        <div v-if="_componentName !== 'flCustomButton'" class="col-xs-12">
+        <div v-if="_componentName !== 'flCustomButton' && _componentName !== 'flTimeStamp'" class="col-xs-12">
           <div class="row">
             <div class="col-xs-5">
               <label class="control-label" for="field-label">Field label</label>
@@ -13,7 +16,7 @@
             </div>
           </div>
         </div>
-        <div v-else class="col-xs-12">
+        <div v-else-if="_componentName !== 'flTimeStamp'" class="col-xs-12">
           <div class="row">
             <div class="col-xs-5">
               <label class="control-label" for="button-label">Button label</label>
@@ -26,7 +29,7 @@
         </div>
       </div>
 
-      <div class="form-group cleafix" :class="{ 'has-error': _fieldNameError }">
+      <div v-if="_componentName !== 'flTimeStamp'" class="form-group cleafix" :class="{ 'has-error': _fieldNameError }">
         <div class="col-xs-12">
           <div class="row">
             <div class="col-xs-5" v-if="_showNameField">
@@ -46,7 +49,7 @@
         </div>
       </div>
 
-      <div class="form-group cleafix" v-if="_supportsRequired">
+      <div class="form-group cleafix" v-if="_supportsRequired && _componentName !== 'flTimeStamp'">
         <div class="col-xs-12">
           <label class="control-label">Is this field required?</label>
         </div>

templates/configurations/timeStamp.interface.hbs

@@ -0,0 +1,23 @@
+<div class="form-group clearfix">
+  <label>Created at:</label>
+  <div class="checkbox checkbox-icon">
+    <input type="checkbox" name="created-at" v-model="createdAt" id="created-at">
+    <label for="created-at">
+      <span class="check"><i class="fa fa-check"></i></span>
+      <span class="hide-field">Save timestamp when form is first submitted</span>
+    </label>
+  </div>
+</div>
+
+<div class="form-group clearfix">
+  <label>Updated at:</label>
+  <div class="checkbox checkbox-icon">
+    <input type="checkbox" name="updated-at" v-model="updatedAt" id="updated-at">
+    <label for="updated-at">
+      <span class="check"><i class="fa fa-check"></i></span>
+      <span class="hide-field">Save timestamp every time form is updated</span>
+    </label>
+  </div>
+</div>
+
+  <div class="text-danger" v-if="errors.timeStampOption"> \{{ errors.timeStampOption }} </div>

widget.json

@@ -66,6 +66,7 @@
       "js/components/starRating.js",
       "js/components/slider.js",
       "js/components/signature.js",
+      "js/components/timeStamp.js",
 
       "js/configurations/input.js",
       "js/configurations/email.js",
@@ -98,6 +99,7 @@
       "js/configurations/slider.js",
       "js/configurations/signature.js",
       "js/configurations/wysiwyg.js",
+      "js/configurations/timeStamp.js",
 
       "js/libs/builder.js",
       "css/builder.css"
@@ -163,6 +165,7 @@
       "js/components/slider.js",
       "js/components/signature.js",
       "js/components/wysiwyg.js",
+      "js/components/timeStamp.js",
 
       "js/libs/form.js",
       "css/form.css"