From 954e192a2b9b51de4b708fc0ad477d1533d6c942 Mon Sep 17 00:00:00 2001
From: FutzMonitor <cgonzalez.smdc@gmail.com>
Date: Fri, 8 Jul 2022 14:04:47 -0400
Subject: [PATCH 1/5] Added The Transplanting Input Form 1. Added the
 transplanting input form to the module's file. 2. Added the transplanting
 page to the field kit module.

---
 .../fd2_field_kit/fd2_field_kit.module        |   9 +
 .../fd2_field_kit/transplantingInput.html     | 412 ++++++++++++++++++
 2 files changed, 421 insertions(+)
 create mode 100644 farmdata2_modules/fd2_tabs/fd2_field_kit/transplantingInput.html
diff --git a/farmdata2_modules/fd2_tabs/fd2_field_kit/fd2_field_kit.module b/farmdata2_modules/fd2_tabs/fd2_field_kit/fd2_field_kit.module
index 9f43691511..500ec67c44 100644
--- a/farmdata2_modules/fd2_tabs/fd2_field_kit/fd2_field_kit.module
+++ b/farmdata2_modules/fd2_tabs/fd2_field_kit/fd2_field_kit.module
@@ -65,6 +65,15 @@ function fd2_field_kit_menu() {
     'weight' => 100,
   );
 
+    $items['farm/fd2-field-kit/transplantingInput'] = array(
+    'title' => 'Transplanting Input',
+    'type' => MENU_LOCAL_TASK,
+    'page callback' => 'fd2_field_kit_view',
+    'page arguments' => array('transplantingInput.html'),
+    'access arguments' => array('view fd2 field kit'),
+    'weight' => 101,
+  );
+
   return $items;
 };
 
