Allow deleting element types

js/api.js

@@ -50,6 +50,9 @@ export const createType = async type => (await axios.post('/elements/type/', typ
 // Update an element type
 export const updateType = async ({ id, ...data }) => (await axios.patch(`/elements/type/${id}/`, data)).data
 
+// Delete an element type
+export const destroyType = unique(id => axios.delete(`/elements/type/${id}/`))
+
 /**
  * Generic method for element list endpoints (ListElements, ListElementParents, ListElementChildren)
  * with support for `If-Modified-Since`. May return null if the API returns HTTP 304 Not Modified.

js/store/corpora.js

@@ -36,12 +36,14 @@ export const mutations = {
       }, {})
     state.corporaLoaded = true
   },
+
   update (state, corpus) {
     const newCorpus = state.corpora[corpus.id] || {}
     assign(newCorpus, corpus)
     if (Array.isArray(newCorpus.types)) newCorpus.types = parseTypes(newCorpus.types)
     state.corpora = { ...state.corpora, [newCorpus.id]: newCorpus }
   },
+
   updateType (state, { corpus, ...type }) {
     if (!state.corpora[corpus]) throw new Error(`Corpus ${corpus} does not exist`)
     const newCorpus = state.corpora[corpus]
@@ -52,6 +54,18 @@ export const mutations = {
     ])
     state.corpora = { ...state.corpora, [newCorpus.id]: newCorpus }
   },
+
+  removeType (state, { corpusId, typeId }) {
+    if (!state.corpora[corpusId]) throw new Error(`Corpus ${corpusId} does not exist`)
+    const newCorpus = { ...state.corpora[corpusId] }
+    const typeList = Object.values(newCorpus.types)
+    const index = typeList.findIndex(({ id }) => typeId === id)
+    if (index < 0) throw new Error(`Type ${typeId} not found in corpus ${corpusId}`)
+    typeList.splice(index, 1)
+    newCorpus.types = Object.fromEntries(typeList.map(type => [type.slug, type]))
+    state.corpora = { ...state.corpora, [newCorpus.id]: newCorpus }
+  },
+
   updateWorkerVersions (state, { corpusId, results }) {
     // Add available worker versions to a corpus without duplicate
     if (!state.corpora[corpusId]) throw new Error(`Corpus ${corpusId} does not exist`)
@@ -62,12 +76,14 @@ export const mutations = {
     }
     state.corpora = { ...state.corpora, [newCorpus.id]: newCorpus }
   },
+
   remove (state, corpusId) {
     if (!state.corpora[corpusId]) throw new Error(`Corpus ${corpusId} does not exist`)
     const newCorpora = { ...state.corpora }
     delete newCorpora[corpusId]
     state.corpora = newCorpora
   },
+
   reset (state) {
     assign(state, initialState())
   },
@@ -113,6 +129,7 @@ export const mutations = {
       }
     }
   },
+
   setExports (state, exports) {
     state.exports = exports
   }
@@ -248,6 +265,16 @@ export const actions = {
     }
   },
 
+  async destroyType ({ commit }, { corpusId, typeId }) {
+    try {
+      await api.destroyType(typeId)
+      commit('removeType', { corpusId, typeId })
+    } catch (err) {
+      commit('notifications/notify', { type: 'error', text: errorParser(err) }, { root: true })
+      throw err
+    }
+  },
+
   /**
    * Recursively list WorkerVersions for a specific corpus.
    * Used to filter elements by existing versions.

vue/Corpus/ElementType/Row.vue

@@ -51,25 +51,57 @@
         />
       </td>
       <td>
+        <div class="field is-grouped">
+          <p class="control">
+            <button
+              class="button"
+              :disabled="!canEdit"
+              v-on:click="edit"
+            >
+              <i class="icon-edit has-text-primary"></i>
+            </button>
+          </p>
+          <p class="control">
+            <button
+              class="button has-text-danger"
+              :disabled="!canEdit"
+              v-on:click="destroyModal = canEdit"
+            >
+              <i class="icon-trash"></i>
+            </button>
+          </p>
+        </div>
+      </td>
+    </template>
+
+    <Modal v-model="destroyModal" :title="'Delete ' + type.display_name">
+      <p>Are you sure you want to delete the <strong>{{ type.display_name }}</strong> type from this project?</p>
+      <p>This action is irreversible.</p>
+      <template v-slot:footer="{ close }">
+        <button class="button" v-on:click="close">Cancel</button>
         <button
-          class="button"
-          :disabled="!canEdit"
-          v-on:click="edit"
+          class="button is-danger"
+          :class="{ 'is-loading': loading }"
+          v-on:click="destroy"
         >
-          <i class="icon-edit has-text-primary"></i>
+          Delete
         </button>
-      </td>
-    </template>
+      </template>
+    </Modal>
   </tr>
 </template>
 
 <script>
 import { corporaMixin } from '~/js/mixins'
+import Modal from '~/vue/Modal'
 
 export default {
   mixins: [
     corporaMixin
   ],
+  components: {
+    Modal
+  },
   props: {
     corpusId: {
       type: String,
@@ -85,7 +117,8 @@ export default {
     fields: {
       id: null
     },
-    errors: {}
+    errors: {},
+    destroyModal: false
   }),
   computed: {
     canEdit () {
@@ -119,6 +152,18 @@ export default {
       } finally {
         this.loading = false
       }
+    },
+    async destroy () {
+      if (!this.canEdit || this.loading) return
+      this.loading = true
+      try {
+        await this.$store.dispatch('corpora/destroyType', {
+          corpusId: this.corpus.id,
+          typeId: this.type.id
+        })
+      } finally {
+        this.loading = false
+      }
     }
   }
 }