Date and Date Range Selection Components

farmdata2_modules/fd2_tabs/fd2_example/ex1.html

@@ -1,7 +1,7 @@
 <!-- define a div to wrqp around the app. -->
 <!-- apply v-cloak so that app is not visible until after being rendered -->
 <div id="ex1" v-cloak>
-
+ 
     <p>UserID: <span data-cy="user-id">{{ userID }}</span></p>
     <p>UserName: <span data-cy="user-name">{{ userName }}</span></p>
 
@@ -14,11 +14,22 @@
     <p>Farm Name: <span data-cy="farm-name">{{ farm }}</span></p>
 
     <!-- Exmaple of using a Vue Component -->
+    <!-- the date-selection and date-range-selection components are defined in ../resources/DateSelectionComponent.js  and ../resources/DateRangeSelectionComponent.js -->
+     <!-- That file is imported by the fd2_example.info file -->
+    <date-selection default-date="2021-06-08" latest-date="2022-12-31" earliest-date="2020-01-01"></date-selection>
+
+    <br>
+
+    <date-range-selection default-start-date="2021-02-01" default-end-date="2021-11-01"></date-range-selection>
+
     <!-- the dropdown-with-all component is defined in ../resources/dropdownWithAllComponent.js -->
      <!-- That file is imported by the fd2_example.info file -->
     <dropdown-with-all includes-all @selection-changed='fieldChange' :dropdown-list=fieldList></dropdown-with-all>
     <p>Chosen Field: <span data-cy="selected-field">{{selectedField}}</span></p>
-
+    <br>
+
+    <custom-table :headers="testArray" :rows="testObjectArray" can-edit can-delete @delete-row="deleteFromTestObjectArray" @finish-row-edit="updateTestObjectArray"></custom-table>
+
 </div>
 
 <script>
@@ -29,6 +40,9 @@
     el: '#ex1',
     components: {
         // Register the components that are being used.
+        'date-selection': DateSelectionComponent,
+        'date-range-selection': DateRangeSelectionComponent,
+        customTable: CustomTableComponent,
         'dropdown-with-all': DropdownWithAllComponent
     },
     data: {
@@ -38,6 +52,15 @@
         fieldList: [],
         userID: fd2UserID,
         userName: fd2UserName,
+        testArray: ['cool', 'works?', 'hello'],
+        testObjectArray: [
+            {id: 10, 
+            data: [12, 3, 'answome']},
+            {id: 11,
+            data: [19, 3, 'ansekjdwome'],},
+            {id: 12,
+            data: [12, 12, 'answome12'],},
+        ],
     },
     created() {
         axios
@@ -60,11 +83,28 @@
             .then(response => (this.farm = response.data.name))
             .catch(error => console.log(error))
         },
+        fieldChange(newField) {
+            this.selectedField = newField;
+        },
+        updateTestObjectArray(newObject){
+            for(i=0; i < this.testObjectArray.length; i++){
+                if(array[i].id === newObject.id){
+                    this.testObjectArray.splice(i, 1, newObject)
+                }
+            }
+        },
+        deleteFromTestObjectArray(deletedObjectID){
+            for(var i=0; i < this.testObjectArray.length; i++){
+                if(this.testObjectArray[i].id === deletedObjectID){
+                    this.testObjectArray.splice(i, 1)
+                }
+            }
+        },
         fieldChange(selectedOption) {
             this.selectedField = selectedOption;
         }
     }
-});
+})
 
 Vue.config.devtools = true;
 </script>

farmdata2_modules/fd2_tabs/fd2_example/fd2_example.info

@@ -4,4 +4,7 @@ core = 7.x
 package = FarmData2
 
 stylesheets[all][] = '../resources/fd2.css'
-scripts[] = '../resources/dropdownWithAllComponent.js'
+scripts[] = '../resources/DateSelectionComponent.js'
+scripts[] = '../resources/DateRangeSelectionComponent.js'
+scripts[] = '../resources/dropdownWithAllComponent.js'
+scripts[] = '../resources/customTableComponent.js'

