Added delete option for type material #337

SpeciesFileGroup · Sep 11, 2018 · 8cf8c69 · 8cf8c69
1 parent 1756d6f
commit 8cf8c69
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 61 deletions.
diff --git a/app/javascript/vue/tasks/digitize/components/shared/depictions.vue b/app/javascript/vue/tasks/digitize/components/shared/depictions.vue
@@ -64,6 +64,7 @@ export default {
   },
   data: function () {
     return {
+      delayCall: undefined,
       creatingType: false,
       displayBody: true,
       figuresList: [],
@@ -84,9 +85,13 @@ export default {
     objectValue (newVal, oldVal) {
       if (newVal.id && (newVal.id != oldVal.id)) {
         this.$refs.depiction.setOption('autoProcessQueue', true)
-        this.getDepictions(newVal.id).then(response => {
-          this.figuresList = response
-        })
+        if(this.delayCall) { clearTimeout(this.delayCall) }
+        this.delayCall = setTimeout(() => {
+          this.getDepictions(newVal.id).then(response => {
+            this.figuresList = response
+          })
+        }, 1000)
+
       } else {
         this.figuresList = []
         this.$refs.depiction.setOption('autoProcessQueue', false)

diff --git a/app/javascript/vue/tasks/digitize/components/typeMaterial/typeMaterial.vue b/app/javascript/vue/tasks/digitize/components/typeMaterial/typeMaterial.vue
@@ -7,64 +7,74 @@
       <validation-component :show-message="!typeMaterialCheck"/>
     </div>
     <div slot="body">
-      <div>
-        <label>Taxon name</label>
-        <div
-          v-if="taxon"
-          class="horizontal-left-content">
-          <span v-html="taxon.object_tag"/>
-          <span
-            class="button circle-button btn-delete"
-            @click="taxon = undefined"/>
-        </div>
-        <autocomplete
-          v-else
-          url="/taxon_names/autocomplete"
-          min="2"
-          param="term"
-          placeholder="Select a taxon name"
-          @getItem="selectTaxon"
-          label="label"
-          :add-params="{
-            'type[]': 'Protonym',
-            'nomenclature_group[]': 'SpeciesGroup',
-            valid: true
-        }"/>
+      <div
+        v-if="typeMaterial.id"
+        class="horizontal-left-content">
+        <span v-html="typeMaterial.object_tag"/>
+        <span
+          class="button circle-button btn-delete"
+          @click="destroyTypeMateria(typeMaterial.id)"/>
       </div>
-      <div>
-        <label>Type type</label>
-        <br>
-        <select
-          v-model="type"
-          class="normal-input">
-          <template v-if="checkForTypeList">
+      <template v-else>
+        <div>
+          <label>Taxon name</label>
+          <div
+            v-if="taxon"
+            class="horizontal-left-content">
+            <span v-html="taxon.object_tag"/>
+            <span
+              class="button circle-button btn-delete"
+              @click="taxon = undefined"/>
+          </div>
+          <autocomplete
+            v-else
+            url="/taxon_names/autocomplete"
+            min="2"
+            param="term"
+            placeholder="Select a taxon name"
+            @getItem="selectTaxon"
+            label="label"
+            :add-params="{
+              'type[]': 'Protonym',
+              'nomenclature_group[]': 'SpeciesGroup',
+              valid: true
+          }"/>
+        </div>
+        <div>
+          <label>Type type</label>
+          <br>
+          <select
+            v-model="type"
+            class="normal-input">
+            <template v-if="checkForTypeList">
+              <option
+                class="capitalize"
+                :value="key"
+                v-for="(item, key) in types[taxon.nomenclatural_code]">{{ key }}
+              </option>
+            </template>
             <option
-              class="capitalize"
-              :value="key"
-              v-for="(item, key) in types[taxon.nomenclatural_code]">{{ key }}
-            </option>
-          </template>
-          <option
-            :value="undefined"
-            selected
-            disabled
-            v-else>Select a taxon name first</option>
-        </select>
-      </div>
-      <label>Type designator</label>
-      <role-picker
-        v-model="roles"
-        :autofocus="false"
-        role-type="TypeDesignator"
-        class="types_field"/>
+              :value="undefined"
+              selected
+              disabled
+              v-else>Select a taxon name first</option>
+          </select>
+        </div>
+        <label>Type designator</label>
+        <role-picker
+          v-model="roles"
+          :autofocus="false"
+          role-type="TypeDesignator"
+          class="types_field"/>
+      </template>
     </div>
   </block-layout>
 </template>
 
 <script>
 
   import Autocomplete from '../../../../components/autocomplete.vue'
-  import { GetTypes } from '../../request/resources.js'
+  import { GetTypes, DestroyTypeMaterial } from '../../request/resources.js'
   import RolePicker from '../../../../components/role_picker.vue'
   import ActionNames from '../../store/actions/actionNames.js'
   import { GetterNames } from '../../store/getters/getters.js'
@@ -84,6 +94,9 @@
       checkForTypeList () {
         return this.types && this.taxon
       },
+      typeMaterial() {
+        return this.$store.getters[GetterNames.GetTypeMaterial]
+      },
       taxon: {
         get() {
           return this.$store.getters[GetterNames.GetTypeMaterial].taxon
@@ -126,6 +139,11 @@
       selectTaxon(taxon) {
         this.$store.dispatch(ActionNames.GetTaxon, taxon.id)
       },
+      destroyTypeMateria(id) {
+        DestroyTypeMaterial(id).then(() => {
+          this.$store.commit(MutationNames.NewTypeMaterial)
+        })
+      }
     }
   }
 </script>

diff --git a/app/javascript/vue/tasks/digitize/store/actions/saveDigitalization.js b/app/javascript/vue/tasks/digitize/store/actions/saveDigitalization.js
@@ -5,16 +5,18 @@ export default function ({ commit, dispatch, state }) {
     dispatch(ActionNames.SaveCollectionEvent).then(() => {
       dispatch(ActionNames.SaveCollectionObject).then(() => {
         dispatch(ActionNames.SaveTypeMaterial).then(() => {
-          if(!state.container) {
-            dispatch(ActionNames.SaveContainer).then(() => {
-              dispatch(ActionNames.SaveContainerItem)
+          dispatch(ActionNames.SaveIdentifier).then(() => {
+            dispatch(ActionNames.SaveDetermination).then(() => {
+              if(!state.container) {
+                dispatch(ActionNames.SaveContainer).then(() => {
+                  dispatch(ActionNames.SaveContainerItem)
+                })
+              }
+              else {
+                dispatch(ActionNames.SaveContainerItem)
+              }
             })
-          }
-          else {
-            dispatch(ActionNames.SaveContainerItem)
-          }
-          dispatch(ActionNames.SaveIdentifier)
-          dispatch(ActionNames.SaveDetermination)
+          })
         })
       })
     })