11<template >
2- <v-card >
2+ <v-card
3+ v-if =" currentDoc && items"
4+ v-shortkey =" multiKeys"
5+ @shortkey =" addOrRemoveLabel"
6+ >
37 <v-card-title >
48 <multi-class-classification
5- v-if =" currentDoc"
69 :labels =" items"
710 :annotations =" currentDoc.annotations"
811 :add-label =" addLabel"
912 :delete-label =" removeLabel"
1013 />
1114 </v-card-title >
12- <v-card-text v-if = " currentDoc " class =" title" >
15+ <v-card-text class =" title" >
1316 {{ currentDoc.text }}
1417 </v-card-text >
1518 </v-card >
1619</template >
1720
1821<script >
22+ import Vue from ' vue'
1923import { mapActions , mapGetters , mapState } from ' vuex'
2024import MultiClassClassification from ' @/components/organisms/annotation/MultiClassClassification'
25+ Vue .use (require (' vue-shortkey' ))
2126
2227export default {
2328 components: {
@@ -26,7 +31,14 @@ export default {
2631
2732 computed: {
2833 ... mapState (' labels' , [' items' ]),
29- ... mapGetters (' documents' , [' currentDoc' ])
34+ ... mapGetters (' documents' , [' currentDoc' ]),
35+ multiKeys () {
36+ const multiKeys = {}
37+ for (const item of this .items ) {
38+ multiKeys[item .id ] = [item .suffix_key ]
39+ }
40+ return multiKeys
41+ }
3042 },
3143
3244 created () {
@@ -59,6 +71,15 @@ export default {
5971 projectId: this .$route .params .id
6072 }
6173 this .addAnnotation (payload)
74+ },
75+ addOrRemoveLabel (event ) {
76+ const label = this .items .find (item => item .id === parseInt (event .srcKey , 10 ))
77+ const annotation = this .currentDoc .annotations .find (item => item .label === label .id )
78+ if (annotation) {
79+ this .removeLabel (annotation .id )
80+ } else {
81+ this .addLabel (label .id )
82+ }
6283 }
6384 }
6485}
0 commit comments