feat: Creates custom date range picker component (#2597)

* feat: Adds custom date range in reports

* error fixes

* Creates new component for date range and adds stories

* Revert files

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/components/ui/DateRangePicker.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="woot-date-range-picker">
+    <date-picker
+      :range="true"
+      :confirm="true"
+      :clearable="false"
+      :confirm-text="confirmText"
+      :placeholder="placeholder"
+      :value="value"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
+<script>
+import DatePicker from 'vue2-datepicker';
+import 'vue2-datepicker/index.css';
+export default {
+  components: { DatePicker },
+  props: {
+    confirmText: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  methods: {
+    updateValue(val) {
+      this.$emit('change', val);
+    },
+    handleChange(value) {
+      this.updateValue(value);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.woot-date-range-picker {
+  margin-left: var(--space-smaller);
+
+  .mx-input {
+    display: flex;
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-normal);
+    box-shadow: none;
+    height: 4.6rem;
+  }
+}
+</style>

app/javascript/dashboard/components/ui/stories/DateRangePicker.stories.js

@@ -0,0 +1,38 @@
+import { action } from '@storybook/addon-actions';
+import WootDateRangePicker from '../DateRangePicker';
+
+export default {
+  title: 'Components/Date Picker/Date Range Picker',
+  argTypes: {
+    confirmText: {
+      defaultValue: 'Apply',
+      control: {
+        type: 'text',
+      },
+    },
+    placeholder: {
+      defaultValue: 'Select date range',
+      control: {
+        type: 'text',
+      },
+    },
+    value: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { WootDateRangePicker },
+  template:
+    '<woot-date-range-picker v-bind="$props" @change="onChange"></woot-date-range-picker>',
+});
+
+export const DateRangePicker = Template.bind({});
+DateRangePicker.args = {
+  onChange: action('applied'),
+  value: [new Date(), new Date()],
+};

package.json

@@ -62,6 +62,7 @@
     "vue-router": "~2.2.0",
     "vue-template-compiler": "2.6.12",
     "vue-upload-component": "2.8.22",
+    "vue2-datepicker": "^3.9.1",
     "vuelidate": "0.7.6",
     "vuex": "~2.1.1",
     "vuex-router-sync": "~4.1.2"

yarn.lock

@@ -5427,6 +5427,11 @@ date-fns@^1.27.2:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
   integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
 
+date-format-parse@^0.2.6:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/date-format-parse/-/date-format-parse-0.2.6.tgz#7ed42817efb6ec39532169eada9670ae3c627aa7"
+  integrity sha512-sdxnYAWmLopeb+6Hmw+vo3or4OCJOnh4+YoJ9p+Id3o2EnNP0INpTqx7wr8UregfMpgaSZAH473R/ytiaB3gVg==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
@@ -15071,6 +15076,13 @@ vue-upload-component@2.8.22:
   resolved "https://registry.yarnpkg.com/vue-upload-component/-/vue-upload-component-2.8.22.tgz#7a1573149a4afa5ca6e8c7e0bc70533925fe26b7"
   integrity sha512-AJpETqiZrgqs8bwJQpWTFrRg3i6s7cUodRRZVnb1f94Jvpd0YYfzGY4zluBqPmssNSkUaYu7EteXaK8aW17Osw==
 
+vue2-datepicker@^3.9.1:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/vue2-datepicker/-/vue2-datepicker-3.9.1.tgz#00d11cf30942e850f8b1a397af3c15c7465f248e"
+  integrity sha512-LuvcgGR+sDYKcih0z+cyvYufGyBwUtIiwzJPwxE63C8gOsAWiE09KuGtZ3OxdQXJEQM2MGQ9t9t1t7382FiFOg==
+  dependencies:
+    date-format-parse "^0.2.6"
+
 vue@2.6.12, vue@^2.6.12:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"