Merge branch 'element-type-id' into 'master'

Support element type ID in element lists

Closes #958

See merge request !1243

vue/Navigation/ElementInLine.vue

@@ -10,8 +10,8 @@
         </template>
       </p>
     </td>
-    <td :title="typeName(element.type)">
-      {{ typeName(element.type) | truncateShort }}
+    <td :title="elementTypeName">
+      {{ elementTypeName | truncateShort }}
     </td>
     <td v-if="classDisplay">
       {{ classDisplay }}
@@ -85,6 +85,14 @@ export default {
       if (!this.element.corpus) return null
       return this.element.corpus.id
     },
+    elementType () {
+      if (this.element.type) return this.getType(this.element.type)
+      else if (this.element.type_id && this.corpus?.types) return Object.values(this.corpus.types).find(({ id }) => id === this.element.type_id)
+      return null
+    },
+    elementTypeName () {
+      return this.elementType?.display_name ?? this.elementType?.slug ?? this.element.type ?? ''
+    },
     selected () {
       return this.corpusId !== null && this.selection[this.corpusId]?.includes(this.element.id)
     },
@@ -101,7 +109,7 @@ export default {
      * elements with a thumbnail URL.
      */
     hasPreview () {
-      return !this.getType(this.element.type)?.folder && this.element.thumbnail_url
+      return !this.elementType?.folder && this.element.thumbnail_url
     }
   },
   methods: {

vue/Navigation/ElementList.vue

@@ -54,7 +54,7 @@ export default {
     elements: {
       type: Array,
       required: true,
-      validator: elements => elements.every(element => element.id && element.name && element.type && element.corpus)
+      validator: elements => elements.every(element => element.id && element.name && (element.type || element.type_id) && element.corpus)
     },
     /**
      * Make all actions unavailable on elements, to make the list appear as read-only.

vue/Navigation/ElementThumbnail.vue

@@ -33,7 +33,7 @@
       </div>
     </router-link>
     <div class="card-footer">
-      <span class="type" :title="typeName(element.type)">{{ typeName(element.type) | truncateShort }}</span>
+      <span class="type" :title="elementTypeName">{{ elementTypeName | truncateShort }}</span>
       <DeleteModal :element="element">
         <template v-slot:default="{ open, canDelete }">
           <button
@@ -112,6 +112,14 @@ export default {
     corpusId () {
       return this.element.corpus.id
     },
+    elementType () {
+      if (this.element.type) return this.getType(this.element.type)
+      else if (this.element.type_id && this.corpus?.types) return Object.values(this.corpus.types).find(({ id }) => id === this.element.type_id)
+      return null
+    },
+    elementTypeName () {
+      return this.elementType?.display_name ?? this.elementType?.slug ?? this.element.type ?? ''
+    },
     selected () {
       return this.corpusId !== null && this.selection[this.corpusId]?.includes(this.element.id)
     },
@@ -127,7 +135,7 @@ export default {
      * elements with a thumbnail URL.
      */
     hasPreview () {
-      return !this.getType(this.element.type)?.folder && this.element.thumbnail_url
+      return !this.elementType?.folder && this.element.thumbnail_url
     }
   },
   methods: {