diff --git a/farmdata2_modules/fd2_tabs/fd2_field_kit/transplantingInput.html b/farmdata2_modules/fd2_tabs/fd2_field_kit/transplantingInput.html
new file mode 100644
index 0000000000..82772978dc
--- /dev/null
+++ b/farmdata2_modules/fd2_tabs/fd2_field_kit/transplantingInput.html
@@ -0,0 +1,412 @@
+<body>
+    <div id='transplantingInput'>
+        <h1 style='text-align:center;'>Transplanting Input Log</h1> 
+        <br>
+        <fieldset class="panel panel-default center-block" style='max-width: 500px;'>
+            <legend class="panel-heading" style='background-color: #da4f3f; color: white;font-size: x-large;'>Data</legend>
+            <div class="center-block" style='padding: 12px;text-align:center;font-size: medium'>
+                <label for='date-selection'>Date of Transplanting:</label><label style='color:  #da4f3f'>*</label>
+                <input type='date' id='date-selection' name='date-selection' v-model='selectedDate'
+                :min="getMinDate" :max="getMaxDate">
+                <!--Note: method setNewDate-->
+                <br> 
+                <br>
+                <dropdown-with-all data-cy="crop-selection" :dropdown-list='cropArray' @selection-changed='setNewCrop'>Crop:<label style='color: #da4f3f'>*</label></dropdown-with-all>
+                <br>
+                <dropdown-with-all data-cy="area-selection" :dropdown-list='areaFilter' @selection-changed='setNewArea'>Area:<label style='color: #da4f3f'>*</label></dropdown-with-all>
+                <br>
+                <!-- Date of Seeding here -->
+                <dropdown-with-all data-cy="seed-date-selection" :dropdown-list='seedingDateFilter' @selection-changed='setNewSeedDate'>Date of seeding:<label style='color: #da4f3f'>*</label></dropdown-with-all>
+                <br>
+
+                <!-- Inserting rows per bed input here -->
+                <label for='BedRows'>Number of rows per bed:<label style='color: #da4f3f'>*</label>
+                <input type='number' id='BedRows' name='BedRows' @selection-changed='setNewBedRows' v-model='rowsPerBed' value='1' min='1'>
+                <br>
+
+		<!-- Inserting bedfeet input here -->
+		<label for='BedFeet'>Bed feet:<label style='color: #da4f3f'>*</label>
+		<input type='number' id='BedFeet' name='BedFeet' @selection-changed='setNewBedFeet' v-model='bedFeet' value='1' min='1'>
+		<br>
+		<br>
+
+                <label>Comments: </label><textarea data-cy="comments" v-model='comments'></textarea>
+            </div>
+        </fieldset>
+        <fieldset class="panel panel-default center-block" style="max-width: 500px;">
+            <legend class="panel-heading" style='background-color: #da4f3f; color: white;font-size: x-large;'>Labor</legend>
+            <div class="center-block" style='padding: 12px;text-align:center;font-size: medium; display:flex'>
+                <label>Number of Workers:<label style='color: #da4f3f'>*</label> </label><input data-cy="num-workers" style='width: 50px;' type=number value='1' min='1' v-model='numWorkers'>
+                <label> Time:<label style='color: #da4f3f'>*</label> </label><input data-cy='time-spent' style='width: 60px;' type=number value='1' min='1' v-model='time'>
+
+		<!-- Inserting time units here -->
+		<!-- Adding @selection-changed method -->
+		<label> Units:<label style='color: #da4f3f'>*</label> </label>		
+		<select id='timeUnit' name='TimeUnit' @selection-changed='setNewTimeUnit' v-model='selectedTimeUnit'>
+			<option>hours</option>
+			<option selected>minutes</option>
+		</select>
+
+            </div>
+        </fieldset>
+        <div style='text-align:center;'>
+            <label style='color: #da4f3f'>* required field.</label>
+        </div>
+        <button data-cy="submit-button" class="btn center-block" style='background-color: #da4f3f; color: white; font-size: large;' :disabled='formNotCompleted' @click='saveLog'>Submit</button>
+    </div>
+
+    <script>
+        new Vue({
+            el: '#transplantingInput',
+            components:{
+                'date-selection': DateSelectionComponent,
+                'dropdown-with-all': DropdownWithAllComponent,
+                'regex-input': RegexInputComponent,
+            },
+            data:{
+                sessionToken: null,
+                selectedDate: dayjs().format('YYYY-MM-DD').toString(),
+                selectedCrop: null,
+                selectedArea: null,
+                savedArea: null,
+                selectedSeedDate: null, //some crops don't have tray seeding dates (N/A ->0000-00-00) as they arrived in trays
+                selectedTimeUnit: 'minutes',
+                comments: '',
+                numWorkers: 0,
+                time: 0, 
+                rowsPerBed: 1,
+                bedFeet: 1,	
+                cropArray: [],
+                areaResponse: [],
+                timeUnits: ['minutes', 'hours'],
+                idToCropMap: new Map(),
+                cropToSeedDate: new Object(),
+                traySeedingLogs: new Array(),
+                cropToIDMap: new Map(),
+                userToIDMap: new Map(),
+                areaToIDMap: new Map(),
+                logTypeToIDMap: new Map(),
+                plantingId: 0,
+            },
+            methods:{
+                setNewDate(newDate){
+                    this.selectedDate = newDate
+                },
+                setNewCrop(newCrop){
+                    this.selectedCrop = newCrop
+                },
+                setNewArea(newArea){
+                    this.selectedArea = newArea
+                    this.savedArea = newArea
+                },
+                setNewSeedDate(newSeedDate){
+                    this.selectedSeedDate = newSeedDate
+                    // Reset currently selected transplanting date
+                    this.selectedDate = dayjs().format('YYYY-MM-DD').toString()
+                },
+                setNewTimeUnit(newTimeUnit){
+                    this.selectedTimeUnit = newTimeUnit
+                },
+                setNewBedRows(newBedRows){
+                    this.rowsPerBed = newBedRows
+                },
+                setNewBedFeet(newBedFeet){
+                    this.bedFeet = newBedFeet
+                },
+                saveLog(){
+                    createRecord('/farm_asset', this.plantingLogData, this.sessionToken).then((response) => {
+                        this.plantingId = response.data.id
+                    }).then(() => {
+                        createRecord('/log', this.logData, this.sessionToken).then((response) => {
+                        })
+                    })
+                    if(confirm("You have saved a log! Would you like to go the transplanting report page?")){
+                        //Modify later after checking the endpoint
+                        console.log("log created successfully")
+                        window.location.replace('/farm/fd2-barn-kit/transplantingReport')
+                    }
+                },
+                sixMonthsFilter(pastTime) {
+                    const now = new Date();
+
+                    // 6 months = 182 days in average
+                    const sixMonthsInMs = 182 * 24 * 60 * 60 * 1000; 
+
+                    const timeDiffInMs = now.getTime() - pastTime.getTime();
+
+                    // Only crops that have been seeded within 6 months from now are eligible for transplanting
+                    if(timeDiffInMs <= sixMonthsInMs) {
+                        return true;
+                    } else{
+                        return false;
+                    }
+                }
+            },
+            computed: {
+                getMinDate() {
+                    if (this.selectedSeedDate != "N/A" && this.selectedSeedDate != null) {
+                        // Convert date string MM/DD/YYYY to Date
+                        const month = +this.selectedSeedDate.substring(0, 2);
+                        const day = +this.selectedSeedDate.substring(3, 5);
+                        const year = +this.selectedSeedDate.substring(6, 10);
+
+                        const date = new Date(year, month - 1, day);
+                        return date.toISOString().slice(0,10);
+                    }
+                },
+                getMaxDate() {
+                    if (this.selectedSeedDate != "N/A" && this.selectedSeedDate != null) {
+                        // Convert date string MM/DD/YYYY to Date
+                        const month = +this.selectedSeedDate.substring(0, 2);
+                        const day = +this.selectedSeedDate.substring(3, 5);
+                        const year = +this.selectedSeedDate.substring(6, 10);
+
+                        // Get the date 6 months from the selected seeding date
+                        const date = new Date(year, month - 1 + 6, day);
+
+                        return date.toISOString().slice(0,10);
+                    }
+                },
+                seedingDateFilter() {
+                    let seedingDateArray = []
+
+                    if (this.selectedCrop !== null && this.cropToSeedDate[this.selectedCrop] !== undefined) {
+                        // Reverse the array so that most recent days appear on top of the list
+                        this.cropToSeedDate[this.selectedCrop].reverse()
+                        seedingDateArray = this.cropToSeedDate[this.selectedCrop]
+                    }
+                    return seedingDateArray
+                },
+                cropToSeedingDateFilter() {
+                    let march2022TestDate = 1647489600;
+                    const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
+
+                    for (let i = 0; i < this.cropArray.length; i++){
+                            this.cropToSeedDate[this.cropArray[i]] = new Array()
+                    }  
+                    for (let log of this.traySeedingLogs) {
+                        let cropName = this.idToCropMap.get(log.data.crop_tid)
+                        let seedingDate = new Date(log.timestamp*1000)
+                        if (this.sixMonthsFilter(seedingDate)) {
+                            this.cropToSeedDate[cropName].push(seedingDate.toLocaleDateString("en-US", options))
+                        }
+                    }
+                    for (let i = 0; i < this.cropArray.length; i++){
+                        this.cropToSeedDate[this.cropArray[i]].push(new Date(march2022TestDate*1000).toLocaleDateString("en-US", options))
+                        this.cropToSeedDate[this.cropArray[i]].push("N/A")
+                    }
+                },
+                areaFilter(){
+                    let areaArray = []
+                    if(this.selectedSeedingType == 'Tray Seedings'){
+                        let trayAreaOnly = this.areaResponse.filter((x) => x.area_type === 'greenhouse')
+                        areaArray = trayAreaOnly.map((h) => h.name)
+                        if(!areaArray.includes(this.selectedArea)){
+                            this.selectedArea = null
+                        }
+                        if(areaArray.includes(this.savedArea)){
+                            this.selectedArea = this.savedArea
+                        }
+                    }
+                    else if(this.selectedSeedingType == 'Direct Seedings'){
+                        let directAreaOnly = this.areaResponse.filter((x) => x.area_type === 'field' || x.area_type === 'bed')
+                        areaArray = directAreaOnly.map((h) => h.name)
+                        if(!areaArray.includes(this.selectedArea)){
+                            this.selectedArea = null
+                        }
+                        if(areaArray.includes(this.savedArea)){
+                            this.selectedArea = this.savedArea
+                        }
+                    }
+                    else{
+                        areaArray = this.areaResponse.map((h) => h.name)
+                    }
+                    return areaArray
+                },
+                formNotCompleted(){
+                    if(this.selectedCrop == null){
+                        return true
+                    }
+                    if(this.selectedArea == null){
+                        return true
+                    }
+                    if(this.selectedSeedDate == null){
+                        return true
+                    }
+                    if(this.time == 0){
+                        return true
+                    }
+                    if(this.numWorkers == 0){
+                        return true
+                    }
+        		    // Inserting new verification (Story8)
+                    if(this.rowsPerBed == 0){
+                        return true
+                    }
+                    if(this.bedFeet == 0){
+                        return true
+                    } 
+                    return false
+                },
+                plantingLogData(){
+                    planting = {
+                        "name": this.selectedDate + " " + this.selectedCrop + " " + this.selectedArea,
+                        "type": "planting",
+                        "crop": [{
+                            "id": this.cropToIDMap.get(this.selectedCrop),
+                            "resource": "taxonomy_term"
+                        }],
+                    }
+                    return planting
+                },
+                logData(){
+                    let transplantingID = this.logTypeToIDMap.get('Transplantings')
+                    let quantityUnits = this.quantityTransplanting
+                    
+                    transplanting = {
+                        "name": this.selectedDate + " " + this.selectedCrop + " " + this.selectedArea,
+                        "type": "farm_transplanting",
+                        "timestamp": dayjs(this.selectedDate).unix(),
+                        "done": "1",  //any transplanting recorded is done.
+                        "notes": {
+                            "value": this.comments,
+                            "format": "farm_format"
+                        },
+                        "asset": [{ 
+                            "id": this.plantingId,   //Associated planting
+                            "resource": "farm_asset"
+                        }],
+                        "log_category": [{
+                            "id": transplantingID,
+                            "resource": "taxonomy_term"
+                        }],
+                        "movement": {
+                            "area": [{
+                                "id": this.areaToIDMap.get(this.selectedArea),
+                                "resource": "taxonomy_term"
+                            }]
+                        },
+                        "quantity": quantityUnits,
+                        "created": dayjs().unix(),
+                        "data": { 
+                            "crop_tid": this.cropToIDMap.get(this.selectedCrop)
+                        }
+                    }
+                    return transplanting
+                },
+                quantityTransplanting() {
+                    let time = this.time
+                    let feet = this.bedFeet * this.rowsPerBed //bedFeet needs changing to "numFeet"
+                    if(this.selectedTimeUnit == 'minutes'){
+                        time = (Math.round((time / 60)*100))/100
+                    }
+                    quantity = [
+                        {
+                            "measure": "length", 
+                            "value": feet,  //number of row feet 
+                            "unit": {
+                                "id": this.unitToIDMap.get('ROW FEET'), 
+                                "resource": "taxonomy_term"
+                            },
+                            "label": "Amount planted"
+                        },
+                        {
+                            "measure": "ratio", 
+                            "value": this.rowsPerBed,  
+                            "unit": {
+                                "id": this.unitToIDMap.get('ROWS/BED'), 
+                                "resource": "taxonomy_term"
+                            },
+                            "label": "Rows/Bed"
+                        },
+                        {
+                            "measure": "time", 
+                            "value": time,  //hours worked
+                            "unit": {
+                                "id": this.unitToIDMap.get('HOURS'),
+                                "resource": "taxonomy_term"
+                            },
+                            "label": "Labor"
+                        },
+                        {
+                            "measure": "count", 
+                            "value": this.numWorkers,
+                            "unit": {
+                                "id": this.unitToIDMap.get('PEOPLE'),
+                                "resource": "taxonomy_term"
+                            },
+                            "label": "Workers"
+                        },
+                    ]
+                    return quantity
+                },
+            },
+            created() {
+                //Get all crop names
+                let fullResponse = []
+                if(localStorage.getItem('crops') == null){
+                    getAllPages('/taxonomy_term.json?bundle=farm_crops',fullResponse).then(() => {
+                        this.cropArray = fullResponse.map((h) => h.name)
+                        localStorage.setItem('crops', JSON.stringify(this.cropArray))
+                    })
+                }else{
+                    this.cropArray = JSON.parse(localStorage.getItem('crops'))
+                    getAllPages('/taxonomy_term.json?bundle=farm_crops',fullResponse).then(() => {
+                        this.cropArray = fullResponse.map((h) => h.name)
+                        localStorage.setItem('crops', JSON.stringify(this.cropArray))
+                    })
+                }
+
+                //Get all tray seeding logs
+                if(localStorage.getItem('crop_to_seed_date') == null) {
+                    getAllPages('http://localhost/log.json?type=farm_seeding&log_category=Tray Seedings', this.traySeedingLogs).then(() => {
+                        this.cropToSeedingDateFilter
+                        localStorage.setItem('crop_to_seed_date', JSON.stringify(this.cropToSeedDate))
+                    })
+                } else {
+                    this.cropToSeedDate = JSON.parse(localStorage.getItem('crop_to_seed_date'))
+                    getAllPages('http://localhost/log.json?type=farm_seeding&log_category=Tray Seedings', this.traySeedingLogs).then(() => {
+                        this.cropToSeedingDateFilter
+                        localStorage.setItem('crop_to_seed_date', JSON.stringify(this.cropToSeedDate))
+                    })
+                }
+                
+                //Get all area/field names
+                if(localStorage.getItem('areas') == null){
+                    getAllPages('/taxonomy_term.json?bundle=farm_areas', this.areaResponse).then(() => {
+                        localStorage.setItem('areas', JSON.stringify(this.areaResponse))
+                    })
+                }else{
+                    this.areaResponse = JSON.parse(localStorage.getItem('areas'))
+                    getAllPages('/taxonomy_term.json?bundle=farm_areas', this.areaResponse).then(() => {
+                        localStorage.setItem('areas', JSON.stringify(this.areaResponse))
+                    })
+                }
+                getSessionToken().then((response) => {
+                    this.sessionToken = response
+                })
+                getCropToIDMap().then((response) => {
+                    this.cropToIDMap = response
+                })
+                //#4 get ID to crop for Date of Tray Seeding matching
+                getIDToCropMap().then((response) => {
+                    this.idToCropMap = response
+                })
+
+                getUserToIDMap().then((response) => {
+                    this.userToIDMap = response
+                })
+                getAreaToIDMap().then((response) => {
+                    this.areaToIDMap = response
+                })
+                getUnitToIDMap().then((response) => {
+                    this.unitToIDMap = response
+                })
+                getLogTypeToIDMap().then((response) => {
+                    this.logTypeToIDMap = response
+                })
+            }
+        })
+    Vue.config.devtools = true;
+    </script>
+</body>
\ No newline at end of file

