From 58523f392e45cba8a803dbdef4a5ada2ab4d365e Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Thu, 17 Mar 2022 23:56:44 -0400
Subject: [PATCH 01/16] Copy TasksEdit.vue into field-module-observations.

---
 .../field-module-observations/TasksEdit.vue   | 787 ++++++++++++++++++
 1 file changed, 787 insertions(+)
 create mode 100644 packages/field-module-observations/TasksEdit.vue

diff --git a/packages/field-module-observations/TasksEdit.vue b/packages/field-module-observations/TasksEdit.vue
new file mode 100644
index 00000000..33de320c
--- /dev/null
+++ b/packages/field-module-observations/TasksEdit.vue
@@ -0,0 +1,787 @@
+<template>
+<farm-tabs
+  :tabs="['General', 'Movement']"
+  :initTab="$router.currentRoute.value.params.tab"
+  :space="['none', 'none', 's']">
+
+  <template #general>
+    <app-bar-options :title="$t('Edit Log')" nav="back" :actions="appBarActions"/>
+    <farm-stack v-if="log" :space="['none', 'none', 's']" :dividers="true">
+
+      <farm-card>
+        <div class="form-item form-group">
+          <farm-toggle-check
+            :label="$t('Done')"
+            labelPosition="after"
+            :checked="log.status === 'done'"
+            @input="update({ status: $event ? 'done' : 'pending' })"/>
+        </div>
+        <div class="form-item form-item-name form-group">
+          <label for="name" class="control-label">{{ $t('Name') }}</label>
+          <input
+            :value="log.name"
+            @input="update({ name: $event.target.value })"
+            :placeholder="$t('Enter name')"
+            type="text"
+            class="form-control"
+            maxlength="250"
+            autofocus>
+        </div>
+        <farm-date-time-form
+          :timestamp="log.timestamp"
+          @input="update({ timestamp: $event })"/>
+        <div class="form-item form-item-name form-group">
+          <label for="type" class="control-label ">{{ $t('Log Type') }}</label>
+          <div class="form-item">
+            <p> {{ $t(typeLabel) }} </p>
+          </div>
+        </div>
+      </farm-card>
+
+      <farm-card>
+        <div class="form-item form-item-name form-group">
+          <label for="notes" class="control-label ">{{ $t('Notes') }}</label>
+          <textarea
+            :value="parseNotes(log.notes)"
+            @input="updateNotes($event.target.value)"
+            :placeholder="$t('Enter notes')"
+            type="text"
+            rows="4"
+            class="form-control">
+          </textarea>
+        </div>
+      </farm-card>
+
+      <farm-card>
+        <h3>{{ $t('Log Categories') }}</h3>
+        <div v-if="showAllCategories" id="categories" class="form-item form-group">
+          <farm-select-box
+            small
+            v-for="cat in categories"
+            :id="`category-${cat.id}-${cat.name}`"
+            :selected="log.category.some(c => c.id === cat.id)"
+            :label="cat.name"
+            :key="`category-${cat.id}-${cat.name}`"
+            @input="toggleRelationship('category', cat)">
+          </farm-select-box>
+          <div class="show-hide">
+            <div @click="showAllCategories = !showAllCategories">
+              <p><icon-expand-less/>{{ $t('Show Less') }}</p>
+            </div>
+          </div>
+        </div>
+        <div v-else id="categories" class="form-item form-group">
+          <p v-if="!log.category || log.category.length < 1">
+            {{ $t('No categories selected') }}
+          </p>
+          <farm-select-box
+            small
+            v-for="cat in categories.selected"
+            :id="`category-${cat.id}-${cat.name}`"
+            :selected="true"
+            :label="cat.name"
+            :key="`category-${cat.id}-${cat.name}`"
+            @input="toggleRelationship('category', cat)">
+          </farm-select-box>
+          <div class="show-hide">
+            <div @click="showAllCategories = !showAllCategories">
+              <p><icon-expand-more/>{{ $t('Show More') }}</p>
+            </div>
+          </div>
+        </div>
+      </farm-card>
+
+      <farm-card v-if="log.quantity !== undefined">
+        <h3>{{ $t('Quantities')}} 🚧 UNDER CONSTRUCTION 🚧</h3>
+        <!-- <label for="quantity" class="control-label ">
+          {{ $t('Add new or edit existing quantity')}}
+        </label>
+        <div v-if="currentQuant >= 0" class="form-item form-item-name form-group"> -->
+          <!-- To display a placeholder value ONLY when there are no existing
+          quantities, we must add the placeholder with an <option> tag and
+          select it using the :value option -->
+          <!-- <select
+            :value="(log.quantity
+              && log.quantity.length > 0
+              && log.quantity[currentQuant].measure)
+              ? log.quantity[currentQuant].measure
+              : 'Select measure'"
+            @input="updateQuantity('measure', $event.target.value, currentQuant)"
+            class="custom-select col-sm-3 ">
+              <option>{{ $t('Select measure')}}</option>
+              <option
+                v-for="(measure, i) in quantMeasures"
+                :value="measure"
+                :key="`measure-${i}`">
+                {{ measure }}
+              </option>
+          </select>
+          <input
+            :value="(log.quantity
+              && log.quantity.length > 0)
+              ? log.quantity[currentQuant].value
+              : null"
+            @input="updateQuantity('value', $event.target.value, currentQuant)"
+            :placeholder="$t('Enter value')"
+            type="number"
+            class="form-control"/>
+          <select
+          :value="(log.quantity
+              && log.quantity.length > 0
+              && log.quantity[currentQuant].unit)
+              ? log.quantity[currentQuant].unit.id
+              : 'Select unit'"
+            @input="updateQuantity('unit', $event.target.value, currentQuant)"
+            class="custom-select col-sm-3 ">
+              <option>{{ $t('Select unit')}}</option>
+              <option
+                v-for="(unit, i) in units"
+                :value="unit.id"
+                :key="`unit-${i}`">
+                {{ (units) ? unit.name : '' }}
+              </option>
+          </select>
+          <input
+            :value="(log.quantity
+              && log.quantity.length > 0)
+              ? log.quantity[currentQuant].label
+              : null"
+            @input="updateQuantity('label', $event.target.value, currentQuant)"
+            :placeholder="$t('Enter label')"
+            type="text"
+            class="form-control"/>
+        </div>
+        <div class="form-item form-group">
+          <ul
+            v-if="log.quantity
+              && log.quantity.length > 0"
+            class="list-group">
+            <li
+              v-for="(quant, i) in log.quantity"
+              v-bind:key="`quantity-${i}`"
+              @click="currentQuant = i"
+              class="list-group-item">
+              {{ quant.measure }}&nbsp;
+              {{ quant.value }}&nbsp;
+              {{ (quantUnitNames.length > 0) ? quantUnitNames[i] : '' }}&nbsp;
+              {{ quant.label }}
+              <span class="remove-list-item" @click="removeQuant(i); $event.stopPropagation()">
+                &#x2715;
+              </span>
+            </li>
+          </ul>
+        </div>
+        <div class="form-item form-group">
+          <button
+            type="button"
+            class="btn btn-success"
+            @click="updateQuantity(null, null, -1)"
+            name="addNewQuantity">
+            {{$t('Add another quantity')}}
+          </button>
+        </div> -->
+      </farm-card>
+
+      <farm-card>
+        <h3>{{ $t('Assets')}}</h3>
+        <farm-autocomplete
+          :list="assets.unselected"
+          :keys="['name']"
+          @select="toggleRelationship('asset', assets.unselected[$event])"
+          :label="$t('Add assets to the log')">
+          <template v-slot:empty>
+            <div class="empty-slot">
+              <em>{{ $t('No assets found.')}}</em>
+            </div>
+          </template>
+        </farm-autocomplete>
+        <div class="form-item form-item-name form-group">
+          <ul class="list-group">
+            <li
+              v-for="asset in assets.selected"
+              :key="`asset-${asset.id}`"
+              class="list-group-item">
+              {{ asset.name }}
+              <span class="remove-list-item" @click="toggleRelationship('asset', asset)">
+                &#x2715;
+              </span>
+            </li>
+          </ul>
+        </div>
+        <div v-if="log.equipment" class="form-item form-item-name form-group">
+          <label for="type" class="control-label ">{{ $t('Equipment') }}</label>
+          <div class="input-group">
+            <select
+              @input="toggleRelationship('equipment', equipment.unselected[i])"
+              class="custom-select col-sm-3 ">
+              <option value=""></option>
+              <option
+                v-for="(equip, i) in equipment.unselected"
+                :value="i"
+                :key="`equip-${i}`">
+                {{ (equip) ? equip.name : '' }}
+              </option>
+            </select>
+          </div>
+        </div>
+        <div class="form-item form-group">
+          <ul v-if="log.equipment" class="list-group">
+            <li
+              v-for="(equip, i) in equipment.selected"
+              v-bind:key="`equipment-${i}`"
+              class="list-group-item">
+              {{ equip.name }}
+              <span class="remove-list-item" @click="toggleEqupment(false, equip.id)">
+                &#x2715;
+              </span>
+            </li>
+          </ul>
+        </div>
+      </farm-card>
+
+      <farm-card>
+        <h3>{{ $t('Areas')}} &amp; {{ $t('Location')}}</h3>
+        <!-- We're using a radio button to choose whether areas are selected
+        automatically based on device location, or using an autocomplete.
+        This will use the useLocalAreas conditional var -->
+        <!-- <div
+          v-if="settinngs.permissions.geolocation"
+          class="form-item form-item-name form-group">
+          <div class="form-check">
+            <input
+            v-model="useLocalAreas"
+            type="radio"
+            class="form-check-input"
+            id="dontUseGeo"
+            name="geoRadioGroup"
+            v-bind:value="false"
+            checked>
+            <label class="form-check-label" for="dontUseGeo">{{ $t('Search areas')}}</label>
+          </div>
+          <div class="form-check">
+            <input
+            v-model="useLocalAreas"
+            type="radio"
+            class="form-check-input"
+            id="doUseGeo"
+            name="geoRadioGroup"
+            v-bind:value="true"
+            >
+            <label class="form-check-label" for="doUseGeo">{{ $t('Use my location')}}</label>
+          </div>
+        </div> -->
+        <!-- If using the user's, show a select menu of nearby locations -->
+        <div v-if="useLocalAreas" class="form-group">
+          <label for="areaSelector">{{ $t('Farm areas near your current location')}}</label>
+          <select
+            @input="toggleRelationship('location', localAreas[$event.target.value])"
+            class="form-control"
+            name="areas">
+            <option v-if="localAreas.length < 1" value="">No other areas nearby</option>
+            <option v-if="localAreas.length > 0" value="" selected>-- Select an Area --</option>
+            <option
+              v-for="(area, i) in localAreas"
+              :value="i"
+              :key="`local-area-${area.id}`">
+              {{area.name}}
+            </option>
+          </select>
+        </div>
+        <!-- If not using the user's location, show a search bar -->
+        <farm-autocomplete
+          v-if="!useLocalAreas"
+          :list="locations.unselected"
+          :keys="['name']"
+          @select="toggleRelationship('location', locations.unselected[$event])"
+          :label="$t('Add areas to the log')">
+          <template v-slot:empty>
+            <div class="empty-slot">
+              <em>{{ $t('No areas found.')}}</em>
+            </div>
+          </template>
+        </farm-autocomplete>
+        <div class="form-item form-item-name form-group">
+          <ul class="list-group">
+            <li
+              v-for="location in locations.selected"
+              v-bind:key="`remove-area-${location.id}`"
+              class="list-group-item">
+              {{ location.name }}
+              <span class="remove-list-item" @click="toggleRelationship('location', area)">
+                &#x2715;
+              </span>
+            </li>
+          </ul>
+        </div>
+      </farm-card>
+
+      <farm-card>
+        <h3>{{ $t('Images')}} 🚧 UNDER CONSTRUCTION 🚧</h3>
+        <!-- <div
+          class="form-item form-item-name form-group">
+          <button
+            :disabled='false'
+            title="Take picture with camera"
+            @click="getPhoto"
+            class="btn btn-info btn-navbar navbar-right"
+            type="button">
+            {{ $t('Take picture with camera')}}
+          </button>
+        </div>
+        <div class="form-item form-item-name form-group">
+          <div class="input-group ">
+            <label
+              class="custom-file-label"
+              for="customFile">
+              {{ $t('Select photo from file')}}
+            </label>
+            <input
+              type="file"
+              accept="image/*"
+              class="custom-file-input"
+              ref="photo"
+              @change="loadPhoto($event.target.files)">
+          </div>
+        </div> -->
+        <!-- NOTE: Display is set to 'none' if the img fails to load. -->
+        <!-- <div class="form-item form-item-name form-group">
+          <img
+            v-for="(url, i) in imageUrls"
+            :src="url"
+            :key="`preview-${i}`"
+            onerror="this.style.display='none'"
+            class="preview" />
+        </div> -->
+      </farm-card>
+
+    </farm-stack>
+  </template>
+
+  <template #movement>
+
+    <farm-card v-if="log"><h3>🚧 UNDER CONSTRUCTION 🚧</h3></farm-card>
+    <!-- <farm-card v-if="log.movement !== undefined">
+
+      <farm-autocomplete
+        :list="assets.unselected"
+        :keys="['name']"
+        @select="togglerelationship('asset', assets.unselected[$event])"
+        :label="$t('Add assets to be moved')">
+        <template v-slot:empty>
+          <div class="empty-slot">
+            <em>{{ $t('No assets found.')}}</em>
+          </div>
+        </template>
+      </farm-autocomplete>
+
+      <div class="form-item form-item-name form-group">
+        <ul class="list-group">
+          <li
+            v-for="asset in assets.selected"
+            :key="`asset-movement-${asset.id}`"
+            class="list-group-item">
+            {{ asset.name }}
+            <span class="remove-list-item" @click="togglerelationship('asset', asset)">
+              &#x2715;
+            </span>
+          </li>
+        </ul>
+      </div>
+
+      <farm-autocomplete
+        :list="areas.unselected"
+        :keys="['name']"
+        @select="addMovementArea(areas.unselected[$event])"
+        :label="$t('Movement to')">
+        <template v-slot:empty>
+          <div class="empty-slot">
+            <em>{{ $t('No areas found.')}}</em>
+          </div>
+        </template>
+      </farm-autocomplete>
+
+      <div class="form-item form-item-name form-group">
+        <ul class="list-group">
+          <li
+            v-for="(area, i) in areas.selected"
+            v-bind:key="`remove-movement-${i}`"
+            class="list-group-item">
+            {{ area.name }}
+            <span class="remove-list-item" @click="removeMovementArea(area)">
+              &#x2715;
+            </span>
+          </li>
+        </ul>
+      </div>
+
+      <router-link :to="{ name: 'tasks-map' }">
+        <farm-map
+          id="map"
+          :overrideStyles="{ height: '90vw' }"
+          :drawing="false"
+          :options="{
+            controls: (defaults) =>
+              defaults.filter(def => def.constructor.name === 'Attribution'),
+            interactions: false,
+          }"
+          :wkt=mapLayers
+          :geojson="{
+            title: 'areas',
+            geojson: areaGeoJSON,
+            color: 'grey',
+          }"/>
+      </router-link>
+
+    </farm-card> -->
+  </template>
+
+</farm-tabs>
+</template>
+
+<script>
+const {
+  computed, inject, reactive, ref,
+} = window.Vue;
+const {
+  R,
+  parseNotes,
+  // removeGeometry,
+  // isNearby,
+} = window.lib;
+
+// Used to separate assets, areas, etc into those that have already been added
+// to the log (selected), and those that haven't (unselected).
+const partitionOptions = (options = [], selections = []) => {
+  const [selected, unselected] = R.partition(
+    opt => selections.some(sel => sel.id === opt.id),
+    options,
+  );
+  return { selected, unselected };
+};
+
+// Quantity measures are static strings, so no need to make them reactive.
+const quantMeasures = [
+  'count',
+  'length',
+  'weight',
+  'area',
+  'volume',
+  'time',
+  'temperature',
+  'water_content',
+  'value',
+  'rating',
+  'ratio',
+  'probability',
+];
+
+export default {
+  name: 'TasksEdit',
+  setup() {
+    // LOCAL STATE
+    const localAreas = reactive([]);
+    const useLocalAreas = ref(false);
+    const awaitingLocation = ref(false);
+    const showAllCategories = ref(false);
+    const currentQuant = ref(-1);
+
+    // APP SHELL DATA
+    const alert = inject('alert');
+    const bundles = inject('bundles');
+    const settings = inject('settings');
+
+    // ENTITIES
+    const { assets, equipment, locations } = inject('assets');
+    const { categories, units } = inject('terms');
+    const {
+      current, update, save, close,
+    } = inject('logs');
+
+    return {
+      parseNotes,
+      quantMeasures,
+      localAreas,
+      useLocalAreas,
+      awaitingLocation,
+      showAllCategories,
+      currentQuant,
+      alert,
+      typeLabel: bundles.log?.[current.type]?.label || '',
+      settings,
+      log: current,
+      update,
+      save,
+      close,
+      units,
+      assets: computed(() => partitionOptions(assets.value, current.asset)),
+      equipment: computed(() => partitionOptions(equipment.value, current.equipment)),
+      locations: computed(() => partitionOptions(locations.value, current.location)),
+      categories: computed(() => partitionOptions(categories.value, current.category)),
+      appBarActions: computed(() => {
+        const logURL = current.url;
+        const openInNew = logURL ? [{
+          icon: 'icon-open-in-new',
+          onClick() { window.open(logURL, '_blank'); },
+          text: 'Open in browser',
+        }] : [];
+        return openInNew;
+      }),
+      updateNotes(value) {
+        update({ notes: { value, format: 'default' } });
+      },
+      toggleRelationship(relationship, { id, type }) {
+        const i = current[relationship].findIndex(e => e.id === id);
+        if (i < 0) {
+          const changed = current[relationship].concat({ id, type });
+          update({ [relationship]: changed });
+        } else {
+          const changed = [
+            ...current[relationship].slice(0, i),
+            ...current[relationship].slice(i + 1),
+          ];
+          update({ [relationship]: changed });
+        }
+      },
+    };
+  },
+
+  beforeMount() {
+    if (!this.log) {
+      this.$router.push({ path: '/tasks' });
+    }
+  },
+  beforeRouteLeave() {
+    if (this.log) {
+      this.save(this.log);
+    }
+  },
+
+  // props: [
+  //   'areaGeoJSON',
+  // ],
+
+  // methods: {
+  //   updateQuantity(key, value, index) {
+  //     const currentQuants = this.log.quantity || [];
+  //     const storedVal = (key === 'unit')
+  //       ? { id: value, type: 'taxonomy_term--unit' }
+  //       : value;
+  //     let updatedQuant; let updatedQuants;
+  //     if (index >= 0) {
+  //       updatedQuant = { ...currentQuants[index], [key]: storedVal };
+  //       updatedQuants = [
+  //         ...currentQuants.slice(0, index),
+  //         updatedQuant,
+  //         ...currentQuants.slice(index + 1),
+  //       ];
+  //     } else {
+  //       updatedQuant = {
+  //         measure: null,
+  //         value: null,
+  //         unit: null,
+  //         label: null,
+  //       };
+  //       updatedQuants = [...currentQuants, updatedQuant];
+  //     }
+  //     this.update({ quantity: updatedQuants });
+  //     if (index < 0) {
+  //       this.currentQuant = updatedQuants.length - 1;
+  //     }
+  //   },
+
+  //   addMovementArea(area) {
+  //     const { id, type } = area;
+  //     const areaReference = { id, type: `asset--${type}` };
+  //     // TODO: replace geofield property
+  //     const areaGeometry = area.geofield[0]?.geom;
+  //     const prevMovement = this.log.movement;
+  //     const newGeometry = prevMovement
+  //       ? mergeGeometries([areaGeometry, prevMovement.geometry])
+  //       : areaGeometry;
+  //     const newMovement = {
+  //       area: prevMovement
+  //         ? prevMovement.area.concat(areaReference)
+  //         : [areaReference],
+  //       geometry: newGeometry,
+  //     };
+  //     this.update({ movement: newMovement });
+  //   },
+
+  //   removeMovementArea(area) {
+  //     const newAreas = this.log.movement.area
+  //       .filter(_area => _area.id !== area.id);
+  //     const prevGeometry = this.log.movement.geometry;
+  //     let areaGeometry = null;
+  //     // TODO: Replace geofield property.
+  //     if (area.geofield[0]) {
+  //       areaGeometry = area.geofield[0].geom;
+  //     }
+  //     const newGeometry = removeGeometry(prevGeometry, areaGeometry);
+  //     const newMovement = {
+  //       geometry: newGeometry,
+  //       area: newAreas,
+  //     };
+  //     this.update({ movement: newMovement });
+  //   },
+
+  //   removeQuant(index) {
+  //     if (this.currentQuant >= index) {
+  //       this.currentQuant -= 1;
+  //     }
+  //     const newQuant = [
+  //       ...this.log.quantity.slice(0, index),
+  //       ...this.log.quantity.slice(index + 1),
+  //     ];
+  //     this.update({ quantity: newQuant });
+  //   },
+
+  //   getPhoto() {
+  //     // Obtains an image location from the camera!
+  //   },
+
+  //   loadPhoto(files) {
+  //     for (let i = 0; i < files.length; i += 1) {
+  //       // do something
+  //     }
+  //   },
+  // },
+
+  // computed: {
+  //   quantUnitNames() {
+  //     if (this.units.length > 0 && this.log?.quantity.length > 0) {
+  //       const unitNames = [];
+  //       this.log.quantity.forEach((quant) => {
+  //         if (quant.unit) {
+  //           this.units.forEach((unit) => {
+  //             if (parseInt(unit.id, 10) === parseInt(quant.unit.id, 10)) {
+  //               unitNames.push(unit.name);
+  //             }
+  //           });
+  //         } else {
+  //           unitNames.push(null);
+  //         }
+  //       });
+  //       return unitNames;
+  //     }
+  //     return [];
+  //   },
+  //   imageUrls() {
+  //     return this.log.images
+  //       .filter(img => typeof img === 'string');
+  //   },
+  //   mapLayers() {
+  //     const movement = {
+  //       title: 'movement',
+  //       wkt: this.log.movement?.geometry,
+  //       color: 'orange',
+  //       visible: true,
+  //       weight: 0,
+  //       canEdit: !!this.log.movement?.geometry,
+  //     };
+  //     const previousGeoms = this.log.asset
+  //       ?.map(logAsset => this.assets
+  //         ?.find(asset => asset.id === logAsset.id)?.geometry);
+  //     const previousWKT = previousGeoms ? mergeGeometries(previousGeoms) : undefined;
+  //     const previous = {
+  //       title: 'previous',
+  //       wkt: previousWKT,
+  //       color: 'green',
+  //       visible: true,
+  //       weight: 1,
+  //       canEdit: false,
+  //     };
+  //     return [previous, movement];
+  //   },
+  // },
+
+  // watch: {
+  //   useLocalAreas() {
+  //     function filterAreasByProximity(position) {
+  //       this.localAreas = this.locations.unselected
+  //         .filter(area => !!area.geofield[0] && isNearby(
+  //           [position.coords.longitude, position.coords.latitude],
+  //           area.geofield[0].geom,
+  //           (position.coords.accuracy),
+  //         ));
+  //     }
+  //     function onError(error) {
+  //       this.alert(error);
+  //     }
+  //     // If useLocalAreas is set to true, get geolocation and nearby areas
+  //     if (this.useLocalAreas) {
+  //       const options = {
+  //         enableHighAccuracy: true,
+  //         timeout: 10000,
+  //         maximumAge: 0,
+  //       };
+
+  //       const watch = navigator.geolocation.watchPosition(
+  //         filterAreasByProximity.bind(this),
+  //         onError.bind(this),
+  //         options,
+  //       );
+  //       setTimeout(() => {
+  //         navigator.geolocation.clearWatch(watch);
+  //       }, 5000);
+  //     }
+  //   },
+  // },
+};
+
+</script>
+
+<style scoped>
+  textarea {
+    resize: vertical;
+  }
+
+  .reset-margin {
+    margin: 0 0;
+  }
+  .preview {
+    width: 100%;
+    height: 100%;
+  }
+
+  .empty-slot {
+    text-align: center;
+    color: var(--light);
+  }
+
+  .empty-slot button {
+    margin: 0.5rem;
+    color: var(--light);
+  }
+
+  .remove-list-item {
+    float: right;
+    cursor: pointer;
+  }
+
+  #categories {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+  }
+
+  #categories-label {
+    flex: 1 0 100%;
+  }
+
+  #categories p {
+    font-style: italic;
+  }
+
+  .show-hide {
+    flex: 1 0 100%;
+  }
+
+  .show-hide p {
+    font-size: 1rem;
+  }
+
+  .show-hide svg {
+    vertical-align: bottom;
+  }
+
+</style>

