Added remove and pin buttons #337

app/javascript/vue/components/autocomplete.vue

@@ -1,5 +1,4 @@
 /*
-import func from './vue-temp/vue-editor-bridge';
 Parameters:
 
           mim: Minimum input length needed before make a search query

app/javascript/vue/tasks/digitize/components/collectionObject/catalogNumber.vue

@@ -27,6 +27,7 @@
         <label>
           <input
             type="radio"
+            :disabled="collectionObjects.length > 0"
             :value="type.id"
             v-model="preparationType"
             name="collection-object-type">
@@ -55,13 +56,16 @@
       Autocomplete
     },
     computed: {
+      collectionObjects() {
+        return this.$store.getters[GetterNames.GetCollectionObjects]
+      },
       namespace: {
         get() {
           return this.$store.getters[GetterNames.GetIdentifier].namespace_id
         },
         set(value) {
           this.$store.commit(MutationNames.SetIdentifierNamespaceId, value)
-        }
+        },
       },
       preparationType: {
         get() {

app/javascript/vue/tasks/digitize/components/collectionObject/tableCollectionObjects.vue

@@ -2,15 +2,27 @@
   <table>
     <tbody>
       <tr v-for="item in collectionObjects">
+        <td>{{ item.total }}</td>
         <td>{{ showBiocurations(item) }}</td>
+        <td>
+          <radial-annotator :global-id="item.global_id"/>
+        </td>
         <td>
           <button
             type="button"
             class="button circle-button btn-edit"
             @click="setCO(item)">Select</button>
         </td>
         <td>
-          <radial-annotator :global-id="item.global_id"/>
+          <pin-component
+            type="CollectionObject"
+            :object-id="item.id"/>
+        </td>
+        <td>
+          <button
+            type="button"
+            class="button circle-button btn-delete"
+            @click="removeCO(item.id)"/>
         </td>
       </tr>
     </tbody>
@@ -21,11 +33,14 @@
 
 import { GetterNames } from '../../store/getters/getters.js'
 import { MutationNames } from '../../store/mutations/mutations.js'
+import { ActionNames } from '../../store/actions/actions.js'
 import RadialAnnotator from '../../../../components/annotator/annotator.vue'
+import PinComponent from '../../../../components/pin'
 
 export default {
   components: {
-    RadialAnnotator
+    RadialAnnotator,
+    PinComponent
   },
   computed: {
     collectionObjects() {
@@ -42,6 +57,9 @@ export default {
     showBiocurations(co) {
       let list = this.biocurations.filter(item => item.biological_collection_object_id == co.id).map(item => { return item.object_tag })
       return (list.length ? list.join(', ') : 'Specimen')
+    },
+    removeCO(id) {
+      this.$store.dispatch(ActionNames.RemoveCollectionObject, id)
     }
   }
 }

app/javascript/vue/tasks/digitize/request/resources.js

@@ -169,6 +169,10 @@ const DestroyDepiction = function (id) {
   return ajaxCall('delete', `/depictions/${id}.json`)
 }
 
+const DestroyCollectionObject = function (id) {
+  return ajaxCall('delete', `/collection_objects/${id}.json`)
+}
+
 export {
   GetUserPreferences,
   GetOtu,
@@ -203,6 +207,7 @@ export {
   DestroyTypeMaterial,
   DestroyBiocuration,
   DestroyDepiction,
+  DestroyCollectionObject,
   CreateContainer,
   CreateContainerItem
 }

app/javascript/vue/tasks/digitize/store/actions/actionNames.js

@@ -7,7 +7,8 @@ const ActionNames = {
   SaveTypeMaterial: 'saveTypeMaterial',
   SaveDetermination: 'saveDetermination',
   SaveContainerItem: 'saveContainerItem',
-  SaveContainer: 'saveContainer'
+  SaveContainer: 'saveContainer',
+  RemoveCollectionObject: 'removeCollectionObject'
 }
 
 export default ActionNames

app/javascript/vue/tasks/digitize/store/actions/actions.js

@@ -8,6 +8,7 @@ import saveTypeMaterial from './saveTypeMaterial'
 import saveDetermination from './saveDetermination'
 import saveContainerItem from './saveContainerItem'
 import saveContainer from './saveContainer'
+import removeCollectionObject from './removeCollectionObject'
 
 const ActionFunctions = {
   [ActionNames.GetTaxon]: getTaxon,
@@ -18,7 +19,8 @@ const ActionFunctions = {
   [ActionNames.SaveTypeMaterial]: saveTypeMaterial,
   [ActionNames.SaveDetermination]: saveDetermination,
   [ActionNames.SaveContainerItem]: saveContainerItem,
-  [ActionNames.SaveContainer]: saveContainer
+  [ActionNames.SaveContainer]: saveContainer,
+  [ActionNames.RemoveCollectionObject]: removeCollectionObject
 }
 
 export { ActionNames, ActionFunctions }

app/javascript/vue/tasks/digitize/store/actions/removeCollectionObject.js

@@ -0,0 +1,13 @@
+import { MutationNames } from '../mutations/mutations'
+import { DestroyCollectionObject } from '../../request/resources'
+
+export default function ({ commit, state }, id) {
+  return new Promise((resolve, reject) => {
+    DestroyCollectionObject(id).then(response => {
+      commit(MutationNames.RemoveCollectionObject, id)
+      if(state.collection_object.id == id) {
+        commit(MutationNames.NewCollectionObject)
+      }
+    })
+  })
+}

app/javascript/vue/tasks/digitize/store/mutations/CollectionObject/newCollectionObject.js

@@ -3,7 +3,6 @@ export default function(state) {
     id: undefined,
     global_id: undefined,
     total: 1, 
-    preparation_type_id: undefined, 
     repository_id: undefined,
     ranged_lot_category_id: undefined, 
     collecting_event_id: undefined,

app/javascript/vue/tasks/digitize/store/mutations/CollectionObject/removeCollectionObject.js

@@ -1,6 +1,6 @@
 export default function(state, value) {
   let index = state.collection_objects.findIndex((item) => {
-    return item.id == value.id
+    return item.id == value
   })
   if(index >= 0) {
     state.collection_objects.splice(index, 1)