RecordPastureConditionScore.alink.vue

<script setup>
import { ref, computed } from 'vue';
import { useDialogPluginComponent, date } from 'quasar'

const props = defineProps({
  asset: {
    type: Object,
    required: true,
  },
});

defineEmits([
  ...useDialogPluginComponent.emits
]);

const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent();

const widgetDateFormat = 'YYYY-MM-DD';

const conditionDate = ref(date.formatDate(Date.now(), widgetDateFormat));

const indicators = ref({
  desirable_plants: {
    title: 'Percent Desirable Plants',
  },
  percent_legume: {
    title: 'Percent Legume by Dry Weight',
  },
  live_plant_cover: {
    title: 'Live (includes dormant) Plant Cover',
  },
  plant_diversity: {
    title: 'Plant Diversity by Dry Weight',
  },
  plant_residue: {
    title: 'Plant Residue and Litter as Soil Cover',
  },
  grazing_utilization: {
    title: 'Grazing Utilization and Severity',
  },
  livestock_concentration: {
    title: 'Livestock Concentration Areas',
  },
  soil_compaction: {
    title: 'Soil Compaction and Soil Regenerative Features',
  },
  plant_vigor: {
    title: 'Plant Vigor',
  },
  erosion: {
    title: 'Erosion',
  },
});
Object.values(indicators.value).forEach(i => { i.score = 0; });

const overallScore = computed(() => {
  return Object.values(indicators.value).reduce((total, i) => total + i.score, 0);
});

const onSubmit = () => {
  onDialogOK({
    conditionDate: formatRFC3339(date.extractDate(conditionDate.value, widgetDateFormat)),
    scores: {
      ...indicators.value,
      overall: {
        title: 'Overall Score',
        score: overallScore.value,
      },
    },
  });
};
</script>

<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin q-gutter-md" style="width: 700px; max-width: 80vw;">
      <q-card-section>
        <div class="text-h4 text-grey">Pasture condition score for {{ props.asset.attributes.name }}?</div>
      </q-card-section>

      <q-card-section>

        <q-input filled v-model="conditionDate">
          <template v-slot:append>
            <q-icon name="mdi-calendar-outline" class="cursor-pointer">
              <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                <q-date v-model="conditionDate" :mask="widgetDateFormat">
                  <div class="row items-center justify-end">
                    <q-btn v-close-popup label="Close" color="primary" flat />
                  </div>
                </q-date>
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>

        <q-field
            dense
            v-for="indicator in indicators"
            key="indicator.title"
            :label="indicator.title"
            class="q-mt-md">
          <template v-slot:control>
            <q-slider
              v-model="indicator.score"
              :min="0"
              :max="5"
              :step="1"
              snap
              label
              class="q-mt-md"
            />
          </template>
        </q-field>

        <q-field
          filled
          :model-value="overallScore"
          label='Overall Pasture Condition Score'
        >
          <template v-slot:control>
            <div class="full-width row justify-center">
              <q-knob
                readonly
                v-model="overallScore"
                :min="0"
                :max="50"
                show-value
                size="90px"
                :thickness="0.22"
                color="orange"
                track-color="orange-3"
                class="text-orange q-ma-md"
              />
            </div>
          </template>
        </q-field>
      </q-card-section>

      <q-card-actions align="right">
        <q-btn flat label="Cancel" color="secondary" @click="onDialogCancel" />
        <q-btn flat label="Record" color="primary" @click="onSubmit" :disabled="overallScore <= 0" />
      </q-card-actions>

    </q-card>
  </q-dialog>
</template>

<script>
import { h } from 'vue';
import { QBtn } from 'quasar';
import { formatRFC3339, summarizeAssetNames, uuidv4 } from "assetlink-plugin-api";

const UNIT_NAME = "bale(s)";

export default {
  async onLoad(handle, assetLink) {
    await assetLink.booted;

    const findUnitTerm = async entitySource => {
      const results = await entitySource.query(q => q
          .findRecords('taxonomy_term--unit')
          .filter({ attribute: 'name', op: 'equal', value: UNIT_NAME }));
      return results.flatMap(l => l).find(a => a);
    };

    let baleUnitTerm = await findUnitTerm(assetLink.entitySource.cache);

    if (!baleUnitTerm) {
      baleUnitTerm = await findUnitTerm(assetLink.entitySource);
    }

    if (!baleUnitTerm) {
      const unitTermToCreate = {
          type: 'taxonomy_term--unit',
          id: uuidv4(),
          attributes: {
            name: UNIT_NAME,
          },
      };

      baleUnitTerm = await assetLink.entitySource.update(
          (t) => t.addRecord(unitTermToCreate),
          {label: `Add '${UNIT_NAME}' unit`});
    }

    handle.defineSlot('com.example.farmos_asset_link.actions.v0.record_pcs', action => {
      action.type('asset-action');

      action.showIf(({ asset }) => asset.attributes.status !== 'archived'
          && ['paddock', 'field', 'pasture'].includes(asset.attributes.land_type));

      const doActionWorkflow = async (asset) => {
        const { scores, conditionDate } = await assetLink.ui.dialog.custom(handle.thisPlugin, { asset });

        if (!scores || scores.overall?.score <= 0) {
          return;
        }

        const scoreQuantities = Object.values(scores).map(score => ({
          type: 'quantity--standard',
          id: uuidv4(),
          attributes: {
            measure: 'value',
            label: score.title,
            value: {
              decimal: `${score.score}`,
            },
          },
        }));

        const pcsLog = {
          type: 'log--observation',
          attributes: {
            name: 'Pasture condition score',
            timestamp: conditionDate,
            status: "done",
          },
          relationships: {
            asset: {
              data: [
                {
                  type: asset.type,
                  id: asset.id,
                }
              ]
            },
            quantity: {
              data: scoreQuantities.map((sq) => (
                {
                  type: sq.type,
                  id: sq.id,
                }
              )),
            },
          },
        };

        assetLink.entitySource.update(
            (t) => [
              ...scoreQuantities.map((sq) => t.addRecord(sq)),
              t.addRecord(pcsLog),
            ],
            {label: `Record pasture condition score`});
      };

      action.component(({ asset }) =>
        h(QBtn, { block: true, color: 'secondary', onClick: () => doActionWorkflow(asset), 'no-caps': true }, () => "Record PCS" ));
    });
  }
}
</script>

2023_02_10_pcs_asset_link_plugin_demo_with_date.webm