From 40f645ba57e967483588119b2ba63716520fdc0d Mon Sep 17 00:00:00 2001
From: FutzMonitor <cgonzalez.smdc@gmail.com>
Date: Fri, 8 Jul 2022 14:35:33 -0400
Subject: [PATCH 2/5] Added the Test File for the Transplanting Input Form 1.
 Removed some spaces from the page. 2. Added an empty test file

---
 .../fd2_tabs/fd2_field_kit/transplantingInput.html           | 5 -----
 .../fd2_tabs/fd2_field_kit/transplantingInput.spec.js        | 0
 2 files changed, 5 deletions(-)
 create mode 100644 farmdata2_modules/fd2_tabs/fd2_field_kit/transplantingInput.spec.js

diff --git a/farmdata2_modules/fd2_tabs/fd2_field_kit/transplantingInput.html b/farmdata2_modules/fd2_tabs/fd2_field_kit/transplantingInput.html
index 82772978dc..efe2db632a 100644
--- a/farmdata2_modules/fd2_tabs/fd2_field_kit/transplantingInput.html
+++ b/farmdata2_modules/fd2_tabs/fd2_field_kit/transplantingInput.html
@@ -18,18 +18,15 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
                 <!-- Date of Seeding here -->
                 <dropdown-with-all data-cy="seed-date-selection" :dropdown-list='seedingDateFilter' @selection-changed='setNewSeedDate'>Date of seeding:<label style='color: #da4f3f'>*</label></dropdown-with-all>
                 <br>
-
                 <!-- Inserting rows per bed input here -->
                 <label for='BedRows'>Number of rows per bed:<label style='color: #da4f3f'>*</label>
                 <input type='number' id='BedRows' name='BedRows' @selection-changed='setNewBedRows' v-model='rowsPerBed' value='1' min='1'>
                 <br>
-
 		<!-- Inserting bedfeet input here -->
 		<label for='BedFeet'>Bed feet:<label style='color: #da4f3f'>*</label>
 		<input type='number' id='BedFeet' name='BedFeet' @selection-changed='setNewBedFeet' v-model='bedFeet' value='1' min='1'>
 		<br>
 		<br>
-
                 <label>Comments: </label><textarea data-cy="comments" v-model='comments'></textarea>
             </div>
         </fieldset>
@@ -38,7 +35,6 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
             <div class="center-block" style='padding: 12px;text-align:center;font-size: medium; display:flex'>
                 <label>Number of Workers:<label style='color: #da4f3f'>*</label> </label><input data-cy="num-workers" style='width: 50px;' type=number value='1' min='1' v-model='numWorkers'>
                 <label> Time:<label style='color: #da4f3f'>*</label> </label><input data-cy='time-spent' style='width: 60px;' type=number value='1' min='1' v-model='time'>
-
 		<!-- Inserting time units here -->
 		<!-- Adding @selection-changed method -->
 		<label> Units:<label style='color: #da4f3f'>*</label> </label>		
@@ -46,7 +42,6 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
 			<option>hours</option>
 			<option selected>minutes</option>
 		</select>
-
             </div>
         </fieldset>
         <div style='text-align:center;'>
diff --git a/farmdata2_modules/fd2_tabs/fd2_field_kit/transplantingInput.spec.js b/farmdata2_modules/fd2_tabs/fd2_field_kit/transplantingInput.spec.js
new file mode 100644
index 0000000000..e69de29bb2

From 2e4fa08f27ce76bdb866c45d547b2f74b13bbe6e Mon Sep 17 00:00:00 2001
From: FutzMonitor <cgonzalez.smdc@gmail.com>
Date: Fri, 8 Jul 2022 16:13:25 -0400
Subject: [PATCH 3/5] Made the Transplanting Input Form More Consistent with
 Seeding Input Form 1. Removed Comments from Data and put it in its own
 category. 2. Replaced all inputs with RegexInputs 3. Added some new methods
 to update the values inside of the Vue data 4. Brought in the map to verify
 valid inputs 5. Added the alert banners fo successful submission or cancel 6.
 Added the cancel method (Still needs to be looked at heavily. Up until this
 point I've frankly been copy and pasting things from the Seeding Report to
 make things consistent. Things that may be unnecessary may have slipped in).

---
 .../fd2_field_kit/transplantingInput.html     | 178 +++++++++++++-----
 1 file changed, 131 insertions(+), 47 deletions(-)

diff --git a/farmdata2_modules/fd2_tabs/fd2_field_kit/transplantingInput.html b/farmdata2_modules/fd2_tabs/fd2_field_kit/transplantingInput.html
index efe2db632a..8cb3226700 100644
--- a/farmdata2_modules/fd2_tabs/fd2_field_kit/transplantingInput.html
+++ b/farmdata2_modules/fd2_tabs/fd2_field_kit/transplantingInput.html
@@ -1,49 +1,58 @@
 <body>
     <div id='transplantingInput'>
         <h1 style='text-align:center;'>Transplanting Input Log</h1> 
-        <br>
-        <fieldset class="panel panel-default center-block" style='max-width: 500px;'>
-            <legend class="panel-heading" style='background-color: #da4f3f; color: white;font-size: x-large;'>Data</legend>
-            <div class="center-block" style='padding: 12px;text-align:center;font-size: medium'>
-                <label for='date-selection'>Date of Transplanting:</label><label style='color:  #da4f3f'>*</label>
-                <input type='date' id='date-selection' name='date-selection' v-model='selectedDate'
-                :min="getMinDate" :max="getMaxDate">
-                <!--Note: method setNewDate-->
-                <br> 
-                <br>
-                <dropdown-with-all data-cy="crop-selection" :dropdown-list='cropArray' @selection-changed='setNewCrop'>Crop:<label style='color: #da4f3f'>*</label></dropdown-with-all>
-                <br>
-                <dropdown-with-all data-cy="area-selection" :dropdown-list='areaFilter' @selection-changed='setNewArea'>Area:<label style='color: #da4f3f'>*</label></dropdown-with-all>
-                <br>
-                <!-- Date of Seeding here -->
-                <dropdown-with-all data-cy="seed-date-selection" :dropdown-list='seedingDateFilter' @selection-changed='setNewSeedDate'>Date of seeding:<label style='color: #da4f3f'>*</label></dropdown-with-all>
-                <br>
-                <!-- Inserting rows per bed input here -->
-                <label for='BedRows'>Number of rows per bed:<label style='color: #da4f3f'>*</label>
-                <input type='number' id='BedRows' name='BedRows' @selection-changed='setNewBedRows' v-model='rowsPerBed' value='1' min='1'>
-                <br>
-		<!-- Inserting bedfeet input here -->
-		<label for='BedFeet'>Bed feet:<label style='color: #da4f3f'>*</label>
-		<input type='number' id='BedFeet' name='BedFeet' @selection-changed='setNewBedFeet' v-model='bedFeet' value='1' min='1'>
-		<br>
-		<br>
-                <label>Comments: </label><textarea data-cy="comments" v-model='comments'></textarea>
+        <div class="alert-boxs" style='max-width: 500px; text-align: center; margin:auto; font-size: large'>
+            <div data-cy='alert-success' class="alert alert-success" role="alert" v-show="isConfirmed == true">
+                Log created and saved successfully.
+            </div>
+            <div data-cy='alert-cancel'class="alert alert-danger" style="display: none;" role="alert" v-show="isConfirmed == false">
+                Log submission canceled by user. The log is <strong>NOT</strong> saved.  
             </div>
