@konfuzio/document-validation-ui 0.1.36 → 0.1.37-dev.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/css/app.css +1 -1
  2. package/dist/index.html +1 -1
  3. package/dist/js/app.js +1 -1
  4. package/dist/js/app.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/assets/scss/document_annotations.scss +5 -0
  7. package/src/components/DocumentAnnotations/AnnotationContent.vue +0 -54
  8. package/src/components/DocumentAnnotations/AnnotationRow.vue +78 -19
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@konfuzio/document-validation-ui",
3
- "version": "0.1.36",
3
+ "version": "0.1.37-dev.1",
4
4
  "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
5
5
  "main": "dist/app.js",
6
6
  "scripts": {
package/src/assets/scss/document_annotations.scss CHANGED
@@ -307,6 +307,11 @@
307
307
  .spinner {
308
308
  color: $grey;
309
309
  }
310
+
311
+ .annotation-items {
312
+ display: flex;
313
+ flex-direction: row;
314
+ }
310
315
  }
311
316
 
312
317
  .buttons-container {
package/src/components/DocumentAnnotations/AnnotationContent.vue CHANGED
@@ -1,10 +1,5 @@
1
1
  <template>
2
2
  <div :id="annotation.id" ref="annotation" class="annotation">
3
- <b-checkbox
4
- v-if="annotation.metadata && annotation.metadata.checkbox"
5
- v-model="isChecked"
6
- class="annotation-checkbox"
7
- />
8
3
  <span
9
4
  :id="annotation.id"
10
5
  ref="contentEditable"
@@ -61,16 +56,8 @@ export default {
61
56
  },
62
57
  },
63
58
  data() {
64
- const checkboxValue =
65
- this.annotation &&
66
- this.annotation.metadata &&
67
- this.annotation.metadata.checkbox &&
68
- this.annotation.metadata.checkbox.is_checked;
69
59
  return {
70
60
  isLoading: false,
71
- checkboxDefaultValue: checkboxValue,
72
- isCheckboxAvailable: false,
73
- isChecked: checkboxValue,
74
61
  };
75
62
  },
76
63
  computed: {
@@ -104,50 +91,9 @@ export default {
104
91
  // span content changed, ex. from click on entity
105
92
  this.setText(this.span.offset_string);
106
93
  },
107
- isChecked() {
108
- if (this.isCheckboxAvailable) {
109
- this.handleCheckboxChanged(this.isChecked);
110
- } else {
111
- if (this.isChecked !== this.checkboxDefaultValue) {
112
- this.$buefy.dialog.confirm({
113
- container: "#app .dv-ui-app-container",
114
- canCancel: ["button"],
115
- message: this.$t("edit_ann_content_warning"),
116
- onConfirm: () => {
117
- this.isCheckboxAvailable = true;
118
- this.handleCheckboxChanged(this.isChecked);
119
- },
120
- onCancel: () => {
121
- this.isChecked = !this.isChecked;
122
- },
123
- });
124
- }
125
- }
126
- },
127
94
  },
128
95
 
