From 8da13c5106f45e5703ab86133f640ac69cbb140d Mon Sep 17 00:00:00 2001
From: BatuhanTb <batuhan@diverta.co.jp>
Date: Fri, 4 Oct 2024 10:03:10 +0300
Subject: [PATCH] Add arrow buttons for selecting y/m/s

---
 .../DatePicker/_subs/YearMonthSelector.vue    | 228 +++++++++++-------
 .../PickersContainer/_subs/TimePicker.vue     |  35 ++-
 src/assets/scss/helpers/_position.scss        |   7 +
 src/assets/scss/helpers/index.scss            |   1 +
 src/components/arrow_button.vue               |  68 ++++++
 5 files changed, 256 insertions(+), 83 deletions(-)
 create mode 100644 src/assets/scss/helpers/_position.scss
 create mode 100644 src/components/arrow_button.vue

diff --git a/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/_subs/YearMonthSelector.vue b/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/_subs/YearMonthSelector.vue
index df2b5dab..ec965c79 100644
--- a/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/_subs/YearMonthSelector.vue
+++ b/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/_subs/YearMonthSelector.vue
@@ -3,110 +3,137 @@
     class="year-month-selector flex flex-direction-column"
     :class="{'dark': dark}"
   >
-    <div class="flex justify-content-right">
+    <div class="year-month-selector__actions">
+      <div v-if="!this.isMonthMode" class="chang-years-section">
+        <v-b-arrow-button type="left" :color=color @click="handlePrevYearsClick()" />
+        <v-b-arrow-button type="right" :color=color @click="handleNextYearsClick()" />
+      </div>
+
       <CustomButton
         :color="dark ? '#757575' : '#424242'"
         :dark="dark"
         with-border
         @click="$emit('back')"
+        class="back-button"
       >
         <span class="fs-16">
           ✕
         </span>
       </CustomButton>
     </div>
-    <div class="flex-1 flex flex-wrap justify-content-between align-center">
-      <CustomButton
-        v-for="(m, index) in months"
-        :key="index"
-        :color="color"
-        :selected="currentMonth === index"
-        :dark="dark"
-        class="month-button"
-        with-border
-        @click="selectMonth(index)"
-      >
-        {{ m }}
-      </CustomButton>
-      <CustomButton
-        v-for="year in years"
-        :key="year"
-        :color="color"
-        :dark="dark"
-        :selected="currentYear === year"
-        with-border
-        @click="selectYear(year)"
-      >
-        {{ year }}
-      </CustomButton>
-    </div>
+    <TransitionGroup :name="transitionYearsName" tag="div">
+      <div :key="transitionKey" class="years-month-wrapper">
+        <CustomButton
+          v-for="(m, index) in months"
+          :key="index"
+          :color="color"
+          :selected="currentMonth === index"
+          :dark="dark"
+          class="month-button"
+          with-border
+          @click="selectMonth(index)"
+        >
+          {{ m }}
+        </CustomButton>
+        <CustomButton
+          v-for="year in years"
+          :key="year"
+          :color="color"
+          :dark="dark"
+          :selected="currentYear === year"
+          with-border
+          class="year-button"
+          @click="selectYear(year)"
+        >
+          {{ year }}
+        </CustomButton>
+      </div>
+    </TransitionGroup>
   </div>
 </template>
 
 <script>
-import { getMonthsShort } from '@/VueCtkDateTimePicker/modules/month'
-import CustomButton from '@/VueCtkDateTimePicker/_subs/CustomButton'
+  import { getMonthsShort } from '@/VueCtkDateTimePicker/modules/month'
+  import CustomButton from '@/VueCtkDateTimePicker/_subs/CustomButton'
+  import VBArrowButton from '@/components/arrow_button'
 
-const ArrayRange = (start, end) => {
-  return Array(end - start + 1).fill().map((_, idx) => {
-    const n = start + idx
-    return n
-  })
-}
+  const YEARS_ON_DISPLAY = 15
 
