@konfuzio/document-validation-ui 0.1.49-dev.0 → 0.1.49-dev.2

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 (18) 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/api.js +1 -0
  7. package/src/assets/scss/theme.scss +1 -0
  8. package/src/assets/scss/variables.scss +1 -1
  9. package/src/components/App.vue +17 -0
  10. package/src/components/DocumentAnnotations/AnnotationActionButtons.vue +1 -0
  11. package/src/components/DocumentAnnotations/AnnotationDetails.vue +1 -0
  12. package/src/components/DocumentTopBar/DocumentTopBar.cy.js +192 -220
  13. package/src/components/DocumentTopBar/DocumentTopBar.vue +10 -7
  14. package/src/components/DocumentTopBar/DocumentTopBarButtons.vue +1 -0
  15. package/src/store/category.js +13 -21
  16. package/src/store/display.js +8 -0
  17. package/src/store/document.js +0 -18
  18. package/src/store/project.js +31 -22
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@konfuzio/document-validation-ui",
3
- "version": "0.1.49-dev.0",
3
+ "version": "0.1.49-dev.2",
4
4
  "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
5
5
  "main": "dist/app.js",
6
6
  "scripts": {
package/src/api.js CHANGED
@@ -102,6 +102,7 @@ const makeGetPaginatedRequest = (request, hasParams = false) => {
102
102
  }
103
103
  } catch (error) {
104
104
  reject(error);
105
+ toFinishLoop = true;
105
106
  console.log(error);
106
107
  }
107
108
  } while (!toFinishLoop);
package/src/assets/scss/theme.scss CHANGED
@@ -8,6 +8,7 @@
8
8
  --primary-color: var(--konfuzio-green);
9
9
  --primary-button: 4px;
10
10
  --top-bar-background: var(--white);
11
+ --font-family: "Inter", sans-serif;
11
12
  }
12
13
 
