diff --git a/vue/Element/DetailsPanel.vue b/vue/Element/DetailsPanel.vue index 3bd522b14c846dae5382c9681b04bdd3d5488945..92a650ad1986d5475c16d6af3aa590dad835a75b 100644 --- a/vue/Element/DetailsPanel.vue +++ b/vue/Element/DetailsPanel.vue @@ -79,16 +79,16 @@ <template v-if="elementType.folder === false"> <DropdownContent title="Transcriptions"> <GroupedTranscriptions - v-for="(transcriptions, workerId) in elementTranscriptions" - :key="workerId" - :transcriptions="transcriptions" - :worker-id="workerId" + v-for="transcriptionGroup in elementTranscriptions" + :key="transcriptionGroup[0]" + :transcriptions="transcriptionGroup[1]" + :worker-id="transcriptionGroup[0]" /> <template v-if="canWrite(corpus)"> <a v-on:click="transcriptionModal = true"> <i class="icon-add-square"></i> Add - <template v-if="Object.keys(elementTranscriptions).length"> + <template v-if="elementTranscriptions.length"> or edit </template> a manual transcription @@ -123,7 +123,7 @@ import { mapState, mapActions } from 'vuex' import { corporaMixin } from '~/js/mixins' import { CLASSIFICATIONS_HELP } from '~/js/help' import { MANUAL_WORKER_VERSION } from '~/js/config' -import { groupBy } from 'lodash' +import { groupBy, orderBy } from 'lodash' import Modal from '~/vue/Modal' import GroupedTranscriptions from './Transcription' @@ -183,7 +183,7 @@ export default { }), computed: { ...mapState('elements', ['elements', 'transcriptions', 'neighbors']), - ...mapState('process', ['workerVersions']), + ...mapState('process', ['workerVersions', 'workers']), element () { return this.elements[this.elementId] }, @@ -266,10 +266,12 @@ export default { if (workerVersionId && !(workerVersionId in this.workerVersions)) await this.getWorkerVersion(workerVersionId) } // Group transcriptions by worker - return groupBy(transcriptions, t => { + const grouped = groupBy(transcriptions, t => { if (!t.worker_version_id) return MANUAL_WORKER_VERSION return this.workerVersions[t.worker_version_id].worker.id }) + // Order by worker name + return orderBy(Object.entries(grouped), ([id]) => id === MANUAL_WORKER_VERSION ? '' : this.workers[id].name) }, default: {} }