+        </div>
+        <fieldset class="panel panel-default center-block" style='max-width: 500px; margin-top: 25px;'>
+            <legend class="panel-heading" style='background-color: #da4f3f; color: white;font-size: x-large;'>Data</legend>
+                <div class="center-block" style='padding: 12px;text-align:center;font-size: medium'>
+                    <label for='date-selection'>Date:</label><label style='color:  #da4f3f; margin-top: 15px'>*</label>
+                    <input type='date' id='date-selection' name='date-selection' v-model='selectedDate'
+                    :min="getMinDate" :max="getMaxDate">
+                    <!--Note: method setNewDate-->
+                    <br> 
+                    <dropdown-with-all data-cy="crop-selection" :dropdown-list='cropArray' @selection-changed='setNewCrop'>Crop:<label style='color: #da4f3f; margin-top: 15px'>*</label></dropdown-with-all>
+                    <br>
+                    <dropdown-with-all data-cy="area-selection" :dropdown-list='areaFilter' @selection-changed='setNewArea'>Area:<label style='color: #da4f3f; margin-top: 15px'>*</label></dropdown-with-all>
+                    <br>
+                    <!-- Date of Seeding here -->
+                    <dropdown-with-all data-cy="seed-date-selection" :dropdown-list='seedingDateFilter' @selection-changed='setNewSeedDate'>Date of seeding:<label style='color: #da4f3f'>*</label></dropdown-with-all>
+                    <br>
+                    <!-- Inserting rows per bed input here -->
+                    <label for='BedRows'>Rows/Bed: <label style='color: #da4f3f'>*</label>
+                    <regex-input data-cy='num-rowbed-input' :reg-exp="regPosInt" set-type="number" :default-val="numRowBed" set-min="0" :disabled="submitInProgress" @input-changed="setNewNumRowBed" @match-changed="(newBool) => updateValidMap('validNumRowBed', newBool)"></regex-input>
+                    <br>
+            <!-- Inserting bedfeet input here -->
+            <label for='BedFeet'>Bed feet:<label style='color: #da4f3f'>*</label>
+            <regex-input data-cy='num-feet-input':reg-exp="regPosInt" set-type="number" :default-val="numFeet" set-min="0" :disabled="submitInProgress" @input-changed="setNewNumFeet" @match-changed="(newBool) => updateValidMap('validNumFeet', newBool)"></regex-input> 
+            <br>
+            <br>
+                </div>
         </fieldset>
         <fieldset class="panel panel-default center-block" style="max-width: 500px;">
             <legend class="panel-heading" style='background-color: #da4f3f; color: white;font-size: x-large;'>Labor</legend>
-            <div class="center-block" style='padding: 12px;text-align:center;font-size: medium; display:flex'>
-                <label>Number of Workers:<label style='color: #da4f3f'>*</label> </label><input data-cy="num-workers" style='width: 50px;' type=number value='1' min='1' v-model='numWorkers'>
-                <label> Time:<label style='color: #da4f3f'>*</label> </label><input data-cy='time-spent' style='width: 60px;' type=number value='1' min='1' v-model='time'>
-		<!-- Inserting time units here -->
-		<!-- Adding @selection-changed method -->
-		<label> Units:<label style='color: #da4f3f'>*</label> </label>		
-		<select id='timeUnit' name='TimeUnit' @selection-changed='setNewTimeUnit' v-model='selectedTimeUnit'>
-			<option>hours</option>
-			<option selected>minutes</option>
-		</select>
+            <div class="center-block" style='padding: 12px;text-align:center;font-size: medium; margin-top: 45px;'>
+                <label style='color: #da4f3f'>*&nbsp;</label>
+                <regex-input data-cy='num-worker-input' :reg-exp="regPosInt" :default-val="numWorkers" set-type="number" set-min="0" :disabled="submitInProgress" @input-changed="setNewNumWorkers" @match-changed="(newBool) => updateValidMap('validNumWorkers', newBool)"></regex-input>                                                
+                <label>&nbsp; Worker(s) for </label> 
+                <label><label style='color: #da4f3f'>*</label> 
+                <regex-input data-cy='minute-input' v-show='selectedTimeUnit == "minutes"' :reg-exp='regPosInt' :default-val="minute" set-type="number" set-min="0" :disabled="submitInProgress" @input-changed="setMinute" @match-changed="(newBool) => updateValidMap('validMinute', newBool)"></regex-input>                                                
+                <regex-input data-cy='hour-input' v-show='selectedTimeUnit == "hours"' :reg-exp='regHour' :default-val="hour" set-type="number" set-min="0" :disabled="submitInProgress" @input-changed="setHour" @match-changed="(newBool) => updateValidMap('validHour', newBool)"></regex-input>                                                
+                <dropdown-with-all data-cy='time-unit' style='text-align:center;' :selected-val='selectedTimeUnit' :dropdown-list='timeUnits' @selection-changed='setNewTimeUnit' :disabled='submitInProgress'></dropdown-with-all></label>
             </div>
         </fieldset>
+        <fieldset class="panel panel-default center-block" style='max-width: 500px; '>
+            <legend class="panel-heading" style='background-color: #da4f3f; color: white;font-size: x-large;'>Comments</legend>
+            <div class="center-block" style='padding: 12px; text-align: center; font-size: medium; margin-top: 45px;'>
+                <textarea data-cy="comments" v-model='comments' style='height: 25px; width: 400px;' :disabled='submitInProgress'></textarea>
+            </div>
+            </fieldset>
         <div style='text-align:center;'>
             <label style='color: #da4f3f'>* required field.</label>
         </div>
@@ -67,10 +76,11 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
                 selectedSeedDate: null, //some crops don't have tray seeding dates (N/A ->0000-00-00) as they arrived in trays
                 selectedTimeUnit: 'minutes',
                 comments: '',
-                numWorkers: 0,
-                time: 0, 
-                rowsPerBed: 1,
-                bedFeet: 1,	
+                numWorkers: null,
+                minute: null,
+                hour: null, 
+                numRowBed: null,
+                numFeet: null,	
                 cropArray: [],
                 areaResponse: [],
                 timeUnits: ['minutes', 'hours'],
@@ -82,6 +92,17 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
                 areaToIDMap: new Map(),
                 logTypeToIDMap: new Map(),
                 plantingId: 0,