13
14
  .dv-ui-app-container {
package/src/assets/scss/variables.scss CHANGED
@@ -44,7 +44,7 @@ $text-color: #1a1a1a;
44
44
 
45
45
  $primary: var(--primary-color);
46
46
  $hover-style: brightness(0.8) contrast(160%) grayscale(0.4);
47
- $font-family: "Inter", sans-serif;
47
+ $font-family: var(--font-family);
48
48
  $background: $white;
49
49
  $top-bar-background: var(--top-bar-background);
50
50
  $toolbar: $text-color;
package/src/components/App.vue CHANGED
@@ -47,6 +47,12 @@ export default {
47
47
  default: "false",
48
48
  },
49
49
  // eslint-disable-next-line vue/prop-name-casing
50
+ show_documents_navigation: {
51
+ type: String,
52
+ required: false,
53
+ default: "true",
54
+ },
55
+ // eslint-disable-next-line vue/prop-name-casing
50
56
  sentry_dsn: {
51
57
  type: String,
52
58
  required: false,
@@ -157,6 +163,13 @@ export default {
157
163
  return null;
158
164
  }
159
165
  },
166
+ showDocumentsNavigation() {
167
+ if (process.env.VUE_APP_SHOW_DOCUMENTS_NAVIGATION) {
168
+ return process.env.VUE_APP_SHOW_DOCUMENTS_NAVIGATION === "true";
169
+ } else {
170
+ return this.show_documents_navigation === "true";
171
+ }
172
+ },
160
173
  isPublicView() {
161
174
  if (
162
175
  this.userToken ||
@@ -296,6 +309,10 @@ export default {
296
309
  "display/hideEmptyLabelSets",
297
310
  this.hideEmptyLabelSets
298
311
  ),
312
+ this.$store.dispatch(
313
+ "display/showDocumentsNavigation",
314
+ this.showDocumentsNavigation
315
+ ),
299
316
  this.$store.dispatch("document/setDocId", this.documentId),
300
317
  this.$store.dispatch("document/setPublicView", this.isPublicView),
301
318
  this.$store.dispatch("document/setAnnotationId", this.annotationId),
package/src/components/DocumentAnnotations/AnnotationActionButtons.vue CHANGED
@@ -3,6 +3,7 @@
3
3
  <!-- loading -->
4
4
  <b-button
5
5
  v-if="linkBtn"
6
+ id="annotation-link-btn"
6
7
  type="is-ghost"
7
8
  class="link-button"
8
9
  @click="copyAnnotationLink"
package/src/components/DocumentAnnotations/AnnotationDetails.vue CHANGED
@@ -71,6 +71,7 @@
71
71
  </div>
72
72
  <div
73
73
  v-if="confidence(annotation)"
74
+ id="annotation-details-confidence"
74
75
  :class="['confidence', publicView && 'tooltip-in-public-view']"
75
76
  >
76
77
  <span>{{ $t("confidence") }}</span
package/src/components/DocumentTopBar/DocumentTopBar.cy.js CHANGED
@@ -1,223 +1,195 @@
1
1
  import DocumentTopBar from "./DocumentTopBar";
2
2
 
3
3
  describe("Document Top Bar", () => {
4
- let currentDocument;
5
-
6
- beforeEach(() => {
7
- cy.fetchDocument().then(() => {
8
- cy.getStore("document")
9
- .then($document => {
10
- currentDocument = $document.selectedDocument;
11
- });
12
-
13
- cy.getStore("project")
14
- .then($project => {
15
- cy.fetchCategories($project.projectId);
16
- });
17
- });
18
- cy.dispatchAction("document", "setPublicView", false);
19
- cy.dispatchAction("edit", "disableEditMode");
20
- cy.mount(DocumentTopBar);
21
- });
22
-
23
- it("Shows category dropdown if not edit mode or reviewed", () => {
24
- cy.dispatchAction("edit", "disableEditMode");
25
-
26
- cy.get("#document-top-bar-component")
27
- .find(".left-bar-components")
28
- .find(".category-chooser")
29
- .should("be.visible");
30
- });
31
-
32
- it("Shows correct file name", () => {
33
- const fileName = currentDocument.data_file_name;
34
-
35
- cy.get("#document-top-bar-component")
36
- .find(".center-bar-components")
37
- .find(".document-name-component")
38
- .should("be.visible");
39
-
40
- cy.get("#document-top-bar-component")
41
- .find(".center-bar-components")
42
- .find(".document-name-component")
43
- .find(".document-name")
44
- .contains(fileName);
45
- });
46
-
47
- it("Shows arrows if available documents to navigate to", () => {
48
- cy.fetchDocumentList();
49
- const assignee = currentDocument.assignee;
50
-
51
- cy.getStore("project")
52
- .then($project => {
53
- cy.gettersStore().then(($getters) => {
54
- const filtered = $project.documentsInProject.filter(
55
- (document) =>
56
- ($getters["document/waitingForSplittingConfirmation"](document) || $getters["document/isDocumentReadyToBeReviewed"](document)
57
- ) && document.assignee === assignee
58
- );
59
-
60
- if (filtered.length > 0) {
61
- cy.get("#document-top-bar-component")
62
- .find(".center-bar-components")
63
- .find(".navigation-arrow")
64
- .should("be.visible");
65
- }
66
- });
67
- });
68
- });
69
-
70
- it("Shows keyboard icon", () => {
71
- cy.get("#document-top-bar-component")
72
- .find(".right-bar-components")
73
- .find(".keyboard-actions-info")
74
- .should("be.visible");
75
- });
76
-
77
- it("Shows disabled finish review button", () => {
78
- cy.get("#document-top-bar-component")
79
- .find(".right-bar-components")
80
- .find(".top-bar-buttons")
81
- .find(".finish-review-button-container")
82
- .should("be.visible");
83
-
84
- cy.get("#document-top-bar-component")
85
- .find(".right-bar-components")
86
- .find(".top-bar-buttons")
87
- .find(".finish-review-button-container")
88
- .find(".finish-review-btn")
89
- .should("be.disabled");
90
- });
91
-
92
- it("Shows edit mode buttons", () => {
93
- cy.dispatchAction("edit", "enableEditMode");
94
-
95
- cy.get("#document-top-bar-component")
96
- .find(".right-bar-components")
97
- .find(".top-bar-buttons")
98
- .find(".finish-review-button-container")
99
- .should("not.exist");
100
-
101
- cy.get("#document-top-bar-component")
102
- .find(".right-bar-components")
103
- .find(".top-bar-buttons")
104
- .find(".edit-mode-buttons")
105
- .should("be.visible");
106
- });
107
-
108
- it("Edits file name", () => {
109
- const newName = "test-name";
110
-
111
- cy.get("#document-top-bar-component")
112
- .find(".center-bar-components")
113
- .find(".document-name-component")
114
- .find(".edit-btn")
115
- .click();
116
-
117
- cy.get("#document-top-bar-component")
118
- .find(".center-bar-components")
119
- .find(".document-name-component")
120
- .find(".document-name")
121
- .should("have.class", "is-editable");
122
-
123
- cy.get("#document-top-bar-component")
124
- .find(".center-bar-components")
125
- .find(".document-name-component")
126
- .find(".document-name")
127
- .type('{selectAll}')
128
- .type('{backspace}')
129
- .type(newName);
130
-
131
- cy.get("#document-top-bar-component")
132
- .find(".center-bar-components")
133
- .find(".document-name-component")
134
- .find(".save-btn")
135
- .should("be.visible");
136
-
137
- cy.get("#document-top-bar-component")
138
- .find(".center-bar-components")
139
- .find(".document-name-component")
140
- .find(".save-btn")
141
- .click();
142
-
143
- cy.wait(1000);
144
-
145
- cy.get("#document-top-bar-component")
146
- .find(".center-bar-components")
147
- .find(".document-name-component")
148
- .find(".cloud-icon")
149
- .should("be.visible");
150
-
151
- cy.wait(1000);
152
-
153
- cy.get("#document-top-bar-component")
154
- .find(".center-bar-components")
155
- .find(".document-name-component")
156
- .contains(newName);
157
- });
158
-
159
- it("Shows tooltip when hovering over keyboard info", () => {
160
- cy.get("#document-top-bar-component")
161
- .find(".right-bar-components")
162
- .find(".keyboard-actions-info")
163
- .trigger("mouseenter");
164
-
165
- cy.get("#document-top-bar-component")
166
- .find(".right-bar-components")
167
- .find(".keyboard-actions-info")
168
- .find(".keyboard-actions-description")
169
- .should("be.visible");
170
-
171
- cy.get("#document-top-bar-component")
172
- .find(".right-bar-components")
173
- .find(".keyboard-actions-info")
174
- .trigger("mouseleave");
175
- });
176
-
177
- it("Closes edit mode when clicking 'back to annotation view' button", () => {
178
- cy.dispatchAction("edit", "enableEditMode");
179
-
180
- cy.get("#document-top-bar-component")
181
- .find(".right-bar-components")
182
- .find(".edit-mode-buttons")
183
- .should("exist");
184
-
185
- cy.get("#document-top-bar-component")
186
- .find(".right-bar-components")
187
- .find(".edit-mode-buttons")
188
- .find(".button-cancel")
189
- .then(($button) => {
190
- if (!$button.is(':disabled')) {
191
- cy.wrap($button)
192
- .click();
193
-
194
- cy.wait(1000);
195
-
196
- cy.get("#document-top-bar-component")
197
- .find(".right-bar-components")
198
- .find(".edit-mode-buttons")
199
- .should("not.exist");
200
- }
201
-
202
- });
203
-
204
- });
205
-
206
- it("Shows rename and categorize section when clicking 'next' button", () => {
207
- cy.dispatchAction("edit", "enableEditMode");
208
-
209
- cy.get("#document-top-bar-component")
210
- .find(".right-bar-components")
211
- .find(".edit-mode-buttons")
212
- .find(".button-next")
213
- .click();
214
-
215
- cy.wait(1000);
216
-
217
- cy.get("#document-top-bar-component")
218
- .find(".right-bar-components")
219
- .find(".edit-mode-buttons")
220
- .find(".submit-btn")
221
- .should("be.visible");
222
- });
223
- });
4
+ let currentDocument;
5
+
6
+ beforeEach(() => {
7
+ cy.fetchDocument().then(() => {
8
+ cy.getStore("document").then(($document) => {
9
+ currentDocument = $document.selectedDocument;
10
+ });
11
+
12
+ cy.getStore("project").then(($project) => {
13
+ cy.fetchCategories($project.projectId);
14
+ });
15
+ });
16
+ cy.dispatchAction("document", "setPublicView", false);
17
+ cy.dispatchAction("edit", "disableEditMode");
18
+ cy.mount(DocumentTopBar);
19
+ });
20
+
21
+ it("Shows category dropdown if not edit mode or reviewed", () => {
22
+ cy.dispatchAction("edit", "disableEditMode");
23
+
24
+ cy.get("#document-top-bar-component")
25
+ .find(".left-bar-components")
26
+ .find(".category-chooser")
27
+ .should("be.visible");
28
+ });
29
+
30
+ it("Shows correct file name", () => {
31
+ const fileName = currentDocument.data_file_name;
32
+
33
+ cy.get("#document-top-bar-component")
34
+ .find(".center-bar-components")
35
+ .find(".document-name-component")
36
+ .should("be.visible");
37
+
38
+ cy.get("#document-top-bar-component")
39
+ .find(".center-bar-components")
40
+ .find(".document-name-component")
41
+ .find(".document-name")
42
+ .contains(fileName);
43
+ });
44
+
45
+ it("Shows keyboard icon", () => {
46
+ cy.get("#document-top-bar-component")
47
+ .find(".right-bar-components")
48
+ .find(".keyboard-actions-info")
49
+ .should("be.visible");
50
+ });
51
+
52
+ it("Shows disabled finish review button", () => {
53
+ cy.get("#document-top-bar-component")
54
+ .find(".right-bar-components")
55
+ .find(".top-bar-buttons")
56
+ .find(".finish-review-button-container")
57
+ .should("be.visible");
58
+
59
+ cy.get("#document-top-bar-component")
60
+ .find(".right-bar-components")
61
+ .find(".top-bar-buttons")
62
+ .find(".finish-review-button-container")
63
+ .find(".finish-review-btn")
64
+ .should("be.disabled");
65
+ });
66
+
67
+ it("Shows edit mode buttons", () => {
68
+ cy.dispatchAction("edit", "enableEditMode");
69
+
70
+ cy.get("#document-top-bar-component")
71
+ .find(".right-bar-components")
72
+ .find(".top-bar-buttons")
73
+ .find(".finish-review-button-container")
74
+ .should("not.exist");
75
+
76
+ cy.get("#document-top-bar-component")
77
+ .find(".right-bar-components")
78
+ .find(".top-bar-buttons")
79
+ .find(".edit-mode-buttons")
80
+ .should("be.visible");
81
+ });
82
+
83
+ it("Edits file name", () => {
84
+ const newName = "test-name";
85
+
86
+ cy.get("#document-top-bar-component")
87
+ .find(".center-bar-components")
88
+ .find(".document-name-component")
89
+ .find(".edit-btn")
90
+ .click();
91
+
92
+ cy.get("#document-top-bar-component")
93
+ .find(".center-bar-components")
94
+ .find(".document-name-component")
95
+ .find(".document-name")
96
+ .should("have.class", "is-editable");
97
+
98
+ cy.get("#document-top-bar-component")
99
+ .find(".center-bar-components")
100
+ .find(".document-name-component")
101
+ .find(".document-name")
102
+ .type("{selectAll}")
103
+ .type("{backspace}")
104
+ .type(newName);
105
+
106
+ cy.get("#document-top-bar-component")
107
+ .find(".center-bar-components")
108
+ .find(".document-name-component")
109
+ .find(".save-btn")
110
+ .should("be.visible");
111
+
112
+ cy.get("#document-top-bar-component")
113
+ .find(".center-bar-components")
114
+ .find(".document-name-component")
115
+ .find(".save-btn")
116
+ .click();
117
+
118
+ cy.wait(1000);
119
+
120
+ cy.get("#document-top-bar-component")
121
+ .find(".center-bar-components")
122
+ .find(".document-name-component")
123
+ .find(".cloud-icon")
124
+ .should("be.visible");
125
+
126
+ cy.wait(1000);
127
+
128
+ cy.get("#document-top-bar-component")
129
+ .find(".center-bar-components")
130
+ .find(".document-name-component")
131
+ .contains(newName);
132
+ });
133
+
134
+ it("Shows tooltip when hovering over keyboard info", () => {
135
+ cy.get("#document-top-bar-component")
136
+ .find(".right-bar-components")
137
+ .find(".keyboard-actions-info")
138
+ .trigger("mouseenter");
139
+
140
+ cy.get("#document-top-bar-component")
141
+ .find(".right-bar-components")
142
+ .find(".keyboard-actions-info")
143
+ .find(".keyboard-actions-description")
144
+ .should("be.visible");
145
+
146
+ cy.get("#document-top-bar-component")
147
+ .find(".right-bar-components")
148
+ .find(".keyboard-actions-info")
149
+ .trigger("mouseleave");
150
+ });
151
+
152
+ it("Closes edit mode when clicking 'back to annotation view' button", () => {
153
+ cy.dispatchAction("edit", "enableEditMode");
154
+
155
+ cy.get("#document-top-bar-component")
156
+ .find(".right-bar-components")
157
+ .find(".edit-mode-buttons")
158
+ .should("exist");
159
+
160
+ cy.get("#document-top-bar-component")
161
+ .find(".right-bar-components")
162
+ .find(".edit-mode-buttons")
163
+ .find(".button-cancel")
164
+ .then(($button) => {
165
+ if (!$button.is(":disabled")) {
166
+ cy.wrap($button).click();
167
+
168
+ cy.wait(1000);
169
+
170
+ cy.get("#document-top-bar-component")
171
+ .find(".right-bar-components")
172
+ .find(".edit-mode-buttons")
173
+ .should("not.exist");
174
+ }
175
+ });
176
+ });
177
+
178
+ it("Shows rename and categorize section when clicking 'next' button", () => {
179
+ cy.dispatchAction("edit", "enableEditMode");
180
+
181
+ cy.get("#document-top-bar-component")
182
+ .find(".right-bar-components")
183
+ .find(".edit-mode-buttons")
184
+ .find(".button-next")
185
+ .click();
186
+
187
+ cy.wait(1000);
188
+
189
+ cy.get("#document-top-bar-component")
190
+ .find(".right-bar-components")
191
+ .find(".edit-mode-buttons")
192
+ .find(".submit-btn")
193
+ .should("be.visible");
194
+ });
195
+ });
package/src/components/DocumentTopBar/DocumentTopBar.vue CHANGED
@@ -11,6 +11,7 @@
11
11
  </div>
12
12
 
13
13
  <div
14
+ id="document-info"
14
15
  :class="[
15
16
  'center-bar-components',
16
17
  recalculatingAnnotations && 'single-component',
@@ -123,7 +124,7 @@ export default {
123
124
  "recalculatingAnnotations",
124
125
  ]),
