From dc602d3424e42ffad5567a882189d55d6b0b3f04 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Sat, 14 Jul 2018 12:46:40 +0530
Subject: [PATCH] Commonify Date and Time component into BaseDate component

---
 ui/components/controls/BaseDate.vue | 31 ++++++++++++++++++++++++
 ui/components/controls/Date.vue     | 28 +++++-----------------
 ui/components/controls/Time.vue     | 37 ++++++-----------------------
 3 files changed, 44 insertions(+), 52 deletions(-)
 create mode 100644 ui/components/controls/BaseDate.vue

diff --git a/ui/components/controls/BaseDate.vue b/ui/components/controls/BaseDate.vue
new file mode 100644
index 00000000..2b529fe3
--- /dev/null
+++ b/ui/components/controls/BaseDate.vue
@@ -0,0 +1,31 @@
+<template>
+  <div :class="{'form-group': !onlyInput}">
+    <label v-if="!onlyInput">{{ docfield.label }}</label>
+    <flat-pickr
+      class="form-control"
+      :value="value"
+      :config="config"
+      @on-change="emitChange">
+    </flat-pickr>
+  </div>
+</template>
+<script>
+import flatPickr from 'vue-flatpickr-component';
+import Data from './Data';
+
+export default {
+  extends: Data,
+  props: ['config'],
+  components: {
+    flatPickr
+  },
+  methods: {
+    emitChange(dates, dateString) {
+      this.$emit('change', dateString);
+    }
+  }
+};
+</script>
+<style lang="scss">
+@import "~flatpickr/dist/flatpickr.css";
+</style>
diff --git a/ui/components/controls/Date.vue b/ui/components/controls/Date.vue
index 7e6a9e24..93e48785 100644
--- a/ui/components/controls/Date.vue
+++ b/ui/components/controls/Date.vue
@@ -1,29 +1,13 @@
-<template>
-  <div :class="{'form-group': !onlyInput}">
-    <label v-if="!onlyInput">{{ docfield.label }}</label>
-    <flat-pickr
-      :value="value"
-      class="form-control"
-      @on-change="emitChange">
-    </flat-pickr>
-  </div>
-</template>
 <script>
-import flatPickr from 'vue-flatpickr-component';
-import Data from './Data';
+import BaseDate from './BaseDate';
 
 export default {
-  extends: Data,
-  components: {
-    flatPickr
-  },
-  methods: {
-    emitChange(dates, dateString) {
-      this.$emit('change', dateString);
+  extends: BaseDate,
+  props: {
+    config: {
+      type: Object,
+      default: () => ({})
     }
   }
 };
 </script>
-<style lang="scss">
-@import "flatpickr/dist/flatpickr.css";
-</style>
diff --git a/ui/components/controls/Time.vue b/ui/components/controls/Time.vue
index 572990c0..7e499f4e 100644
--- a/ui/components/controls/Time.vue
+++ b/ui/components/controls/Time.vue
@@ -1,39 +1,16 @@
-<template>
-  <div :class="{ 'form-group': !onlyInput }">
-    <label v-if="!onlyInput">{{ docfield.label }}</label>
-    <flat-pickr
-      :value="value"
-      :config="config"
-      class="form-control"
-      @on-change="emitChange"
-    >
-    </flat-pickr>
-  </div>
-</template>
 <script>
-import flatPickr from 'vue-flatpickr-component';
-import Data from './Data';
+import BaseDate from './BaseDate';
 
 export default {
-  extends: Data,
-  data() {
-    return {
-      config: {
+  extends: BaseDate,
+  props: {
+    config: {
+      type: Object,
+      default: () => ({
         enableTime: true,
         noCalendar: true
-      }
-    };
-  },
-  components: {
-    flatPickr
-  },
-  methods: {
-    emitChange(times, timeString) {
-      this.$emit('change', timeString);
+      })
     }
   }
 };
 </script>
-<style lang="scss">
-@import "flatpickr/dist/flatpickr.css";
-</style>