@konfuzio/document-validation-ui 0.1.48 → 0.1.49-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 (13) 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/components/App.vue +34 -0
  8. package/src/components/DocumentTopBar/DocumentTopBar.cy.js +192 -220
  9. package/src/components/DocumentTopBar/DocumentTopBar.vue +9 -7
  10. package/src/store/category.js +13 -21
  11. package/src/store/display.js +16 -0
  12. package/src/store/document.js +23 -33
  13. 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.48",
3
+ "version": "0.1.49-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/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/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,
@@ -117,6 +123,12 @@ export default {
117
123
  required: false,
118
124
  default: "",
119
125
  },
126
+ // eslint-disable-next-line vue/prop-name-casing
127
+ hide_empty_label_sets: {
128
+ type: String,
129
+ required: false,
130
+ default: "false",
131
+ },
120
132
  },
121
133
  computed: {
122
134
  ...mapState("display", ["pageError"]),
@@ -151,6 +163,13 @@ export default {
151
163
  return null;
152
164
  }
153
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
+ },
154
173
  isPublicView() {
155
174
  if (
156
175
  this.userToken ||
@@ -232,6 +251,13 @@ export default {
232
251
  return null;
233
252
  }
234
253
  },
254
+ hideEmptyLabelSets() {
255
+ if (process.env.VUE_APP_HIDE_EMPTY_LABEL_SETS) {
256
+ return process.env.VUE_APP_HIDE_EMPTY_LABEL_SETS === "true";
257
+ } else {
258
+ return this.hide_empty_label_sets === "true";
259
+ }
260
+ },
235
261
  },
236
262
  async created() {
237
263
  // Sentry config
@@ -279,6 +305,14 @@ export default {
279
305
  // document and project config
280
306
  Promise.all([
281
307
  this.$store.dispatch("display/setDetailsUrl", this.detailsUrl),
308
+ this.$store.dispatch(
309
+ "display/hideEmptyLabelSets",
310
+ this.hideEmptyLabelSets
311
+ ),
312
+ this.$store.dispatch(
313
+ "display/showDocumentsNavigation",
314
+ this.showDocumentsNavigation
315
+ ),
282
316
  this.$store.dispatch("document/setDocId", this.documentId),
283
317
  this.$store.dispatch("document/setPublicView", this.isPublicView),
284
318
  this.$store.dispatch("document/setAnnotationId", this.annotationId),
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
@@ -123,7 +123,7 @@ export default {
123
123
  "recalculatingAnnotations",
124
124
  ]),
125
125
  ...mapState("edit", ["editMode"]),
126
- ...mapState("project", ["documentsInProject"]),
126
+ ...mapState("display", ["showDocumentsNavigation"]),
127
127
  ...mapGetters("document", [
128
128
  "isDocumentReviewed",
129
129
  "isDocumentReadyToBeReviewed",
@@ -131,9 +131,13 @@ export default {
131
131
  ]),
132
132
  },
133
133
  watch: {
134
- documentsInProject(newValue) {
135
- if (newValue && this.selectedDocument) {
136
- this.getPreviousAndNextDocuments();
134
+ loading(newValue) {
135
+ if (!newValue && this.showDocumentsNavigation) {
136
+ this.$store
137
+ .dispatch("project/fetchDocumentListForNavigation")
138
+ .then((results) => {
139
+ this.getPreviousAndNextDocuments(results);
140
+ });
137
141
  }
138
142
  },
139
143
  },
@@ -157,9 +161,7 @@ export default {
157
161
  handleResize() {
158
162
  this.setComponentWidth(this.$refs.documentTopBar.offsetWidth);
159
163
  },
160
- getPreviousAndNextDocuments() {
161
- const filteredDocuments = this.documentsInProject;
162
-
164
+ getPreviousAndNextDocuments(filteredDocuments) {
163
165
  if (!filteredDocuments) return;
164
166
 
165
167
  const found = filteredDocuments.find(
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) {
package/src/store/display.js CHANGED
@@ -27,6 +27,8 @@ const state = {
27
27
  pageChangedFromThumbnail: false,
28
28
  showAnnSetTable: null,
29
29
  showChooseLabelSetModal: null,
30
+ hideEmptyLabelSets: false,
31
+ showDocumentsNavigation: true,
30
32
  currentSearch: "",
31
33
  searchEnabled: false,
32
34
  searchResults: [],
@@ -297,6 +299,9 @@ const actions = {
297
299
  showAnnSetTable({ commit }, tableSet) {
298
300
  commit("SET_ANN_SET_TABLE", tableSet);
299
301
  },
302
+ showDocumentsNavigation({ commit }, show) {
303
+ commit("SET_SHOW_DOCUMENTS_NAVIGATION", show);
304
+ },
300
305
  showChooseLabelSetModal({ commit }, options) {
301
306
  commit("SET_SHOW_CHOOSE_LABEL_SET_MODAL", options);
302
307
  },
@@ -322,6 +327,10 @@ const actions = {
322
327
  commit("SET_SEARCH_LOADING", true);
323
328
  },
324
329
 
330
+ hideEmptyLabelSets({ commit }, value) {
331
+ commit("HIDE_EMPTY_LABEL_SETS", value);
332
+ },
333
+
325
334
  search({ commit, rootState }, query) {
326
335
  // only allow queries that are at least 3 characters long
327
336
  if (query.length >= 3) {
@@ -396,9 +405,16 @@ const mutations = {
396
405
  state.documentActionBar = actionBar;
397
406
  },
398
407
 
408
+ SET_SHOW_DOCUMENTS_NAVIGATION: (state, show) => {
409
+ state.showDocumentsNavigation = show;
410
+ },
411
+
399
412
  SET_ANN_SET_TABLE: (state, tableSet) => {
400
413
  state.showAnnSetTable = tableSet;
401
414
  },
415
+ HIDE_EMPTY_LABEL_SETS: (state, hide) => {
416
+ state.hideEmptyLabelSets = hide;
417
+ },
402
418
 
403
419
  TOGGLE_ANN_SET_TABLE: (state, tableSet) => {
404
420
  if (state.showAnnSetTable) {