129
96
  methods: {
130
- handleCheckboxChanged(value) {
131
- this.$store
132
- .dispatch("document/updateAnnotation", {
133
- updatedValues: {
134
- metadata: {
135
- checkbox: {
136
- is_checked: value,
137
- },
138
- },
139
- },
140
- annotationId: this.annotation.id,
141
- annotationSet: this.annotationSet,
142
- })
143
- .catch((error) => {
144
- this.$store.dispatch("document/createErrorMessage", {
145
- error,
146
- serverErrorMessage: this.$t("server_error"),
147
- defaultErrorMessage: this.$t("edit_error"),
148
- });
149
- });
150
- },
151
97
  setText(text) {
152
98
  this.$refs.contentEditable.textContent = text;
153
99
  },
package/src/components/DocumentAnnotations/AnnotationRow.vue CHANGED
@@ -85,25 +85,35 @@
85
85
  </div>
86
86
  <div class="annotation-row-right">
87
87
  <div class="annotation-content">
88
- <div v-if="annotation && !isNegative(annotation)">
89
- <div
90
- v-for="(span, index) in spanForEditing
91
- ? spanSelection
92
- : annotation.span"
93
- :key="index"
94
- @mouseenter="onAnnotationHoverEnter(span)"
95
- @mouseleave="onAnnotationHoverLeave"
96
- >
97
- <AnnotationContent
98
- :ref="`span_${annotation.id}_${index}`"
99
- :annotation="annotation"
100
- :span="span"
101
- :span-index="index"
102
- :label="label"
103
- :annotation-set="annotationSet"
104
- :is-hovered="hoveredAnnotation"
105
- @save-annotation-changes="handleSaveChanges"
106
- />
88
+ <div
89
+ v-if="annotation && !isNegative(annotation)"
90
+ class="annotation-items"
91
+ >
92
+ <b-checkbox
93
+ v-if="annotation.metadata && annotation.metadata.checkbox"
94
+ v-model="isChecked"
95
+ class="annotation-checkbox"
96
+ />
97
+ <div class="annotation-spans">
98
+ <div
99
+ v-for="(span, index) in spanForEditing
100
+ ? spanSelection
101
+ : annotation.span"
102
+ :key="index"
103
+ @mouseenter="onAnnotationHoverEnter(span)"
104
+ @mouseleave="onAnnotationHoverLeave"
105
+ >
106
+ <AnnotationContent
107
+ :ref="`span_${annotation.id}_${index}`"
108
+ :annotation="annotation"
109
+ :span="span"
110
+ :span-index="index"
111
+ :label="label"
112
+ :annotation-set="annotationSet"
113
+ :is-hovered="hoveredAnnotation"
114
+ @save-annotation-changes="handleSaveChanges"
115
+ />
116
+ </div>
107
117
  </div>
108
118
  </div>
109
119
  <div v-else>
@@ -202,11 +212,19 @@ export default {
202
212
  },
203
213
  },
204
214
  data() {
215
+ const checkboxValue =
216
+ this.annotation &&
217
+ this.annotation.metadata &&
218
+ this.annotation.metadata.checkbox &&
219
+ this.annotation.metadata.checkbox.is_checked;
205
220
  return {
206
221
  isLoading: false,
207
222
  isSelected: false,
208
223
  // annotationAnimationTimeout: null,
209
224
  hoveredAnnotation: null,
225
+ checkboxDefaultValue: checkboxValue,
226
+ isCheckboxAvailable: false,
227
+ isChecked: checkboxValue,
210
228
  };
211
229
  },
212
230
  computed: {
@@ -325,11 +343,52 @@ export default {
325
343
  this.isLoading = false;
326
344
  }
327
345
  },
346
+ isChecked() {
347
+ if (this.isCheckboxAvailable) {
348
+ this.handleCheckboxChanged(this.isChecked);
349
+ } else {
350
+ if (this.isChecked !== this.checkboxDefaultValue) {
351
+ this.$buefy.dialog.confirm({
352
+ container: "#app .dv-ui-app-container",
353
+ canCancel: ["button"],
354
+ message: this.$t("edit_ann_content_warning"),
355
+ onConfirm: () => {
356
+ this.isCheckboxAvailable = true;
357
+ this.handleCheckboxChanged(this.isChecked);
358
+ },
359
+ onCancel: () => {
360
+ this.isChecked = !this.isChecked;
361
+ },
362
+ });
363
+ }
364
+ }
365
+ },
328
366
  },
329
367
  mounted() {
330
368
  this.checkAnnotationSelection(this.annotationId);
331
369
  },
332
370
  methods: {
371
+ handleCheckboxChanged(value) {
372
+ this.$store
373
+ .dispatch("document/updateAnnotation", {
374
+ updatedValues: {
375
+ metadata: {
376
+ checkbox: {
377
+ is_checked: value,
378
+ },
379
+ },
380
+ },
381
+ annotationId: this.annotation.id,
382
+ annotationSet: this.annotationSet,
383
+ })
384
+ .catch((error) => {
385
+ this.$store.dispatch("document/createErrorMessage", {
386
+ error,
387
+ serverErrorMessage: this.$t("server_error"),
388
+ defaultErrorMessage: this.$t("edit_error"),
389
+ });
390
+ });
391
+ },
333
392
  checkAnnotationSelection(newAnnotationId) {
334
393
  if (
335
394
  newAnnotationId &&