fix: add periods, remove rank

Author: abichinger

examples/vue-cron.vue

@@ -6,14 +6,14 @@
                 <div>
                     <span>
                         Every:
-                        <select @input="p.rankEvents.input(parseInt($event.target.value))">
-                            <option v-for="item in p.rankData.items" :key="item.value" :value="item.value">{{item.text}}</option>
+                        <select @input="p.periodEvents.input(JSON.parse($event.target.value))">
+                            <option v-for="item in p.periodData.items" :key="item.text" :value="JSON.stringify(item.value)">{{item.text}}</option>
                         </select>
                     </span>
 
 
-                    <template v-for="f in orderByRank(p.fields)">
-                        <span :key="f.id" v-if="p.rankAttrs.value >= f.rank">
+                    <template v-for="f in p.fields">
+                        <span :key="f.id">
                             {{f.id}}:
                             <select @input="f.events.input(getSelected($event.target))" multiple>
                                 <option v-for="item in f.items" :key="item.value" :value="item.value">{{item.text}}</option>
@@ -24,7 +24,7 @@
                     <div>-</div>
 
                     <div>error:{{p.error}}</div>
-                    <div>rank:{{p.rankAttrs.value}}</div>
+                    <div>period:{{p.periodAttrs.value}}</div>
                     <div v-for="f in p.fields" :key="'div'+f.id">{{f.id}}: {{f.attrs.value}}, {{f.cron}}, {{f.selectedStr}}</div>
                 </div>
             </template>
@@ -69,10 +69,6 @@ export default {
             let options = select && select.options;
             return Array.from(options).filter((opt) => opt.selected).map((opt) => opt.value)
         },
-
-        orderByRank(fields){
-            return fields.slice().sort((a, b) => b.rank - a.rank)
-        }
     }
 }
 </script>

src/core.vue

@@ -24,24 +24,24 @@ export default {
                 let locale = getLocale(this.locale)
 
                 return [
-                    {id: 'minute', items: locale.minuteItems, rank: 0},
-                    {id: 'hour', items: locale.hourItems, rank: 1},
-                    {id: 'day', items: locale.dayItems, rank: 2},
-                    {id: 'month', items: locale.monthItems, rank: 4},
-                    {id: 'dayOfWeek', items: locale.dayOfWeekItems, rank: 3},
+                    {id: 'minute', items: locale.minuteItems},
+                    {id: 'hour', items: locale.hourItems},
+                    {id: 'day', items: locale.dayItems},
+                    {id: 'month', items: locale.monthItems},
+                    {id: 'dayOfWeek', items: locale.dayOfWeekItems},
                 ]
             }
         },
-        ranks: {
+        periods: {
             type: Array,
             default: () => {
                 return [
-                    { text: 'Minute', value: -1 },
-                    { text: 'Hour', value: 0 },
-                    { text: 'Day', value: 1 },
-                    { text: 'Week', value: 2 },
-                    { text: 'Month', value: 3 },
-                    { text: 'Year', value: 4 },
+                    { text: 'Minute', value: [] },
+                    { text: 'Hour', value: ['minute'] },
+                    { text: 'Day', value: ['hour', 'minute'] },
+                    { text: 'Week', value: ['day', 'hour', 'minute'] },
+                    { text: 'Month', value: ['dayOfWeek', 'day', 'hour', 'minute'] },
+                    { text: 'Year', value: ['month', 'dayOfWeek', 'day', 'hour', 'minute'] },
                 ]
             }
         }
@@ -56,7 +56,7 @@ export default {
         return {
             selected: selected,
             error: '',
-            selectedRank: this.ranks[this.ranks.length-1].value
+            selectedPeriod: this.periods[this.periods.length-1].value
         }
     },
 
@@ -71,7 +71,13 @@ export default {
             }, {})
         },
         computedFields(){
-            return this.fields.map((f) => new Field(f.id, f.items, f.rank))
+            return this.fields.map((f) => new Field(f.id, f.items))
+        },
+        filteredFields(){
+            return this.selectedPeriod.map((fieldId) => {
+                let i = this.fieldIndex[fieldId]
+                return this.computedFields[i]
+            })
         }
     },
     
@@ -88,7 +94,7 @@ export default {
             },
             deep:true
         },
-        selectedRank: {
+        selectedPeriod: {
             handler: function(){
                 this.selectedToCron(this.selected)
             },
@@ -102,7 +108,7 @@ export default {
         }
 
         let fieldProps = []
-        for(let field of this.computedFields){
+        for(let field of this.filteredFields){
             let i = this.fieldIndex[field.id]
             let values = this.selected[field.id]
 
@@ -129,16 +135,16 @@ export default {
             error: this.error,
             fields: fieldProps,
 
-            rankAttrs: {
-                value: this.selectedRank
+            periodAttrs: {
+                value: this.selectedPeriod
             },
-            rankEvents: {
+            periodEvents: {
                 input: (evt) => {
-                    this.selectedRank = evt
+                    this.selectedPeriod = evt
                 }
             },
-            rankData: {
-                items: this.ranks
+            periodData: {
+                items: this.periods
             },
         })
     },
@@ -160,7 +166,7 @@ export default {
             
             for(var i = 0; i < this.splitValue.length; i++){
                 let field = this.computedFields[i]
-                if(field.rank > this.selectedRank){
+                if(!this.selectedPeriod.includes(field.id)){
                     continue
                 }
 
@@ -178,7 +184,7 @@ export default {
 
             let strings = []
             for(let field of this.computedFields){
-                if(field.rank > this.selectedRank){
+                if(!this.selectedPeriod.includes(field.id)){
                     strings.push('*')
                     continue
                 }

src/util.js

@@ -15,12 +15,10 @@ class Field {
      * 
      * @param {String} name 
      * @param {Array} items 
-     * @param {Number} rank 
      */
-    constructor(id, items, rank){
+    constructor(id, items){
         this.id = id
         this.items = items
-        this.rank = rank
 
         this.itemMap = this.items.reduce((acc, item) => {
             acc[item.value] = item

test/core.test.js

@@ -1,7 +1,8 @@
 import { shallowMount } from '@vue/test-utils'
 import VueCron from '../src/core.vue'
+import 'regenerator-runtime/runtime'
 
-test('test VueCron', () => {
+test('test VueCron', async () => {
     // render the component
     let onInput = jest.fn()
     let props = null
@@ -23,16 +24,18 @@ test('test VueCron', () => {
         }
     })
 
-    expect(props.fields[0].attrs.value).toEqual([0,15,30,45])
-    expect(props.fields[1].attrs.value).toEqual([12])
+    await wrapper.vm.$nextTick()
+
+    expect(props.fields[4].attrs.value).toEqual([0,15,30,45])
+    expect(props.fields[3].attrs.value).toEqual([12])
     expect(props.fields[2].attrs.value).toEqual([])
-    expect(props.fields[3].attrs.value).toEqual([])
-    expect(props.fields[4].attrs.value).toEqual([])
+    expect(props.fields[1].attrs.value).toEqual([])
+    expect(props.fields[0].attrs.value).toEqual([])
 
-    props.fields[0].events.input([1,2,3,4,5])
+    props.fields[4].events.input([1,2,3,4,5])
+
+    await wrapper.vm.$nextTick()
 
-    wrapper.vm.$nextTick(() => {
-        expect(onInput).toHaveBeenCalled()
-    })    
+    expect(onInput).toHaveBeenCalled()
 
 })