125
126
  ...mapState("edit", ["editMode"]),
126
- ...mapState("project", ["documentsInProject"]),
127
+ ...mapState("display", ["showDocumentsNavigation"]),
127
128
  ...mapGetters("document", [
128
129
  "isDocumentReviewed",
129
130
  "isDocumentReadyToBeReviewed",
@@ -131,9 +132,13 @@ export default {
131
132
  ]),
132
133
  },
133
134
  watch: {
134
- documentsInProject(newValue) {
135
- if (newValue && this.selectedDocument) {
136
- this.getPreviousAndNextDocuments();
135
+ loading(newValue) {
136
+ if (!newValue && this.showDocumentsNavigation) {
137
+ this.$store
138
+ .dispatch("project/fetchDocumentListForNavigation")
139
+ .then((results) => {
140
+ this.getPreviousAndNextDocuments(results);
141
+ });
137
142
  }
138
143
  },
139
144
  },
@@ -157,9 +162,7 @@ export default {
157
162
  handleResize() {
158
163
  this.setComponentWidth(this.$refs.documentTopBar.offsetWidth);
159
164
  },
160
- getPreviousAndNextDocuments() {
161
- const filteredDocuments = this.documentsInProject;
162
-
165
+ getPreviousAndNextDocuments(filteredDocuments) {
163
166
  if (!filteredDocuments) return;
164
167
 
165
168
  const found = filteredDocuments.find(
package/src/components/DocumentTopBar/DocumentTopBarButtons.vue CHANGED
@@ -33,6 +33,7 @@
33
33
 
34
34
  <div
35
35
  v-if="!editMode && !isDocumentReviewed && !publicView"
36
+ id="review-btn"
36
37
  class="finish-review-button-container"
37
38
  >
38
39
  <b-tooltip
package/src/store/category.js CHANGED
@@ -3,7 +3,6 @@ import myImports from "../api";
3
3
  const HTTP = myImports.HTTP;
4
4
 
5
5
  const state = {
6
- createAvailableListOfDocuments: false,
7
6
  documentsAvailableToReview: [], // filtered by user
8
7
  categories: null,
9
8
  };
@@ -74,10 +73,13 @@ const actions = {
74
73
  let errors = 0;
75
74
  count += 1;
76
75
 
77
- return dispatch("project/fetchDocumentList", parameters).then(() => {
78
- for (let i = 0; i < rootState.project.documentsInProject.length; i++) {
76
+ return dispatch(
77
+ "project/fetchDocumentListWithParameters",
78
+ parameters
79
+ ).then((documents) => {
80
+ for (let i = 0; i < documents.length; i++) {
79
81
  const found = state.documentsAvailableToReview.find(
80
- (doc) => doc.id === rootState.project.documentsInProject[i].id
82
+ (doc) => doc.id === documents[i].id
81
83
  );
82
84
 
83
85
  if (found) {
@@ -85,19 +87,12 @@ const actions = {
85
87
  // we go to the next item
86
88
  continue;
87
89
  } else if (
88
- rootGetters["document/isDocumentReadyToBeReviewed"](
89
- rootState.project.documentsInProject[i]
90
- )
90
+ rootGetters["document/isDocumentReadyToBeReviewed"](documents)
91
91
  ) {
92
92
  // add available doc to the end of the array
93
- commit(
94
- "ADD_AVAILABLE_DOCUMENT",
95
- rootState.project.documentsInProject[i]
96
- );
93
+ commit("ADD_AVAILABLE_DOCUMENT", documents);
97
94
  } else if (
98
- rootGetters["document/documentHadErrorDuringExtraction"](
99
- rootState.project.documentsInProject[i]
100
- )
95
+ rootGetters["document/documentHadErrorDuringExtraction"](documents)
101
96
  ) {
102
97
  dispatch("document/setDocumentError", null, { root: true });
103
98
  // If error, add 1
@@ -115,10 +110,8 @@ const actions = {
115
110
  // And if the difference is due to errors or to docs not ready
116
111
  if (
117
112
  poll &&
118
- rootState.project.documentsInProject.length !==
119
- state.documentsAvailableToReview.length &&
120
- state.documentsAvailableToReview.length + errors !==
121
- rootState.project.documentsInProject.length
113
+ documents.length !== state.documentsAvailableToReview.length &&
114
+ state.documentsAvailableToReview.length + errors !== documents.length
122
115
  ) {
123
116
  if (count >= 10) return true;
124
117
 
@@ -134,9 +127,8 @@ const actions = {
134
127
 
135
128
  // Poll as long as the lengths are different
136
129
  if (
137
- rootState.project.documentsInProject.length === 0 ||
138
- rootState.project.documentsInProject.length !==
139
- state.documentsAvailableToReview.length
130
+ documents.length === 0 ||
131
+ documents.length !== state.documentsAvailableToReview.length
140
132
  ) {
141
133
  let duration;
142
134
  if (count <= 5) {