From 4e9a0f0373cdd84419fb6bc9dcb1e85531f74030 Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Fri, 18 Mar 2022 00:35:08 -0400
Subject: [PATCH 02/16] Revert "Remove camModule."

This reverts commit 4e12e119c700b77f5f5f0b1cb3161f8bb2fed4b0.
---
 .../field-module-observations/TasksEdit.vue   |  6 +-
 .../field-module-observations/camModule.js    | 60 +++++++++++++++++++
 2 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 packages/field-module-observations/camModule.js

diff --git a/packages/field-module-observations/TasksEdit.vue b/packages/field-module-observations/TasksEdit.vue
index 33de320c..42903e5c 100644
--- a/packages/field-module-observations/TasksEdit.vue
+++ b/packages/field-module-observations/TasksEdit.vue
@@ -637,11 +637,15 @@ export default {
 
   //   getPhoto() {
   //     // Obtains an image location from the camera!
+  //     return this.$store.dispatch('getPhotoFromCamera', this.log);
   //   },
 
   //   loadPhoto(files) {
   //     for (let i = 0; i < files.length; i += 1) {
-  //       // do something
+  //       this.$store.dispatch('loadPhotoBlob', {
+  //         file: files[i],
+  //         log: this.log,
+  //       });
   //     }
   //   },
   // },
diff --git a/packages/field-module-observations/camModule.js b/packages/field-module-observations/camModule.js
new file mode 100644
index 00000000..10439944
--- /dev/null
+++ b/packages/field-module-observations/camModule.js
@@ -0,0 +1,60 @@
+// A Vuex module & utlities for accessing the camera via Cordova
+export default {
+  actions: {
+    /*
+    called when the get photo button is tapped
+    */
+    getPhotoFromCamera({ commit }, log) {
+      function handleResponse(photoLoc) {
+        const dataURL = `data:image/jpeg;base64,${photoLoc}`;
+        const props = {
+          images: log.images.concat(dataURL),
+          localID: log.localID,
+        };
+        commit('updateLog', props);
+      }
+      function handleError(error) { // eslint-disable-line no-unused-vars
+      }
+      getPhotoFromCamera() // eslint-disable-line no-use-before-define
+        .then(handleResponse, handleError);
+    },
+    loadPhotoBlob({ commit }, { file, log }) {
+      readFileData(file).then((data) => { // eslint-disable-line no-use-before-define
+        const props = {
+          images: log.images.concat(data),
+          localID: log.localID,
+        };
+        commit('updateLog', props);
+      });
+    },
+  },
+};
+
+/*
+Utilizes the Cordova camera plugin to obtain an image URI
+*/
+function getPhotoFromCamera() {
+  return new Promise((resolve, reject) => {
+    function onSuccess(imageURI) {
+      resolve(imageURI);
+    }
+    function onFail(message) {
+      reject(message);
+    }
+
+    const options = {
+      quality: 50,
+      destinationType: Camera.DestinationType.DATA_URL, // eslint-disable-line no-undef
+    };
+    navigator.camera.getPicture(onSuccess, onFail, options);
+  });
+}
+
+function readFileData(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result);
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+}

From 23f9e14cbfbf5cf3bf4dd870d3f8aed66676d1f9 Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Mon, 9 Jan 2023 12:56:45 -0500
Subject: [PATCH 03/16] Scaffold Observations module.

---
 package-lock.json                             | 33 +++++++------------
 package.json                                  |  1 +
 .../module.config.js                          |  7 ++++
 .../field-module-observations/package.json    | 31 +++++++++++++++++
 .../src/ObservationsContainer.vue             | 14 ++++++++
 .../src/ObservationsWidget.vue                | 14 ++++++++
 .../field-module-observations/src/routes.js   | 11 +++++++
 7 files changed, 90 insertions(+), 21 deletions(-)
 create mode 100644 packages/field-module-observations/module.config.js
 create mode 100644 packages/field-module-observations/package.json
 create mode 100644 packages/field-module-observations/src/ObservationsContainer.vue
 create mode 100644 packages/field-module-observations/src/ObservationsWidget.vue
 create mode 100644 packages/field-module-observations/src/routes.js

