Add quick forms for field occurrences, add actions and panels for bro…

…wse field occurrence

app/javascript/vue/components/radials/object/components/collecting_event/main.vue

@@ -71,12 +71,14 @@ import {
   LABEL_CODE_128,
   IDENTIFIER_LOCAL_CATALOG_NUMBER,
   COLLECTION_OBJECT,
-  COLLECTING_EVENT
+  COLLECTING_EVENT,
+  FIELD_OCCURRENCE
 } from '@/constants/index.js'
 import {
   Label,
   Identifier,
   CollectionObject,
+  FieldOccurrence,
   CollectingEvent
 } from '@/routes/endpoints'
 import { onBeforeMount, ref, watch } from 'vue'
@@ -87,6 +89,17 @@ const LABEL_TYPES = {
   [LABEL_CODE_128]: QRCodeComponent
 }
 
+const TYPES = {
+  [FIELD_OCCURRENCE]: {
+    service: FieldOccurrence,
+    property: 'field_occurrence'
+  },
+  [COLLECTION_OBJECT]: {
+    service: CollectionObject,
+    property: 'collection_object'
+  }
+}
+
 const props = defineProps({
   objectId: {
     type: Number,
@@ -123,12 +136,12 @@ watch(collectingEvent, (newVal) => {
 })
 
 onBeforeMount(async () => {
-  const ceId = (await CollectionObject.find(props.objectId)).body
-    .collecting_event_id
+  const ceId = (await TYPES[props.objectType].service.find(props.objectId)).body
+    ?.collecting_event_id
 
   Identifier.where({
     identifier_object_id: props.objectId,
-    identifier_object_type: COLLECTION_OBJECT,
+    identifier_object_type: props.objectType,
     type: IDENTIFIER_LOCAL_CATALOG_NUMBER
   }).then(({ body }) => {
     identifier.value = body[0]
@@ -180,10 +193,12 @@ function removeLabel(label) {
 }
 
 function addCollectingEvent(ce) {
-  CollectionObject.update(props.objectId, {
-    collection_object: { collecting_event_id: ce.id || null }
-  }).then((_) => {
-    collectingEvent.value = ce.id ? ce : undefined
-  })
+  TYPES[props.objectType].service
+    .update(props.objectId, {
+      [TYPES[props.objectType].property]: { collecting_event_id: ce.id || null }
+    })
+    .then(() => {
+      collectingEvent.value = ce.id ? ce : undefined
+    })
 }
 </script>

app/javascript/vue/routes/routes.js

@@ -19,6 +19,7 @@ const RouteNames = {
   BiologicalRelationshipComposer: '/tasks/biological_relationships/composer',
   BrowseAssertedDistribution: '/tasks/otus/browse_asserted_distributions',
   BrowseCollectionObject: '/tasks/collection_objects/browse',
+  BrowseFieldOccurrence: '/tasks/field_occurrences/browse',
   BrowseNomenclature: '/tasks/nomenclature/browse',
   BrowseOtu: '/tasks/otus/browse',
   ContentEditorTask: '/tasks/content/editor/index',

app/javascript/vue/tasks/field_occurrences/browse/app.vue

@@ -4,7 +4,7 @@
       v-if="isLoading"
       full-screen
     />
-    <h1>Field occurrence</h1>
+    <h1>Browse field occurrence</h1>
     <VAutocomplete
       v-if="store.fieldOccurrence"
       class="autocomplete"
@@ -39,7 +39,7 @@
 </template>
 
 <script setup>
-import { FIELD_OCCURRENCE } from '@/constants'
+import { FIELD_OCCURRENCE, COLLECTING_EVENT } from '@/constants'
 import { URLParamsToJSON } from '@/helpers'
 import { onBeforeMount, ref } from 'vue'
 
@@ -53,8 +53,13 @@ import VSpinner from '@/components/ui/VSpinner.vue'
 
 import useFieldOccurrenceStore from './store/store.js'
 import useCollectingEventStore from './store/collectingEvent.js'
+import useDeterminationStore from './store/determinations.js'
 import useDepictionStore from './store/depictions.js'
 import useBiocurationStore from './store/biocurations.js'
+import useBiologicalAssociationStore from './store/biologicalAssociations.js'
+import useIdentifierStore from './store/identifiers.js'
+import { setParam } from '@/helpers'
+import { RouteNames } from '@/routes/routes'
 
 defineOptions({
   name: 'BrowseFieldOccurrence'
@@ -64,6 +69,10 @@ const store = useFieldOccurrenceStore()
 const ceStore = useCollectingEventStore()
 const depictionStore = useDepictionStore()
 const biocurationStore = useBiocurationStore()
+const determinationStore = useDeterminationStore()
+const biologicalAssociationStore = useBiologicalAssociationStore()
+const identifierStore = useIdentifierStore()
+
 const isLoading = ref(false)
 
 onBeforeMount(async () => {
@@ -83,15 +92,37 @@ async function loadData(foId) {
 
   try {
     isLoading.value = true
+    store.$reset()
+    ceStore.$reset()
+    depictionStore.$reset()
+    biocurationStore.$reset()
+    determinationStore.$reset()
+    biologicalAssociationStore.$reset()
+    identifierStore.$reset()
+
     await store.load(foId)
 
     const ceId = store.fieldOccurrence.collecting_event_id
 
+    setParam(RouteNames.BrowseFieldOccurrence, 'field_occurrence_id', foId)
+
     if (ceId) {
-      requests.push(ceStore.load(ceId))
+      requests.push(
+        ceStore.load(ceId),
+        identifierStore.load({
+          objectId: ceId,
+          objectType: COLLECTING_EVENT
+        })
+      )
     }
 
-    requests.push(depictionStore.load(args), biocurationStore.load(args))
+    requests.push(
+      depictionStore.load(args),
+      biocurationStore.load(args),
+      determinationStore.load(args),
+      biologicalAssociationStore.load(args),
+      identifierStore.load(args)
+    )
 
     Promise.all(requests).finally(() => {
       isLoading.value = false

app/javascript/vue/tasks/field_occurrences/browse/components/FOHeader.vue

@@ -18,9 +18,6 @@
           <li>
             <RadialObject :global-id="store.fieldOccurrence.global_id" />
           </li>
-          <li>
-            <RadialFilter object-type="CollectionObject" />
-          </li>
           <li>
             <VBtn
               circle
@@ -65,12 +62,15 @@ import NavBar from '@/components/layout/NavBar.vue'
 import RadialAnnotator from '@/components/radials/annotator/annotator.vue'
 import RadialObject from '@/components/radials/object/radial.vue'
 import RadialNavigator from '@/components/radials/navigation/radial.vue'
-import RadialFilter from '@/components/radials/linker/radial.vue'
 import VAutocomplete from '@/components/ui/Autocomplete.vue'
+import useDepictionStore from '../store/depictions.js'
+import useIdentifierStore from '../store/identifiers.js'
 
 const emit = defineEmits(['select'])
 
 const store = useStore()
+const depictionStore = useDepictionStore()
+const identifierStore = useIdentifierStore()
 
 const openEditFieldOccurrence = (id) => {
   window.open(
@@ -82,33 +82,30 @@ const openEditFieldOccurrence = (id) => {
 function handleRadialCreate({ item }) {
   switch (item.base_class) {
     case DEPICTION:
-      addToArray(store.depictions, item)
+      addToArray(depictionStore.depictions, item)
       break
 
     case IDENTIFIER:
-      /*       store.commit(MutationNames.AddIdentifier, {
-        objectType: FIELD_OCCURRENCE,
-        item
-      }) */
+      addToArray(identifierStore.identifiers, item)
       break
   }
 }
 
 function handleRadialDelete({ item }) {
   switch (item.base_class) {
     case DEPICTION:
-      removeFromArray(store.depictions, item)
+      removeFromArray(depictionStore.depictions, item)
       break
     case IDENTIFIER:
-      //removeFromArray(store.identifiers[COLLECTION_OBJECT], item)
+      removeFromArray(identifierStore.identifiers, item)
       break
   }
 }
 
 function handleRadialUpdate({ item }) {
   switch (item.base_class) {
     case DEPICTION:
-      addToArray(store.depictions, item)
+      addToArray(depictionStore.depictions, item)
       break
   }
 }

app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBiologicalAssociations.vue

@@ -2,48 +2,17 @@
   <PanelContainer title="Biological associations">
     <ListITems
       class="no_bullets"
-      :list="biologicalAssociations"
+      :list="store.biologicalAssociations"
       label="object_tag"
       :remove="false"
     />
   </PanelContainer>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
-import { BiologicalAssociation } from '@/routes/endpoints'
 import PanelContainer from './PanelContainer.vue'
 import ListITems from '@/components/displayList.vue'
+import useBiologicalAssociationsStore from '../../store/biologicalAssociations.js'
 
-const props = defineProps({
-  objectId: {
-    type: [String, undefined],
-    required: true
-  },
-
-  objectType: {
-    type: [String, undefined],
-    required: true
-  }
-})
-
-const list = ref([])
-
-watch(
-  () => props.objectId,
-  (id) => {
-    list.value = []
-
-    if (id) {
-      BiologicalAssociation.where({
-        biological_association_subject_id: props.objectId,
-        biological_association_subject_type: props.objectType
-      })
-        .then(({ body }) => {
-          list.value = body
-        })
-        .catch(() => {})
-    }
-  }
-)
+const store = useBiologicalAssociationsStore()
 </script>