FarmData2 · robertli149 · Sep 16, 2025 · Sep 16, 2025 · Sep 16, 2025 · Sep 16, 2025
diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
+--Lilly Roberts
+
 # FarmData2
 
 Welcome to FarmData2. FarmData2 aims to support the day-to-day operation of diversified vegetable farms while facilitating the record keeping necessary for organic certification and for the study of sustainable farming practices. For example, FarmData2 forms enable farm workers to efficiently and reliably enter data about common operations at the time they occur:
@@ -56,7 +58,7 @@ FarmData2 is thankful to the following organizations for their in-kind and finan
 
 - [Dickinson College](https://www.dickinson.edu/)
 - [farmOS](https://farmos.org/)
-- [The GNOME Community Engagement Challenge](https://www.gnome.org/challenge/)
+- [The GNOME Community Engagement Challenge]([dead link deleted])
 - [The National Science Foundation (DUE-2013069)](https://www.nsf.gov/awardsearch/showAward?AWD_ID=2013069)
 - [The Non-Profit FOSS Institute](https://npfi.org/)
 - [PASA Sustainable Agriculture](https://pasafarming.org/)

diff --git a/modules/farm_fd2/03-Vue1/index.html b/modules/farm_fd2/03-Vue1/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Shopping List App</title>
+    <link
+      rel="stylesheet"
+      href="main.css"
+    />
+  </head>
+  <body>
+    <div id="shopping-list">
+      <h1>{{header || 'Welcome'}}</h1>
+      <ul>
+        <li
+          v-for="(item,key) in items"
+          :key="item.id"
+        >
+          {{item.label}}
+        </li>
+      </ul>
+    </div>
+    <script src="https://unpkg.com/vue@3"></script>
+
+    <script>
+      const shoppingList = Vue.createApp({
+        data() {
+          return {
+            header: 'Shopping List App',
+
+            items: {
+              'item-1': { id: 1, label: '10 party hats' },
+              'item-2': { id: 2, label: '2 board games' },
+              'item-3': { id: 3, label: '20 cups' },
+            },
+          };
+        },
+      }).mount('#shopping-list');
+    </script>
+  </body>
+</html>
diff --git a/modules/farm_fd2/03-Vue1/main.css b/modules/farm_fd2/03-Vue1/main.css
@@ -0,0 +1,160 @@
+body {
+  background: #eff8ff;
+  height: 100vh;
+  width: 100vw;
+  font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto,
+    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+}
+
+.counter {
+  font-size: 0.8rem;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+#shopping-list {
+  background: #fff;
+  padding: 2rem;
+  margin: 1rem;
+  border-radius: 3px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+  width: 95%;
+  max-width: 900px;
+}
+
+h1 {
+  color: #3d4852;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+a {
+  color: #6cb2eb;
+  font-size: 1.25rem;
+  transition: all 0.1s ease-in;
+  margin-top: 0.5rem;
+  display: block;
+}
+
+a:hover {
+  color: #3490dc;
+}
+
+li,
+p {
+  display: flex;
+  align-items: center;
+  line-height: 1.75;
+  letter-spacing: 0.5px;
+  color: #3d4852;
+  font-size: 1.25rem;
+  cursor: pointer;
+  transition: all 0.1s ease-in;
+}
+
+li:hover {
+  color: #22292f;
+}
+
+li input {
+  margin: 0 0.5rem 0;
+}
+
+#shopping-list > input,
+#shopping-list > select {
+  width: 100%;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid #f1f5f8;
+  color: #606f7b;
+  padding: 0.5rem 0.75rem;
+  box-sizing: border-box;
+  font-size: 1rem;
+  letter-spacing: 0.5px;
+  margin: 0.5rem 0;
+}
+
+.add-item-form,
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.add-item-form input {
+  width: 70%;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid #f1f5f8;
+  color: #606f7b;
+  padding: 0.5rem 0.75rem;
+  box-sizing: border-box;
+  font-size: 1rem;
+  letter-spacing: 0.5px;
+  margin: 0.5rem 0;
+}
+
+.btn {
+  border: none;
+  border-radius: 3px;
+  margin: auto 0;
+  padding: 0.5rem 0.75rem;
+  flex-shrink: 0;
+  cursor: pointer;
+  font-size: 0.9rem;
+  letter-spacing: 0.5px;
+  transition: all 0.1s ease-in;
+}
+
+.btn[disabled] {
+  background: #8795a1;
+}
+
+.btn[disabled]:hover {
+  background: #606f7b;
+}
+
+.btn-primary {
+  background: #6cb2eb;
+  color: #fff;
+}
+
+.btn-primary:hover {
+  background: #3490dc;
+}
+
+.btn-cancel {
+  background: #ef5753;
+  color: #fff;
+}
+
+.btn-cancel:hover {
+  background: #e3342f;
+  color: #fff;
+}
+
+.strikeout {
+  text-decoration: line-through;
+  color: #b8c2cc;
+}
+
+.strikeout:hover {
+  color: #8795a1;
+}
+
+.priority {
+  color: #de751f;
+}
+input[type='checkbox'] {
+  display: inline !important;
+  box-shadow: none;
+  width: auto;
+}
diff --git a/modules/farm_fd2/src/entrypoints/harvest/App.vue b/modules/farm_fd2/src/entrypoints/harvest/App.vue
@@ -33,33 +33,14 @@
       id="harvest-table-quantity-unit"
       v-if="plantList.length > 0"
     >
-      <table
-        id="harvest-table"
-        data-cy="harvest-table"
+      <tr
+        v-for="row in rows"
+        v-bind:key="row.date"
       >
-        <tr id="harvest-table-header">
-          <th></th>
-          <th>Location</th>
-          <th>Bed</th>
-          <th>Planted Date</th>
-        </tr>
-        <tr
-          v-for="plant in sortedPlantList"
-          v-bind:key="plant.id"
-        >
-          <td>
-            <input
-              type="radio"
-              name="harvest-plant"
-              v-bind:value="plant"
-              v-model="pickedPlant"
-            />
-          </td>
-          <td>{{ plant.location }}</td>
-          <td>{{ plant.beds.join(', ') }}</td>
-          <td>{{ plant.timestamp }}</td>
-        </tr>
-      </table>
+        <td>{{ row.location }}</td>
+        <td>{{ row.bed }}</td>
+        <td>{{ row.date }}</td>
+      </tr>
 
       <NumericInput
         id="harvest-quantity"
@@ -113,6 +94,19 @@
       v-on:submit="submitForm"
       v-on:reset="resetForm"
     />
+    <PicklistBase
+      invalidFeedbackText="One row must be selected."
+      v-bind:required="true"
+      v-bind:showValidityStyling="true"
+      v-bind:columns="columns"
+      v-bind:labels="labels"
+      v-bind:rows="unit"
+      in
+      unitList[]
+      v-bind:showAllButton="false"
+      v-bind:showInfoIcons="true"
+      v-model:picked="pickedPlant"
+    />
 
     <hr />
   </div>
@@ -124,6 +118,7 @@ import CropSelector from '@comps/CropSelector/CropSelector.vue';
 import NumericInput from '@comps/NumericInput/NumericInput.vue';
 import CommentBox from '@comps/CommentBox/CommentBox.vue';
 import SubmitResetButtons from '@comps/SubmitResetButtons/SubmitResetButtons.vue';
+import PicklistBase from '@comps/PicklistBase/PicklistBase.vue';
 
 import * as farmosUtil from '@libs/farmosUtil/farmosUtil';
 export default {
@@ -133,6 +128,7 @@ export default {
     NumericInput,
     CommentBox,
     SubmitResetButtons,
+    PicklistBase,
   },
   data() {
     return {
@@ -144,9 +140,21 @@ export default {
       comment: '',
       plantList: [],
       unitList: [],
+      columns: ['location', 'bed', 'date'],
+      labels: ['Location', 'Bed', 'Planted Date'],
+      form: {
+        picked: null,
+      },
     };
   },
   computed: {
+    rows() {
+      return this.sortedPlantList.map((plant) => ({
+        location: plant.location,
+        bed: plant.bed,
+        date: plant.date,
+      }));
+    },
     formValid() {
       return (
         this.date != '' &&

diff --git a/modules/farm_fd2/src/entrypoints/harvest/harvest.e2e.cy.js b/modules/farm_fd2/src/entrypoints/harvest/harvest.e2e.cy.js
@@ -42,7 +42,6 @@ describe('Tests for the Harvest form', () => {
       .find('[data-cy="crop-selector"]')
       .find('[data-cy="selector-input"]')
       .select('RADISH');
-
     cy.get('[data-cy="harvest-table"]').should('be.visible');
     cy.get('[data-cy="harvest-quantity"]')
       .find('[data-cy="numeric-input"]')