diff --git a/package-lock.json b/package-lock.json
index 68ff14c2..d670a928 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "packages/create-field-module",
         "packages/field-components",
         "packages/field-kit",
+        "packages/field-module-observations",
         "packages/field-module-tasks",
         "packages/field-scripts"
       ],
@@ -2319,7 +2320,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -9001,7 +9001,6 @@
       "os": [
         "android"
       ],
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -9017,7 +9016,6 @@
       "os": [
         "android"
       ],
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -9033,7 +9031,6 @@
       "os": [
         "darwin"
       ],
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -9049,7 +9046,6 @@
       "os": [
         "darwin"
       ],
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -9065,7 +9061,6 @@
       "os": [
         "freebsd"
       ],
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -9081,7 +9076,6 @@
       "os": [
         "freebsd"
       ],
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -9097,7 +9091,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -9113,7 +9106,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -9129,7 +9121,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -9145,7 +9136,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -9161,7 +9151,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -9177,7 +9166,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -9193,7 +9181,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -9209,7 +9196,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -9225,7 +9211,6 @@
       "os": [
         "netbsd"
       ],
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -9241,7 +9226,6 @@
       "os": [
         "openbsd"
       ],
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -9275,7 +9259,6 @@
       "os": [
         "sunos"
       ],
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -9291,7 +9274,6 @@
       "os": [
         "win32"
       ],
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -9307,7 +9289,6 @@
       "os": [
         "win32"
       ],
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -9323,7 +9304,6 @@
       "os": [
         "win32"
       ],
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -10136,6 +10116,10 @@
       "integrity": "sha512-3yurQZ2hD9VISAhJJP9bpYFNQrHHBXE2JxxjY5aLEcDi46RmAzJE2OC9FAde0yis5ElW0jTTzs0zfg/Cca4XqQ==",
       "dev": true
     },
+    "node_modules/field-module-observations": {
+      "resolved": "packages/field-module-observations",
+      "link": true
+    },
     "node_modules/field-module-tasks": {
       "resolved": "packages/field-module-tasks",
       "link": true
@@ -18189,6 +18173,13 @@
         "node": ">= 16.13.2"
       }
     },
+    "packages/field-module-observations": {
+      "version": "2.0.0-alpha.1",
+      "license": "GPL-3.0-or-later",
+      "devDependencies": {
+        "@farmos.org/field-kit": "2.0.0-alpha.8"
+      }
+    },
     "packages/field-module-tasks": {
       "version": "2.0.0-beta.2",
       "license": "GPL-3.0-or-later",
diff --git a/package.json b/package.json
index e1939214..99f3270b 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "packages/create-field-module",
     "packages/field-components",
     "packages/field-kit",
+    "packages/field-module-observations",
     "packages/field-module-tasks",
     "packages/field-scripts"
   ],
diff --git a/packages/field-module-observations/module.config.js b/packages/field-module-observations/module.config.js
new file mode 100644
index 00000000..8c17622b
--- /dev/null
+++ b/packages/field-module-observations/module.config.js
@@ -0,0 +1,7 @@
+export default {
+  name: 'observations',
+  label: 'Observations',
+  description: 'Take photos and quick notes from the farm.',
+  widget: './src/ObservationsWidget.vue',
+  routes: './src/routes',
+};
diff --git a/packages/field-module-observations/package.json b/packages/field-module-observations/package.json
new file mode 100644
index 00000000..1e56a78a
--- /dev/null
+++ b/packages/field-module-observations/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "field-module-observations",
+  "version": "2.0.0-alpha.1",
+  "description": "Take photos and quick notes from the farm.",
+  "main": "module.config.js",
+  "type": "module",
+  "scripts": {
+    "start": "npm run dev",
+    "dev": "field-scripts develop-module",
+    "build": "field-scripts build-module --config module.config.js",
+    "preview": "vite preview",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/farmOS/field-kit.git"
+  },
+  "keywords": [
+    "farmOS"
+  ],
+  "author": "Jamie Gaehring <gaehj457@gmail.com> (https://jgaehring.com)",
+  "license": "GPL-3.0-or-later",
+  "dependencies": {},
+  "devDependencies": {
+    "@farmos.org/field-kit": "2.0.0-alpha.8"
+  },
+  "bugs": {
+    "url": "https://github.com/farmOS/field-kit/issues"
+  },
+  "homepage": "https://github.com/farmOS/field-kit#readme"
+}
diff --git a/packages/field-module-observations/src/ObservationsContainer.vue b/packages/field-module-observations/src/ObservationsContainer.vue
new file mode 100644
index 00000000..6654e97e
--- /dev/null
+++ b/packages/field-module-observations/src/ObservationsContainer.vue
@@ -0,0 +1,14 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  name: 'ObservationsContainer',
+  setup() {},
+};
+</script>
+
+<style>
+
+</style>
diff --git a/packages/field-module-observations/src/ObservationsWidget.vue b/packages/field-module-observations/src/ObservationsWidget.vue
new file mode 100644
index 00000000..f071252f
--- /dev/null
+++ b/packages/field-module-observations/src/ObservationsWidget.vue
@@ -0,0 +1,14 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  name: 'ObservationsWidget',
+  setup() {},
+};
+</script>
+
+<style>
+
+</style>
diff --git a/packages/field-module-observations/src/routes.js b/packages/field-module-observations/src/routes.js
new file mode 100644
index 00000000..510b109e
--- /dev/null
+++ b/packages/field-module-observations/src/routes.js
@@ -0,0 +1,11 @@
+import ObservationsContainer from './ObservationsContainer.vue';
+
+const routes = [
+  {
+    path: '/observations',
+    name: 'observations',
+    component: ObservationsContainer,
+  },
+];
+
+export default routes;

From e4f601cc57844852eb1995683477799cfa6a3cdd Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Wed, 11 Jan 2023 10:08:28 -0500
Subject: [PATCH 04/16] Use what works from old camModule, scrap the rest.

---
 .../field-module-observations/TasksEdit.vue   | 791 ------------------
 .../field-module-observations/camModule.js    |  60 --
 .../src/ObservationsContainer.vue             |  83 +-
 3 files changed, 80 insertions(+), 854 deletions(-)
 delete mode 100644 packages/field-module-observations/TasksEdit.vue
 delete mode 100644 packages/field-module-observations/camModule.js