+                isConfirmed: null,
+                submitInProgress: false, 
+                validMap: {
+                    "validNumWorkers": false,
+                    "validMinute": false,
+                    "validHour": false,
+                    "validNumRowBed": false,
+                    "validNumFeet": false,
+                },
+                regPosInt: "^[1-9]+[0-9]*$",
+                regHour:"^[1-9]+[0-9]*([.][0-9]{1,2}){0,1}$|^[0]{0,1}[.][1-9][0-9]{0,1}$|^[0]{0,1}[1-9]$|^[1-9]+[0-9]*\.$"
             },
             methods:{
                 setNewDate(newDate){
@@ -108,19 +129,82 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
                 setNewBedFeet(newBedFeet){
                     this.bedFeet = newBedFeet
                 },
-                saveLog(){
+                updateValidMap(key, bool) {    
+                    this.validMap[key] = bool;
+                },
+                setNewDate(newDate){
+                    this.selectedDate = newDate
+                },
+                setNewCrop(newCrop){
+                    this.selectedCrop = newCrop
+                },
+                setNewArea(newArea){
+                    this.selectedArea = newArea
+                    this.savedArea = newArea
+                },
+                setNewTimeUnit(newTimeUnit){
+                    this.selectedTimeUnit = newTimeUnit
+                },
+                setNewFeetUnit(newFeetUnit){
+                    this.selectedFeetUnit = newFeetUnit
+                },
+                setNewNumCellsPerTray(newNumCellsPerTray){
+                    this.numCellsPerTray = newNumCellsPerTray
+                },
+                setNewNumOfTrays(newNumOfTrays){
+                    this.numOfTrays = newNumOfTrays
+                },
+                setNewNumSeedsPlanted(newNumSeedsPlanted) {
+                    this.numSeedsPlanted = newNumSeedsPlanted
+                },
+                setNewNumRowBed(newNumRowBed) {
+                    this.numRowBed = newNumRowBed
+                },
+                setNewNumFeet(newNumFeet) {
+                    this.numFeet = newNumFeet
+                },
+                setNewNumWorkers(newNumWorkers) {
+                    this.numWorkers = newNumWorkers
+                },
+                setMinute(newMinute) {
+                    this.minute = newMinute
+                },
+                setHour(newHour) {
+                    this.hour = newHour
+                },
+                saveLog() {
                     createRecord('/farm_asset', this.plantingLogData, this.sessionToken).then((response) => {
                         this.plantingId = response.data.id
                     }).then(() => {
                         createRecord('/log', this.logData, this.sessionToken).then((response) => {
                         })
                     })
-                    if(confirm("You have saved a log! Would you like to go the transplanting report page?")){
-                        //Modify later after checking the endpoint
-                        console.log("log created successfully")
-                        window.location.replace('/farm/fd2-barn-kit/transplantingReport')
-                    }
+                    this.isConfirmed = true
+                    this.submitInProgress = false
+                    setTimeout(() => {
+                        this.isConfirmed = null 
+                    }, 3000)    
+                },
+                cancelLog() {
+                    this.submitInProgress = false
+                    this.isConfirmed = false
+                    setTimeout(() => { 
+                        this.isConfirmed = null
+                    }, 3000)
                 },
+                // saveLog(){
+                //     createRecord('/farm_asset', this.plantingLogData, this.sessionToken).then((response) => {
+                //         this.plantingId = response.data.id
+                //     }).then(() => {
+                //         createRecord('/log', this.logData, this.sessionToken).then((response) => {
+                //         })
+                //     })
+                //     if(confirm("You have saved a log! Would you like to go the transplanting report page?")){
+                //         //Modify later after checking the endpoint
+                //         console.log("log created successfully")
+                //         window.location.replace('/farm/fd2-barn-kit/transplantingReport')
+                //     }
+                // },
                 sixMonthsFilter(pastTime) {
                     const now = new Date();
 

From bc09fc747fa5725af6b687118d67a739eb08be42 Mon Sep 17 00:00:00 2001
From: FutzMonitor <cgonzalez.smdc@gmail.com>
Date: Tue, 12 Jul 2022 10:21:07 -0400
Subject: [PATCH 4/5] Saving Changes Prior to Table Implementation 1.
 Transplanting Input Form is essentially complete. The API calls and some
 cleaning up have to be done.

---
 .../fd2_field_kit/transplantingInput.html     | 127 +++++++++---------
 1 file changed, 67 insertions(+), 60 deletions(-)

diff --git a/farmdata2_modules/fd2_tabs/fd2_field_kit/transplantingInput.html b/farmdata2_modules/fd2_tabs/fd2_field_kit/transplantingInput.html
index 8cb3226700..3b39e9586e 100644
--- a/farmdata2_modules/fd2_tabs/fd2_field_kit/transplantingInput.html
+++ b/farmdata2_modules/fd2_tabs/fd2_field_kit/transplantingInput.html
@@ -11,30 +11,39 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
         </div>
         <fieldset class="panel panel-default center-block" style='max-width: 500px; margin-top: 25px;'>
             <legend class="panel-heading" style='background-color: #da4f3f; color: white;font-size: x-large;'>Data</legend>
-                <div class="center-block" style='padding: 12px;text-align:center;font-size: medium'>
-                    <label for='date-selection'>Date:</label><label style='color:  #da4f3f; margin-top: 15px'>*</label>
-                    <input type='date' id='date-selection' name='date-selection' v-model='selectedDate'
-                    :min="getMinDate" :max="getMaxDate">
-                    <!--Note: method setNewDate-->
-                    <br> 
-                    <dropdown-with-all data-cy="crop-selection" :dropdown-list='cropArray' @selection-changed='setNewCrop'>Crop:<label style='color: #da4f3f; margin-top: 15px'>*</label></dropdown-with-all>
+                <div class="center-block" style='padding: 12px;text-align:center;font-size: medium; margin-top: 50px;'>
+                    <date-selection data-cy="date-selection" :set-date='selectedDate' @date-changed='setNewDate' v-model='selectedDate' :min="getMinDate" :max="getMaxDate" :disabled='submitInProgress'>Date:<label style='color: #da4f3f'>*</label></date-selection> 
                     <br>
-                    <dropdown-with-all data-cy="area-selection" :dropdown-list='areaFilter' @selection-changed='setNewArea'>Area:<label style='color: #da4f3f; margin-top: 15px'>*</label></dropdown-with-all>
+                    <dropdown-with-all data-cy="crop-selection" :dropdown-list='cropArray' @selection-changed='setNewCrop' :disabled='submitInProgress'>Crop:<label style='color: #da4f3f; margin-top: 15px'>*</label></dropdown-with-all>
                     <br>
-                    <!-- Date of Seeding here -->
-                    <dropdown-with-all data-cy="seed-date-selection" :dropdown-list='seedingDateFilter' @selection-changed='setNewSeedDate'>Date of seeding:<label style='color: #da4f3f'>*</label></dropdown-with-all>
+                    <dropdown-with-all data-cy="seed-date-selection" :dropdown-list='seedingDateFilter' @selection-changed='setNewSeedDate' :disabled='submitInProgress' v-show="cropNotNull == true">Date of seeding:<label style='color: #da4f3f; margin-top: 15px'>*</label></dropdown-with-all>
                     <br>
                     <!-- Inserting rows per bed input here -->
                     <label for='BedRows'>Rows/Bed: <label style='color: #da4f3f'>*</label>
                     <regex-input data-cy='num-rowbed-input' :reg-exp="regPosInt" set-type="number" :default-val="numRowBed" set-min="0" :disabled="submitInProgress" @input-changed="setNewNumRowBed" @match-changed="(newBool) => updateValidMap('validNumRowBed', newBool)"></regex-input>
                     <br>
-            <!-- Inserting bedfeet input here -->
             <label for='BedFeet'>Bed feet:<label style='color: #da4f3f'>*</label>
             <regex-input data-cy='num-feet-input':reg-exp="regPosInt" set-type="number" :default-val="numFeet" set-min="0" :disabled="submitInProgress" @input-changed="setNewNumFeet" @match-changed="(newBool) => updateValidMap('validNumFeet', newBool)"></regex-input> 
             <br>
             <br>
                 </div>
         </fieldset>
+
+        <fieldset class="panel panel-default center-block" style="max-width: 500px;">
+            <legend class="panel-heading" style='background-color: #da4f3f; color: white;font-size: x-large;'>Transplanted</legend>
+            <div class="center-block" style='padding: 12px;text-align:center;font-size: medium; margin-top: 45px;'>
+                <dropdown-with-all data-cy="area-selection" :dropdown-list='areaFilter' @selection-changed='setNewArea' :disabled='submitInProgress'>Area:<label style='color: #da4f3f; margin-top: 15px'>*</label></dropdown-with-all>
+                <br>
+                <label><dropdown-with-all data-cy='unit-feet' :selected-val='selectedFeetUnit' :dropdown-list='feetUnits' @selection-changed='setNewFeetUnit' style='padding-left:20px;' :disabled='submitInProgress'></dropdown-with-all>
+                <label style='color: #da4f3f; margin-top: 15px'>*</label>
+                <regex-input data-cy='num-feet-input':reg-exp="regPosInt" set-type="number" :default-val="numFeet" set-min="0" :disabled="submitInProgress" @input-changed="setNewNumFeet" @match-changed="(newBool) => updateValidMap('validNumFeet', newBool)"></regex-input> 
+                <label for='BedRows'>Rows/Bed: <label style='color: #da4f3f; margin-top: 15px'>*</label>
+                <regex-input data-cy='num-rowbed-input' :reg-exp="regPosInt" set-type="number" :default-val="numRowBed" set-min="0" :disabled="submitInProgress" @input-changed="setNewNumRowBed" @match-changed="(newBool) => updateValidMap('validNumRowBed', newBool)"></regex-input>
+                <label>Trays:<label style='color: #da4f3f'>*</label> 
+                <regex-input data-cy='num-tray-input' :reg-exp="regPosInt" :default-val="numOfTrays" set-type="number" set-min="0" :disabled="submitInProgress" @input-changed="setNewNumOfTrays" @match-changed="(newBool) => updateValidMap('validNumOfTrays', newBool)"></regex-input> 
+            </div>
+        </fieldset>
+
         <fieldset class="panel panel-default center-block" style="max-width: 500px;">
             <legend class="panel-heading" style='background-color: #da4f3f; color: white;font-size: x-large;'>Labor</legend>
             <div class="center-block" style='padding: 12px;text-align:center;font-size: medium; margin-top: 45px;'>
@@ -56,7 +65,11 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
         <div style='text-align:center;'>
             <label style='color: #da4f3f'>* required field.</label>
         </div>
-        <button data-cy="submit-button" class="btn center-block" style='background-color: #da4f3f; color: white; font-size: large;' :disabled='formNotCompleted' @click='saveLog'>Submit</button>
+        <div class="confirm-cancel-button" style='display: flex; justify-content: center;' v-show="submitInProgress==true">
+            <button data-cy="confirm-button" class="btn center-block" style='background-color: #da4f3f; color: white; margin: 15px; width: 100px; font-size: large;' @click='saveLog'>Confirm</button>
+            <button data-cy="cancel-button" class="btn center-block" style='background-color: gray; color: white; margin: 15px; width: 100px; font-size: large;' @click='cancelLog'>Cancel</button>
+        </div>
+        <button data-cy="submit-button" class="btn center-block" style='background-color: #da4f3f; color: white; font-size: large;' :disabled='formNotCompleted' @click='submitLog'>Submit</button>
     </div>
 
     <script>
@@ -80,10 +93,13 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
                 minute: null,
                 hour: null, 
                 numRowBed: null,
-                numFeet: null,	
+                numFeet: null,
+                numOfTrays: null,
+                selectedFeetUnit: 'Bed Feet',	
                 cropArray: [],
                 areaResponse: [],
                 timeUnits: ['minutes', 'hours'],
+                feetUnits: ['Bed Feet', 'Row Feet'],
                 idToCropMap: new Map(),
                 cropToSeedDate: new Object(),
                 traySeedingLogs: new Array(),
@@ -94,6 +110,7 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
                 plantingId: 0,
                 isConfirmed: null,
                 submitInProgress: false, 
+                cropNotNull: false,
                 validMap: {
                     "validNumWorkers": false,
                     "validMinute": false,
@@ -109,7 +126,13 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
                     this.selectedDate = newDate
                 },
                 setNewCrop(newCrop){
-                    this.selectedCrop = newCrop
+                    if(newCrop == null){
+                        this.cropNotNull = false
+                    }
+                    else{
+                        this.cropNotNull = true
+                        this.selectedCrop = newCrop
+                    }
                 },
                 setNewArea(newArea){
                     this.selectedArea = newArea
@@ -132,25 +155,9 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
                 updateValidMap(key, bool) {    
                     this.validMap[key] = bool;
                 },
-                setNewDate(newDate){
-                    this.selectedDate = newDate
-                },
-                setNewCrop(newCrop){
-                    this.selectedCrop = newCrop
-                },
-                setNewArea(newArea){
-                    this.selectedArea = newArea
-                    this.savedArea = newArea
-                },
-                setNewTimeUnit(newTimeUnit){
-                    this.selectedTimeUnit = newTimeUnit
-                },
                 setNewFeetUnit(newFeetUnit){
                     this.selectedFeetUnit = newFeetUnit
                 },
-                setNewNumCellsPerTray(newNumCellsPerTray){
-                    this.numCellsPerTray = newNumCellsPerTray
-                },
                 setNewNumOfTrays(newNumOfTrays){
                     this.numOfTrays = newNumOfTrays
                 },
@@ -172,6 +179,9 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
                 setHour(newHour) {
                     this.hour = newHour
                 },
+                submitLog() {
+                    this.submitInProgress = true
+                },
                 saveLog() {
                     createRecord('/farm_asset', this.plantingLogData, this.sessionToken).then((response) => {
                         this.plantingId = response.data.id
@@ -277,32 +287,20 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
                 },
                 areaFilter(){
                     let areaArray = []
-                    if(this.selectedSeedingType == 'Tray Seedings'){
-                        let trayAreaOnly = this.areaResponse.filter((x) => x.area_type === 'greenhouse')
-                        areaArray = trayAreaOnly.map((h) => h.name)
-                        if(!areaArray.includes(this.selectedArea)){
-                            this.selectedArea = null
-                        }
-                        if(areaArray.includes(this.savedArea)){
-                            this.selectedArea = this.savedArea
-                        }
+                    let trayAreaOnly = this.areaResponse.filter((x) => x.area_type === 'greenhouse')
+                    areaArray = trayAreaOnly.map((h) => h.name)
+                    if(!areaArray.includes(this.selectedArea)){
+                        this.selectedArea = null
                     }
-                    else if(this.selectedSeedingType == 'Direct Seedings'){
-                        let directAreaOnly = this.areaResponse.filter((x) => x.area_type === 'field' || x.area_type === 'bed')
-                        areaArray = directAreaOnly.map((h) => h.name)
-                        if(!areaArray.includes(this.selectedArea)){
-                            this.selectedArea = null
-                        }
-                        if(areaArray.includes(this.savedArea)){
-                            this.selectedArea = this.savedArea
-                        }
-                    }
-                    else{
-                        areaArray = this.areaResponse.map((h) => h.name)
+                    if(areaArray.includes(this.savedArea)){
+                        this.selectedArea = this.savedArea
                     }
                     return areaArray
                 },
                 formNotCompleted(){
+                    if (this.submitInProgress == true){
+                        return true
+                    }
                     if(this.selectedCrop == null){
                         return true
                     }
@@ -312,19 +310,28 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
                     if(this.selectedSeedDate == null){
                         return true
                     }
-                    if(this.time == 0){
+                    if(this.selectedTimeUnit == 'minutes'){
+                        if(!this.validMap["validMinute"]){
+                            return true
+                        }
+                    }
+                    if(this.selectedTimeUnit == 'hours'){
+                        if(!this.validMap["validHour"]){
+                            return true
+                        }
+                    }
+                    if(!this.validMap["validNumFeet"]){
                         return true
                     }
-                    if(this.numWorkers == 0){
+                    if(!this.validMap["validNumRowBed"]){
                         return true
                     }
-        		    // Inserting new verification (Story8)
-                    if(this.rowsPerBed == 0){
+                    if(!this.validMap["validNumOfTrays"]){
                         return true
                     }
-                    if(this.bedFeet == 0){
+                    if(!this.validMap["validNumWorkers"]){
                         return true
-                    } 
+                    }
                     return false
                 },
                 plantingLogData(){
@@ -449,7 +456,6 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
                         localStorage.setItem('crop_to_seed_date', JSON.stringify(this.cropToSeedDate))
                     })
                 }
-                
                 //Get all area/field names
                 if(localStorage.getItem('areas') == null){
                     getAllPages('/taxonomy_term.json?bundle=farm_areas', this.areaResponse).then(() => {
@@ -457,8 +463,9 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
                     })
                 }else{
                     this.areaResponse = JSON.parse(localStorage.getItem('areas'))
-                    getAllPages('/taxonomy_term.json?bundle=farm_areas', this.areaResponse).then(() => {
-                        localStorage.setItem('areas', JSON.stringify(this.areaResponse))
+                    getAllPages('/taxonomy_term.json?bundle=farm_areas').then((resp) => {
+                        this.areaResponse = resp
+                        localStorage.setItem('areas', JSON.stringify(resp))
                     })
                 }
                 getSessionToken().then((response) => {

From 1a99c4d2f68b733a397446b71d1609c82789c762 Mon Sep 17 00:00:00 2001
From: FutzMonitor <cgonzalez.smdc@gmail.com>
Date: Tue, 12 Jul 2022 16:27:15 -0400
Subject: [PATCH 5/5] Transplanting Input Form: Report Page 1. Added a table
 that will be populated by planting assets that are in areas where exclusively
 tray seeding occurs. 2. Added some code for caching the planting assets into
 the page because it currently takes 5-8 seconds for the table to generate as
 it waits for the assets to come in. 3. Added filter behavior, but it
 currently doesn't work.

---
 .../fd2_field_kit/transplantingInput.html     | 246 +++++++++++++-----
 1 file changed, 181 insertions(+), 65 deletions(-)

diff --git a/farmdata2_modules/fd2_tabs/fd2_field_kit/transplantingInput.html b/farmdata2_modules/fd2_tabs/fd2_field_kit/transplantingInput.html
index 3b39e9586e..f6b8ec708c 100644
--- a/farmdata2_modules/fd2_tabs/fd2_field_kit/transplantingInput.html
+++ b/farmdata2_modules/fd2_tabs/fd2_field_kit/transplantingInput.html
@@ -1,81 +1,89 @@
 <body>
     <div id='transplantingInput'>
-        <h1 style='text-align:center;'>Transplanting Input Log</h1> 
-        <div class="alert-boxs" style='max-width: 500px; text-align: center; margin:auto; font-size: large'>
-            <div data-cy='alert-success' class="alert alert-success" role="alert" v-show="isConfirmed == true">
-                Log created and saved successfully.
-            </div>
-            <div data-cy='alert-cancel'class="alert alert-danger" style="display: none;" role="alert" v-show="isConfirmed == false">
-                Log submission canceled by user. The log is <strong>NOT</strong> saved.  
+        <div v-show="selectionInProgress == true">
+            <h1 style='text-align: center;'>Transplanting Input Log</h1> 
+            <p style='text-align: center; margin-bottom: 15px;'>Please select a plant to transplant</p>
+            <div v-if="assetList.length != 0">
+                <fieldset data-cy="filters-panel" class="center-block panel panel-default" style="width: 50%;">
+                    <legend class="panel-heading" style="background-color: #d62a17; color: white;">Filters</legend>
+                        <div style="display: flex; width: 100%;">                    
+                            <dropdown-with-all data-cy="crop-dropdown" class="center-block" :dropdown-list='cropArray' includes-all selected-val='All'>Crop:</dropdown-with-all>
+                            <dropdown-with-all data-cy="area-dropdown" class="center-block" :dropdown-list='areaFilter' includes-all selected-val='All'>Area:</dropdown-with-all> 
+                        </div>
+                    </fieldset>
+                <custom-table data-cy="report-table" :rows='tableRows' :headers='headers' style="width: 10%;"></custom-table>
             </div>
         </div>
-        <fieldset class="panel panel-default center-block" style='max-width: 500px; margin-top: 25px;'>
-            <legend class="panel-heading" style='background-color: #da4f3f; color: white;font-size: x-large;'>Data</legend>
-                <div class="center-block" style='padding: 12px;text-align:center;font-size: medium; margin-top: 50px;'>
-                    <date-selection data-cy="date-selection" :set-date='selectedDate' @date-changed='setNewDate' v-model='selectedDate' :min="getMinDate" :max="getMaxDate" :disabled='submitInProgress'>Date:<label style='color: #da4f3f'>*</label></date-selection> 
-                    <br>
-                    <dropdown-with-all data-cy="crop-selection" :dropdown-list='cropArray' @selection-changed='setNewCrop' :disabled='submitInProgress'>Crop:<label style='color: #da4f3f; margin-top: 15px'>*</label></dropdown-with-all>
-                    <br>
-                    <dropdown-with-all data-cy="seed-date-selection" :dropdown-list='seedingDateFilter' @selection-changed='setNewSeedDate' :disabled='submitInProgress' v-show="cropNotNull == true">Date of seeding:<label style='color: #da4f3f; margin-top: 15px'>*</label></dropdown-with-all>
+        <div v-show="selectionInProgress == false">
+            <h1 style='text-align:center;'>Transplanting Input Log</h1> 
+            <div class="alert-boxs" style='max-width: 500px; text-align: center; margin:auto; font-size: large'>
+                <div data-cy='alert-success' class="alert alert-success" role="alert" v-show="isConfirmed == true">
+                    Log created and saved successfully.
+                </div>
+                <div data-cy='alert-cancel'class="alert alert-danger" style="display: none;" role="alert" v-show="isConfirmed == false">
+                    Log submission canceled by user. The log is <strong>NOT</strong> saved.  
+                </div>
+            </div>
+            <fieldset class="panel panel-default center-block" style='max-width: 500px; margin-top: 25px;'>
+                <legend class="panel-heading" style='background-color: #da4f3f; color: white;font-size: x-large;'>Data</legend>
+                    <div class="center-block" style='padding: 12px;text-align:center;font-size: medium; margin-top: 50px;'>
+                        <date-selection data-cy="date-selection" :set-date='selectedDate' @date-changed='setNewDate' v-model='selectedDate' :min="getMinDate" :max="getMaxDate" :disabled='submitInProgress'>Date:<label style='color: #da4f3f'>*</label></date-selection> 
+                        <br>
+                        <dropdown-with-all data-cy="crop-selection" :dropdown-list='cropArray' @selection-changed='setNewCrop' :disabled='submitInProgress'>Crop:<label style='color: #da4f3f; margin-top: 15px'>*</label></dropdown-with-all>
+                        <br>
+                        <dropdown-with-all data-cy="seed-date-selection" :dropdown-list='seedingDateFilter' @selection-changed='setNewSeedDate' :disabled='submitInProgress' v-show="cropNotNull == true">Date of seeding:<label style='color: #da4f3f; margin-top: 15px'>*</label></dropdown-with-all>
+                        <br>
+                    </div>
+            </fieldset>
+
+            <fieldset class="panel panel-default center-block" style="max-width: 500px;">
+                <legend class="panel-heading" style='background-color: #da4f3f; color: white;font-size: x-large;'>Transplanted</legend>
+                <div class="center-block" style='padding: 12px;text-align:center;font-size: medium; margin-top: 45px;'>
+                    <dropdown-with-all data-cy="area-selection" :dropdown-list='areaFilter' @selection-changed='setNewArea' :disabled='submitInProgress'>Area:<label style='color: #da4f3f; margin-top: 15px'>*</label></dropdown-with-all>
                     <br>
-                    <!-- Inserting rows per bed input here -->
-                    <label for='BedRows'>Rows/Bed: <label style='color: #da4f3f'>*</label>
+                    <label><dropdown-with-all data-cy='unit-feet' :selected-val='selectedFeetUnit' :dropdown-list='feetUnits' @selection-changed='setNewFeetUnit' style='padding-left:20px;' :disabled='submitInProgress'></dropdown-with-all>
+                    <label style='color: #da4f3f; margin-top: 15px'>*</label>
+                    <regex-input data-cy='num-feet-input':reg-exp="regPosInt" set-type="number" :default-val="numFeet" set-min="0" :disabled="submitInProgress" @input-changed="setNewNumFeet" @match-changed="(newBool) => updateValidMap('validNumFeet', newBool)"></regex-input> 
+                    <label for='BedRows'>Rows/Bed: <label style='color: #da4f3f; margin-top: 15px'>*</label>
                     <regex-input data-cy='num-rowbed-input' :reg-exp="regPosInt" set-type="number" :default-val="numRowBed" set-min="0" :disabled="submitInProgress" @input-changed="setNewNumRowBed" @match-changed="(newBool) => updateValidMap('validNumRowBed', newBool)"></regex-input>
-                    <br>
-            <label for='BedFeet'>Bed feet:<label style='color: #da4f3f'>*</label>
-            <regex-input data-cy='num-feet-input':reg-exp="regPosInt" set-type="number" :default-val="numFeet" set-min="0" :disabled="submitInProgress" @input-changed="setNewNumFeet" @match-changed="(newBool) => updateValidMap('validNumFeet', newBool)"></regex-input> 
-            <br>
-            <br>
+                    <label>Trays:<label style='color: #da4f3f'>*</label> 
+                    <regex-input data-cy='num-tray-input' :reg-exp="regPosInt" :default-val="numOfTrays" set-type="number" set-min="0" :disabled="submitInProgress" @input-changed="setNewNumOfTrays" @match-changed="(newBool) => updateValidMap('validNumOfTrays', newBool)"></regex-input> 
                 </div>
-        </fieldset>
-
-        <fieldset class="panel panel-default center-block" style="max-width: 500px;">
-            <legend class="panel-heading" style='background-color: #da4f3f; color: white;font-size: x-large;'>Transplanted</legend>
-            <div class="center-block" style='padding: 12px;text-align:center;font-size: medium; margin-top: 45px;'>
-                <dropdown-with-all data-cy="area-selection" :dropdown-list='areaFilter' @selection-changed='setNewArea' :disabled='submitInProgress'>Area:<label style='color: #da4f3f; margin-top: 15px'>*</label></dropdown-with-all>
-                <br>
-                <label><dropdown-with-all data-cy='unit-feet' :selected-val='selectedFeetUnit' :dropdown-list='feetUnits' @selection-changed='setNewFeetUnit' style='padding-left:20px;' :disabled='submitInProgress'></dropdown-with-all>
-                <label style='color: #da4f3f; margin-top: 15px'>*</label>
-                <regex-input data-cy='num-feet-input':reg-exp="regPosInt" set-type="number" :default-val="numFeet" set-min="0" :disabled="submitInProgress" @input-changed="setNewNumFeet" @match-changed="(newBool) => updateValidMap('validNumFeet', newBool)"></regex-input> 
-                <label for='BedRows'>Rows/Bed: <label style='color: #da4f3f; margin-top: 15px'>*</label>
-                <regex-input data-cy='num-rowbed-input' :reg-exp="regPosInt" set-type="number" :default-val="numRowBed" set-min="0" :disabled="submitInProgress" @input-changed="setNewNumRowBed" @match-changed="(newBool) => updateValidMap('validNumRowBed', newBool)"></regex-input>
-                <label>Trays:<label style='color: #da4f3f'>*</label> 
-                <regex-input data-cy='num-tray-input' :reg-exp="regPosInt" :default-val="numOfTrays" set-type="number" set-min="0" :disabled="submitInProgress" @input-changed="setNewNumOfTrays" @match-changed="(newBool) => updateValidMap('validNumOfTrays', newBool)"></regex-input> 
-            </div>
-        </fieldset>
+            </fieldset>
 
-        <fieldset class="panel panel-default center-block" style="max-width: 500px;">
-            <legend class="panel-heading" style='background-color: #da4f3f; color: white;font-size: x-large;'>Labor</legend>
-            <div class="center-block" style='padding: 12px;text-align:center;font-size: medium; margin-top: 45px;'>
-                <label style='color: #da4f3f'>*&nbsp;</label>
-                <regex-input data-cy='num-worker-input' :reg-exp="regPosInt" :default-val="numWorkers" set-type="number" set-min="0" :disabled="submitInProgress" @input-changed="setNewNumWorkers" @match-changed="(newBool) => updateValidMap('validNumWorkers', newBool)"></regex-input>                                                
-                <label>&nbsp; Worker(s) for </label> 
-                <label><label style='color: #da4f3f'>*</label> 
-                <regex-input data-cy='minute-input' v-show='selectedTimeUnit == "minutes"' :reg-exp='regPosInt' :default-val="minute" set-type="number" set-min="0" :disabled="submitInProgress" @input-changed="setMinute" @match-changed="(newBool) => updateValidMap('validMinute', newBool)"></regex-input>                                                
-                <regex-input data-cy='hour-input' v-show='selectedTimeUnit == "hours"' :reg-exp='regHour' :default-val="hour" set-type="number" set-min="0" :disabled="submitInProgress" @input-changed="setHour" @match-changed="(newBool) => updateValidMap('validHour', newBool)"></regex-input>                                                
-                <dropdown-with-all data-cy='time-unit' style='text-align:center;' :selected-val='selectedTimeUnit' :dropdown-list='timeUnits' @selection-changed='setNewTimeUnit' :disabled='submitInProgress'></dropdown-with-all></label>
+            <fieldset class="panel panel-default center-block" style="max-width: 500px;">
+                <legend class="panel-heading" style='background-color: #da4f3f; color: white;font-size: x-large;'>Labor</legend>
+                <div class="center-block" style='padding: 12px;text-align:center;font-size: medium; margin-top: 45px;'>
+                    <label style='color: #da4f3f'>*&nbsp;</label>
+                    <regex-input data-cy='num-worker-input' :reg-exp="regPosInt" :default-val="numWorkers" set-type="number" set-min="0" :disabled="submitInProgress" @input-changed="setNewNumWorkers" @match-changed="(newBool) => updateValidMap('validNumWorkers', newBool)"></regex-input>                                                
+                    <label>&nbsp; Worker(s) for </label> 
+                    <label><label style='color: #da4f3f'>*</label> 
+                    <regex-input data-cy='minute-input' v-show='selectedTimeUnit == "minutes"' :reg-exp='regPosInt' :default-val="minute" set-type="number" set-min="0" :disabled="submitInProgress" @input-changed="setMinute" @match-changed="(newBool) => updateValidMap('validMinute', newBool)"></regex-input>                                                
+                    <regex-input data-cy='hour-input' v-show='selectedTimeUnit == "hours"' :reg-exp='regHour' :default-val="hour" set-type="number" set-min="0" :disabled="submitInProgress" @input-changed="setHour" @match-changed="(newBool) => updateValidMap('validHour', newBool)"></regex-input>                                                
+                    <dropdown-with-all data-cy='time-unit' style='text-align:center;' :selected-val='selectedTimeUnit' :dropdown-list='timeUnits' @selection-changed='setNewTimeUnit' :disabled='submitInProgress'></dropdown-with-all></label>
+                </div>
+            </fieldset>
+            <fieldset class="panel panel-default center-block" style='max-width: 500px; '>
+                <legend class="panel-heading" style='background-color: #da4f3f; color: white;font-size: x-large;'>Comments</legend>
+                <div class="center-block" style='padding: 12px; text-align: center; font-size: medium; margin-top: 45px;'>
+                    <textarea data-cy="comments" v-model='comments' style='height: 25px; width: 400px;' :disabled='submitInProgress'></textarea>
+                </div>
+                </fieldset>
+            <div style='text-align:center;'>
+                <label style='color: #da4f3f'>* required field.</label>
             </div>
-        </fieldset>
-        <fieldset class="panel panel-default center-block" style='max-width: 500px; '>
-            <legend class="panel-heading" style='background-color: #da4f3f; color: white;font-size: x-large;'>Comments</legend>
-            <div class="center-block" style='padding: 12px; text-align: center; font-size: medium; margin-top: 45px;'>
-                <textarea data-cy="comments" v-model='comments' style='height: 25px; width: 400px;' :disabled='submitInProgress'></textarea>
+            <div class="confirm-cancel-button" style='display: flex; justify-content: center;' v-show="submitInProgress==true">
+                <button data-cy="confirm-button" class="btn center-block" style='background-color: #da4f3f; color: white; margin: 15px; width: 100px; font-size: large;' @click='saveLog'>Confirm</button>
+                <button data-cy="cancel-button" class="btn center-block" style='background-color: gray; color: white; margin: 15px; width: 100px; font-size: large;' @click='cancelLog'>Cancel</button>
             </div>
-            </fieldset>
-        <div style='text-align:center;'>
-            <label style='color: #da4f3f'>* required field.</label>
-        </div>
-        <div class="confirm-cancel-button" style='display: flex; justify-content: center;' v-show="submitInProgress==true">
-            <button data-cy="confirm-button" class="btn center-block" style='background-color: #da4f3f; color: white; margin: 15px; width: 100px; font-size: large;' @click='saveLog'>Confirm</button>
-            <button data-cy="cancel-button" class="btn center-block" style='background-color: gray; color: white; margin: 15px; width: 100px; font-size: large;' @click='cancelLog'>Cancel</button>
+            <button data-cy="submit-button" class="btn center-block" style='background-color: #da4f3f; color: white; font-size: large;' :disabled='formNotCompleted' @click='submitLog'>Submit</button>
         </div>
-        <button data-cy="submit-button" class="btn center-block" style='background-color: #da4f3f; color: white; font-size: large;' :disabled='formNotCompleted' @click='submitLog'>Submit</button>
-    </div>
 
     <script>
         new Vue({
             el: '#transplantingInput',
             components:{
+                'custom-table': CustomTableComponent,
                 'date-selection': DateSelectionComponent,
                 'dropdown-with-all': DropdownWithAllComponent,
                 'regex-input': RegexInputComponent,
@@ -98,8 +106,13 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
                 selectedFeetUnit: 'Bed Feet',	
                 cropArray: [],
                 areaResponse: [],
+                assetResponse: [],
                 timeUnits: ['minutes', 'hours'],
                 feetUnits: ['Bed Feet', 'Row Feet'],
+
+                headers: ['Date', 'Crop', 'Area'],
+                assetList: [],
+
                 idToCropMap: new Map(),
                 cropToSeedDate: new Object(),
                 traySeedingLogs: new Array(),
@@ -110,6 +123,7 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
                 plantingId: 0,
                 isConfirmed: null,
                 submitInProgress: false, 
+                selectionInProgress: true,
                 cropNotNull: false,
                 validMap: {
                     "validNumWorkers": false,
@@ -118,6 +132,7 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
                     "validNumRowBed": false,
                     "validNumFeet": false,
                 },
+                
                 regPosInt: "^[1-9]+[0-9]*$",
                 regHour:"^[1-9]+[0-9]*([.][0-9]{1,2}){0,1}$|^[0]{0,1}[.][1-9][0-9]{0,1}$|^[0]{0,1}[1-9]$|^[1-9]+[0-9]*\.$"
             },
@@ -232,6 +247,75 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
                 }
             },
             computed: {
+                tableRows() {
+                    let filterRows = this.assetResponse.filter((x) => x)
+                    
+                    if(this.selectedArea != 'All'){
+                        filterRows = filterRows.filter((x) => x.location[0].name === this.selectedArea)
+                    }
+                    if(this.selectedCrop != 'All'){
+                        filterRows = filterRows.filter((x) => x.crop[0].name === this.selectedCrop)
+                    }
+                    let $vm = this
+                    let rows = filterRows.map(function(h) {
+                        return{
+                            id: h.id,
+                            data: [
+                                dayjs.unix(h.created).format('YYYY-MM-DD'),
+                                h.crop[0].name,
+                                h.location[0].name, 
+
+                            ]
+                        }
+                    })
+
+                    console.log("Total length of rows: " + rows.length)
+                    for(let i = 0; i < rows.length - 1; i++ ){
+                        if(!(this.areaFilter.includes(rows[i].data[2]))){
+                            console.log(i + ": The location that should be removed: " + rows[i].data[2] )
+                            rows.splice(i, 1)
+                        }
+                    }
+                    rows.sort(function compareNumbers(a, b) {
+                        return new Date(a.data[0]).getTime() - new Date(b.data[0]).getTime();
+                    })   
+                    return rows
+                },
+                // cropList(){
+                //     let cropArray = []
+                //     if(this.selectedArea != 'All'){
+                //         let areaFilter = this.assetList.filter((x) => x.data[2] === this.selectedArea)
+                //         cropArray = areaFilter.map(h => 
+                //             this.idToCropMap.get(h.data.crop_tid)
+                //         )
+                //     }
+                //     else{
+                //         cropArray = this.assetList.map(h=> 
+                //             this.idToCropMap.get(h.data[1])
+                //         )
+                //     }
+
+                //     let crops = new Set(cropArray)
+                //     let newCropArray = Array.from(crops)
+                //     return newCropArray.sort()
+                // },
+                // areaList(){
+                //     let areaArray = []
+                //     if(this.selectedCrop != 'All'){
+                //         let cropFilter = this.assetList.filter((x) => this.idToCropMap.get(x.data[1]) === this.selectedCrop)
+                //         areaArray = cropFilter.map(h =>
+                //             h.movement.data[2]
+                //         )
+                //     }
+                //     else{
+                //         areaArray = this.assetList.map(h =>
+                //             h.movement.data[2]
+                //         )
+                //     }
+                //     let areas = new Set(areaArray)
+                //     let newAreaArray = Array.from(areas)
+                //     return newAreaArray.sort()
+                // },
                 getMinDate() {
                     if (this.selectedSeedDate != "N/A" && this.selectedSeedDate != null) {
                         // Convert date string MM/DD/YYYY to Date
@@ -428,7 +512,7 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
                 },
             },
             created() {
-                //Get all crop names
+                // Store crop names in local cache
                 let fullResponse = []
                 if(localStorage.getItem('crops') == null){
                     getAllPages('/taxonomy_term.json?bundle=farm_crops',fullResponse).then(() => {
@@ -443,7 +527,7 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
                     })
                 }
 
-                //Get all tray seeding logs
+                // Store all tray seeding logs in local cache
                 if(localStorage.getItem('crop_to_seed_date') == null) {
                     getAllPages('http://localhost/log.json?type=farm_seeding&log_category=Tray Seedings', this.traySeedingLogs).then(() => {
                         this.cropToSeedingDateFilter
@@ -456,7 +540,8 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
                         localStorage.setItem('crop_to_seed_date', JSON.stringify(this.cropToSeedDate))
                     })
                 }
-                //Get all area/field names
+
+                // Store assets in local  cache
                 if(localStorage.getItem('areas') == null){
                     getAllPages('/taxonomy_term.json?bundle=farm_areas', this.areaResponse).then(() => {
                         localStorage.setItem('areas', JSON.stringify(this.areaResponse))
@@ -468,6 +553,37 @@ <h1 style='text-align:center;'>Transplanting Input Log</h1>
                         localStorage.setItem('areas', JSON.stringify(resp))
                     })
                 }
+
+                // Store all area names in local cache
+                if(localStorage.getItem('active_plantings') == null){
+                    getAllPages('/farm_asset.json?type=planting', this.assetResponse).then(() => {
+                        localStorage.setItem('areas', JSON.stringify(this.assetResponse))
+                    })
+                }else{
+                    this.assetResponse = JSON.parse(localStorage.getItem('areas'))
+                    getAllPages('/farm_asset.json?type=planting').then((resp) => {
+                        this.assetResponse = resp
+                        localStorage.setItem('active_plantings', JSON.stringify(resp))
+                    })
+                }
+
+                getAllPages('/farm_asset.json?type=planting', this.assetList)
+                    .then(() => {
+                        //this.stillLoading = false
+                    })
+                    .catch((err) => { 
+                        // this.errBanner = true
+                        // var errorBanner = document.getElementById('scrollBanners')
+                        // var pageHeader = document.getElementById('navbar')
+                        // var headerBounds = pageHeader.getBoundingClientRect()
+                        // var alertBounds = errorBanner.getBoundingClientRect()
+                        // scrollBy({
+                        //     top: alertBounds.top - headerBounds.bottom,
+                        //     behavior: 'smooth'
+                        // })
+                    })
+                this.stillLoading = true
+
                 getSessionToken().then((response) => {
                     this.sessionToken = response
                 })