-export default {
-  name: 'YearMonthSelector',
-  components: {
-    CustomButton
-  },
-  props: {
-    locale: { type: String, default: null },
-    dark: { type: Boolean, default: null },
-    color: { type: String, default: null },
-    mode: { type: String, default: null },
-    month: { type: Object, default: null }
-  },
-  data () {
-    return {
-      months: null,
-      years: null
-    }
-  },
-  computed: {
-    currentMonth () {
-      return this.month.month
+  const ArrayRange = (start, end) => {
+    return Array(end - start + 1).fill().map((_, idx) => {
+      const n = start + idx
+      return n
+    })
+  }
+
+  export default {
+    name: 'YearMonthSelector',
+    components: {
+      CustomButton,
+      VBArrowButton
     },
-    currentYear () {
-      return this.month.year
+    props: {
+      locale: { type: String, default: null },
+      dark: { type: Boolean, default: null },
+      color: { type: String, default: null },
+      mode: { type: String, default: null },
+      month: { type: Object, default: null }
     },
-    isMonthMode () {
-      return this.mode === 'month'
-    }
-  },
-  mounted () {
-    if (this.isMonthMode) {
-      this.getMonths()
-    } else {
-      this.getYears()
-    }
-  },
-  methods: {
-    getMonths () {
-      this.years = null
-      this.months = getMonthsShort(this.locale)
+    data () {
+      return {
+        months: null,
+        years: null,
+        transitionYearsName: 'slide-next',
+        transitionKey: 0
+      }
     },
-    getYears () {
-      this.months = null
-      this.years = ArrayRange(this.month.year - 7, this.month.year + 7)
+    computed: {
+      currentMonth () {
+        return this.month.month
+      },
+      currentYear () {
+        return this.month.year
+      },
+      isMonthMode () {
+        return this.mode === 'month'
+      }
     },
-    selectMonth (monthNumber) {
-      this.$emit('input', { month: monthNumber, year: this.currentYear })
+    mounted () {
+      if (this.isMonthMode) {
+        this.getMonths()
+      } else {
+        this.getYears(this.month.year - Math.floor(YEARS_ON_DISPLAY / 2))
+      }
     },
-    selectYear (year) {
-      this.$emit('input', { month: this.currentMonth, year: year })
+    methods: {
+      getMonths () {
+        this.years = null
+        this.months = getMonthsShort(this.locale)
+      },
+      getYears (startYear) {
+        this.months = null
+        this.years = ArrayRange(startYear, startYear + YEARS_ON_DISPLAY - 1)
+      },
+      selectMonth (monthNumber) {
+        this.$emit('input', { month: monthNumber, year: this.currentYear })
+      },
+      selectYear (year) {
+        this.$emit('input', { month: this.currentMonth, year: year })
+      },
+
+      handlePrevYearsClick() {
+        this.transitionYearsName = 'slideprev'
+        this.getYears(this.years[0] - YEARS_ON_DISPLAY)
+        this.transitionKey++
+      },
+
+      handleNextYearsClick() {
+        this.transitionYearsName = 'slidenext'
+        this.getYears(this.years[this.years.length - 1] + 1)
+        this.transitionKey++
+      }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -118,7 +145,9 @@ export default {
     left: 0;
     right: 0;
     color: #424242;
-    padding: 10px;
+    padding-bottom: 10px;
+    overflow: hidden;
+
     &.dark {
       color: white;
       background-color: #424242;
@@ -126,5 +155,40 @@ export default {
     .month-button {
       text-transform: capitalize;
     }
+
+    .back-button {
+      margin-left: auto;
+    }
+
+    &__actions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 10px;
+      height: 56px;
+
+      .chang-years-section {
+        display: flex;
+        align-items: center;
+        gap: 15px;
+      }
+    }
+
+    .years-month-wrapper {
+      margin-top: 15px;
+      padding: 0 10px;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      row-gap: 10px;
+      column-gap: 0;
+      width: 100%;
+      box-sizing: border-box;
+
+      .month-button,
+      .year-button {
+        width: 30%;
+      }
+    }
   }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/TimePicker.vue b/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/TimePicker.vue
index d833641f..81f51199 100644
--- a/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/TimePicker.vue
+++ b/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/TimePicker.vue
@@ -16,6 +16,9 @@
         : column.type === 'hours' ? onScrollHours($event) : column.type === 'minutes' ? onScrollMinutes($event) : column.type === 'seconds' ? onScrollSeconds($event) : onScrollApms($event)
       "
     >
+      <div class="arrow-btn top-0">
+        <v-b-arrow-button  type="up" :color=color @click="handlePrevClick(column.type)"/> 
+      </div>
       <div>
         <div
           class="before"
@@ -46,11 +49,15 @@
           :style="[columnPadding]"
         />
       </div>
+      <div class="arrow-btn bottom-0">
+        <v-b-arrow-button type="down" @click="handleNextClick(column.type)"/> 
+      </div>
     </div>
   </div>
 </template>
 <script>
 import moment from 'moment'
+import VBArrowButton from "@/components/arrow_button"
 
 const ArrayHourRange = (start, end, twoDigit, isAfternoon, disabledHours, isTwelveFormat) => {
   return Array(end - start + 1).fill().map((_, idx) => {
@@ -104,6 +111,9 @@ const debounce = (fn, time) => {
 
 export default {
   name: 'TimePicker',
+  components: {
+    VBArrowButton,
+  },
   props: {
     value: { type: String, default: null },
     format: { type: String, default: null },
@@ -334,9 +344,25 @@ export default {
     this.initPositionView()
   },
   methods: {
+    handlePrevClick(type) {
+      if(this[type.slice(0, -1)] !== 0) {
+        this[type.slice(0, -1)]--; 
+      }
+      this.emitValue();
+    },  
+    handleNextClick(type) {
+      if(type === 'hours' && this.hour < 23) {
+        this.hour++;
+      } else if(type === 'minutes' && this.minute < 59) {
+        this.minute++;
+      } else if(type === 'seconds' && this.second < 59) {
+        this.second++;
+      }
+      this.emitValue();
+    },  
     getValue (scroll) {
       const itemHeight = 28
-      const scrollTop = scroll.target.scrollTop
+      const scrollTop = scroll.target.scrollTop -  18 // Remove arrow button height.
       return Math.round(scrollTop / itemHeight)
     },
     onScrollHours: debounce(function (scroll) {
@@ -501,6 +527,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+  .arrow-btn {
+    position: sticky;
+    background-color:white;
+    z-index: 1;
+    text-align: center;
+  }
+
   .time-picker-column::-webkit-scrollbar {
     display: none;
   }
diff --git a/src/assets/scss/helpers/_position.scss b/src/assets/scss/helpers/_position.scss
new file mode 100644
index 00000000..cd0426dc
--- /dev/null
+++ b/src/assets/scss/helpers/_position.scss
@@ -0,0 +1,7 @@
+.top-0 {
+    top: 0;
+}
+
+.bottom-0 {
+    bottom: 0;
+}
\ No newline at end of file
diff --git a/src/assets/scss/helpers/index.scss b/src/assets/scss/helpers/index.scss
index d5705e23..bd4f8a9b 100644
--- a/src/assets/scss/helpers/index.scss
+++ b/src/assets/scss/helpers/index.scss
@@ -6,6 +6,7 @@
 @import "./_animation.scss";
 @import "./_typo.scss";
 @import "./_width_height.scss";
+@import "./_position.scss";
 
 *, *::before, *::after {
   box-sizing: border-box;
diff --git a/src/components/arrow_button.vue b/src/components/arrow_button.vue
new file mode 100644
index 00000000..f52a3390
--- /dev/null
+++ b/src/components/arrow_button.vue
@@ -0,0 +1,68 @@
+<template>
+    <button
+      type="button"
+      tabindex="-1"
+      class="arrow-button"
+      v-bind="$attrs"
+      v-on="$listeners"
+    >
+      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" :fill=color :stroke=color stroke-width="2">
+        <path :d="arrowPath" />
+      </svg>
+    </button>
+</template>
+
+<script>
+const TYPES = {
+  left: 'left',
+  right: 'right',
+  up: 'up',
+  down: 'down'
+}
+
+const SVG_PATHS = {
+  [TYPES.left]: 'M15.293 3.293 6.586 12l8.707 8.707 1.414-1.414L9.414 12l7.293-7.293-1.414-1.414z',
+  [TYPES.right]: 'M7.293 4.707 14.586 12l-7.293 7.293 1.414 1.414L17.414 12 8.707 3.293 7.293 4.707z',
+  [TYPES.up]: 'M12 6.586L3.293 15.293l1.414 1.414L12 9.414l7.293 7.293 1.414-1.414L12 6.586z',
+  [TYPES.down]: 'M12 17.414L3.293 8.707l1.414-1.414L12 14.586l7.293-7.293 1.414 1.414L12 17.414z',
+}
+
+const DEFAULT_TYPE = TYPES.left
+
+export default {
+  name: 'VBArrowButton',
+
+  inheritAttrs: false,
+
+  props: {
+    type: {
+      type: String,
+      default: 'right',
+      validator: (value) => {
+        return Object.keys(TYPES).includes(value)
+      }
+    },
+    color: {
+      type: String,
+      default: 'dodgerblue',
+    },
+  },
+
+  computed: {
+    arrowPath () {
+      return SVG_PATHS[this.type] || SVG_PATHS[DEFAULT_TYPE]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.arrow-button {
+  border: none;
+  background: white;
+  padding: 0;
+  cursor: pointer;
+  width: 18px;
+  height: 18px;
+}
+</style>