diff --git a/packages/field-module-observations/TasksEdit.vue b/packages/field-module-observations/TasksEdit.vue
deleted file mode 100644
index 42903e5c..00000000
--- a/packages/field-module-observations/TasksEdit.vue
+++ /dev/null
@@ -1,791 +0,0 @@
-<template>
-<farm-tabs
-  :tabs="['General', 'Movement']"
-  :initTab="$router.currentRoute.value.params.tab"
-  :space="['none', 'none', 's']">
-
-  <template #general>
-    <app-bar-options :title="$t('Edit Log')" nav="back" :actions="appBarActions"/>
-    <farm-stack v-if="log" :space="['none', 'none', 's']" :dividers="true">
-
-      <farm-card>
-        <div class="form-item form-group">
-          <farm-toggle-check
-            :label="$t('Done')"
-            labelPosition="after"
-            :checked="log.status === 'done'"
-            @input="update({ status: $event ? 'done' : 'pending' })"/>
-        </div>
-        <div class="form-item form-item-name form-group">
-          <label for="name" class="control-label">{{ $t('Name') }}</label>
-          <input
-            :value="log.name"
-            @input="update({ name: $event.target.value })"
-            :placeholder="$t('Enter name')"
-            type="text"
-            class="form-control"
-            maxlength="250"
-            autofocus>
-        </div>
-        <farm-date-time-form
-          :timestamp="log.timestamp"
-          @input="update({ timestamp: $event })"/>
-        <div class="form-item form-item-name form-group">
-          <label for="type" class="control-label ">{{ $t('Log Type') }}</label>
-          <div class="form-item">
-            <p> {{ $t(typeLabel) }} </p>
-          </div>
-        </div>
-      </farm-card>
-
-      <farm-card>
-        <div class="form-item form-item-name form-group">
-          <label for="notes" class="control-label ">{{ $t('Notes') }}</label>
-          <textarea
-            :value="parseNotes(log.notes)"
-            @input="updateNotes($event.target.value)"
-            :placeholder="$t('Enter notes')"
-            type="text"
-            rows="4"
-            class="form-control">
-          </textarea>
-        </div>
-      </farm-card>
-
-      <farm-card>
-        <h3>{{ $t('Log Categories') }}</h3>
-        <div v-if="showAllCategories" id="categories" class="form-item form-group">
-          <farm-select-box
-            small
-            v-for="cat in categories"
-            :id="`category-${cat.id}-${cat.name}`"
-            :selected="log.category.some(c => c.id === cat.id)"
-            :label="cat.name"
-            :key="`category-${cat.id}-${cat.name}`"
-            @input="toggleRelationship('category', cat)">
-          </farm-select-box>
-          <div class="show-hide">
-            <div @click="showAllCategories = !showAllCategories">
-              <p><icon-expand-less/>{{ $t('Show Less') }}</p>
-            </div>
-          </div>
-        </div>
-        <div v-else id="categories" class="form-item form-group">
-          <p v-if="!log.category || log.category.length < 1">
-            {{ $t('No categories selected') }}
-          </p>
-          <farm-select-box
-            small
-            v-for="cat in categories.selected"
-            :id="`category-${cat.id}-${cat.name}`"
-            :selected="true"
-            :label="cat.name"
-            :key="`category-${cat.id}-${cat.name}`"
-            @input="toggleRelationship('category', cat)">
-          </farm-select-box>
-          <div class="show-hide">
-            <div @click="showAllCategories = !showAllCategories">
-              <p><icon-expand-more/>{{ $t('Show More') }}</p>
-            </div>
-          </div>
-        </div>
-      </farm-card>
-
-      <farm-card v-if="log.quantity !== undefined">
-        <h3>{{ $t('Quantities')}} 🚧 UNDER CONSTRUCTION 🚧</h3>
-        <!-- <label for="quantity" class="control-label ">
-          {{ $t('Add new or edit existing quantity')}}
-        </label>
-        <div v-if="currentQuant >= 0" class="form-item form-item-name form-group"> -->
-          <!-- To display a placeholder value ONLY when there are no existing
-          quantities, we must add the placeholder with an <option> tag and
-          select it using the :value option -->
-          <!-- <select
-            :value="(log.quantity
-              && log.quantity.length > 0
-              && log.quantity[currentQuant].measure)
-              ? log.quantity[currentQuant].measure
-              : 'Select measure'"
-            @input="updateQuantity('measure', $event.target.value, currentQuant)"
-            class="custom-select col-sm-3 ">
-              <option>{{ $t('Select measure')}}</option>
-              <option
-                v-for="(measure, i) in quantMeasures"
-                :value="measure"
-                :key="`measure-${i}`">
-                {{ measure }}
-              </option>
-          </select>
-          <input
-            :value="(log.quantity
-              && log.quantity.length > 0)
-              ? log.quantity[currentQuant].value
-              : null"
-            @input="updateQuantity('value', $event.target.value, currentQuant)"
-            :placeholder="$t('Enter value')"
-            type="number"
-            class="form-control"/>
-          <select
-          :value="(log.quantity
-              && log.quantity.length > 0
-              && log.quantity[currentQuant].unit)
-              ? log.quantity[currentQuant].unit.id
-              : 'Select unit'"
-            @input="updateQuantity('unit', $event.target.value, currentQuant)"
-            class="custom-select col-sm-3 ">
-              <option>{{ $t('Select unit')}}</option>
-              <option
-                v-for="(unit, i) in units"
-                :value="unit.id"
-                :key="`unit-${i}`">
-                {{ (units) ? unit.name : '' }}
-              </option>
-          </select>
-          <input
-            :value="(log.quantity
-              && log.quantity.length > 0)
-              ? log.quantity[currentQuant].label
-              : null"
-            @input="updateQuantity('label', $event.target.value, currentQuant)"
-            :placeholder="$t('Enter label')"
-            type="text"
-            class="form-control"/>
-        </div>
-        <div class="form-item form-group">
-          <ul
-            v-if="log.quantity
-              && log.quantity.length > 0"
-            class="list-group">
-            <li
-              v-for="(quant, i) in log.quantity"
-              v-bind:key="`quantity-${i}`"
-              @click="currentQuant = i"
-              class="list-group-item">
-              {{ quant.measure }}&nbsp;
-              {{ quant.value }}&nbsp;
-              {{ (quantUnitNames.length > 0) ? quantUnitNames[i] : '' }}&nbsp;
-              {{ quant.label }}
-              <span class="remove-list-item" @click="removeQuant(i); $event.stopPropagation()">
-                &#x2715;
-              </span>
-            </li>
-          </ul>
-        </div>
-        <div class="form-item form-group">
-          <button
-            type="button"
-            class="btn btn-success"
-            @click="updateQuantity(null, null, -1)"
-            name="addNewQuantity">
-            {{$t('Add another quantity')}}
-          </button>
-        </div> -->
-      </farm-card>
-
-      <farm-card>
-        <h3>{{ $t('Assets')}}</h3>
-        <farm-autocomplete
-          :list="assets.unselected"
-          :keys="['name']"
-          @select="toggleRelationship('asset', assets.unselected[$event])"
-          :label="$t('Add assets to the log')">
-          <template v-slot:empty>
-            <div class="empty-slot">
-              <em>{{ $t('No assets found.')}}</em>
-            </div>
-          </template>
-        </farm-autocomplete>
-        <div class="form-item form-item-name form-group">
-          <ul class="list-group">
-            <li
-              v-for="asset in assets.selected"
-              :key="`asset-${asset.id}`"
-              class="list-group-item">
-              {{ asset.name }}
-              <span class="remove-list-item" @click="toggleRelationship('asset', asset)">
-                &#x2715;
-              </span>
-            </li>
-          </ul>
-        </div>
-        <div v-if="log.equipment" class="form-item form-item-name form-group">
-          <label for="type" class="control-label ">{{ $t('Equipment') }}</label>
-          <div class="input-group">
-            <select
-              @input="toggleRelationship('equipment', equipment.unselected[i])"
-              class="custom-select col-sm-3 ">
-              <option value=""></option>
-              <option
-                v-for="(equip, i) in equipment.unselected"
-                :value="i"
-                :key="`equip-${i}`">
-                {{ (equip) ? equip.name : '' }}
-              </option>
-            </select>
-          </div>
-        </div>
-        <div class="form-item form-group">
-          <ul v-if="log.equipment" class="list-group">
-            <li
-              v-for="(equip, i) in equipment.selected"
-              v-bind:key="`equipment-${i}`"
-              class="list-group-item">
-              {{ equip.name }}
-              <span class="remove-list-item" @click="toggleEqupment(false, equip.id)">
-                &#x2715;
-              </span>
-            </li>
-          </ul>
-        </div>
-      </farm-card>
-
-      <farm-card>
-        <h3>{{ $t('Areas')}} &amp; {{ $t('Location')}}</h3>
-        <!-- We're using a radio button to choose whether areas are selected
-        automatically based on device location, or using an autocomplete.
-        This will use the useLocalAreas conditional var -->
-        <!-- <div
-          v-if="settinngs.permissions.geolocation"
-          class="form-item form-item-name form-group">
-          <div class="form-check">
-            <input
-            v-model="useLocalAreas"
-            type="radio"
-            class="form-check-input"
-            id="dontUseGeo"
-            name="geoRadioGroup"
-            v-bind:value="false"
-            checked>
-            <label class="form-check-label" for="dontUseGeo">{{ $t('Search areas')}}</label>
-          </div>
-          <div class="form-check">
-            <input
-            v-model="useLocalAreas"
-            type="radio"
-            class="form-check-input"
-            id="doUseGeo"
-            name="geoRadioGroup"
-            v-bind:value="true"
-            >
-            <label class="form-check-label" for="doUseGeo">{{ $t('Use my location')}}</label>
-          </div>
-        </div> -->
-        <!-- If using the user's, show a select menu of nearby locations -->
-        <div v-if="useLocalAreas" class="form-group">
-          <label for="areaSelector">{{ $t('Farm areas near your current location')}}</label>
-          <select
-            @input="toggleRelationship('location', localAreas[$event.target.value])"
-            class="form-control"
-            name="areas">
-            <option v-if="localAreas.length < 1" value="">No other areas nearby</option>
-            <option v-if="localAreas.length > 0" value="" selected>-- Select an Area --</option>
-            <option
-              v-for="(area, i) in localAreas"
-              :value="i"
-              :key="`local-area-${area.id}`">
-              {{area.name}}
-            </option>
-          </select>
-        </div>
-        <!-- If not using the user's location, show a search bar -->
-        <farm-autocomplete
-          v-if="!useLocalAreas"
-          :list="locations.unselected"
-          :keys="['name']"
-          @select="toggleRelationship('location', locations.unselected[$event])"
-          :label="$t('Add areas to the log')">
-          <template v-slot:empty>
-            <div class="empty-slot">
-              <em>{{ $t('No areas found.')}}</em>
-            </div>
-          </template>
-        </farm-autocomplete>
-        <div class="form-item form-item-name form-group">
-          <ul class="list-group">
-            <li
-              v-for="location in locations.selected"
-              v-bind:key="`remove-area-${location.id}`"
-              class="list-group-item">
-              {{ location.name }}
-              <span class="remove-list-item" @click="toggleRelationship('location', area)">
-                &#x2715;
-              </span>
-            </li>
-          </ul>
-        </div>
-      </farm-card>
-
-      <farm-card>
-        <h3>{{ $t('Images')}} 🚧 UNDER CONSTRUCTION 🚧</h3>
-        <!-- <div
-          class="form-item form-item-name form-group">
-          <button
-            :disabled='false'
-            title="Take picture with camera"
-            @click="getPhoto"
-            class="btn btn-info btn-navbar navbar-right"
-            type="button">
-            {{ $t('Take picture with camera')}}
-          </button>
-        </div>
-        <div class="form-item form-item-name form-group">
-          <div class="input-group ">
-            <label
-              class="custom-file-label"
-              for="customFile">
-              {{ $t('Select photo from file')}}
-            </label>
-            <input
-              type="file"
-              accept="image/*"
-              class="custom-file-input"
-              ref="photo"
-              @change="loadPhoto($event.target.files)">
-          </div>
-        </div> -->
-        <!-- NOTE: Display is set to 'none' if the img fails to load. -->
-        <!-- <div class="form-item form-item-name form-group">
-          <img
-            v-for="(url, i) in imageUrls"
-            :src="url"
-            :key="`preview-${i}`"
-            onerror="this.style.display='none'"
-            class="preview" />
-        </div> -->
-      </farm-card>
-
-    </farm-stack>
-  </template>
-
-  <template #movement>
-
-    <farm-card v-if="log"><h3>🚧 UNDER CONSTRUCTION 🚧</h3></farm-card>
-    <!-- <farm-card v-if="log.movement !== undefined">
-
-      <farm-autocomplete
-        :list="assets.unselected"
-        :keys="['name']"
-        @select="togglerelationship('asset', assets.unselected[$event])"
-        :label="$t('Add assets to be moved')">
-        <template v-slot:empty>
-          <div class="empty-slot">
-            <em>{{ $t('No assets found.')}}</em>
-          </div>
-        </template>
-      </farm-autocomplete>
-
-      <div class="form-item form-item-name form-group">
-        <ul class="list-group">
-          <li
-            v-for="asset in assets.selected"
-            :key="`asset-movement-${asset.id}`"
-            class="list-group-item">
-            {{ asset.name }}
-            <span class="remove-list-item" @click="togglerelationship('asset', asset)">
-              &#x2715;
-            </span>
-          </li>
-        </ul>
-      </div>
-
-      <farm-autocomplete
-        :list="areas.unselected"
-        :keys="['name']"
-        @select="addMovementArea(areas.unselected[$event])"
-        :label="$t('Movement to')">
-        <template v-slot:empty>
-          <div class="empty-slot">
-            <em>{{ $t('No areas found.')}}</em>
-          </div>
-        </template>
-      </farm-autocomplete>
-
-      <div class="form-item form-item-name form-group">
-        <ul class="list-group">
-          <li
-            v-for="(area, i) in areas.selected"
-            v-bind:key="`remove-movement-${i}`"
-            class="list-group-item">
-            {{ area.name }}
-            <span class="remove-list-item" @click="removeMovementArea(area)">
-              &#x2715;
-            </span>
-          </li>
-        </ul>
-      </div>
-
-      <router-link :to="{ name: 'tasks-map' }">
-        <farm-map
-          id="map"
-          :overrideStyles="{ height: '90vw' }"
-          :drawing="false"
-          :options="{
-            controls: (defaults) =>
-              defaults.filter(def => def.constructor.name === 'Attribution'),
-            interactions: false,
-          }"
-          :wkt=mapLayers
-          :geojson="{
-            title: 'areas',
-            geojson: areaGeoJSON,
-            color: 'grey',
-          }"/>
-      </router-link>
-
-    </farm-card> -->
-  </template>
-
-</farm-tabs>
-</template>
-
-<script>
-const {
-  computed, inject, reactive, ref,
-} = window.Vue;
-const {
-  R,
-  parseNotes,
-  // removeGeometry,
-  // isNearby,
-} = window.lib;
-
-// Used to separate assets, areas, etc into those that have already been added
-// to the log (selected), and those that haven't (unselected).
-const partitionOptions = (options = [], selections = []) => {
-  const [selected, unselected] = R.partition(
-    opt => selections.some(sel => sel.id === opt.id),
-    options,
-  );
-  return { selected, unselected };
-};
-
-// Quantity measures are static strings, so no need to make them reactive.
-const quantMeasures = [
-  'count',
-  'length',
-  'weight',
-  'area',
-  'volume',
-  'time',
-  'temperature',
-  'water_content',
-  'value',
-  'rating',
-  'ratio',
-  'probability',
-];
-
-export default {
-  name: 'TasksEdit',
-  setup() {
-    // LOCAL STATE
-    const localAreas = reactive([]);
-    const useLocalAreas = ref(false);
-    const awaitingLocation = ref(false);
-    const showAllCategories = ref(false);
-    const currentQuant = ref(-1);
-
-    // APP SHELL DATA
-    const alert = inject('alert');
-    const bundles = inject('bundles');
-    const settings = inject('settings');
-
-    // ENTITIES
-    const { assets, equipment, locations } = inject('assets');
-    const { categories, units } = inject('terms');
-    const {
-      current, update, save, close,
-    } = inject('logs');
-
-    return {
-      parseNotes,
-      quantMeasures,
-      localAreas,
-      useLocalAreas,
-      awaitingLocation,
-      showAllCategories,
-      currentQuant,
-      alert,
-      typeLabel: bundles.log?.[current.type]?.label || '',
-      settings,
-      log: current,
-      update,
-      save,
-      close,
-      units,
-      assets: computed(() => partitionOptions(assets.value, current.asset)),
-      equipment: computed(() => partitionOptions(equipment.value, current.equipment)),
-      locations: computed(() => partitionOptions(locations.value, current.location)),
-      categories: computed(() => partitionOptions(categories.value, current.category)),
-      appBarActions: computed(() => {
-        const logURL = current.url;
-        const openInNew = logURL ? [{
-          icon: 'icon-open-in-new',
-          onClick() { window.open(logURL, '_blank'); },
-          text: 'Open in browser',
-        }] : [];
-        return openInNew;
-      }),
-      updateNotes(value) {
-        update({ notes: { value, format: 'default' } });
-      },
-      toggleRelationship(relationship, { id, type }) {
-        const i = current[relationship].findIndex(e => e.id === id);
-        if (i < 0) {
-          const changed = current[relationship].concat({ id, type });
-          update({ [relationship]: changed });
-        } else {
-          const changed = [
-            ...current[relationship].slice(0, i),
-            ...current[relationship].slice(i + 1),
-          ];
-          update({ [relationship]: changed });
-        }
-      },
-    };
-  },
-
-  beforeMount() {
-    if (!this.log) {
-      this.$router.push({ path: '/tasks' });
-    }
-  },
-  beforeRouteLeave() {
-    if (this.log) {
-      this.save(this.log);
-    }
-  },
-
-  // props: [
-  //   'areaGeoJSON',
-  // ],
-
-  // methods: {
-  //   updateQuantity(key, value, index) {
-  //     const currentQuants = this.log.quantity || [];
-  //     const storedVal = (key === 'unit')
-  //       ? { id: value, type: 'taxonomy_term--unit' }
-  //       : value;
-  //     let updatedQuant; let updatedQuants;
-  //     if (index >= 0) {
-  //       updatedQuant = { ...currentQuants[index], [key]: storedVal };
-  //       updatedQuants = [
-  //         ...currentQuants.slice(0, index),
-  //         updatedQuant,
-  //         ...currentQuants.slice(index + 1),
-  //       ];
-  //     } else {
-  //       updatedQuant = {
-  //         measure: null,
-  //         value: null,
-  //         unit: null,
-  //         label: null,
-  //       };
-  //       updatedQuants = [...currentQuants, updatedQuant];
-  //     }
-  //     this.update({ quantity: updatedQuants });
-  //     if (index < 0) {
-  //       this.currentQuant = updatedQuants.length - 1;
-  //     }
-  //   },
-
-  //   addMovementArea(area) {
-  //     const { id, type } = area;
-  //     const areaReference = { id, type: `asset--${type}` };
-  //     // TODO: replace geofield property
-  //     const areaGeometry = area.geofield[0]?.geom;
-  //     const prevMovement = this.log.movement;
-  //     const newGeometry = prevMovement
-  //       ? mergeGeometries([areaGeometry, prevMovement.geometry])
-  //       : areaGeometry;
-  //     const newMovement = {
-  //       area: prevMovement
-  //         ? prevMovement.area.concat(areaReference)
-  //         : [areaReference],
-  //       geometry: newGeometry,
-  //     };
-  //     this.update({ movement: newMovement });
-  //   },
-
-  //   removeMovementArea(area) {
-  //     const newAreas = this.log.movement.area
-  //       .filter(_area => _area.id !== area.id);
-  //     const prevGeometry = this.log.movement.geometry;
-  //     let areaGeometry = null;
-  //     // TODO: Replace geofield property.
-  //     if (area.geofield[0]) {
-  //       areaGeometry = area.geofield[0].geom;
-  //     }
-  //     const newGeometry = removeGeometry(prevGeometry, areaGeometry);
-  //     const newMovement = {
-  //       geometry: newGeometry,
-  //       area: newAreas,
-  //     };
-  //     this.update({ movement: newMovement });
-  //   },
-
-  //   removeQuant(index) {
-  //     if (this.currentQuant >= index) {
-  //       this.currentQuant -= 1;
-  //     }
-  //     const newQuant = [
-  //       ...this.log.quantity.slice(0, index),
-  //       ...this.log.quantity.slice(index + 1),
-  //     ];
-  //     this.update({ quantity: newQuant });
-  //   },
-
-  //   getPhoto() {
-  //     // Obtains an image location from the camera!
-  //     return this.$store.dispatch('getPhotoFromCamera', this.log);
-  //   },
-
-  //   loadPhoto(files) {
-  //     for (let i = 0; i < files.length; i += 1) {
-  //       this.$store.dispatch('loadPhotoBlob', {
-  //         file: files[i],
-  //         log: this.log,
-  //       });
-  //     }
-  //   },
-  // },
-
-  // computed: {
-  //   quantUnitNames() {
-  //     if (this.units.length > 0 && this.log?.quantity.length > 0) {
-  //       const unitNames = [];
-  //       this.log.quantity.forEach((quant) => {
-  //         if (quant.unit) {
-  //           this.units.forEach((unit) => {
-  //             if (parseInt(unit.id, 10) === parseInt(quant.unit.id, 10)) {
-  //               unitNames.push(unit.name);
-  //             }
-  //           });
-  //         } else {
-  //           unitNames.push(null);
-  //         }
-  //       });
-  //       return unitNames;
-  //     }
-  //     return [];
-  //   },
-  //   imageUrls() {
-  //     return this.log.images
-  //       .filter(img => typeof img === 'string');
-  //   },
-  //   mapLayers() {
-  //     const movement = {
-  //       title: 'movement',
-  //       wkt: this.log.movement?.geometry,
-  //       color: 'orange',
-  //       visible: true,
-  //       weight: 0,
-  //       canEdit: !!this.log.movement?.geometry,
-  //     };
-  //     const previousGeoms = this.log.asset
-  //       ?.map(logAsset => this.assets
-  //         ?.find(asset => asset.id === logAsset.id)?.geometry);
-  //     const previousWKT = previousGeoms ? mergeGeometries(previousGeoms) : undefined;
-  //     const previous = {
-  //       title: 'previous',
-  //       wkt: previousWKT,
-  //       color: 'green',
-  //       visible: true,
-  //       weight: 1,
-  //       canEdit: false,
-  //     };
-  //     return [previous, movement];
-  //   },
-  // },
-
-  // watch: {
-  //   useLocalAreas() {
-  //     function filterAreasByProximity(position) {
-  //       this.localAreas = this.locations.unselected
-  //         .filter(area => !!area.geofield[0] && isNearby(
-  //           [position.coords.longitude, position.coords.latitude],
-  //           area.geofield[0].geom,
-  //           (position.coords.accuracy),
-  //         ));
-  //     }
-  //     function onError(error) {
-  //       this.alert(error);
-  //     }
-  //     // If useLocalAreas is set to true, get geolocation and nearby areas
-  //     if (this.useLocalAreas) {
-  //       const options = {
-  //         enableHighAccuracy: true,
-  //         timeout: 10000,
-  //         maximumAge: 0,
-  //       };
-
-  //       const watch = navigator.geolocation.watchPosition(
-  //         filterAreasByProximity.bind(this),
-  //         onError.bind(this),
-  //         options,
-  //       );
-  //       setTimeout(() => {
-  //         navigator.geolocation.clearWatch(watch);
-  //       }, 5000);
-  //     }
-  //   },
-  // },
-};
-
-</script>
-
-<style scoped>
-  textarea {
-    resize: vertical;
-  }
-
-  .reset-margin {
-    margin: 0 0;
-  }
-  .preview {
-    width: 100%;
-    height: 100%;
-  }
-
-  .empty-slot {
-    text-align: center;
-    color: var(--light);
-  }
-
-  .empty-slot button {
-    margin: 0.5rem;
-    color: var(--light);
-  }
-
-  .remove-list-item {
-    float: right;
-    cursor: pointer;
-  }
-
-  #categories {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: space-between;
-  }
-
-  #categories-label {
-    flex: 1 0 100%;
-  }
-
-  #categories p {
-    font-style: italic;
-  }
-
-  .show-hide {
-    flex: 1 0 100%;
-  }
-
-  .show-hide p {
-    font-size: 1rem;
-  }
-
-  .show-hide svg {
-    vertical-align: bottom;
-  }
-
-</style>
diff --git a/packages/field-module-observations/camModule.js b/packages/field-module-observations/camModule.js
deleted file mode 100644
index 10439944..00000000
--- a/packages/field-module-observations/camModule.js
+++ /dev/null
@@ -1,60 +0,0 @@
-// A Vuex module & utlities for accessing the camera via Cordova
-export default {
-  actions: {
-    /*
-    called when the get photo button is tapped
-    */
-    getPhotoFromCamera({ commit }, log) {
-      function handleResponse(photoLoc) {
-        const dataURL = `data:image/jpeg;base64,${photoLoc}`;
-        const props = {
-          images: log.images.concat(dataURL),
-          localID: log.localID,
-        };
-        commit('updateLog', props);
-      }
-      function handleError(error) { // eslint-disable-line no-unused-vars
-      }
-      getPhotoFromCamera() // eslint-disable-line no-use-before-define
-        .then(handleResponse, handleError);
-    },
-    loadPhotoBlob({ commit }, { file, log }) {
-      readFileData(file).then((data) => { // eslint-disable-line no-use-before-define
-        const props = {
-          images: log.images.concat(data),
-          localID: log.localID,
-        };
-        commit('updateLog', props);
-      });
-    },
-  },
-};
-
-/*
-Utilizes the Cordova camera plugin to obtain an image URI
-*/
-function getPhotoFromCamera() {
-  return new Promise((resolve, reject) => {
-    function onSuccess(imageURI) {
-      resolve(imageURI);
-    }
-    function onFail(message) {
-      reject(message);
-    }
-
-    const options = {
-      quality: 50,
-      destinationType: Camera.DestinationType.DATA_URL, // eslint-disable-line no-undef
-    };
-    navigator.camera.getPicture(onSuccess, onFail, options);
-  });
-}
-
-function readFileData(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onloadend = () => resolve(reader.result);
-    reader.onerror = () => reject(reader.error);
-    reader.readAsDataURL(file);
-  });
-}
diff --git a/packages/field-module-observations/src/ObservationsContainer.vue b/packages/field-module-observations/src/ObservationsContainer.vue
index 6654e97e..7ed3806b 100644
--- a/packages/field-module-observations/src/ObservationsContainer.vue
+++ b/packages/field-module-observations/src/ObservationsContainer.vue
@@ -1,14 +1,91 @@
 <template>
