Merge branch 'codekraft-studio-features/disable-year' into v1.x

* codekraft-studio-features/disable-year:
  Update tests
  Fix code style
  Removed forgotten comments :(
  Added tests
  Disable invalid year in yearpicker

Author: mariomka

src/DatetimePopup.vue

@@ -8,6 +8,8 @@
       <datetime-year-picker
           v-if="step === 'year'"
           @change="onChangeYear"
+          :min-date="minDatetime"
+          :max-date="maxDatetime"
           :year="year"></datetime-year-picker>
       <datetime-calendar
           v-if="step === 'date'"

src/DatetimeYearPicker.vue

@@ -1,34 +1,49 @@
 <template>
   <div class="vdatetime-year-picker">
     <div class="vdatetime-year-picker__list vdatetime-year-picker__list" ref="yearList">
-      <div class="vdatetime-year-picker__item" v-for="year in years" @click="select(year.number)" :class="{'vdatetime-year-picker__item--selected': year.selected}">{{ year.number }}</div>
+      <div class="vdatetime-year-picker__item" v-for="year in years" @click="select(year)" :class="{'vdatetime-year-picker__item--selected': year.selected, 'vdatetime-year-picker__item--disabled': year.disabled}">{{ year.number }}
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import { years } from './util'
+import { DateTime } from 'luxon'
+import { yearIsDisabled, years } from './util'
 
 export default {
   props: {
     year: {
       type: Number,
       required: true
+    },
+    minDate: {
+      type: DateTime,
+      default: null
+    },
+    maxDate: {
+      type: DateTime,
+      default: null
     }
   },
 
   computed: {
     years () {
       return years(this.year).map(year => ({
         number: year,
-        selected: year === this.year
+        selected: year === this.year,
+        disabled: !year || yearIsDisabled(this.minDate, this.maxDate, year)
       }))
     }
   },
 
   methods: {
     select (year) {
-      this.$emit('change', parseInt(year))
+      if (year.disabled) {
+        return
+      }
+
+      this.$emit('change', parseInt(year.number))
     },
 
     scrollToCurrent () {
@@ -97,4 +112,14 @@ export default {
   color: #3f51b5;
   font-size: 32px;
 }
+
+.vdatetime-year-picker__item--disabled {
+  opacity: 0.4;
+  cursor: default;
+
+  &:hover {
+    color: inherit;
+    background: transparent;
+  }
+}
 </style>

src/util.js

@@ -40,6 +40,14 @@ export function monthDayIsDisabled (minDate, maxDate, year, month, day) {
          (maxDate && date > maxDate)
 }
 
+export function yearIsDisabled (minDate, maxDate, year) {
+  const minYear = minDate ? minDate.year : null
+  const maxYear = maxDate ? maxDate.year : null
+
+  return (minYear && year < minYear) ||
+         (maxYear && year > maxYear)
+}
+
 export function timeComponentIsDisabled (min, max, component) {
   return (min && component < min) ||
          (max && component > max)

test/specs/DatetimeYearPicker.spec.js

@@ -1,3 +1,4 @@
+import { DateTime } from 'luxon'
 import { createVM } from '../helpers/utils.js'
 import DatetimeYearPicker from 'src/DatetimeYearPicker.vue'
 
@@ -12,14 +13,41 @@ describe('DatetimeYearPicker.vue', function () {
 
       expect(vm.$('.vdatetime-year-picker')).to.exist
 
-      const years = vm.$$('.vdatetime-year-picker__list .vdatetime-year-picker__item').map(el => parseInt(el.textContent))
+      const years = vm.$$('.vdatetime-year-picker__list .vdatetime-year-picker__item')
+        .map(el => parseInt(el.textContent))
       const yearList = new Array(201).fill(null).map((item, index) => 1920 + index)
 
       expect(years).eql(yearList)
 
       const selected = parseInt(vm.$('.vdatetime-year-picker__item--selected').textContent)
       expect(selected).eql(2020)
     })
+
+    it('should disable years', function () {
+      const vm = createVM(this,
+        `<DatetimeYearPicker :min-date="minDate" :max-date="maxDate" :year="2018"></DatetimeYearPicker>`,
+        {
+          components: { DatetimeYearPicker },
+          data () {
+            return {
+              minDate: DateTime.fromISO('2018-01-01T00:00:00.000Z').toUTC(),
+              maxDate: DateTime.fromISO('2018-12-01T00:00:00.000Z').toUTC()
+            }
+          }
+        })
+
+      const years = vm.$$('.vdatetime-year-picker__list .vdatetime-year-picker__item')
+
+      years.forEach(year => {
+        const yearNumber = parseInt(year.textContent)
+
+        if (yearNumber === 2018) {
+          expect(year).to.have.not.class('vdatetime-year-picker__item--disabled')
+        } else {
+          expect(year).to.have.class('vdatetime-year-picker__item--disabled')
+        }
+      })
+    })
   })
 
   describe('events', function () {
@@ -43,5 +71,21 @@ describe('DatetimeYearPicker.vue', function () {
       vm.$$('.vdatetime-year-picker__list .vdatetime-year-picker__item')[110].click()
       expect(vm.year).to.be.equal(2030)
     })
+
+    it('should disable change event when year is disabled', function () {
+      const vm = createVM(this,
+        `<DatetimeYearPicker :min-date="minDate" :max-date="maxDate" :year="2018"></DatetimeYearPicker>`,
+        {
+          components: { DatetimeYearPicker },
+          data () {
+            return {
+              minDate: DateTime.fromISO('1920-01-01'),
+              maxDate: DateTime.fromISO('2000-12-01')
+            }
+          }
+        })
+      vm.$$('.vdatetime-year-picker__list .vdatetime-year-picker__item')[0].click()
+      expect(vm.year).not.to.be.equal(1918)
+    })
   })
 })