farmdata2_modules/fd2_tabs/fd2_example/testComponents.html

@@ -0,0 +1 @@
+!!!

farmdata2_modules/fd2_tabs/resources/DateRangeSelectionComponent.js

@@ -0,0 +1,53 @@
+try {
+    DateSelectionComponent
+}
+catch(err) {
+    var DateComps = require("./DateSelectionComponent.js")
+    DateSelectionComponent = DateComps.DateSelectionComponent
+}
+
+let DateRangeSelectionComponent = {
+    template: `<div>
+                <date-selection data-cy="start-date-select" :defaultDate="defaultStartDate" :latestDate="latestStartDate" @dateChanged="startDateChange">
+                    Start Date:
+                </date-selection>
+                <date-selection data-cy="end-date-select" :defaultDate="defaultEndDate" :earliestDate="earliestEndDate" @dateChanged="endDateChange">
+                    End Date:
+                </date-selection>
+            </div>
+            `,
+    props: { 
+        defaultStartDate:{
+            type: String,
+            required: true
+        },
+        defaultEndDate:{
+            type: String,
+            required: true
+        }
+    },
+    components: {
+        'date-selection': DateSelectionComponent,
+    },
+    data(){
+        return{
+            earliestEndDate: this.defaultStartDate,
+            latestStartDate: this.defaultEndDate,
+        }
+    },
+    methods: {
+        startDateChange(selectedDate){
+            this.earliestEndDate = selectedDate
+        },
+        endDateChange(selectedDate){
+            this.latestStartDate=selectedDate
+        },
+    },
+}
+
+try {
+    module.exports = {
+        DateRangeSelectionComponent: DateRangeSelectionComponent
+    }
+}
+catch(err) {}

farmdata2_modules/fd2_tabs/resources/DateRangeSelectionComponent.spec.comp.js

@@ -0,0 +1,36 @@
+import { mount } from '@cypress/vue'
+
+var DateComps = require("./DateRangeSelectionComponent.js")
+var DateRangeSelectionComponent = DateComps.DateRangeSelectionComponent
+
+describe('date range selection component', () => {
+    beforeEach(() => {
+        mount(DateRangeSelectionComponent, {
+            propsData: {
+                defaultStartDate: "2021-01-01",
+                defaultEndDate: "2021-12-01"
+            }
+        })
+    })
+    it('exists', () => {
+        cy.get('[data-cy=start-date-select]')
+            .should('exist')
+
+        cy.get('[data-cy=end-date-select]')
+            .should('exist')
+    }) 
+    it('fail to change start date to after end date', () => {
+        cy.get('[data-cy=start-date-select]')
+            .children()
+                .type('2056-01-01')
+                .blur()
+                .should('have.value', '2021-12-01')
+    })
+    it('fail to change end date to before start date', () => {
+        cy.get('[data-cy=end-date-select]')
+            .children()
+                .type('2000-01-01')
+                .blur()
+                .should('have.value', '2021-01-01')
+    })
+})

farmdata2_modules/fd2_tabs/resources/DateSelectionComponent.js

@@ -0,0 +1,41 @@
+let DateSelectionComponent = {
+    template: `<div>
+            <slot></slot>
+            <input data-cy="date-select" type="date" :min="earliestDate" :max="latestDate" id="date" v-model="selectedDate"  @focusout="checkBounds">
+            </div>`,
+    props: {
+        defaultDate: {
+            type: String,
+            required: true,
+        },
+        earliestDate: {
+            type: String,
+        },
+        latestDate: {
+            type: String, 
+        },
+    },
+    data(){
+        return {
+            selectedDate: this.defaultDate,
+        } 
+    },
+    methods: {
+        checkBounds() {
+            if (this.selectedDate > this.latestDate) {
+                this.selectedDate = this.latestDate;
+            }
+            else if (this.selectedDate < this.earliestDate) {
+                this.selectedDate = this.earliestDate;
+            }
+            this.$emit('dateChanged', this.selectedDate)
+        }
+    },
+}
+
+try {
+    module.exports = {
+        DateSelectionComponent: DateSelectionComponent
+    }
+}
+catch(err) {}