-  <div></div>
+  <app-bar-options :title="$t('Observations')" nav="back"/>
+
+  <farm-stack v-if="current" :space="['none', 'none', 's']" :dividers="true">
+    <farm-card>
+      <h3>{{ $t('Images')}}</h3>
+
+      <div class="form-item form-item-name form-group">
+        <div class="input-group ">
+          <label
+            class="custom-file-label"
+            for="customFile">
+            {{ $t('Select photo from file')}}
+          </label>
+          <input
+            type="file"
+            accept="image/*"
+            class="custom-file-input"
+            ref="photo"
+            @change="loadPhoto($event.target.files)">
+        </div>
+      </div>
+
+      <div class="form-item form-item-name form-group">
+        <!-- NOTE: Display is set to 'none' if the img fails to load. -->
+        <img
+          v-for="(url, i) in imageUrls"
+          :src="url"
+          :key="`preview-${i}`"
+          onerror="this.style.display='none'"
+          class="preview"/>
+      </div>
+    </farm-card>
+  </farm-stack>
 </template>
 
 <script>
+const { useEntities } = window.lib;
+const { computed, inject, ref } = window.Vue;
+
+function readFileData(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result);
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+}
+
 export default {
   name: 'ObservationsContainer',
-  setup() {},
+  setup() {
+    const { checkout, revise } = useEntities();
+
+    const profile = inject('profile');
+    const logFilter = {
+      'owner.id': profile.user.id,
+      type: 'log--observation',
+    };
+    const logs = checkout('log', logFilter);
+    const current = ref(logs[0]);
+
+    const imageUrls = computed(() => current.image.filter(img => typeof img === 'string'));
+
+    function loadPhoto(files) {
+      files.forEach((file) => {
+        readFileData(file).then((data) => {
+          const props = {
+            image: current.image.concat(data),
+          };
+          revise(current, props);
+        });
+      });
+    }
+
+    return {
+      current,
+      imageUrls,
+      loadPhoto,
+      logs,
+    };
+  },
 };
 </script>
 
 <style>
-
+  .preview {
+    width: 100%;
+    height: 100%;
+  }
 </style>

From 3a12402f5b750af47be18ffa6c1fe7b1860a9199 Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Wed, 25 Jan 2023 20:22:12 -0500
Subject: [PATCH 05/16] Clean up Observations template.

---
 .../src/ObservationsContainer.vue             | 58 ++++++++++---------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/packages/field-module-observations/src/ObservationsContainer.vue b/packages/field-module-observations/src/ObservationsContainer.vue
index 7ed3806b..6e69622b 100644
--- a/packages/field-module-observations/src/ObservationsContainer.vue
+++ b/packages/field-module-observations/src/ObservationsContainer.vue
@@ -1,37 +1,39 @@
 <template>
   <app-bar-options :title="$t('Observations')" nav="back"/>
 
-  <farm-stack v-if="current" :space="['none', 'none', 's']" :dividers="true">
-    <farm-card>
-      <h3>{{ $t('Images')}}</h3>
+  <farm-main>
+    <farm-stack :space="['none', 'none', 's']" :dividers="true">
+      <farm-card>
+        <h3>{{ $t('Images')}}</h3>
 
-      <div class="form-item form-item-name form-group">
-        <div class="input-group ">
-          <label
-            class="custom-file-label"
-            for="customFile">
-            {{ $t('Select photo from file')}}
-          </label>
-          <input
-            type="file"
-            accept="image/*"
-            class="custom-file-input"
-            ref="photo"
-            @change="loadPhoto($event.target.files)">
+        <div class="form-item form-item-name form-group">
+          <div class="input-group ">
+            <label
+              class="custom-file-label"
+              for="customFile">
+              {{ $t('Select photo from file') }}
+            </label>
+            <input
+              type="file"
+              accept="image/*"
+              class="custom-file-input"
+              ref="photo"
+              @change="loadPhoto($event.target.files)">
+          </div>
         </div>
-      </div>
 
-      <div class="form-item form-item-name form-group">
-        <!-- NOTE: Display is set to 'none' if the img fails to load. -->
-        <img
-          v-for="(url, i) in imageUrls"
-          :src="url"
-          :key="`preview-${i}`"
-          onerror="this.style.display='none'"
-          class="preview"/>
-      </div>
-    </farm-card>
-  </farm-stack>
+        <div class="form-item form-item-name form-group">
+          <!-- NOTE: Display is set to 'none' if the img fails to load. -->
+          <img
+            v-for="(url, i) in imageUrls"
+            :src="url"
+            :key="`preview-${i}`"
+            onerror="this.style.display='none'"
+            class="preview"/>
+        </div>
+      </farm-card>
+    </farm-stack>
+  </farm-main>
 </template>
 
 <script>

From dcf23f7cb9fd7f67513fbf2bf6861714c0340357 Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Mon, 13 Feb 2023 16:32:43 -0500
Subject: [PATCH 06/16] Sync and cache files when committing entities.

---
 packages/field-kit/src/entities/index.js      | 99 ++++++++++++++++---
 packages/field-kit/src/http/SyncScheduler.js  | 40 ++++++--
 packages/field-kit/src/http/sync.js           | 18 ++--
 packages/field-kit/src/idb/databases.js       | 41 +++++++-
 packages/field-kit/src/idb/files.js           | 93 +++++++++++++++++
 .../src/ObservationsContainer.vue             | 79 +++++++--------
 6 files changed, 300 insertions(+), 70 deletions(-)
 create mode 100644 packages/field-kit/src/idb/files.js

diff --git a/packages/field-kit/src/entities/index.js b/packages/field-kit/src/entities/index.js
index 4397cd60..0687ed8b 100644
--- a/packages/field-kit/src/entities/index.js
+++ b/packages/field-kit/src/entities/index.js
@@ -1,6 +1,7 @@
 import {
   isProxy, isRef, reactive, readonly, ref, shallowReactive, unref, watch, watchEffect,
 } from 'vue';
+import { useObjectUrl } from '@vueuse/core';
 import {
   assoc, clone, complement, compose, curryN, equals, is,
   map, mapObjIndexed, pick, propEq, when,
@@ -15,7 +16,8 @@ import { syncEntities } from '../http/sync';
 import SyncScheduler from '../http/SyncScheduler';
 import { getRecords } from '../idb';
 import { cacheEntity } from '../idb/cache';
-import asArray from '../utils/asArray';
+import { cacheFileData, fmtFileData } from '../idb/files';
+import asArray, { isArrayLike } from '../utils/asArray';
 import diff from '../utils/diff';
 import parseFilter from '../utils/parseFilter';
 import { PromiseQueue } from '../utils/promises';
@@ -72,7 +74,7 @@ const replay = (previous, transactions) => {
 
 const syncHandler = revision => interceptor((evaluation) => {
   const {
-    entity, type, id, state,
+    entity, type, id, state, files,
   } = revision;
   const {
     loginRequired, connectivity, repeatable, warnings, data: [value] = [],
@@ -82,7 +84,7 @@ const syncHandler = revision => interceptor((evaluation) => {
     alert(warnings);
   }
   if (repeatable.length > 0) {
-    const subscribe = scheduler.push(entity, type, id);
+    const subscribe = scheduler.push(entity, type, id, { files });
     subscribe((data) => {
       emit(state, data);
     });
@@ -180,7 +182,7 @@ export default function useEntities(options = {}) {
     const route = identifyRoute();
     const [backupURI, transactions] = restoreTransactions(entity, type, _id, route);
     const revision = {
-      entity, type, id: _id, state, transactions, queue, backupURI,
+      entity, type, id: _id, state, transactions, queue, backupURI, files: {},
     };
     revisions.set(reference, revision);
     return [reference, revision];
@@ -417,6 +419,56 @@ export default function useEntities(options = {}) {
     if (watcher && typeof watcher.unwatch === 'function') watcher.unwatch();
   }
 
+  function useFile(fileData) {
+    const file = clone(fileData);
+    if (!file.url && file.data instanceof Blob) file.url = useObjectUrl(file.data);
+    return reactive(file);
+  }
+
+  function restoreFiles(reference, field) {
+    const revision = revisions.get(reference);
+    if (!is(Object, revision.files)) revision.files = {};
+    if (!Array.isArray(revision.files[field]) || !isProxy(revision.files[field])) {
+      revision.files[field] = shallowReactive([]);
+    }
+    const { files: { [field]: files } } = revision;
+    return readonly(files);
+  }
+
+  function attachFile(reference, field, file) {
+    const revision = revisions.get(reference);
+    if (!revision?.files?.[field]) restoreFiles(reference, field);
+    const recur = f => attachFile(reference, field, f);
+    if (isArrayLike(file)) return Array.from(file).map(recur);
+    const fileData = fmtFileData(file);
+    const fileState = useFile(fileData);
+    // Use the queue to push the file state onto the actual revision files,
+    // in case files are still being loaded or synced by restoreFiles. In the
+    // meantime, a readonly copy of the state can be returned synchronously.
+    revision.queue.push((previous) => {
+      revision.files[field].push(fileState);
+      return previous;
+    });
+    return readonly(fileState);
+  }
+
+  function removeFile(reference, field, file) {
+    const revision = revisions.get(reference);
+    if (!is(Object, revision.files)) return -1;
+    if (!Array.isArray(revision.files[field])) return -1;
+    const findAndSplice = (predicate) => {
+      const i = revision.files[field].findIndex(predicate);
+      if (i < 0) return i;
+      revision.files[field].splice(i, 1);
+      return i;
+    };
+    if (typeof file === 'string') return findAndSplice(f => file === f.url);
+    if (file instanceof Blob) return findAndSplice(f => Object.is(file, f.data));
+    if (Array.isArray(file)) return file.map(removeFile);
+    if (isProxy(file)) return removeFile(reference, field, file.url);
+    return -1;
+  }
+
   // An ASYNCHRONOUS operation, which replays all transactions based on the
   // current state of the entity at the time of calling, then writes those
   // changes to the local database and sends them on to remote systems.
@@ -440,6 +492,19 @@ export default function useEntities(options = {}) {
       emit(state, fields);
       const next = farm[shortName].update(previous, fields);
       return cacheEntity(entity, next)
+        .then(() => {
+          const cacheByField = (field) => {
+            const references = [{ id, type, fields: [field] }];
+            return (file, i) => cacheFileData(file.data, null, { references })
+              .then(({ id: fileId, type: fileType }) => {
+                revision.files[field][i].id = fileId;
+                revision.files[field][i].type = fileType;
+              });
+          };
+          const fileCachingRequests = Object.entries(revision.files || {})
+            .flatMap(([field, files]) => files.map(cacheByField(field)));
+          return Promise.allSettled(fileCachingRequests);
+        })
         .then(() => {
           clearBackup(backupURI);
           if (!is(Map, dependencies)) return Promise.resolve({});
@@ -482,16 +547,28 @@ export default function useEntities(options = {}) {
           emit(state, finalFields);
           return farm[shortName].update(next, finalFields);
         })
-        .then((final) => {
-          const syncOptions = { cache: asArray(final), filter: { id, type } };
-          return syncEntities(shortName, syncOptions);
-        })
-        .then(syncHandler(revision))
-        .then(({ data: [value] = [] } = {}) => value);
+        .then((cache) => {
+          const syncOptions = { cache, filter: { id, type } };
+          const { length: fileCount } = Object.values(revision.files || {}).flat();
+          if (fileCount > 0) syncOptions.files = { [id]: revision.files };
+          return syncEntities(shortName, syncOptions)
+            .then(syncHandler(revision))
+            .then(({ data: [final] = [] } = {}) => final || cache);
+        });
     });
   }
 
   return {
-    add, append, checkout, commit, drop, link, revise, unlink,
+    add,
+    append,
+    attachFile,
+    checkout,
+    commit,
+    drop,
+    link,
+    removeFile,
+    restoreFiles,
+    revise,
+    unlink,
   };
 }
diff --git a/packages/field-kit/src/http/SyncScheduler.js b/packages/field-kit/src/http/SyncScheduler.js
index 93fb9048..8d0b49e7 100644
--- a/packages/field-kit/src/http/SyncScheduler.js
+++ b/packages/field-kit/src/http/SyncScheduler.js
@@ -1,5 +1,7 @@
 import { validate } from 'uuid';
-import { is } from 'ramda';
+import {
+  compose, concat, is, map, mergeDeepWith, pick, uniq,
+} from 'ramda';
 import { syncEntities } from './sync';
 import interceptor from './interceptor';
 import { getRecords } from '../idb';
@@ -10,6 +12,7 @@ import { STATUS_IN_PROGRESS, updateStatus } from './connection';
 import { alert } from '../warnings/alert';
 import { asFlatArray } from '../utils/asArray';
 import parseFilter from '../utils/parseFilter';
+import { loadFilesByHostId } from '../idb/files';
 
 // An array of shortNames to ensure only valid entities are pushed onto the scheduler.
 const entities = Object.keys(nomenclature.entities);
@@ -18,8 +21,10 @@ const stringifyID = (entity, type, id) => JSON.stringify({ entity, type, id });
 const parseID = string => JSON.parse(string);
 const FILTER_ID = 'FILTER_ID';
 
-const makeNewGroup = type => ({ id: null, type, filter: null });
-function groupFilters(pendingIdStrings, pendingFilters) {
+const makeNewGroup = type => ({
+  id: null, type, files: null, filter: null,
+});
+function groupFilters(pendingIdStrings, pendingFilters, pendingFiles) {
   const groupMap = new Map();
   pendingIdStrings.forEach((idString) => {
     const { type, id } = parseID(idString);
@@ -45,19 +50,26 @@ function groupFilters(pendingIdStrings, pendingFilters) {
         group.id.push(id);
       }
     }
+    const concatUniq = compose(uniq, concat);
+    const mergeIdentifiers = mergeDeepWith(concatUniq);
+    const fileIdentifiers = pendingFiles.get(idString);
+    if (is(Object, fileIdentifiers) && validate(id)) {
+      const files = { [id]: pendingFiles.get(idString) };
+      group.files = mergeIdentifiers(group.files || {}, files);
+    }
     groupMap.set(type, group);
   });
   // Iterate through the ESM Map, add the id's as a separate filter, and then
   // return a plain, flat array.
   const groups = Array.from(groupMap.values()).map((group) => {
-    const { id, type } = group;
+    const { id, type, files } = group;
     let { filter } = group;
     if (validate(id) || Array.isArray(id)) {
       filter = asFlatArray(filter);
       filter.push({ id, type });
     }
     if (!filter) filter = { type };
-    return { type, filter };
+    return { type, files, filter };
   });
   return groups;
 }
@@ -87,21 +99,25 @@ export default function SyncScheduler(intervals = defaultIntervals) {
   const pending = new Set();
   const listeners = new Map();
   const pendingFilters = new Map();
+  const pendingFiles = new Map();
 
   async function retry() {
     const retrying = new Set(pending);
     pending.clear();
     const retryingFilters = new Map(pendingFilters);
     pendingFilters.clear();
-    const filterGroups = groupFilters(retrying, retryingFilters);
+    const filterGroups = groupFilters(retrying, retryingFilters, pendingFiles);
     const requests = filterGroups.map(async (group) => {
       updateStatus(STATUS_IN_PROGRESS);
       const { type, filter } = group;
       const [entity] = type.split('--');
       const { shortName } = nomenclature.entities[entity];
-      const query = parseFilter(filter);
-      const cache = await getRecords('entities', entity, query);
-      const results = await syncEntities(shortName, { cache, filter });
+      const syncOptions = {
+        cache: await getRecords('entities', entity, parseFilter(filter)),
+        files: await loadFilesByHostId(group.files || {}),
+        filter,
+      };
+      const results = await syncEntities(shortName, syncOptions);
       const handler = ({ connectivity, warnings }) => {
         updateStatus(connectivity);
         if (warnings.length > 0) {
@@ -151,7 +167,7 @@ export default function SyncScheduler(intervals = defaultIntervals) {
     }, interval);
   }
 
-  this.push = function push(entity, type, target) {
+  this.push = function push(entity, type, target, options = {}) {
     if (!entities.includes(entity)) {
       throw new Error(`Invalid entity name: ${entity}`);
     }
@@ -170,6 +186,10 @@ export default function SyncScheduler(intervals = defaultIntervals) {
     }
     // If the target is invalid, return false instead of a subscriber function.
     if (!idString) return false;
+    if (is(Object, options.files)) {
+      const fileIdentifiers = map(map(pick(['id', 'type'])), options.files);
+      pendingFiles.set(idString, fileIdentifiers);
+    }
     if (pending.size === 0) startClock();
     pending.add(idString);
     return function subscribe(listener) {
diff --git a/packages/field-kit/src/http/sync.js b/packages/field-kit/src/http/sync.js
index 6928cf3f..2ffc0551 100644
--- a/packages/field-kit/src/http/sync.js
+++ b/packages/field-kit/src/http/sync.js
@@ -1,22 +1,24 @@
 import {
-  allPass, insert, reduce,
+  allPass, anyPass, insert, reduce,
 } from 'ramda';
 import farm from '../farm';
+import { asFlatArray } from '../utils/asArray';
 import parseFilter from '../utils/parseFilter';
 
-export const fetchEntities = (shortName, { cache = [], filter, limit }) =>
+export const fetchEntities = (shortName, { cache, filter, limit }) =>
   farm[shortName].fetch({ filter, limit }).then((results) => {
     const { data, fulfilled, rejected } = results;
     const entities = data.reduce((collection, remote) => {
       const i = collection.findIndex(ent => ent.id === remote.id);
       const merged = farm[shortName].merge(collection[i], remote);
       return insert(i, merged, collection);
-    }, cache);
+    }, asFlatArray(cache));
     return { data: entities, fulfilled, rejected };
   });
 
-export const syncEntities = (shortName, { cache = [], filter, limit }) =>
-  fetchEntities(shortName, { cache, filter, limit }).then((fetchResults) => {
+export const syncEntities = (shortName, options) =>
+  fetchEntities(shortName, options).then((fetchResults) => {
+    const { filter, files = {} } = options;
     const { data: mergedEntities } = fetchResults;
     const failedBundleNames = fetchResults.rejected.map(({ response = {} }) => {
       const { config: { url = '' } = {} } = response;
@@ -26,10 +28,12 @@ export const syncEntities = (shortName, { cache = [], filter, limit }) =>
     const predicate = allPass([
       parseFilter(filter),
       entity => failedBundleNames.every(b => b !== entity.type),
-      farm.meta.isUnsynced,
+      anyPass([farm.meta.isUnsynced, e => e.id in files]),
     ]);
     const syncables = mergedEntities.filter(predicate);
-    const sendRequests = syncables.map(farm[shortName].send);
+    const withOptions = e => (e.id in files ? { files: files[e.id] } : {});
+    const sendWithOptions = e => farm[shortName].send(e, withOptions(e));
+    const sendRequests = syncables.map(sendWithOptions);
     const handleSendResults = reduce((result, { status, reason, value: remote }) => {
       const { data, fulfilled, rejected } = result;
       if (status === 'rejected') {
diff --git a/packages/field-kit/src/idb/databases.js b/packages/field-kit/src/idb/databases.js
index 9cd3bdcc..7ce34602 100644
--- a/packages/field-kit/src/idb/databases.js
+++ b/packages/field-kit/src/idb/databases.js
@@ -1,10 +1,21 @@
+function createIndices(store, indices) {
+  if (store instanceof IDBObjectStore && Array.isArray(indices)) {
+    indices.forEach(({ name, keyPath, options }) => {
+      store.createIndex(name, keyPath, options);
+    });
+  }
+}
+
 function onUpgradeCreateObjectStore(event, options) {
-  const { name, keyPath = 'id', autoIncrement = false } = options;
+  const {
+    name, keyPath = 'id', autoIncrement = false, indices,
+  } = options;
   return new Promise((resolve, reject) => {
     const db = event.target.result;
     try {
-      db.createObjectStore(name, { keyPath, autoIncrement });
-      resolve();
+      const store = db.createObjectStore(name, { keyPath, autoIncrement });
+      createIndices(store, indices);
+      resolve(store);
     } catch (error) {
       reject(error);
     }
@@ -83,4 +94,28 @@ export default {
       },
     ],
   },
+  binary_data: {
+    version: 1,
+    name: 'binary_data',
+    stores: [
+      {
+        name: 'file',
+        indices: [{
+          name: 'file_entity_id',
+          keyPath: 'file_entity.id',
+        }],
+        keyPath: 'id',
+        upgrades,
+      },
+      {
+        name: 'image',
+        indices: [{
+          name: 'file_entity_id',
+          keyPath: 'file_entity.id',
+        }],
+        keyPath: 'id',
+        upgrades,
+      },
+    ],
+  },
 };
diff --git a/packages/field-kit/src/idb/files.js b/packages/field-kit/src/idb/files.js
new file mode 100644
index 00000000..210fa06a
--- /dev/null
+++ b/packages/field-kit/src/idb/files.js
@@ -0,0 +1,93 @@
+import { validate, v4 as uuidv4 } from 'uuid';
+import { getRecords, saveRecord } from '.';
+import dbs from './databases.js';
+
+const validStores = dbs.binary_data.stores.map(s => s.name);
+const defaultMime = 'application/octet-stream';
+
+/**
+ * @typedef {Object} EntityFileData
+ * @property {String} id
+ * @property {String} type
+ * @property {Object|File|Blob} [data]
+ * @property {Object} [file_entity]
+ * @property {String} filename
+ * @property {String} mime
+ * @property {[{ id, type }]} references
+ * @property {String} [url]
+ */
+
+/** @typedef {Object.<String, EntityFileData>} FileDataByField */
+/** @typedef {Object.<String, FileDataByField>} FileDataByHostId */
+
+/**
+ * @type {Function}
+ * @param {Object|File|Blob} [data]
+ * @param {Object} [file_entity]
+ * @param {Object} [options]
+ * @returns {EntityFileData}
+ */
+export function fmtFileData(data = null, file_entity = null, options = {}) {
+  const { id: entity_id, attributes = {} } = file_entity || {};
+  const { filename: entity_filename, filemime, uri = {} } = attributes;
+  const {
+    mime = data?.type || filemime || defaultMime,
+    references = [],
+    url = uri.value || null,
+  } = options;
+  let { filename = data?.name || entity_filename, id = entity_id, type } = options;
+  if (!validate(id)) id = uuidv4();
+  if (!validStores.includes(type)) {
+    const [f1, ...fields] = references.flatMap(r => r?.fields || []);
+    if (mime.startsWith('image')) type = 'image';
+    else if (validStores.includes(f1) && fields.every(fN => f1 === fN)) type = f1;
+    else type = 'file';
+  }
+  if (!filename) filename = `${type}-${id}`;
+  return {
+    id, type, data, file_entity, filename, mime, references, url,
+  };
+}
+
+/**
+ * @type {Function}
+ * @param {Object|File|Blob} [data]
+ * @param {Object} [file_entity]
+ * @param {Object} [options]
+ * @returns {Promise<EntityFileData>}
+*/
+export function cacheFileData(data, file_entity, options = {}) {
+  const _options = { ...options };
+  // Never store object URL's, which share a lifespan with the window document.
+  // See https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
+  // and https://w3c.github.io/FileAPI/#url-model for more details.
+  if (_options.url?.startsWith('blob:')) delete _options.url;
+  const record = fmtFileData(data, file_entity, _options);
+  return saveRecord('binary_data', record.type, record).then(() => record);
+}
+
+export async function loadFileData(fileIdentifier) {
+  const { type: store, id } = fileIdentifier;
+  return getRecords('binary_data', store, id);
+}
+
+export async function loadFilesByField(fileIdentifiers) {
+  const loader = async ([field, fileIds]) => {
+    const requests = fileIds.map(loadFileData);
+    const fileData = await Promise.all(requests);
+    return [field, fileData];
+  };
+  const requestsByField = Object.entries(fileIdentifiers).map(loader);
+  const resultsByField = await Promise.all(requestsByField);
+  return Object.fromEntries(resultsByField);
+}
+
+export async function loadFilesByHostId(fileIdentifiers) {
+  const loader = async ([hostId, filesByField]) => {
+    const resultsByField = await loadFilesByField(filesByField);
+    return [hostId, resultsByField];
+  };
+  const requestsByHostId = Object.entries(fileIdentifiers).map(loader);
+  const resultsByHostId = await Promise.all(requestsByHostId);
+  return Object.fromEntries(resultsByHostId);
+}
diff --git a/packages/field-module-observations/src/ObservationsContainer.vue b/packages/field-module-observations/src/ObservationsContainer.vue
index 6e69622b..275037bf 100644
--- a/packages/field-module-observations/src/ObservationsContainer.vue
+++ b/packages/field-module-observations/src/ObservationsContainer.vue
@@ -3,9 +3,18 @@
 
   <farm-main>
     <farm-stack :space="['none', 'none', 's']" :dividers="true">
-      <farm-card>
-        <h3>{{ $t('Images')}}</h3>
+      <h3>{{ $t('Images')}}</h3>
 
+      <farm-card v-if="!log">
+        <button
+          type="button"
+          class="btn btn-success"
+          @click="addObservation"
+          name="add">
+          {{$t('Add Observation Log')}}
+        </button>
+      </farm-card>
+      <farm-card v-if="log">
         <div class="form-item form-item-name form-group">
           <div class="input-group ">
             <label
@@ -25,12 +34,21 @@
         <div class="form-item form-item-name form-group">
           <!-- NOTE: Display is set to 'none' if the img fails to load. -->
           <img
-            v-for="(url, i) in imageUrls"
-            :src="url"
+            v-for="(image, i) in images"
+            :src="image.url"
             :key="`preview-${i}`"
             onerror="this.style.display='none'"
             class="preview"/>
         </div>
+        <div class="form-item form-group">
+          <button
+            type="button"
+            class="btn btn-success"
+            @click="save"
+            name="save">
+            {{$t('Save')}}
+          </button>
+        </div>
       </farm-card>
     </farm-stack>
   </farm-main>
@@ -38,56 +56,39 @@
 
 <script>
 const { useEntities } = window.lib;
-const { computed, inject, ref } = window.Vue;
-
-function readFileData(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onloadend = () => resolve(reader.result);
-    reader.onerror = () => reject(reader.error);
-    reader.readAsDataURL(file);
-  });
-}
+const { computed, shallowRef } = window.Vue;
 
 export default {
   name: 'ObservationsContainer',
   setup() {
-    const { checkout, revise } = useEntities();
+    const {
+      add, attachFile, commit, restoreFiles,
+    } = useEntities();
 
-    const profile = inject('profile');
-    const logFilter = {
-      'owner.id': profile.user.id,
-      type: 'log--observation',
-    };
-    const logs = checkout('log', logFilter);
-    const current = ref(logs[0]);
+    const log = shallowRef();
+    function addObservation() {
+      log.value = add('log', 'log--observation');
+    }
 
-    const imageUrls = computed(() => current.image.filter(img => typeof img === 'string'));
+    function loadPhoto(filelist) {
+      attachFile(log.value, 'image', filelist);
+    }
 
-    function loadPhoto(files) {
-      files.forEach((file) => {
-        readFileData(file).then((data) => {
-          const props = {
-            image: current.image.concat(data),
-          };
-          revise(current, props);
-        });
-      });
+    const images = computed(() => (log.value ? restoreFiles(log.value, 'image') : []));
+    function save() {
+      commit(log.value).then(() => { log.value = undefined; });
     }
 
     return {
-      current,
-      imageUrls,
+      addObservation,
+      images,
       loadPhoto,
-      logs,
+      log,
+      save,
     };
   },
 };
 </script>
 
 <style>
-  .preview {
-    width: 100%;
-    height: 100%;
-  }
 </style>

From 612f9a35f3678ad457eef9b9bed0f76b212fd632 Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Thu, 16 Feb 2023 09:44:26 -0500
Subject: [PATCH 07/16] Restructure asArray ESM exports.

---
 packages/field-kit/src/entities/index.js   | 8 ++++----
 packages/field-kit/src/http/interceptor.js | 2 +-
 packages/field-kit/src/utils/asArray.js    | 4 +---
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/field-kit/src/entities/index.js b/packages/field-kit/src/entities/index.js
index 0687ed8b..b9d4b47a 100644
--- a/packages/field-kit/src/entities/index.js
+++ b/packages/field-kit/src/entities/index.js
@@ -17,7 +17,7 @@ import SyncScheduler from '../http/SyncScheduler';
 import { getRecords } from '../idb';
 import { cacheEntity } from '../idb/cache';
 import { cacheFileData, fmtFileData } from '../idb/files';
-import asArray, { isArrayLike } from '../utils/asArray';
+import { isArrayLike } from '../utils/asArray';
 import diff from '../utils/diff';
 import parseFilter from '../utils/parseFilter';
 import { PromiseQueue } from '../utils/promises';
@@ -282,9 +282,9 @@ export default function useEntities(options = {}) {
     const { queue, state, transactions } = revision;
     queue.push(() => {
       updateStatus(STATUS_IN_PROGRESS);
-      return getRecords('entities', _entity, id).then((data) => {
-        if (data) emit(state, data);
-        const syncOptions = { cache: asArray(data), filter: { id, type } };
+      return getRecords('entities', _entity, id).then((cache) => {
+        if (cache) emit(state, cache);
+        const syncOptions = { cache, filter: { id, type } };
         return syncEntities(shortName, syncOptions)
           .then(syncHandler(revision))
           .then(({ data: [value] = [] } = {}) => {
diff --git a/packages/field-kit/src/http/interceptor.js b/packages/field-kit/src/http/interceptor.js
index 77c3842c..8ea85b18 100644
--- a/packages/field-kit/src/http/interceptor.js
+++ b/packages/field-kit/src/http/interceptor.js
@@ -2,7 +2,7 @@ import {
   clone, curryN, evolve, partition, reduce,
 } from 'ramda';
 import { getHost } from '../farm/remote';
-import asArray from '../utils/asArray';
+import { asArray } from '../utils/asArray';
 import Warning from '../warnings/Warning';
 
 function evaluateResponse(response = {}, errorMsg) {
diff --git a/packages/field-kit/src/utils/asArray.js b/packages/field-kit/src/utils/asArray.js
index 830cfc75..90ddbe46 100644
--- a/packages/field-kit/src/utils/asArray.js
+++ b/packages/field-kit/src/utils/asArray.js
@@ -1,5 +1,5 @@
 // Wrap a value in an array, unless it's nullish, then return an empty array.
-const asArray = value => (value ? [value] : []);
+export const asArray = value => (value ? [value] : []);
 
 // Like above, but checks if the value is already an array and if so returns it as is.
 export const asFlatArray = value => (Array.isArray(value) ? value : asArray(value));
@@ -15,5 +15,3 @@ export const isArrayLike = value => typeof value?.[Symbol.iterator] === 'functio
 export const fromFlatArray = value =>
   (isArrayLike(value) ? Array.from(value) : asArray(value))
     .flat(Infinity);
-
-export default asArray;

From 0e171756b76ba362afe7a780f287d1ca8adf19e0 Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Thu, 16 Feb 2023 21:07:35 -0500
Subject: [PATCH 08/16] Checkout and display all recent observation logs.

---
 .../src/ObservationsContainer.vue             | 67 ++++++++++++++-----
 1 file changed, 51 insertions(+), 16 deletions(-)

diff --git a/packages/field-module-observations/src/ObservationsContainer.vue b/packages/field-module-observations/src/ObservationsContainer.vue
index 275037bf..de001c6c 100644
--- a/packages/field-module-observations/src/ObservationsContainer.vue
+++ b/packages/field-module-observations/src/ObservationsContainer.vue
@@ -5,16 +5,16 @@
     <farm-stack :space="['none', 'none', 's']" :dividers="true">
       <h3>{{ $t('Images')}}</h3>
 
-      <farm-card v-if="!log">
+      <farm-card v-if="!current">
         <button
           type="button"
           class="btn btn-success"
-          @click="addObservation"
+          @click="add"
           name="add">
           {{$t('Add Observation Log')}}
         </button>
       </farm-card>
-      <farm-card v-if="log">
+      <farm-card v-if="current">
         <div class="form-item form-item-name form-group">
           <div class="input-group ">
             <label
@@ -48,43 +48,78 @@
             name="save">
             {{$t('Save')}}
           </button>
+          <button
+            type="button"
+            class="btn btn-success"
+            @click="cancel"
+            name="cancel">
+            {{$t('Cancel')}}
+          </button>
         </div>
       </farm-card>
+      <farm-tiles
+        v-if="!current"
+        :columns="[1, 2, 3]"
+        :space="['none', 's']"
+        dividers>
+        <farm-card v-for="(log, i) in logs" :key="`observation-${i}`">
+          <farm-text @click="view(log.id)">{{ log.name }}</farm-text>
+        </farm-card>
+      </farm-tiles>
     </farm-stack>
   </farm-main>
 </template>
 
 <script>
-const { useEntities } = window.lib;
-const { computed, shallowRef } = window.Vue;
+const { daysAway, useEntities } = window.lib;
+const {
+  computed, inject, ref,
+} = window.Vue;
 
 export default {
   name: 'ObservationsContainer',
   setup() {
     const {
-      add, attachFile, commit, restoreFiles,
+      append, attachFile, checkout, commit, restoreFiles,
     } = useEntities();
 
-    const log = shallowRef();
-    function addObservation() {
-      log.value = add('log', 'log--observation');
+    const profile = inject('profile');
+    const logFilter = {
+      type: 'log--observation',
+      'owner.id': profile.user.id,
+      timestamp: { $gt: daysAway(Date.now(), -30) },
+    };
+    const logs = checkout('log', logFilter);
+
+    const currentID = ref(logs[0]?.id);
+    const current = computed(() => logs.find(l => l.id === currentID.value));
+    const view = (id) => {
+      currentID.value = id;
+    };
+    function add() {
+      const { id } = append(logs, 'log--observation', { status: 'done' });
+      currentID.value = id;
     }
 
     function loadPhoto(filelist) {
-      attachFile(log.value, 'image', filelist);
+      attachFile(current, 'image', filelist);
     }
 
-    const images = computed(() => (log.value ? restoreFiles(log.value, 'image') : []));
-    function save() {
-      commit(log.value).then(() => { log.value = undefined; });
-    }
+    const images = computed(() =>
+      (current.value ? restoreFiles(current.value, 'image') : []));
+    const save = () => commit(current.value);
+    const cancel = () => { currentID.value = undefined; };
 
     return {
-      addObservation,
+      add,
+      cancel,
+      current,
+      currentID,
       images,
       loadPhoto,
-      log,
+      logs,
       save,
+      view,
     };
   },
 };

From 3b6704ced22c7d72470bb49cc774efe3eaa16193 Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Fri, 17 Feb 2023 22:52:49 -0500
Subject: [PATCH 09/16] Fix missing store params in getRecords.

---
 packages/field-kit/src/idb/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/field-kit/src/idb/index.js b/packages/field-kit/src/idb/index.js
index e2c376a2..bd42b1b2 100644
--- a/packages/field-kit/src/idb/index.js
+++ b/packages/field-kit/src/idb/index.js
@@ -60,12 +60,12 @@ export function getRecords(dbName, storeName, query) {
       return getAllRecords(store);
     }
     if (Array.isArray(query)) {
-      return getManyByPrimaryKeys(query);
+      return getManyByPrimaryKeys(store, query);
     }
     if (typeof query === 'function') {
       return cursorQuery(store, query);
     }
-    return getOneByPrimaryKey(query).then(([, data]) => data);
+    return getOneByPrimaryKey(store, query).then(([, data]) => data);
   });
 }
 

From 4975f91795e6ef8566f4c917d27847b59efeb796 Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Fri, 17 Feb 2023 22:57:10 -0500
Subject: [PATCH 10/16] Provide getRecordsFromIndex IDB utility.

---
 packages/field-kit/src/idb/index.js | 34 +++++++++++++++++++----------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/field-kit/src/idb/index.js b/packages/field-kit/src/idb/index.js
index bd42b1b2..b6b05742 100644
--- a/packages/field-kit/src/idb/index.js
+++ b/packages/field-kit/src/idb/index.js
@@ -53,19 +53,31 @@ function cursorQuery(store, query) {
     request.onerror = event => reject(event);
   });
 }
+function getter(storeOrIndex, query) {
+  if (!query) {
+    return getAllRecords(storeOrIndex);
+  }
+  if (Array.isArray(query)) {
+    return getManyByPrimaryKeys(storeOrIndex, query);
+  }
+  if (typeof query === 'function') {
+    return cursorQuery(storeOrIndex, query);
+  }
+  return getOneByPrimaryKey(storeOrIndex, query).then(([, data]) => data);
+}
 export function getRecords(dbName, storeName, query) {
   return openDatabase(dbName).then((db) => {
-    const store = db.transaction(storeName, 'readonly').objectStore(storeName);
-    if (!query) {
-      return getAllRecords(store);
-    }
-    if (Array.isArray(query)) {
-      return getManyByPrimaryKeys(store, query);
-    }
-    if (typeof query === 'function') {
-      return cursorQuery(store, query);
-    }
-    return getOneByPrimaryKey(store, query).then(([, data]) => data);
+    const store = db.transaction(storeName, 'readonly')
+      .objectStore(storeName);
+    return getter(store, query);
+  });
+}
+export function getRecordsFromIndex(dbName, storeName, indexName, query) {
+  return openDatabase(dbName).then((db) => {
+    const index = db.transaction(storeName, 'readonly')
+      .objectStore(storeName)
+      .index(indexName);
+    return getter(index, query);
   });
 }
 

From dd4f492594738a26506679d06e6af7077fa1ca87 Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Thu, 23 Feb 2023 22:00:06 -0500
Subject: [PATCH 11/16] Accept include option with syncEntities arguments.

---
 packages/field-kit/src/http/sync.js | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/field-kit/src/http/sync.js b/packages/field-kit/src/http/sync.js
index 2ffc0551..3c159d36 100644
--- a/packages/field-kit/src/http/sync.js
+++ b/packages/field-kit/src/http/sync.js
@@ -1,19 +1,36 @@
 import {
-  allPass, anyPass, insert, reduce,
+  allPass, anyPass, chain, complement, compose, defaultTo, filter as rFilter,
+  insert, isNil, map, path, prop, reduce,
 } from 'ramda';
 import farm from '../farm';
 import { asFlatArray } from '../utils/asArray';
 import parseFilter from '../utils/parseFilter';
 
-export const fetchEntities = (shortName, { cache, filter, limit }) =>
-  farm[shortName].fetch({ filter, limit }).then((results) => {
+const isNotNil = complement(isNil);
+const getIncludedIds = chain(compose(
+  map(prop('id')),
+  rFilter(isNotNil),
+  defaultTo([]),
+  chain(path(['data', 'included'])),
+));
+function getIncluded(data, fulfilled) {
+  const ids = getIncludedIds(fulfilled);
+  const included = data.filter(d => ids.includes(d.id));
+  return included;
+}
+
+export const fetchEntities = (shortName, { cache, ...rest }) =>
+  farm[shortName].fetch({ ...rest }).then((results) => {
     const { data, fulfilled, rejected } = results;
+    const included = getIncluded(data, fulfilled);
     const entities = data.reduce((collection, remote) => {
       const i = collection.findIndex(ent => ent.id === remote.id);
       const merged = farm[shortName].merge(collection[i], remote);
       return insert(i, merged, collection);
     }, asFlatArray(cache));
-    return { data: entities, fulfilled, rejected };
+    return {
+      data: entities, included, fulfilled, rejected,
+    };
   });
 
 export const syncEntities = (shortName, options) =>
@@ -35,6 +52,7 @@ export const syncEntities = (shortName, options) =>
     const sendWithOptions = e => farm[shortName].send(e, withOptions(e));
     const sendRequests = syncables.map(sendWithOptions);
     const handleSendResults = reduce((result, { status, reason, value: remote }) => {
+      // No need to destructure 'included', since there's no reason to modify it.
       const { data, fulfilled, rejected } = result;
       if (status === 'rejected') {
         return {
@@ -45,9 +63,9 @@ export const syncEntities = (shortName, options) =>
       const i = syncables.findIndex(ent => ent.id === remote.id);
       const merged = farm[shortName].merge(syncables[i], remote);
       return {
+        ...result,
         data: insert(i, merged, data),
         fulfilled: [...fulfilled, remote],
-        rejected,
       };
     }, fetchResults);
     return Promise.allSettled(sendRequests).then(handleSendResults);

From ce228f422908c1ef596ea16f1be744ed581e3cb6 Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Thu, 23 Feb 2023 22:02:11 -0500
Subject: [PATCH 12/16] Refactor upsert utility.

---
 packages/field-kit/src/utils/upsert.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/field-kit/src/utils/upsert.js b/packages/field-kit/src/utils/upsert.js
index 10683780..066c1140 100644
--- a/packages/field-kit/src/utils/upsert.js
+++ b/packages/field-kit/src/utils/upsert.js
@@ -3,11 +3,8 @@
 const upsert = (arr, identifier, el) => {
   const i = arr.findIndex(_el => el[identifier] === _el[identifier]);
   const isNew = i < 0;
-  if (isNew) {
-    arr.push(el);
-  } else {
-    arr.splice(i, 1, el);
-  }
+  if (isNew) arr.push(el);
+  else arr.splice(i, 1, el);
 };
 
 export default upsert;

From 1f296914ccb77dc67468b88e4178230138c7e133 Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Thu, 23 Feb 2023 22:12:14 -0500
Subject: [PATCH 13/16] Add system endpoints to dev server proxy settings.

---
 packages/field-scripts/bin/develop-module/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/field-scripts/bin/develop-module/index.js b/packages/field-scripts/bin/develop-module/index.js
index a05dcf85..bf94d994 100644
--- a/packages/field-scripts/bin/develop-module/index.js
+++ b/packages/field-scripts/bin/develop-module/index.js
@@ -96,6 +96,7 @@ export default async function develop(options = {}) {
         '/api': proxyPort(80),
         '/oauth': proxyPort(80),
         '/fieldkit': proxyPort(80),
+        '/system': proxyPort(80),
       },
       ...serverOptions,
     },

From f9e958f240ee8e73225ba9c75928fa57f97497c9 Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Thu, 23 Feb 2023 22:41:15 -0500
Subject: [PATCH 14/16] Sync and cache file data at checkout.

---
 packages/field-kit/src/entities/index.js      | 55 ++++++++++++++++---
 packages/field-kit/src/idb/files.js           | 16 +++++-
 .../src/ObservationsContainer.vue             | 13 +++--
 3 files changed, 68 insertions(+), 16 deletions(-)

diff --git a/packages/field-kit/src/entities/index.js b/packages/field-kit/src/entities/index.js
index b9d4b47a..fcf447ca 100644
--- a/packages/field-kit/src/entities/index.js
+++ b/packages/field-kit/src/entities/index.js
@@ -3,8 +3,8 @@ import {
 } from 'vue';
 import { useObjectUrl } from '@vueuse/core';
 import {
-  assoc, clone, complement, compose, curryN, equals, is,
-  map, mapObjIndexed, pick, propEq, when,
+  assoc, clone, complement, compose, curryN, equals, filter as rFilter,
+  is, map, mapObjIndexed, pick, propEq, when,
 } from 'ramda';
 import { validate, v4 as uuidv4 } from 'uuid';
 import { splitFilterByType } from 'farmos';
@@ -16,12 +16,13 @@ import { syncEntities } from '../http/sync';
 import SyncScheduler from '../http/SyncScheduler';
 import { getRecords } from '../idb';
 import { cacheEntity } from '../idb/cache';
-import { cacheFileData, fmtFileData } from '../idb/files';
+import { cacheFileData, fmtFileData, loadFileEntity } from '../idb/files';
 import { isArrayLike } from '../utils/asArray';
 import diff from '../utils/diff';
 import parseFilter from '../utils/parseFilter';
 import { PromiseQueue } from '../utils/promises';
 import flattenEntity from '../utils/flattenEntity';
+import upsert from '../utils/upsert';
 import { alert } from '../warnings/alert';
 import nomenclature from './nomenclature';
 import {
@@ -421,7 +422,7 @@ export default function useEntities(options = {}) {
 
   function useFile(fileData) {
     const file = clone(fileData);
-    if (!file.url && file.data instanceof Blob) file.url = useObjectUrl(file.data);
+    if (file.data instanceof Blob) file.url = useObjectUrl(file.data);
     return reactive(file);
   }
 
@@ -429,10 +430,43 @@ export default function useEntities(options = {}) {
     const revision = revisions.get(reference);
     if (!is(Object, revision.files)) revision.files = {};
     if (!Array.isArray(revision.files[field]) || !isProxy(revision.files[field])) {
-      revision.files[field] = shallowReactive([]);
+      revision.files[field] = reactive([]);
     }
-    const { files: { [field]: files } } = revision;
-    return readonly(files);
+
+    // A safe helper for getting file entity identifiers from the host entity.
+    const getResources = state => state?.relationships?.[field] || [];
+    revision.queue.push(refState => Promise.all(getResources(refState).map(async (resource) => {
+      const init = await loadFileEntity(resource);
+      const fileData = init === null ? fmtFileData(null, null, resource) : init;
+      const file = useFile(fileData);
+      upsert(revision.files[field], 'id', file);
+      revision.files[field].push(file);
+      if (init === null) return cacheFileData(null, null, resource);
+      return fileData;
+    })).then(async (fileData) => {
+      if (validate(fileData.file_entity?.id)) return fileData;
+      // Normally the fileData's id and type can't be assumed to be the same as
+      // the file_entity, but if there's no file_entity, then we can be sure the
+      // resource identifier was provided as the fileData's id and type above.
+      const { id, type } = fileData;
+      const { data: [file_entity] } = await farm.file.fetch({ filter: { id, type } });
+      if (!file_entity?.attributes?.uri?.url) {
+        return cacheFileData(null, file_entity, { id, type });
+      }
+      const { attributes: { uri: { url }, filemime } } = file_entity;
+      const headers = {
+        Accept: filemime || 'application/octet-stream',
+      };
+      const { data } = await farm.remote.request({
+        headers, responseType: 'blob', url,
+      });
+      const updated = fmtFileData(data, file_entity, { id, type });
+      const file = useFile(updated);
+      upsert(revision.files[field], 'id', file);
+      return cacheFileData(data, file_entity, { id, type });
+    }).then(() => refState).catch(() => refState));
+
+    return readonly(revision.files[field]);
   }
 
   function attachFile(reference, field, file) {
@@ -549,8 +583,11 @@ export default function useEntities(options = {}) {
         })
         .then((cache) => {
           const syncOptions = { cache, filter: { id, type } };
-          const { length: fileCount } = Object.values(revision.files || {}).flat();
-          if (fileCount > 0) syncOptions.files = { [id]: revision.files };
+          // File data should only be synced once.
+          const takeUnsyncedFiles = rFilter(fileData => fileData.file_entity);
+          const files = map(takeUnsyncedFiles, revision.files);
+          const { length: fileCount } = Object.values(files || {}).flat();
+          if (fileCount > 0) syncOptions.files = { [id]: files };
           return syncEntities(shortName, syncOptions)
             .then(syncHandler(revision))
             .then(({ data: [final] = [] } = {}) => final || cache);
diff --git a/packages/field-kit/src/idb/files.js b/packages/field-kit/src/idb/files.js
index 210fa06a..1462a8c0 100644
--- a/packages/field-kit/src/idb/files.js
+++ b/packages/field-kit/src/idb/files.js
@@ -1,5 +1,5 @@
 import { validate, v4 as uuidv4 } from 'uuid';
-import { getRecords, saveRecord } from '.';
+import { getRecords, getRecordsFromIndex, saveRecord } from '.';
 import dbs from './databases.js';
 
 const validStores = dbs.binary_data.stores.map(s => s.name);
@@ -33,7 +33,7 @@ export function fmtFileData(data = null, file_entity = null, options = {}) {
   const {
     mime = data?.type || filemime || defaultMime,
     references = [],
-    url = uri.value || null,
+    url = uri.url || null,
   } = options;
   let { filename = data?.name || entity_filename, id = entity_id, type } = options;
   if (!validate(id)) id = uuidv4();
@@ -91,3 +91,15 @@ export async function loadFilesByHostId(fileIdentifiers) {
   const resultsByHostId = await Promise.all(requestsByHostId);
   return Object.fromEntries(resultsByHostId);
 }
+
+export function loadFileEntity(fileEntity) {
+  const db = 'binary_data';
+  const index = 'file_entity_id';
+  function loader(entity, stores) {
+    if (stores.length <= 0) return null;
+    const [store, ...tail] = stores;
+    return getRecordsFromIndex(db, store, index, entity.id)
+      .catch(() => loader(entity, tail));
+  }
+  return loader(fileEntity, validStores);
+}
diff --git a/packages/field-module-observations/src/ObservationsContainer.vue b/packages/field-module-observations/src/ObservationsContainer.vue
index de001c6c..17fe6707 100644
--- a/packages/field-module-observations/src/ObservationsContainer.vue
+++ b/packages/field-module-observations/src/ObservationsContainer.vue
@@ -31,12 +31,13 @@
           </div>
         </div>
 
-        <div class="form-item form-item-name form-group">
+        <div
+          v-for="(image, i) in images"
+          :key="`preview-${i}`"
+          class="form-item form-item-name form-group">
           <!-- NOTE: Display is set to 'none' if the img fails to load. -->
           <img
-            v-for="(image, i) in images"
             :src="image.url"
-            :key="`preview-${i}`"
             onerror="this.style.display='none'"
             class="preview"/>
         </div>
@@ -105,8 +106,10 @@ export default {
       attachFile(current, 'image', filelist);
     }
 
-    const images = computed(() =>
-      (current.value ? restoreFiles(current.value, 'image') : []));
+    const images = computed(() => {
+      if (!current.value) return [];
+      return restoreFiles(current.value, 'image');
+    });
     const save = () => commit(current.value);
     const cancel = () => { currentID.value = undefined; };
 

From b02c71d35166f13709b7f81d6881287941403c1b Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Fri, 23 Jun 2023 18:01:29 -0400
Subject: [PATCH 15/16] Add npm scripts dev:fm-obs and dev:fm-tasks.

---
 package.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 99f3270b..92e70778 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,9 @@
     "build": "npm run build --workspace=@farmos.org/field-kit",
     "clean": "npx -y rimraf node_modules **/node_modules/ package-lock.json && npm i",
     "dev:field-kit": "npm run start --workspace=@farmos.org/field-kit",
-    "dev:field-module-tasks": "npm run start --workspace=field-module-tasks",
+    "dev:field-module-tasks": "npm run dev:fm-tasks",
+    "dev:fm-obs": "npm run start --workspace=field-module-observations",
+    "dev:fm-tasks": "npm run start --workspace=field-module-tasks",
     "start": "npm run dev:field-kit",
     "storybook": "npm run --workspace=@farmos.org/field-components storybook",
     "test": "echo \"Error: no test specified\" && exit 1"

From b985cb099039aa68f253403be4b73f5bcdb2958d Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Thu, 13 Jul 2023 07:51:29 -0400
Subject: [PATCH 16/16] Fix how file data is cached and restored.

---
 packages/field-kit/src/entities/index.js | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/field-kit/src/entities/index.js b/packages/field-kit/src/entities/index.js
index fcf447ca..01783236 100644
--- a/packages/field-kit/src/entities/index.js
+++ b/packages/field-kit/src/entities/index.js
@@ -437,13 +437,11 @@ export default function useEntities(options = {}) {
     const getResources = state => state?.relationships?.[field] || [];
     revision.queue.push(refState => Promise.all(getResources(refState).map(async (resource) => {
       const init = await loadFileEntity(resource);
-      const fileData = init === null ? fmtFileData(null, null, resource) : init;
-      const file = useFile(fileData);
+      let fileData = init === null ? fmtFileData(null, null, resource) : init;
+      let file = useFile(fileData);
       upsert(revision.files[field], 'id', file);
       revision.files[field].push(file);
-      if (init === null) return cacheFileData(null, null, resource);
-      return fileData;
-    })).then(async (fileData) => {
+      if (init === null) fileData = await cacheFileData(null, null, resource);
       if (validate(fileData.file_entity?.id)) return fileData;
       // Normally the fileData's id and type can't be assumed to be the same as
       // the file_entity, but if there's no file_entity, then we can be sure the
@@ -461,10 +459,10 @@ export default function useEntities(options = {}) {
         headers, responseType: 'blob', url,
       });
       const updated = fmtFileData(data, file_entity, { id, type });
-      const file = useFile(updated);
+      file = useFile(updated);
       upsert(revision.files[field], 'id', file);
       return cacheFileData(data, file_entity, { id, type });
-    }).then(() => refState).catch(() => refState));
+    })).then(() => refState).catch(() => refState));
 
     return readonly(revision.files[field]);
   }