farmdata2_modules/fd2_tabs/resources/DateSelectionComponent.spec.comp.js

@@ -0,0 +1,43 @@
+import { mount } from '@cypress/vue'
+
+var DateComps = require("./DateSelectionComponent.js")
+var DateSelectionComponent = DateComps.DateSelectionComponent
+
+describe('date selection component', () => {
+    beforeEach(() => {
+        mount(DateSelectionComponent, {
+            propsData: {
+                defaultDate: "2021-06-09",
+                latestDate: "2021-12-31",
+                earliestDate: "2021-01-01"
+            }
+        })
+    }) 
+    it('sets to a default date', () => {
+        cy.get('[data-cy=date-select]')
+            .should('have.value', '2021-06-09')
+    })
+    it('allows selection of the date by the user', () => {
+        cy.get('[data-cy=date-select]')
+            .type('2021-08-02')
+            .should('have.value', '2021-08-02')
+    })
+    it('cannot be set to after latest date', () => {
+        cy.get('[data-cy=date-select]')
+            .type('2022-08-02')
+            .blur()
+            .should('have.value', '2021-12-31')
+    })
+    it('cannot be set to before earliest date', () => {
+        cy.get('[data-cy=date-select]')
+            .type('2010-08-02')
+            .blur()
+            .should('have.value', '2021-01-01')
+    })
+    it('emits date after input type date is blured', () => {
+        cy.get('[data-cy=date-select]')
+            .type('2010-08-02')
+            .blur().wrap('2010-08-02')
+    })
+})
+

farmdata2_modules/fd2_tabs/resources/customTableComponent.js

@@ -0,0 +1,69 @@
+let CustomTableComponent = {
+    template:`<div>
+                    <table data-cy="custom-table" style="width:100%" border=1>
+                        <tr>
+                            <th data-cy="headers" v-for="header in headers">{{ header }}</th>
+                            <th v-if="canEdit">Edit</th>
+                            <th v-if="canDelete">Delete</th>
+                        </tr>
+                        <tr data-cy="objectTest" v-for="(row, index) in rows">
+                            <td data-cy="tableData" v-for="(item, itemIndex) in row.data">
+                                <input data-cy="testInput" v-if="rowsToEdit.includes(index)" v-model="row.data[itemIndex]"></input><p v-if="!rowsToEdit.includes(index)">{{ item }}</p>
+                            </td>
+                            <td v-if="canEdit"> 
+                                <button data-cy="editButton" @click="editRow(index)" v-if="!rowsToEdit.includes(index)">Edit</button> 
+                                <button data-cy="saveButton" v-if="rowsToEdit.includes(index)" @click="finishRowEdit(index, row.id)">Save</button>
+                            </td>
+                            <td v-if="canDelete"> 
+                                <button data-cy="deleteButton" @click="deleteRow(row.id)">Delete</button>
+                            </td>
+                        </tr>
+                    </table>
+                </div>`,
+    props: { 
+        rows: {
+            type: Array,
+            required: true
+        },
+        headers: {
+            type: Array,
+            required: true
+        },
+        canEdit: {
+            type: Boolean,
+            default: false
+        },
+        canDelete: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            rowsToEdit: [],
+        }
+    },
+    methods: {
+        editRow: function(index){
+            this.rowsToEdit.push(index)
+        },
+        finishRowEdit: function(index, idToChange){
+            for(var i = 0; i < this.rowsToEdit.length; i++){
+                if(this.rowsToEdit[i] == index){
+                    this.rowsToEdit.splice(i, 1)
+                }
+            }
+            var row = this.rows.filter(obj => {
+                return obj.id === idToChange
+            })
+            this.$emit('finished-row-edit', row)
+        },
+        deleteRow: function(id){
+            this.$emit('delete-row', id)
+        }
+    },
+}
+try{
+    module.exports = CustomTableComponent
+}
+catch(err) {}